From 8737f4fa6ac4b2a814a13a24d0e23f36ade9e305 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 7 Jun 2023 12:34:49 -0500 Subject: [PATCH 1/6] Add missing tests for image block --- test/e2e/specs/editor/blocks/image.spec.js | 139 ++++++++++++++++++++- 1 file changed, 134 insertions(+), 5 deletions(-) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index ad07a9b3914fd7..02240ab2d5e91a 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -32,7 +32,10 @@ test.describe( 'Image', () => { await requestUtils.deleteAllMedia(); } ); - test( 'can be inserted', async ( { editor, imageBlockUtils } ) => { + test( 'can be inserted via image upload', async ( { + editor, + imageBlockUtils, + } ) => { await editor.insertBlock( { name: 'core/image' } ); const imageBlock = editor.canvas.locator( @@ -704,7 +707,7 @@ test.describe( 'Image', () => { ); } ); - test( 'should appear in the frontend published post content', async ( { + test( 'image inserted via upload should appear in the frontend published post content', async ( { editor, imageBlockUtils, page, @@ -739,10 +742,51 @@ test.describe( 'Image', () => { new RegExp( filename ) ); } ); + + test( 'image inserted via link should appear in the frontend published post content', async ( { + editor, + page, + } ) => { + await editor.insertBlock( { name: 'core/image' } ); + const imageBlock = editor.canvas.locator( + 'role=document[name="Block: Image"i]' + ); + await expect( imageBlock ).toBeVisible(); + + await imageBlock + .getByRole( 'button' ) + .filter( { hasText: 'Insert from URL' } ) + .click(); + + const form = page.locator( + '.block-editor-media-placeholder__url-input-form' + ); + + const imgUrl = + 'https://wp20.wordpress.net/wp-content/themes/twentyseventeen-wp20/images/wp20-logo-white.svg'; + + await form.getByLabel( 'URL' ).fill( imgUrl ); + await form.getByRole( 'button', { name: 'Apply' } ).click(); + + const imageInEditor = imageBlock.locator( 'role=img' ); + await expect( imageInEditor ).toBeVisible(); + await expect( imageInEditor ).toHaveAttribute( 'src', imgUrl ); + + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); + + const figureDom = page.getByRole( 'figure' ); + await expect( figureDom ).toBeVisible(); + + const imageDom = figureDom.locator( 'img' ); + await expect( imageDom ).toBeVisible(); + await expect( imageDom ).toHaveAttribute( 'src', imgUrl ); + } ); } ); test.describe( 'Image - interactivity', () => { let filename = null; + let imageBlock = null; test.beforeAll( async ( { requestUtils } ) => { await requestUtils.deleteAllMedia(); @@ -768,7 +812,7 @@ test.describe( 'Image - interactivity', () => { await admin.createNewPost(); await editor.insertBlock( { name: 'core/image' } ); - const imageBlock = editor.canvas.locator( + imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); await expect( imageBlock ).toBeVisible(); @@ -835,7 +879,7 @@ test.describe( 'Image - interactivity', () => { expect( blocks[ 0 ].attributes.url ).toContain( filename ); } ); - test( 'should open and close the image in a lightbox using the mouse', async ( { + test( 'should open and close the image in a lightbox when using a mouse and dynamically load src', async ( { editor, page, } ) => { @@ -849,10 +893,12 @@ test.describe( 'Image - interactivity', () => { const lightbox = page.locator( '.wp-lightbox-overlay' ); await expect( lightbox ).toBeHidden(); + const image = lightbox.locator( 'img' ); + + await expect( image ).toHaveAttribute( 'src', '' ); await page.getByRole( 'button', { name: 'Enlarge image' } ).click(); - const image = lightbox.locator( 'img' ); await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) ); await expect( lightbox ).toBeVisible(); @@ -865,6 +911,89 @@ test.describe( 'Image - interactivity', () => { await expect( lightbox ).toBeHidden(); } ); + test( 'lightbox should be overriden when link is configured for image', async ( { + editor, + page, + } ) => { + await page.getByRole( 'button', { name: 'Advanced' } ).click(); + const behaviorSelect = page.getByRole( 'combobox', { + name: 'Behaviors', + } ); + await behaviorSelect.selectOption( 'lightbox' ); + + await imageBlock.click(); + await page + .getByLabel( 'Block tools' ) + .getByLabel( 'Insert link' ) + .click(); + + const form = page.locator( '.block-editor-url-popover__link-editor' ); + + const url = 'https://wordpress.org'; + + await form.getByLabel( 'URL' ).fill( url ); + + await form.getByRole( 'button', { name: 'Apply' } ).click(); + await expect( behaviorSelect ).toBeDisabled(); + + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); + + expect( await page.locator( '.wp-lightbox-overlay' ).count() ).toEqual( + 0 + ); + } ); + + test( 'lightbox should work as expected when inserting image from URL', async ( { + editor, + admin, + page, + } ) => { + await admin.createNewPost(); + await editor.insertBlock( { name: 'core/image' } ); + + const imageBlockFromUrl = editor.canvas.locator( + 'role=document[name="Block: Image"i]' + ); + await expect( imageBlockFromUrl ).toBeVisible(); + + await imageBlockFromUrl + .getByRole( 'button' ) + .filter( { hasText: 'Insert from URL' } ) + .click(); + + const form = page.locator( + '.block-editor-media-placeholder__url-input-form' + ); + + const imgUrl = + 'https://wp20.wordpress.net/wp-content/themes/twentyseventeen-wp20/images/wp20-logo-white.svg'; + + await form.getByLabel( 'URL' ).fill( imgUrl ); + + await form.getByRole( 'button', { name: 'Apply' } ).click(); + + const image = imageBlockFromUrl.locator( 'role=img' ); + await expect( image ).toBeVisible(); + await expect( image ).toHaveAttribute( 'src', imgUrl ); + + await page.getByRole( 'button', { name: 'Advanced' } ).click(); + await page + .getByRole( 'combobox', { name: 'Behaviors' } ) + .selectOption( 'lightbox' ); + + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); + + const lightbox = page.locator( '.wp-lightbox-overlay' ); + const imageDom = lightbox.locator( 'img' ); + await expect( imageDom ).toHaveAttribute( 'src', '' ); + + await page.getByRole( 'button', { name: 'Enlarge image' } ).click(); + + await expect( imageDom ).toHaveAttribute( 'src', imgUrl ); + } ); + test.describe( 'keyboard navigation', () => { let openLightboxButton; let lightbox; From 1840db3e9dd30104bc3f592c010fc348f44dbc54 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 7 Jun 2023 12:55:42 -0500 Subject: [PATCH 2/6] Add test for image link --- test/e2e/specs/editor/blocks/image.spec.js | 39 ++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index 02240ab2d5e91a..208a4029208b9a 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -782,6 +782,45 @@ test.describe( 'Image', () => { await expect( imageDom ).toBeVisible(); await expect( imageDom ).toHaveAttribute( 'src', imgUrl ); } ); + + test( 'adding a link should reflect configuration in published post content', async ( { + editor, + page, + imageBlockUtils, + } ) => { + await editor.insertBlock( { name: 'core/image' } ); + const imageBlock = editor.canvas.locator( + 'role=document[name="Block: Image"i]' + ); + await expect( imageBlock ).toBeVisible(); + + await imageBlockUtils.upload( + imageBlock.locator( 'data-testid=form-file-upload-input' ) + ); + + await page + .getByLabel( 'Block tools' ) + .getByLabel( 'Insert link' ) + .click(); + + const form = page.locator( '.block-editor-url-popover__link-editor' ); + + const url = 'https://wordpress.org'; + + await form.getByLabel( 'URL' ).fill( url ); + + await form.getByRole( 'button', { name: 'Apply' } ).click(); + + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); + + const figureDom = page.getByRole( 'figure' ); + await expect( figureDom ).toBeVisible(); + + const linkDom = figureDom.locator( 'a' ); + await expect( linkDom ).toBeVisible(); + await expect( linkDom ).toHaveAttribute( 'href', url ); + } ); } ); test.describe( 'Image - interactivity', () => { From eb79322561f3f8d1b5423efa8cb292372980169d Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Mon, 12 Jun 2023 14:20:52 -0500 Subject: [PATCH 3/6] Clean up tests -Reorganize tests to avoid unnecessary code execution -Add comments -Remove extraneous code --- test/e2e/specs/editor/blocks/image.spec.js | 353 +++++++++++---------- 1 file changed, 182 insertions(+), 171 deletions(-) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index 208a4029208b9a..d672fdfdb33571 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -758,8 +758,10 @@ test.describe( 'Image', () => { .filter( { hasText: 'Insert from URL' } ) .click(); + // This form lacks distinguishing qualities other than the + // class name, so we use page.locator() instead of page.getByRole() const form = page.locator( - '.block-editor-media-placeholder__url-input-form' + 'form.block-editor-media-placeholder__url-input-form' ); const imgUrl = @@ -803,6 +805,8 @@ test.describe( 'Image', () => { .getByLabel( 'Insert link' ) .click(); + // This form lacks distinguishing qualities other than the + // class name, so we use page.locator() instead of page.getByRole() const form = page.locator( '.block-editor-url-popover__link-editor' ); const url = 'https://wordpress.org'; @@ -824,9 +828,6 @@ test.describe( 'Image', () => { } ); test.describe( 'Image - interactivity', () => { - let filename = null; - let imageBlock = null; - test.beforeAll( async ( { requestUtils } ) => { await requestUtils.deleteAllMedia(); } ); @@ -835,7 +836,7 @@ test.describe( 'Image - interactivity', () => { await requestUtils.deleteAllMedia(); } ); - test.beforeEach( async ( { admin, page, editor, imageBlockUtils } ) => { + test.beforeEach( async ( { admin, page, editor } ) => { await admin.visitAdminPage( '/admin.php', 'page=gutenberg-experiments' @@ -850,20 +851,6 @@ test.describe( 'Image - interactivity', () => { await admin.createNewPost(); await editor.insertBlock( { name: 'core/image' } ); - - imageBlock = editor.canvas.locator( - 'role=document[name="Block: Image"i]' - ); - await expect( imageBlock ).toBeVisible(); - - filename = await imageBlockUtils.upload( - imageBlock.locator( 'data-testid=form-file-upload-input' ) - ); - const image = imageBlock.locator( 'role=img' ); - await expect( image ).toBeVisible(); - await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) ); - - await editor.openDocumentSettingsSidebar(); } ); test.afterEach( async ( { requestUtils, admin, page } ) => { @@ -883,114 +870,211 @@ test.describe( 'Image - interactivity', () => { await page.waitForLoadState(); } ); - test( 'should toggle "lightbox" in saved attributes', async ( { - editor, - page, - } ) => { - await page.getByRole( 'button', { name: 'Advanced' } ).click(); - await page - .getByRole( 'combobox', { name: 'Behaviors' } ) - .selectOption( 'lightbox' ); + test.describe( 'tests using uploaded image', () => { + let filename = null; - let blocks = await editor.getBlocks(); - expect( blocks[ 0 ].attributes ).toMatchObject( { - behaviors: { - lightbox: { - animation: 'zoom', - enabled: true, - }, - }, - linkDestination: 'none', + test.beforeEach( async ( { editor, imageBlockUtils } ) => { + const imageBlock = editor.canvas.locator( + 'role=document[name="Block: Image"i]' + ); + await expect( imageBlock ).toBeVisible(); + + filename = await imageBlockUtils.upload( + imageBlock.locator( 'data-testid=form-file-upload-input' ) + ); + const image = imageBlock.locator( 'role=img' ); + await expect( image ).toBeVisible(); + await expect( image ).toHaveAttribute( + 'src', + new RegExp( filename ) + ); + + await editor.openDocumentSettingsSidebar(); } ); - expect( blocks[ 0 ].attributes.url ).toContain( filename ); - - await page.getByLabel( 'Behaviors' ).selectOption( '' ); - blocks = await editor.getBlocks(); - expect( blocks[ 0 ].attributes ).toMatchObject( { - behaviors: { - lightbox: { - animation: '', - enabled: false, + + test( 'should toggle "lightbox" in saved attributes', async ( { + editor, + page, + } ) => { + await page.getByRole( 'button', { name: 'Advanced' } ).click(); + await page + .getByRole( 'combobox', { name: 'Behaviors' } ) + .selectOption( 'lightbox' ); + + let blocks = await editor.getBlocks(); + expect( blocks[ 0 ].attributes ).toMatchObject( { + behaviors: { + lightbox: { + animation: 'zoom', + enabled: true, + }, }, - }, - linkDestination: 'none', + linkDestination: 'none', + } ); + expect( blocks[ 0 ].attributes.url ).toContain( filename ); + + await page.getByLabel( 'Behaviors' ).selectOption( '' ); + blocks = await editor.getBlocks(); + expect( blocks[ 0 ].attributes ).toMatchObject( { + behaviors: { + lightbox: { + animation: '', + enabled: false, + }, + }, + linkDestination: 'none', + } ); + expect( blocks[ 0 ].attributes.url ).toContain( filename ); } ); - expect( blocks[ 0 ].attributes.url ).toContain( filename ); - } ); - test( 'should open and close the image in a lightbox when using a mouse and dynamically load src', async ( { - editor, - page, - } ) => { - await page.getByRole( 'button', { name: 'Advanced' } ).click(); - await page - .getByRole( 'combobox', { name: 'Behaviors' } ) - .selectOption( 'lightbox' ); + test( 'should open and close the image in a lightbox when using a mouse and dynamically load src', async ( { + editor, + page, + } ) => { + await page.getByRole( 'button', { name: 'Advanced' } ).click(); + await page + .getByRole( 'combobox', { name: 'Behaviors' } ) + .selectOption( 'lightbox' ); - const postId = await editor.publishPost(); - await page.goto( `/?p=${ postId }` ); + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); - const lightbox = page.locator( '.wp-lightbox-overlay' ); - await expect( lightbox ).toBeHidden(); - const image = lightbox.locator( 'img' ); + const lightbox = page.locator( '.wp-lightbox-overlay' ); + await expect( lightbox ).toBeHidden(); + const image = lightbox.locator( 'img' ); - await expect( image ).toHaveAttribute( 'src', '' ); + await expect( image ).toHaveAttribute( 'src', '' ); - await page.getByRole( 'button', { name: 'Enlarge image' } ).click(); + await page.getByRole( 'button', { name: 'Enlarge image' } ).click(); - await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) ); + await expect( image ).toHaveAttribute( + 'src', + new RegExp( filename ) + ); + + await expect( lightbox ).toBeVisible(); - await expect( lightbox ).toBeVisible(); + const closeButton = lightbox.getByRole( 'button', { + name: 'Close', + } ); + await closeButton.click(); - const closeButton = lightbox.getByRole( 'button', { - name: 'Close', + await expect( lightbox ).toBeHidden(); } ); - await closeButton.click(); - await expect( lightbox ).toBeHidden(); - } ); + test( 'lightbox should be overriden when link is configured for image', async ( { + editor, + page, + } ) => { + await page.getByRole( 'button', { name: 'Advanced' } ).click(); + const behaviorSelect = page.getByRole( 'combobox', { + name: 'Behaviors', + } ); + await behaviorSelect.selectOption( 'lightbox' ); - test( 'lightbox should be overriden when link is configured for image', async ( { - editor, - page, - } ) => { - await page.getByRole( 'button', { name: 'Advanced' } ).click(); - const behaviorSelect = page.getByRole( 'combobox', { - name: 'Behaviors', + //await imageBlock.click(); + await page + .getByLabel( 'Block tools' ) + .getByLabel( 'Insert link' ) + .click(); + + const form = page.locator( + '.block-editor-url-popover__link-editor' + ); + + const url = 'https://wordpress.org'; + + await form.getByLabel( 'URL' ).fill( url ); + + await form.getByRole( 'button', { name: 'Apply' } ).click(); + await expect( behaviorSelect ).toBeDisabled(); + + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); + + expect( + await page.locator( '.wp-lightbox-overlay' ).count() + ).toEqual( 0 ); } ); - await behaviorSelect.selectOption( 'lightbox' ); - await imageBlock.click(); - await page - .getByLabel( 'Block tools' ) - .getByLabel( 'Insert link' ) - .click(); + test.describe( 'keyboard navigation', () => { + let openLightboxButton; + let lightbox; + let closeButton; - const form = page.locator( '.block-editor-url-popover__link-editor' ); + test.beforeEach( async ( { page, editor } ) => { + await page.getByRole( 'button', { name: 'Advanced' } ).click(); + await page + .getByRole( 'combobox', { name: 'Behaviors' } ) + .selectOption( 'lightbox' ); - const url = 'https://wordpress.org'; + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); - await form.getByLabel( 'URL' ).fill( url ); + openLightboxButton = page.getByRole( 'button', { + name: 'Enlarge image', + } ); + lightbox = page.getByRole( 'dialog' ); + closeButton = lightbox.getByRole( 'button', { + name: 'Close', + } ); + } ); - await form.getByRole( 'button', { name: 'Apply' } ).click(); - await expect( behaviorSelect ).toBeDisabled(); + test( 'should open and focus appropriately using enter key', async ( { + page, + } ) => { + // Open and close lightbox using the close button + await openLightboxButton.focus(); + await page.keyboard.press( 'Enter' ); + await expect( lightbox ).toBeVisible(); + await expect( closeButton ).toBeFocused(); + } ); - const postId = await editor.publishPost(); - await page.goto( `/?p=${ postId }` ); + test( 'should close and focus appropriately using enter key on close button', async ( { + page, + } ) => { + // Open and close lightbox using the close button + await openLightboxButton.focus(); + await page.keyboard.press( 'Enter' ); + await expect( lightbox ).toBeVisible(); + await expect( closeButton ).toBeFocused(); + await page.keyboard.press( 'Enter' ); + await expect( lightbox ).toBeHidden(); + await expect( openLightboxButton ).toBeFocused(); + } ); - expect( await page.locator( '.wp-lightbox-overlay' ).count() ).toEqual( - 0 - ); + test( 'should close and focus appropriately using escape key', async ( { + page, + } ) => { + await openLightboxButton.focus(); + await page.keyboard.press( 'Enter' ); + await expect( lightbox ).toBeVisible(); + await expect( closeButton ).toBeFocused(); + await page.keyboard.press( 'Escape' ); + await expect( lightbox ).toBeHidden(); + await expect( openLightboxButton ).toBeFocused(); + } ); + + // TO DO: Add these tests, which will involve adding a caption + // to uploaded test images + // test( 'should trap focus appropriately when using tab', async ( { + // page, + // } ) => { + + // } ); + + // test( 'should trap focus appropriately using shift+tab', async ( { + // page, + // } ) => { + + // } ); + } ); } ); test( 'lightbox should work as expected when inserting image from URL', async ( { editor, - admin, page, } ) => { - await admin.createNewPost(); - await editor.insertBlock( { name: 'core/image' } ); - const imageBlockFromUrl = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); @@ -1032,79 +1116,6 @@ test.describe( 'Image - interactivity', () => { await expect( imageDom ).toHaveAttribute( 'src', imgUrl ); } ); - - test.describe( 'keyboard navigation', () => { - let openLightboxButton; - let lightbox; - let closeButton; - - test.beforeEach( async ( { page, editor } ) => { - await page.getByRole( 'button', { name: 'Advanced' } ).click(); - await page - .getByRole( 'combobox', { name: 'Behaviors' } ) - .selectOption( 'lightbox' ); - - const postId = await editor.publishPost(); - await page.goto( `/?p=${ postId }` ); - - openLightboxButton = page.getByRole( 'button', { - name: 'Enlarge image', - } ); - lightbox = page.getByRole( 'dialog' ); - closeButton = lightbox.getByRole( 'button', { - name: 'Close', - } ); - } ); - - test( 'should open and focus appropriately using enter key', async ( { - page, - } ) => { - // Open and close lightbox using the close button - await openLightboxButton.focus(); - await page.keyboard.press( 'Enter' ); - await expect( lightbox ).toBeVisible(); - await expect( closeButton ).toBeFocused(); - } ); - - test( 'should close and focus appropriately using enter key on close button', async ( { - page, - } ) => { - // Open and close lightbox using the close button - await openLightboxButton.focus(); - await page.keyboard.press( 'Enter' ); - await expect( lightbox ).toBeVisible(); - await expect( closeButton ).toBeFocused(); - await page.keyboard.press( 'Enter' ); - await expect( lightbox ).toBeHidden(); - await expect( openLightboxButton ).toBeFocused(); - } ); - - test( 'should close and focus appropriately using escape key', async ( { - page, - } ) => { - await openLightboxButton.focus(); - await page.keyboard.press( 'Enter' ); - await expect( lightbox ).toBeVisible(); - await expect( closeButton ).toBeFocused(); - await page.keyboard.press( 'Escape' ); - await expect( lightbox ).toBeHidden(); - await expect( openLightboxButton ).toBeFocused(); - } ); - - // TO DO: Add these tests, which will involve adding a caption - // to uploaded test images - // test( 'should trap focus appropriately when using tab', async ( { - // page, - // } ) => { - - // } ); - - // test( 'should trap focus appropriately using shift+tab', async ( { - // page, - // } ) => { - - // } ); - } ); } ); class ImageBlockUtils { From 35a96b26f04e645839952d4394f8d42e45d7a8a5 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 13 Jun 2023 10:02:36 -0500 Subject: [PATCH 4/6] Remove commented code --- test/e2e/specs/editor/blocks/image.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index d672fdfdb33571..dbdffb84cf6da8 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -972,7 +972,6 @@ test.describe( 'Image - interactivity', () => { } ); await behaviorSelect.selectOption( 'lightbox' ); - //await imageBlock.click(); await page .getByLabel( 'Block tools' ) .getByLabel( 'Insert link' ) From 463af5cd29529dc28a29fe0186e7f1197a650f71 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 13 Jun 2023 10:05:01 -0500 Subject: [PATCH 5/6] Add clarifying comment --- test/e2e/specs/editor/blocks/image.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index dbdffb84cf6da8..8ea026ed7aa0fa 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -991,6 +991,7 @@ test.describe( 'Image - interactivity', () => { const postId = await editor.publishPost(); await page.goto( `/?p=${ postId }` ); + // The lightbox overlay should not appear in the DOM at all expect( await page.locator( '.wp-lightbox-overlay' ).count() ).toEqual( 0 ); From dfdd60df7e0a39804a1420c77b2c2b1311f24b52 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Thu, 15 Jun 2023 13:58:26 -0500 Subject: [PATCH 6/6] Improve syntax for test --- test/e2e/specs/editor/blocks/image.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index 8ea026ed7aa0fa..3905fc12162863 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -991,10 +991,10 @@ test.describe( 'Image - interactivity', () => { const postId = await editor.publishPost(); await page.goto( `/?p=${ postId }` ); - // The lightbox overlay should not appear in the DOM at all - expect( - await page.locator( '.wp-lightbox-overlay' ).count() - ).toEqual( 0 ); + // The lightbox markup should not appear in the DOM at all + await expect( + page.getByRole( 'button', { name: 'Enlarge image' } ) + ).not.toBeInViewport(); } ); test.describe( 'keyboard navigation', () => {