E2E: update how to detect when global attributes are loaded. (#48915)

* rename helper file name

* detect attributes loaded at data-layer level

* changelog

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.

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,

plugins/woocommerce/tests/e2e-pw/tests/merchant/products/block-editor/helpers/confirm-global-attributes-loaded.js

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

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

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.