Skip to content

Commit

Permalink
Image block: Update lightbox animation tests (#52290)
Browse files Browse the repository at this point in the history 
* Modify tests to ensure zoom and fade work w/ responsive images

* Add style checks for the zoom animation
  • Loading branch information
@artemiomorales
artemiomorales authored Jul 5, 2023
1 parent 68fa80a commit 7eec919
Show file tree
Hide file tree
Showing 2 changed files with 170 additions and 46 deletions.
Binary file added test/e2e/assets/3200x2400_e2e_test_image_responsive_lightbox.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
216 changes: 170 additions & 46 deletions test/e2e/specs/editor/blocks/image.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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 ( {
Expand Down Expand Up @@ -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 );

Expand Down

0 comments on commit 7eec919

Please sign in to comment.