Merge branch 'fix/gutenberg-updated-site-editor-edit-button' of https…

…://github.com/woocommerce/woocommerce-blocks into fix/refactor-product-query-e2e-tests

tests/e2e/specs/product-query/common.ts

@@ -23,11 +23,11 @@ import {
 	findToolsPanelWithTitle,
 	getFormElementIdByLabel,
 	insertShortcodeBlock,
-	setCheckbox,
 	getToggleIdByLabel,
 } from '@woocommerce/blocks-test-utils';
 import { ElementHandle } from 'puppeteer';
 
+import { setCheckbox } from '@woocommerce/e2e-utils';
 /**
  * Internal dependencies
  */

tests/e2e/specs/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 );

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();

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(

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(

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"]',
 	},
 };
 

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 );
 };

tests/utils/get-form-element-id-by-label.ts

@@ -1,20 +1,15 @@
-/**
- * External dependencies
- */
-import { canvas } from '@wordpress/e2e-test-utils';
-
 export const getFormElementIdByLabel = async (
 	text: string,
 	className: string
 ) => {
 	// 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
 	);

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 );