Commit 2863905ce74 for woocommerce
commit 2863905ce74114d395dd029c3f44b37ace20a894
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Thu Aug 6 09:41:03 2026 +0200
Add e2e tests to make sure filter blocks using the old markup render correctly (#67300)
* Add e2e tests to make sure filter blocks using the old markup render correctly
* Typo
* Add changelog
* Remove no longer necessary test
* Cleanup
* Improve tests
* Verify clear filters button works
diff --git a/plugins/woocommerce/changelog/fix-42323-old-filters-markup-e2e-tests b/plugins/woocommerce/changelog/fix-42323-old-filters-markup-e2e-tests
new file mode 100644
index 00000000000..c30ad2ddf6b
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-42323-old-filters-markup-e2e-tests
@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Add e2e tests to make sure filter blocks using the old markup render correctly
+
+
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/StockFilter.php b/plugins/woocommerce/src/Blocks/BlockTypes/StockFilter.php
index 35cc56b79fa..4a447d1a3c7 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/StockFilter.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/StockFilter.php
@@ -24,7 +24,6 @@ class StockFilter extends AbstractBlock {
parent::enqueue_data( $stock_statuses );
$this->asset_data_registry->add( 'stockStatusOptions', wc_get_product_stock_status_options() );
$this->asset_data_registry->add( 'hideOutOfStockItems', 'yes' === get_option( 'woocommerce_hide_out_of_stock_items' ) );
-
}
/**
diff --git a/plugins/woocommerce/tests/e2e/content-templates/blocks/post_legacy-filters-with-all-products.handlebars b/plugins/woocommerce/tests/e2e/content-templates/blocks/post_legacy-filters-with-all-products.handlebars
new file mode 100644
index 00000000000..7a55cc4a8f3
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e/content-templates/blocks/post_legacy-filters-with-all-products.handlebars
@@ -0,0 +1,29 @@
+<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
+<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:woocommerce/price-filter -->
+<div class="wp-block-woocommerce-price-filter is-loading" data-showinputfields="true" data-showfilterbutton="false" data-heading="Filter by price" data-heading-level="3"><span aria-hidden="true" class="wc-block-product-categories__placeholder"></span></div>
+<!-- /wp:woocommerce/price-filter -->
+
+<!-- wp:woocommerce/attribute-filter {"attributeId":1,"displayStyle":"dropdown","heading":"Filter by Color"} -->
+<div class="wp-block-woocommerce-attribute-filter is-loading" data-attribute-id="1" data-show-counts="true" data-query-type="or" data-heading="Filter by Color" data-heading-level="3" data-display-style="dropdown"><span aria-hidden="true" class="wc-block-product-attribute-filter__placeholder"></span></div>
+<!-- /wp:woocommerce/attribute-filter -->
+
+<!-- wp:woocommerce/attribute-filter {"attributeId":2,"heading":"Filter by Size"} -->
+<div class="wp-block-woocommerce-attribute-filter is-loading" data-attribute-id="2" data-show-counts="true" data-query-type="or" data-heading="Filter by Size" data-heading-level="3"><span aria-hidden="true" class="wc-block-product-attribute-filter__placeholder"></span></div>
+<!-- /wp:woocommerce/attribute-filter -->
+
+<!-- wp:woocommerce/active-filters -->
+<div class="wp-block-woocommerce-active-filters is-loading" data-display-style="list" data-heading="Active filters" data-heading-level="3"><span aria-hidden="true" class="wc-block-active-product-filters__placeholder"></span></div>
+<!-- /wp:woocommerce/active-filters -->
+
+<!-- wp:woocommerce/stock-filter -->
+<div class="wp-block-woocommerce-stock-filter is-loading" data-show-counts="true" data-heading="Filter by stock status" data-heading-level="3"><span aria-hidden="true" class="wc-block-product-stock-filter__placeholder"></span></div>
+<!-- /wp:woocommerce/stock-filter --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"66.66%"} -->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:woocommerce/all-products {"columns":3,"rows":3,"alignButtons":false,"contentVisibility":{"orderBy":true},"orderby":"date","layoutConfig":[["woocommerce/product-image"],["woocommerce/product-title"],["woocommerce/product-price"],["woocommerce/product-rating"],["woocommerce/product-button"]]} -->
+<div class="wp-block-woocommerce-all-products wc-block-all-products" data-attributes="{"alignButtons":false,"columns":3,"contentVisibility":{"orderBy":true},"isPreview":false,"layoutConfig":[["woocommerce/product-image"],["woocommerce/product-title"],["woocommerce/product-price"],["woocommerce/product-rating"],["woocommerce/product-button"]],"orderby":"date","rows":3}"></div>
+<!-- /wp:woocommerce/all-products --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
diff --git a/plugins/woocommerce/tests/e2e/tests/blocks/all-products/all-products.block_theme.spec.ts b/plugins/woocommerce/tests/e2e/tests/blocks/all-products/all-products.block_theme.spec.ts
index f056beaf0ba..67edb5b250c 100644
--- a/plugins/woocommerce/tests/e2e/tests/blocks/all-products/all-products.block_theme.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/blocks/all-products/all-products.block_theme.spec.ts
@@ -1,7 +1,12 @@
/**
* External dependencies
*/
-import { BLOCK_THEME_SLUG, expect, test } from '@woocommerce/e2e-utils';
+import {
+ BLOCK_THEME_SLUG,
+ expect,
+ PostCompiler,
+ test as base,
+} from '@woocommerce/e2e-utils';
/**
* Internal dependencies
@@ -9,31 +14,21 @@ import { BLOCK_THEME_SLUG, expect, test } from '@woocommerce/e2e-utils';
const BLOCK_NAME = 'woocommerce/all-products';
-test.describe( `${ BLOCK_NAME } Block`, () => {
- test( 'block can be inserted and it is rendered on the frontend', async ( {
- editor,
- admin,
- page,
- } ) => {
- await admin.createNewPost();
- await editor.insertBlock( { name: BLOCK_NAME } );
- await editor.publishAndVisitPost();
-
- await page.waitForResponse(
- ( response ) =>
- response.url().includes( 'wp-json/wc/store/v1/products' ) &&
- response.status() === 200
+const test = base.extend< { postCompiler: PostCompiler } >( {
+ postCompiler: async ( { requestUtils }, use ) => {
+ const post = await requestUtils.createPostFromFile(
+ 'legacy-filters-with-all-products'
);
- await expect(
- page.locator( '.wc-block-grid__product.wc-block-layout' )
- ).toHaveCount( 9 );
- } );
+ await use( post );
+ },
+} );
+test.describe( `${ BLOCK_NAME } Block`, () => {
// Check this regression: hhttps://github.com/woocommerce/woocommerce/pull/58741.
// The block has a dependency on the Mini Cart block/Checkout/Cart blocks.
// This test checks that the block can be inserted and it is rendered on the frontend without the mini cart block.
- test( 'block can be inserted and it is rendered on the frontend without the mini cart block', async ( {
+ test( 'block can be inserted and it is rendered on the frontend without the Mini-Cart block', async ( {
editor,
admin,
page,
@@ -63,4 +58,58 @@ test.describe( `${ BLOCK_NAME } Block`, () => {
page.locator( '.wc-block-grid__product.wc-block-layout' )
).toHaveCount( 9 );
} );
+
+ // Regression coverage for legacy filter markup:
+ // https://github.com/woocommerce/woocommerce-blocks/pull/9954
+ test( 'legacy filter blocks render and filter All Products', async ( {
+ page,
+ postCompiler,
+ } ) => {
+ const post = await postCompiler.compile();
+
+ const productsResponse = page.waitForResponse(
+ ( response ) =>
+ response.url().includes( 'wp-json/wc/store/v1/products' ) &&
+ response.status() === 200
+ );
+ await page.goto( post.link );
+ await productsResponse;
+
+ const products = page.locator(
+ '.wc-block-grid__product.wc-block-layout'
+ );
+
+ await expect( products ).toHaveCount( 9 );
+ await expect(
+ page.getByRole( 'textbox', {
+ name: 'Filter products by minimum price',
+ } )
+ ).toBeVisible();
+ await expect( page.getByPlaceholder( 'Select Color' ) ).toBeVisible();
+ await expect(
+ page.getByRole( 'checkbox', { name: 'Small' } )
+ ).toBeVisible();
+
+ const outOfStockCheckbox = page.getByRole( 'checkbox', {
+ name: 'Out of Stock',
+ } );
+ await expect( outOfStockCheckbox ).toBeVisible();
+ await outOfStockCheckbox.click();
+
+ await expect( page ).toHaveURL( /filter_stock_status=outofstock/ );
+ await expect( products ).toHaveCount( 1 );
+ await expect(
+ page.getByRole( 'heading', { name: 'Active filters' } )
+ ).toBeVisible();
+ await expect( page.getByText( 'Stock Status:' ) ).toBeVisible();
+
+ const clearAllFiltersButton = page.getByRole( 'button', {
+ name: 'Clear All Filters',
+ } );
+ await expect( clearAllFiltersButton ).toBeVisible();
+ await clearAllFiltersButton.click();
+
+ await expect( page ).not.toHaveURL( /filter_stock_status/ );
+ await expect( products ).toHaveCount( 9 );
+ } );
} );