From 7eec919e4eae6899995c6a02d735a88d0f832315 Mon Sep 17 00:00:00 2001 From: Artemio Morales Date: Wed, 5 Jul 2023 14:16:53 -0500 Subject: [PATCH] Image block: Update lightbox animation tests (#52290) * Modify tests to ensure zoom and fade work w/ responsive images * Add style checks for the zoom animation --- ...00_e2e_test_image_responsive_lightbox.jpeg | Bin 0 -> 48585 bytes test/e2e/specs/editor/blocks/image.spec.js | 216 ++++++++++++++---- 2 files changed, 170 insertions(+), 46 deletions(-) create mode 100644 test/e2e/assets/3200x2400_e2e_test_image_responsive_lightbox.jpeg diff --git a/test/e2e/assets/3200x2400_e2e_test_image_responsive_lightbox.jpeg b/test/e2e/assets/3200x2400_e2e_test_image_responsive_lightbox.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..1d982c8dd1341173a75942a60c925245f1d5bded GIT binary patch literal 48585 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 J{eIlFe*>?;MMwYu literal 0 HcmV?d00001 diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index b392b39de407c..a2c4399fcac7a 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -781,7 +781,8 @@ test.describe( 'Image - interactivity', () => { await expect( imageBlock ).toBeVisible(); filename = await imageBlockUtils.upload( - imageBlock.locator( 'data-testid=form-file-upload-input' ) + imageBlock.locator( 'data-testid=form-file-upload-input' ), + '3200x2400_e2e_test_image_responsive_lightbox.jpeg' ); const image = imageBlock.locator( 'role=img' ); await expect( image ).toBeVisible(); @@ -828,54 +829,177 @@ test.describe( 'Image - interactivity', () => { 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.describe( 'should open and close the image in a lightbox when using a mouse and dynamically load src', () => { + test.beforeEach( async ( { 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 }` ); + test( 'zoom animation', async ( { editor, page } ) => { + await page + .getByRole( 'combobox', { name: 'Animation' } ) + .selectOption( 'zoom' ); + + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); - const lightbox = page.locator( '.wp-lightbox-overlay' ); - await expect( lightbox ).toBeHidden(); - const responsiveImage = lightbox.locator( '.responsive-image img' ); - const enlargedImage = lightbox.locator( '.enlarged-image img' ); + // getByRole() doesn't work for the image here for + // some reason, so let's use locators instead + const contentFigure = page.locator( '.entry-content figure' ); + const contentImage = page.locator( + '.entry-content figure img' + ); - await expect( responsiveImage ).toHaveAttribute( - 'src', - new RegExp( filename ) - ); - await expect( enlargedImage ).toHaveAttribute( 'src', '' ); + const wpContext = await contentFigure.getAttribute( + 'data-wp-context' + ); - await page.getByRole( 'button', { name: 'Enlarge image' } ).click(); + const imageUploadedSrc = + JSON.parse( wpContext ).core.image.imageUploadedSrc; - await expect( responsiveImage ).toHaveAttribute( - 'src', - new RegExp( filename ) - ); - await expect( enlargedImage ).toHaveAttribute( - 'src', - new RegExp( filename ) - ); + const contentImageCurrentSrc = await contentImage.evaluate( + ( img ) => img.currentSrc + ); + + const lightbox = page.locator( '.wp-lightbox-overlay' ); + await expect( lightbox ).toBeHidden(); + const responsiveImage = lightbox.locator( + '.responsive-image img' + ); + const enlargedImage = lightbox.locator( '.enlarged-image img' ); + + await expect( responsiveImage ).toHaveAttribute( + 'src', + contentImageCurrentSrc + ); + await expect( enlargedImage ).toHaveAttribute( 'src', '' ); + + await page + .getByRole( 'button', { name: 'Enlarge image' } ) + .click(); + + await expect( responsiveImage ).toHaveAttribute( + 'src', + contentImageCurrentSrc + ); + await expect( enlargedImage ).toHaveAttribute( + 'src', + imageUploadedSrc + ); - await expect( lightbox ).toBeVisible(); + await expect( lightbox ).toBeVisible(); + + const document = page.getByRole( 'document' ); + const lightboxStyleCheck = await document.evaluate( ( doc ) => { + // We don't have access to the getPropertyValue() method + // on the CSSStyleDeclaration returned form getComputedStyle() + // in the Playwright outer context, so we need to evaluate it here + // in the browser context here. + const documentStyles = window.getComputedStyle( doc ); + const lightboxStyleVars = [ + '--lightbox-scale-width', + '--lightbox-scale-height', + '--lightbox-image-max-width', + '--lightbox-image-max-height', + '--lightbox-initial-left-position', + '--lightbox-initial-top-position', + ]; + const lightboxStyleErrors = []; + lightboxStyleVars.forEach( ( styleVar ) => { + if ( ! documentStyles.getPropertyValue( styleVar ) ) { + lightboxStyleErrors.push( styleVar ); + } + } ); + + return lightboxStyleErrors.length > 0 + ? lightboxStyleErrors + : true; + } ); + expect( lightboxStyleCheck ).toBe( true ); + + const closeButton = lightbox.getByRole( 'button', { + name: 'Close', + } ); + await closeButton.click(); - const closeButton = lightbox.getByRole( 'button', { - name: 'Close', + await expect( responsiveImage ).toHaveAttribute( 'src', '' ); + await expect( enlargedImage ).toHaveAttribute( + 'src', + imageUploadedSrc + ); + + await expect( lightbox ).toBeHidden(); } ); - await closeButton.click(); - await expect( responsiveImage ).toHaveAttribute( 'src', '' ); - await expect( enlargedImage ).toHaveAttribute( - 'src', - new RegExp( filename ) - ); + test( 'fade animation', async ( { editor, page } ) => { + await page + .getByRole( 'combobox', { name: 'Animation' } ) + .selectOption( 'fade' ); + + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); + + // getByRole() doesn't work for the image here for + // some reason, so let's use locators instead + const contentFigure = page.locator( '.entry-content figure' ); + const contentImage = page.locator( + '.entry-content figure img' + ); - await expect( lightbox ).toBeHidden(); + const wpContext = await contentFigure.getAttribute( + 'data-wp-context' + ); + + const imageUploadedSrc = + JSON.parse( wpContext ).core.image.imageUploadedSrc; + + const contentImageCurrentSrc = await contentImage.evaluate( + ( img ) => img.currentSrc + ); + + const lightbox = page.locator( '.wp-lightbox-overlay' ); + await expect( lightbox ).toBeHidden(); + const responsiveImage = lightbox.locator( + '.responsive-image img' + ); + const enlargedImage = lightbox.locator( '.enlarged-image img' ); + + await expect( responsiveImage ).toHaveAttribute( + 'src', + contentImageCurrentSrc + ); + await expect( enlargedImage ).toHaveAttribute( 'src', '' ); + + await page + .getByRole( 'button', { name: 'Enlarge image' } ) + .click(); + + await expect( responsiveImage ).toHaveAttribute( + 'src', + contentImageCurrentSrc + ); + await expect( enlargedImage ).toHaveAttribute( + 'src', + imageUploadedSrc + ); + + await expect( lightbox ).toBeVisible(); + + const closeButton = lightbox.getByRole( 'button', { + name: 'Close', + } ); + await closeButton.click(); + + await expect( responsiveImage ).toHaveAttribute( 'src', '' ); + await expect( enlargedImage ).toHaveAttribute( + 'src', + imageUploadedSrc + ); + + await expect( lightbox ).toBeHidden(); + } ); } ); test( 'lightbox should be overriden when link is configured for image', async ( { @@ -1116,24 +1240,24 @@ class ImageBlockUtils { constructor( { page } ) { /** @type {Page} */ this.page = page; + this.basePath = path.join( __dirname, '..', '..', '..', 'assets' ); this.TEST_IMAGE_FILE_PATH = path.join( - __dirname, - '..', - '..', - '..', - 'assets', + this.basePath, '10x10_e2e_test_image_z9T8jK.png' ); } - async upload( inputElement ) { + async upload( inputElement, customFile = null ) { const tmpDirectory = await fs.mkdtemp( path.join( os.tmpdir(), 'gutenberg-test-image-' ) ); const filename = uuid(); const tmpFileName = path.join( tmpDirectory, filename + '.png' ); - await fs.copyFile( this.TEST_IMAGE_FILE_PATH, tmpFileName ); + const filepath = customFile + ? path.join( this.basePath, customFile ) + : this.TEST_IMAGE_FILE_PATH; + await fs.copyFile( filepath, tmpFileName ); await inputElement.setInputFiles( tmpFileName );