From 93e148d921b9bbcfc865c6b07187e6b881f364ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= <rdsuarez@gmail.com>
Date: Fri, 28 Jun 2024 09:39:11 +0100
Subject: [PATCH] E2E: update how to detect when global attributes are loaded.
 (#48915)

* rename helper file name

* detect attributes loaded at data-layer level

* changelog
---
 ...rate-how-wait-for-global-attributes-loaded |  4 ++++
 ...eate-variable-product-block-editor.spec.js |  2 +-
 .../confirm-global-attributes-loaded.js       | 18 --------------
 .../wait-for-global-attributes-loaded.js      | 24 +++++++++++++++++++
 .../product-attributes-block-editor.spec.js   |  2 +-
 5 files changed, 30 insertions(+), 20 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/update-e2e-iterate-how-wait-for-global-attributes-loaded
 delete mode 100644 plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/helpers/confirm-global-attributes-loaded.js
 create mode 100644 plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/helpers/wait-for-global-attributes-loaded.js

diff --git a/plugins/woocommerce/changelog/update-e2e-iterate-how-wait-for-global-attributes-loaded b/plugins/woocommerce/changelog/update-e2e-iterate-how-wait-for-global-attributes-loaded
new file mode 100644
index 00000000000..d5704c98083
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-e2e-iterate-how-wait-for-global-attributes-loaded
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+E2E: in the new Product Editor app, update how to detect when global attributes are loaded.
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-variable-product-block-editor.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-variable-product-block-editor.spec.js
index 5599d2f8532..b4d27a4226b 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-variable-product-block-editor.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/create-variable-product-block-editor.spec.js
@@ -12,7 +12,7 @@ const attributes = require( './fixtures/attributes' );
 const tabs = require( './data/tabs' );
 const {
 	waitForGlobalAttributesLoaded,
-} = require( './helpers/confirm-global-attributes-loaded' );
+} = require( './helpers/wait-for-global-attributes-loaded' );
 
 const {
 	createVariableProduct,
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/helpers/confirm-global-attributes-loaded.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/helpers/confirm-global-attributes-loaded.js
deleted file mode 100644
index bc164a51912..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/helpers/confirm-global-attributes-loaded.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Waits for the spinner to appear and disappear,
- * indicating that attributes have been loaded.
- *
- * This function confirms that the attributes have been
- * loaded by waiting for a spinner to appear and then disappear.
- * The spinner indicates that a loading process is occurring,
- * and its disappearance indicates that the process is complete.
- *
- * @param {Object} page - The Playwright Page object.
- */
-export async function waitForGlobalAttributesLoaded( page ) {
-	const spinnerLocator = page.locator(
-		'.woocommerce-new-attribute-modal__table-row .components-spinner'
-	);
-	await spinnerLocator.waitFor( { state: 'visible' } );
-	await spinnerLocator.waitFor( { state: 'hidden' } );
-}
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/helpers/wait-for-global-attributes-loaded.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/helpers/wait-for-global-attributes-loaded.js
new file mode 100644
index 00000000000..126b2f420c2
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/helpers/wait-for-global-attributes-loaded.js
@@ -0,0 +1,24 @@
+/**
+ * Waits for the global attributes to be loaded on the page.
+ *
+ * This function waits until the `hasFinishedResolution` selector
+ * from the `wc/admin/products/attributes` store indicates that
+ * the product attributes are no longer loading.
+ *
+ * @param {Object} page - The Playwright Page object.
+ * @return {Promise<void>} A promise that resolves when the global attributes are loaded.
+ */
+export async function waitForGlobalAttributesLoaded( page ) {
+	await page.waitForFunction( () => {
+		const storeId = 'wc/admin/products/attributes';
+		const attributeSortCriteria = { order_by: 'name' };
+
+		const isLoadingAttributes = ! wp.data
+			.select( storeId )
+			.hasFinishedResolution( 'getProductAttributes', [
+				attributeSortCriteria,
+			] );
+
+		return ! isLoadingAttributes;
+	} );
+}
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-attributes-block-editor.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-attributes-block-editor.spec.js
index 2e84923709e..0c47c889ab2 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-attributes-block-editor.spec.js
+++ b/plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/product-attributes-block-editor.spec.js
@@ -7,7 +7,7 @@ const { clickOnTab } = require( '../../../../utils/simple-products' );
 const attributesData = require( './fixtures/attributes' );
 const {
 	waitForGlobalAttributesLoaded,
-} = require( './helpers/confirm-global-attributes-loaded' );
+} = require( './helpers/wait-for-global-attributes-loaded' );
 
 async function waitForAttributeList( page ) {
 	// The list child is different in case there are no results versus when there already are some attributes, so we need to wait for either one to be visible.