From 9b9229be35e30d73f0b6b8383c6e8c6984f56116 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Sun, 2 Apr 2023 20:58:05 +0200
Subject: [PATCH] Wait for canvas before enabling Apply Filters button

---
 .../shopper/filter-products-by-attribute.test.ts     | 11 +++++------
 .../specs/shopper/filter-products-by-price.test.ts   | 12 +++++-------
 .../specs/shopper/filter-products-by-rating.test.ts  |  3 +--
 .../specs/shopper/filter-products-by-stock.test.ts   |  3 +--
 tests/e2e/utils.js                                   |  4 +++-
 5 files changed, 15 insertions(+), 18 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 8f4c7252b0b..7bb49badd01 100644
--- a/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts
+++ b/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts
@@ -9,7 +9,6 @@ import {
 	switchUserToAdmin,
 	publishPost,
 } from '@wordpress/e2e-test-utils';
-import { selectBlockByName } from '@woocommerce/blocks-test-utils';
 
 /**
  * Internal dependencies
@@ -20,6 +19,7 @@ import {
 	saveTemplate,
 	useTheme,
 	waitForAllProductsBlockLoaded,
+	waitForCanvas,
 	insertAllProductsBlock,
 	enableApplyFiltersButton,
 } from '../../utils';
@@ -185,9 +185,8 @@ describe( `${ block.name } Block`, () => {
 				postId: productCatalogTemplateId,
 			} );
 
-			await selectBlockByName( block.slug );
-
-			await enableApplyFiltersButton();
+			await waitForCanvas();
+			await enableApplyFiltersButton( block.slug );
 
 			await saveTemplate();
 			await goToShopPage();
@@ -300,9 +299,9 @@ describe( `${ block.name } Block`, () => {
 
 		it( 'should refresh the page only if the user clicks on button', async () => {
 			await page.goto( editorPageUrl );
-			await selectBlockByName( block.slug );
 
-			await enableApplyFiltersButton();
+			await waitForCanvas();
+			await enableApplyFiltersButton( block.slug );
 
 			await saveOrPublish();
 			await page.goto( frontedPageUrl );
diff --git a/tests/e2e/specs/shopper/filter-products-by-price.test.ts b/tests/e2e/specs/shopper/filter-products-by-price.test.ts
index 3acc5813e53..f92938e0aae 100644
--- a/tests/e2e/specs/shopper/filter-products-by-price.test.ts
+++ b/tests/e2e/specs/shopper/filter-products-by-price.test.ts
@@ -8,7 +8,6 @@ import {
 	switchUserToAdmin,
 	publishPost,
 } from '@wordpress/e2e-test-utils';
-import { selectBlockByName } from '@woocommerce/blocks-test-utils';
 
 /**
  * Internal dependencies
@@ -18,9 +17,9 @@ import {
 	goToTemplateEditor,
 	saveTemplate,
 	useTheme,
+	waitForCanvas,
 	waitForAllProductsBlockLoaded,
 	insertAllProductsBlock,
-	enableApplyFiltersButton,
 } from '../../utils';
 import { clickLink, saveOrPublish } from '../../../utils';
 
@@ -179,9 +178,8 @@ describe( `${ block.name } Block`, () => {
 				postId: productCatalogTemplateId,
 			} );
 
-			await selectBlockByName( block.slug );
-
-			await enableApplyFiltersButton();
+			await waitForCanvas();
+			await enableApplyFiltersButton( block.slug );
 
 			await saveTemplate();
 			await goToShopPage();
@@ -284,8 +282,8 @@ describe( `${ block.name } Block`, () => {
 		it( 'should refresh the page only if the user click on button', async () => {
 			await page.goto( editorPageUrl );
 
-			await selectBlockByName( block.slug );
-			await enableApplyFiltersButton();
+			await waitForCanvas();
+			await enableApplyFiltersButton( block.slug );
 
 			await saveOrPublish();
 			await page.goto( frontedPageUrl );
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 e76db371d16..06558a46fbc 100644
--- a/tests/e2e/specs/shopper/filter-products-by-rating.test.ts
+++ b/tests/e2e/specs/shopper/filter-products-by-rating.test.ts
@@ -158,8 +158,7 @@ describe( `${ block.name } Block`, () => {
 			} );
 
 			await waitForCanvas();
-			await selectBlockByName( block.slug );
-			await enableApplyFiltersButton();
+			await enableApplyFiltersButton( block.slug );
 
 			await saveTemplate();
 			await goToShopPage();
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 cc7ae025707..dc0be4033ba 100644
--- a/tests/e2e/specs/shopper/filter-products-by-stock.test.ts
+++ b/tests/e2e/specs/shopper/filter-products-by-stock.test.ts
@@ -164,8 +164,7 @@ describe( `${ block.name } Block`, () => {
 			} );
 
 			await waitForCanvas();
-			await selectBlockByName( block.slug );
-			await enableApplyFiltersButton();
+			await enableApplyFiltersButton( block.slug );
 
 			await saveTemplate();
 			await goToShopPage();
diff --git a/tests/e2e/utils.js b/tests/e2e/utils.js
index ab4070e1da1..084176d1d40 100644
--- a/tests/e2e/utils.js
+++ b/tests/e2e/utils.js
@@ -18,6 +18,7 @@ import {
 } from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 import { WP_ADMIN_DASHBOARD } from '@woocommerce/e2e-utils';
+import { selectBlockByName } from '@woocommerce/blocks-test-utils';
 import fs from 'fs';
 
 /**
@@ -504,7 +505,8 @@ export const insertAllProductsBlock = async () => {
 	insertButton?.click();
 };
 
-export const enableApplyFiltersButton = async () => {
+export const enableApplyFiltersButton = async ( blockSlug ) => {
+	await selectBlockByName( blockSlug );
 	await ensureSidebarOpened();
 	await switchBlockInspectorTab( 'Settings' );