Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add e2e tests for image transition in Product Gallery block (#43095) 

* Add e2e tests for image transition in Product Gallery block

* Create e2e tests for the Product Gallery block when it is inside the pop-up

* Add changelog

* Remove unnecessary lodash dependency import
This commit is contained in:
Alexandre Lara 2024-01-02 16:19:28 -03:00 committed by GitHub
parent f9cdce486a
commit e968c329c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 330 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

327
plugins/woocommerce-blocks/tests/e2e/tests/product-gallery/product-gallery.block_theme.side_effects.spec.ts
View File

@ -22,7 +22,7 @@ const blockData = {
},
},
slug: 'single-product',
productPage: '/product/logo-collection/',
productPage: '/product/hoodie/',
};
const test = base.extend< { pageObject: ProductGalleryPage } >( {
@ -40,7 +40,9 @@ const test = base.extend< { pageObject: ProductGalleryPage } >( {
export const getVisibleLargeImageId = async (
mainImageBlockLocator: Locator
) => {
const mainImage = mainImageBlockLocator.locator( 'img' ).first() as Locator;
const mainImage = mainImageBlockLocator.locator(
'.wc-block-woocommerce-product-gallery-large-image__image--active-image-slide'
);
const mainImageContext = ( await mainImage.getAttribute(
'data-wc-context'
@ -51,6 +53,20 @@ export const getVisibleLargeImageId = async (
return mainImageParsedContext.imageId;
};
export const getIsDialogOpen = async (
productGalleryBlock: Locator
): Promise< boolean > => {
const productGalleryBlockContext = ( await productGalleryBlock.getAttribute(
'data-wc-context'
) ) as string;
const productGalleryBlockParsedContext = JSON.parse(
productGalleryBlockContext
);
return productGalleryBlockParsedContext.isDialogOpen;
};
const waitForJavascriptFrontendFileIsLoaded = async ( page: Page ) => {
await page.waitForResponse(
( response ) =>
@ -172,6 +188,313 @@ test.describe( `${ blockData.name }`, () => {
} );
} );
test.describe( 'with previous and next buttons', () => {
test( 'should change the image when the user click on the previous or next button', async ( {
page,
editorUtils,
pageObject,
} ) => {
await pageObject.addProductGalleryBlock( { cleanContent: true } );
await editorUtils.saveTemplate();
await Promise.all( [
page.goto( blockData.productPage, {
waitUntil: 'load',
} ),
waitForJavascriptFrontendFileIsLoaded( page ),
] );
const initialVisibleLargeImageId = await getVisibleLargeImageId(
await pageObject.getMainImageBlock( {
page: 'frontend',
} )
);
const secondImageThumbnailId = await getThumbnailImageIdByNth(
1,
await pageObject.getThumbnailsBlock( {
page: 'frontend',
} )
);
expect( initialVisibleLargeImageId ).not.toBe(
secondImageThumbnailId
);
const nextButton = page
.locator(
'.wc-block-product-gallery-large-image-next-previous--button'
)
.nth( 1 );
await nextButton.click();
const nextImageId = await getVisibleLargeImageId(
await pageObject.getMainImageBlock( {
page: 'frontend',
} )
);
expect( nextImageId ).toBe( secondImageThumbnailId );
const previousButton = page
.locator(
'.wc-block-product-gallery-large-image-next-previous--button'
)
.first();
await previousButton.click();
const previousImageId = await getVisibleLargeImageId(
await pageObject.getMainImageBlock( {
page: 'frontend',
} )
);
expect( previousImageId ).toBe( initialVisibleLargeImageId );
} );
} );
test.describe( 'with pager', () => {
test( 'should change the image when the user click on a pager item', async ( {
page,
editorUtils,
pageObject,
} ) => {
await pageObject.addProductGalleryBlock( { cleanContent: true } );
await editorUtils.saveTemplate();
await Promise.all( [
page.goto( blockData.productPage, {
waitUntil: 'load',
} ),
waitForJavascriptFrontendFileIsLoaded( page ),
] );
const initialVisibleLargeImageId = await getVisibleLargeImageId(
await pageObject.getMainImageBlock( {
page: 'frontend',
} )
);
const secondImageThumbnailId = await getThumbnailImageIdByNth(
1,
await pageObject.getThumbnailsBlock( {
page: 'frontend',
} )
);
const thirdImageThumbnailId = await getThumbnailImageIdByNth(
2,
await pageObject.getThumbnailsBlock( {
page: 'frontend',
} )
);
expect( initialVisibleLargeImageId ).not.toBe(
secondImageThumbnailId
);
expect( initialVisibleLargeImageId ).not.toBe(
thirdImageThumbnailId
);
const pagerBlock = pageObject.getPagerBlock( { page: 'frontend' } );
const thirdPagerItem = ( await pagerBlock )
.locator( '.wc-block-product-gallery-pager__pager-item' )
.nth( 2 );
await thirdPagerItem.click();
let currentVisibleLargeImageId = await getVisibleLargeImageId(
await pageObject.getMainImageBlock( {
page: 'frontend',
} )
);
expect( currentVisibleLargeImageId ).toBe( thirdImageThumbnailId );
const firstPagerItem = ( await pagerBlock )
.locator( '.wc-block-product-gallery-pager__pager-item' )
.first();
await firstPagerItem.click();
currentVisibleLargeImageId = await getVisibleLargeImageId(
await pageObject.getMainImageBlock( {
page: 'frontend',
} )
);
expect( currentVisibleLargeImageId ).toBe(
initialVisibleLargeImageId
);
} );
} );
test.describe( 'within pop-up', () => {
test( 'should display the same selected image when the pop-up is opened', async ( {
page,
editorUtils,
pageObject,
} ) => {
await pageObject.addProductGalleryBlock( { cleanContent: false } );
await editorUtils.saveTemplate();
await Promise.all( [
page.goto( blockData.productPage, {
waitUntil: 'load',
} ),
waitForJavascriptFrontendFileIsLoaded( page ),
] );
const initialVisibleLargeImageId = await getVisibleLargeImageId(
await pageObject.getMainImageBlock( {
page: 'frontend',
} )
);
const secondImageThumbnailId = await getThumbnailImageIdByNth(
1,
await pageObject.getThumbnailsBlock( {
page: 'frontend',
} )
);
expect( initialVisibleLargeImageId ).not.toBe(
secondImageThumbnailId
);
const nextButton = page
.locator(
'.wc-block-product-gallery-large-image-next-previous--button'
)
.nth( 1 );
await nextButton.click();
const nextImageId = await getVisibleLargeImageId(
await pageObject.getMainImageBlock( {
page: 'frontend',
} )
);
expect( nextImageId ).toBe( secondImageThumbnailId );
const largeImageBlock = await pageObject.getMainImageBlock( {
page: 'frontend',
} );
largeImageBlock.click();
const productGalleryPopUp = page.locator(
'.wc-block-product-gallery-dialog__overlay'
);
const popUpSelectedImageId = await getVisibleLargeImageId(
productGalleryPopUp.locator(
`[data-block-name="woocommerce/product-gallery-large-image"]`
)
);
expect( popUpSelectedImageId ).toBe( nextImageId );
} );
test( 'should reset to the first thumbnail when the pop-up is closed', async ( {
page,
editorUtils,
pageObject,
} ) => {
await pageObject.addProductGalleryBlock( { cleanContent: true } );
await editorUtils.saveTemplate();
await Promise.all( [
page.goto( blockData.productPage, {
waitUntil: 'load',
} ),
waitForJavascriptFrontendFileIsLoaded( page ),
] );
const largeImageBlock = await pageObject.getMainImageBlock( {
page: 'frontend',
} );
const initialVisibleLargeImageId = await getVisibleLargeImageId(
largeImageBlock
);
const secondImageThumbnailId = await getThumbnailImageIdByNth(
1,
await pageObject.getThumbnailsBlock( {
page: 'frontend',
} )
);
expect( initialVisibleLargeImageId ).not.toBe(
secondImageThumbnailId
);
const nextButton = page
.locator(
'.wc-block-product-gallery-large-image-next-previous--button'
)
.nth( 1 );
await nextButton.click();
const imageAfterClickingNextButton = await getVisibleLargeImageId(
largeImageBlock
);
expect( imageAfterClickingNextButton ).toBe(
secondImageThumbnailId
);
largeImageBlock.click();
const productGalleryPopUp = page.locator(
'.wc-block-product-gallery-dialog__overlay'
);
const popUpInitialSelectedImageId = await getVisibleLargeImageId(
productGalleryPopUp.locator(
`[data-block-name="woocommerce/product-gallery-large-image"]`
)
);
const popUpNextButton = productGalleryPopUp
.locator(
'.wc-block-product-gallery-large-image-next-previous--button'
)
.nth( 1 );
await popUpNextButton.click();
const popUpNextImageId = await getVisibleLargeImageId(
productGalleryPopUp.locator(
`[data-block-name="woocommerce/product-gallery-large-image"]`
)
);
expect( popUpInitialSelectedImageId ).not.toBe( popUpNextImageId );
const closePopUpButton = productGalleryPopUp.locator(
'.wc-block-product-gallery-dialog__close'
);
closePopUpButton.click();
await page.waitForFunction( () => {
const isPopUpOpen = document
.querySelector(
'.wc-block-product-gallery-dialog__overlay'
)
?.checkVisibility();
return isPopUpOpen === false;
} );
const singleProductImageId = await getVisibleLargeImageId(
largeImageBlock
);
expect( singleProductImageId ).toBe( initialVisibleLargeImageId );
} );
} );
test.describe( 'full-screen when clicked option', () => {
test( 'should be enabled by default', async ( {
pageObject,

5
plugins/woocommerce/changelog/test-42192-add-e2e-tests-for-image-transition-in-product-gallery-block Normal file
View File

@ -0,0 +1,5 @@
Significance: patch
Type: dev
Comment: Add e2e tests for the Image Transitions in Product Gallery block