From 78228fb4323bdec4fccf68ae5ce67e118296dc93 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Thu, 24 Nov 2022 14:42:58 +0100 Subject: [PATCH] Product Query - Add E2E tests for the Filter by Attribute block (#7405) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Product Query: Fix pagination issue * Product Query - Add support for the Filter By Price Block #6790 Product Query - Add support for the Filter By Price Block * fix query relation * fix on sale query * Product Query - Add support for the Filter By Attributes block #6790 Product Query - Add support for the Filter By Attributes block * fix bugged pagination and on-sale filter after refactor * address feedback * Product Query - Add e2e tests for the Filter By Price block * Product Query - Add e2e tests for the Filter By Attribute block * fix comment * fix comment * remove not used import * remove not used import * address feedback Co-authored-by: Albert Juhé Lluveras --- .../filter-products-by-attribute.test.ts | 122 +++++++++++++++++- 1 file changed, 119 insertions(+), 3 deletions(-) diff --git a/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts b/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts index 7a5a618e6f3..e6d45ec8999 100644 --- a/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts @@ -25,6 +25,7 @@ import { useTheme, waitForAllProductsBlockLoaded, } from '../../utils'; +import { saveOrPublish } from '../../../utils'; const block = { name: 'Filter by Attribute', @@ -42,6 +43,7 @@ const block = { firstAttributeInTheList: '.wc-block-attribute-filter-list > li:not([class^="is-loading"])', productsList: '.wc-block-grid__products > li', + queryProductsList: '.wp-block-post-template > li', classicProductsList: '.products.columns-3 > li', filter: "input[id='128gb']", submitButton: '.wc-block-components-filter-submit-button', @@ -87,7 +89,7 @@ describe( `${ block.name } Block`, () => { await page.goto( link ); } ); - it( 'should render', async () => { + it( 'should render products', async () => { await waitForAllProductsBlockLoaded(); const products = await page.$$( selectors.frontend.productsList ); @@ -142,7 +144,7 @@ describe( `${ block.name } Block`, () => { await goToShopPage(); } ); - it( 'should render', async () => { + it( 'should render products', async () => { const products = await page.$$( selectors.frontend.classicProductsList ); @@ -182,7 +184,7 @@ describe( `${ block.name } Block`, () => { ); } ); - it( 'should refresh the page only if the user click on button', async () => { + it( 'should refresh the page only if the user clicks on button', async () => { await goToTemplateEditor( { postId: productCatalogTemplateId, } ); @@ -227,4 +229,118 @@ describe( `${ block.name } Block`, () => { ); } ); } ); + + describe( 'with Product Query Block', () => { + let editorPageUrl = ''; + let frontedPageUrl = ''; + + useTheme( 'emptytheme' ); + beforeAll( async () => { + await switchUserToAdmin(); + await createNewPost( { + postType: 'post', + title: block.name, + } ); + + await insertBlock( 'Product Query' ); + await insertBlock( block.name ); + await page.waitForNetworkIdle(); + + // It seems that .click doesn't work well with radio input element. + await page.$eval( + block.selectors.editor.firstAttributeInTheList, + ( el ) => ( el as HTMLInputElement ).click() + ); + await page.click( selectors.editor.doneButton ); + await publishPost(); + + editorPageUrl = page.url(); + frontedPageUrl = await page.evaluate( () => + wp.data.select( 'core/editor' ).getPermalink() + ); + await page.goto( frontedPageUrl ); + } ); + + it( 'should render products', async () => { + const products = await page.$$( + selectors.frontend.queryProductsList + ); + + expect( products ).toHaveLength( 5 ); + } ); + + it( 'should show only products that match the filter', async () => { + const isRefreshed = jest.fn( () => void 0 ); + page.on( 'load', isRefreshed ); + + await page.waitForSelector( block.class + '.is-loading', { + hidden: true, + } ); + + expect( isRefreshed ).not.toBeCalled(); + + await page.waitForSelector( selectors.frontend.filter ); + + await Promise.all( [ + page.waitForNavigation(), + page.click( selectors.frontend.filter ), + ] ); + + const products = await page.$$( + selectors.frontend.queryProductsList + ); + + const pageURL = page.url(); + const parsedURL = new URL( pageURL ); + + expect( isRefreshed ).toBeCalledTimes( 1 ); + expect( products ).toHaveLength( 1 ); + await expect( page ).toMatch( block.foundProduct ); + expect( parsedURL.search ).toEqual( + block.urlSearchParamWhenFilterIsApplied + ); + } ); + + it( 'should refresh the page only if the user clicks on button', async () => { + await page.goto( editorPageUrl ); + await openBlockEditorSettings(); + await selectBlockByName( block.slug ); + const [ filterButtonToggle ] = await page.$x( + block.selectors.editor.filterButtonToggle + ); + await filterButtonToggle.click(); + await saveOrPublish(); + await page.goto( frontedPageUrl ); + + const isRefreshed = jest.fn( () => void 0 ); + page.on( 'load', isRefreshed ); + await page.waitForSelector( block.class + '.is-loading', { + hidden: true, + } ); + await page.waitForSelector( selectors.frontend.filter ); + await page.click( selectors.frontend.filter ); + + expect( isRefreshed ).not.toBeCalled(); + + await Promise.all( [ + page.waitForNavigation( { + waitUntil: 'networkidle0', + } ), + page.click( selectors.frontend.submitButton ), + ] ); + + const products = await page.$$( + selectors.frontend.queryProductsList + ); + const pageURL = page.url(); + const parsedURL = new URL( pageURL ); + + expect( isRefreshed ).toBeCalledTimes( 1 ); + expect( products ).toHaveLength( 1 ); + await expect( page ).toMatch( block.foundProduct ); + expect( parsedURL.search ).toEqual( + block.urlSearchParamWhenFilterIsApplied + ); + } ); + } ); } );