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} 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.