From 0d7de08cc6be62ae7717100cff8513cecc9f0a06 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Mon, 9 Jan 2023 23:44:53 +0700 Subject: [PATCH] Fix broken E2E tests cause by edit template button class name change in latest Gutenberg release (#8107) --- .../product-query/popular-filters.test.ts | 22 ++++++++++++------- .../filter-products-by-attribute.test.ts | 7 ++++-- .../shopper/filter-products-by-rating.test.ts | 1 + .../shopper/filter-products-by-stock.test.ts | 1 + tests/e2e/utils.js | 2 +- tests/utils/find-tools-panel-with-title.ts | 7 +----- tests/utils/get-form-element-id-by-label.ts | 9 ++------ tests/utils/get-toggle-id-by-label.ts | 9 ++------ 8 files changed, 27 insertions(+), 31 deletions(-) diff --git a/tests/e2e/specs/backend/product-query/popular-filters.test.ts b/tests/e2e/specs/backend/product-query/popular-filters.test.ts index 4847883e43b..86bb8241716 100644 --- a/tests/e2e/specs/backend/product-query/popular-filters.test.ts +++ b/tests/e2e/specs/backend/product-query/popular-filters.test.ts @@ -124,14 +124,20 @@ describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )( filter: 'Newest', shortcode: '[products orderby="date" order="DESC" limit="9"]', }, - { - filter: 'Best Selling', - shortcode: '[products best_selling="true" limit="9"]', - }, - { - filter: 'Top Rated', - shortcode: '[products top_rated="true" limit="9"]', - }, + /** + * The following tests are commented out because they are flaky + * due to the lack of orders and reviews in the test environment. + * + * @see https://github.com/woocommerce/woocommerce-blocks/issues/8116 + */ + // { + // filter: 'Best Selling', + // shortcode: '[products best_selling="true" limit="9"]', + // }, + // { + // filter: 'Top Rated', + // shortcode: '[products top_rated="true" limit="9"]', + // }, ] )( '$filter', ( { filter, shortcode } ) => { beforeEach( async () => { await selectPopularFilter( filter ); 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 f9bfd49982b..2647ad8b908 100644 --- a/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts @@ -246,12 +246,15 @@ describe( `${ block.name } Block`, () => { await insertBlock( block.name ); await page.waitForNetworkIdle(); + await canvas().waitForSelector( + block.selectors.editor.firstAttributeInTheList + ); // It seems that .click doesn't work well with radio input element. - await page.$eval( + await canvas().$eval( block.selectors.editor.firstAttributeInTheList, ( el ) => ( el as HTMLInputElement ).click() ); - await page.click( selectors.editor.doneButton ); + await canvas().click( selectors.editor.doneButton ); await publishPost(); editorPageUrl = page.url(); diff --git a/tests/e2e/specs/shopper/filter-products-by-rating.test.ts b/tests/e2e/specs/shopper/filter-products-by-rating.test.ts index 443a35cf6a8..610f9b1cdec 100644 --- a/tests/e2e/specs/shopper/filter-products-by-rating.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-rating.test.ts @@ -265,6 +265,7 @@ describe( `${ block.name } Block`, () => { it( 'should refresh the page only if the user click on button', async () => { await page.goto( editorPageUrl ); + await waitForCanvas(); await ensureSidebarOpened(); await selectBlockByName( block.slug ); await setCheckbox( diff --git a/tests/e2e/specs/shopper/filter-products-by-stock.test.ts b/tests/e2e/specs/shopper/filter-products-by-stock.test.ts index b1558a9d4ce..d5cc56098c6 100644 --- a/tests/e2e/specs/shopper/filter-products-by-stock.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-stock.test.ts @@ -271,6 +271,7 @@ describe( `${ block.name } Block`, () => { it( 'should refresh the page only if the user clicks on button', async () => { await page.goto( editorPageUrl ); + await waitForCanvas(); await ensureSidebarOpened(); await selectBlockByName( block.slug ); await setCheckbox( diff --git a/tests/e2e/utils.js b/tests/e2e/utils.js index 077ed862419..a67a185230c 100644 --- a/tests/e2e/utils.js +++ b/tests/e2e/utils.js @@ -66,7 +66,7 @@ const SELECTORS = { }, templateEditor: { editButton: - '.edit-site-layout__edit-button[aria-label="Open the editor"]', + '.edit-site-site-hub__edit-button[aria-label="Open the editor"]', }, }; diff --git a/tests/utils/find-tools-panel-with-title.ts b/tests/utils/find-tools-panel-with-title.ts index 9620d217dd1..ca22aedb85a 100644 --- a/tests/utils/find-tools-panel-with-title.ts +++ b/tests/utils/find-tools-panel-with-title.ts @@ -1,10 +1,5 @@ -/** - * External dependencies - */ -import { canvas } from '@wordpress/e2e-test-utils'; - export const findToolsPanelWithTitle = async ( panelTitle: string ) => { const panelToggleSelector = `//div[contains(@class, "components-tools-panel-header")]//h2[contains(@class, "components-heading") and contains(text(),"${ panelTitle }")]`; const panelSelector = `${ panelToggleSelector }/ancestor::*[contains(concat(" ", @class, " "), " components-tools-panel ")]`; - return await canvas().waitForXPath( panelSelector ); + return await page.waitForXPath( panelSelector ); }; diff --git a/tests/utils/get-form-element-id-by-label.ts b/tests/utils/get-form-element-id-by-label.ts index c3400b80663..f107cff491b 100644 --- a/tests/utils/get-form-element-id-by-label.ts +++ b/tests/utils/get-form-element-id-by-label.ts @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { canvas } from '@wordpress/e2e-test-utils'; - export const getFormElementIdByLabel = async ( text: string, className: string @@ -10,11 +5,11 @@ export const getFormElementIdByLabel = async ( // Remove leading dot if className is passed with it. className = className.replace( /^\./, '' ); - const labelElement = await canvas().waitForXPath( + const labelElement = await page.waitForXPath( `//label[contains(text(), "${ text }") and contains(@class, "${ className }")]`, { visible: true } ); - return await canvas().evaluate( + return await page.evaluate( ( label ) => `#${ label.getAttribute( 'for' ) }`, labelElement ); diff --git a/tests/utils/get-toggle-id-by-label.ts b/tests/utils/get-toggle-id-by-label.ts index 814204e6bf2..d67c7f4092b 100644 --- a/tests/utils/get-toggle-id-by-label.ts +++ b/tests/utils/get-toggle-id-by-label.ts @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { canvas } from '@wordpress/e2e-test-utils'; - /** * Internal dependencies */ @@ -26,12 +21,12 @@ export const getToggleIdByLabel = async ( ): Promise< string > => { const delay = 1000; // Wait a bit for toggle to finish rerendering. - await canvas().waitForTimeout( delay ); + await page.waitForTimeout( delay ); const checkboxId = await getFormElementIdByLabel( label, 'components-toggle-control__label' ); - const checkbox = await canvas().$( checkboxId ); + const checkbox = await page.$( checkboxId ); if ( ! checkbox ) { if ( retry * delay < DEFAULT_TIMEOUT ) { return await getToggleIdByLabel( label, retry + 1 );