E2E: Change label of product filters from `Product filters` to `Advanced Filters` (https://github.com/woocommerce/woocommerce-blocks/pull/7726)

* E2E: Change label of product filters from `Product filters` to `Advanced
Filters` to match with the updates from woocommerce/woocommerce-blocks#7687

* rename test file and test title to advanced filters

* E2E: Fix flaky test related to `waitForAllProductsBlockLoaded` (https://github.com/woocommerce/woocommerce-blocks/pull/7727)

* explain the reason for try/catch
This commit is contained in:
Tung Du 2022-11-22 21:28:27 +07:00 committed by GitHub
parent 04c689b0ff
commit 418d33e22e
2 changed files with 20 additions and 7 deletions

View File

@ -48,7 +48,7 @@ const SELECTORS = {
) =>
`.components-tools-panel-header .components-dropdown-menu button[aria-expanded="${ expanded }"]`,
productFiltersDropdown:
'.components-dropdown-menu__menu[aria-label="Product filters options"]',
'.components-dropdown-menu__menu[aria-label="Advanced Filters options"]',
productFiltersDropdownItem: '.components-menu-item__button',
editorPreview: {
productsGrid: 'ul.wp-block-post-template',
@ -63,7 +63,7 @@ const SELECTORS = {
const toggleProductFilter = async ( filterName: string ) => {
const $productFiltersPanel = await findToolsPanelWithTitle(
'Product filters'
'Advanced Filters'
);
await expect( $productFiltersPanel ).toClick(
SELECTORS.productFiltersDropdownButton()
@ -96,7 +96,7 @@ const getFrontEndProducts = async (): Promise< ElementHandle[] > => {
};
describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
'Product Query > Products Filters',
'Product Query > Advanced Filters',
() => {
let $productFiltersPanel: ElementHandle< Node >;
beforeEach( async () => {
@ -109,7 +109,7 @@ describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
await openBlockEditorSettings();
await selectBlockByName( block.slug );
$productFiltersPanel = await findToolsPanelWithTitle(
'Product filters'
'Advanced Filters'
);
} );

View File

@ -430,9 +430,22 @@ export const openBlockEditorSettings = async () => {
* Wait for all Products Block is loaded completely: when the skeleton disappears, and the products are visible
*/
export const waitForAllProductsBlockLoaded = async () => {
await page.waitForSelector(
'.wc-block-grid__products.is-loading-products'
);
/**
* We use try with empty catch block here to avoid the race condition
* between the block loading and the test execution. After user actions,
* the products may or may not finish loading at the time we try to wait for
* the loading class.
*
* We need to wait for the loading class to be added then removed because
* only waiting for the loading class to be removed could result in a false
* positive pass.
*/
try {
await page.waitForSelector(
'.wc-block-grid__products.is-loading-products'
);
} catch ( ok ) {}
await page.waitForSelector(
'.wc-block-grid__products:not(.is-loading-products)'
);