Add e2e tests for attributes count (#9500)

* Add e2e tests for attributes count

* Add test with pricing filter and turn on debug to prevent cache

* Prevent tests from passing if test page is not loaded

* Use WP wrapper to call WC CLI

* Refactor to use more of PW methods

* Use existing active filters block post for testing

* Move prepareAttributes function to global setup

Author: roykho

tests/e2e-pw/bin/test-env-setup.sh

@@ -16,17 +16,17 @@ wp-env run tests-cli "wp site empty --yes"
 # If no attributes exist, otherwiese create them
 ###################################################################################################
 
-attributes=$(wp-env run tests-cli "wc product_attribute list --format=json --user=1")
+attributes=$(wp-env run tests-cli "wp wc product_attribute list --format=json --user=1")
 
 if [ -z "$attributes" ] || [ "$attributes" == "[]" ]; then
-    pa_color=$(wp-env run tests-cli "wc product_attribute create \
+    pa_color=$(wp-env run tests-cli "wp wc product_attribute create \
         --name=Color \
         --slug=pa_color \
         --user=1 \
         --porcelain \
     ")
 
-    pa_size=$(wp-env run tests-cli "wc product_attribute create \
+    pa_size=$(wp-env run tests-cli "wp wc product_attribute create \
         --name=Size \
         --slug=pa_size \
         --user=1 \
@@ -35,9 +35,8 @@ if [ -z "$attributes" ] || [ "$attributes" == "[]" ]; then
 fi
 
 ###################################################################################################
-# Import sample products and egenerate product lookup tables
+# Import sample products and regenerate product lookup tables
 ###################################################################################################
-
 wp-env run tests-cli "wp import wp-content/plugins/woocommerce/sample-data/sample_products.xml --authors=skip"
 wp-env run tests-cli "wp wc tool run regenerate_product_lookup_tables --user=1"
 
@@ -216,14 +215,6 @@ wp-env run tests-cli "wp post create \
 	--post_content=\"$post_content\"
 "
 
-post_content=$(cat "${script_dir}/product-category.txt" | sed 's/"/\\"/g')
-wp-env run tests-cli "wp post create \
-	--post_status=publish \
-	--post_author=1 \
-	--post_title='Products by Category block' \
-	--post_content=\"$post_content\"
-"
-
 post_content=$(cat "${script_dir}/product-categories.txt" | sed 's/"/\\"/g')
 wp-env run tests-cli "wp post create \
 	--post_status=publish \

tests/e2e-pw/global-setup.ts

@@ -5,17 +5,17 @@
 import { FullConfig, chromium, request } from '@playwright/test';
 import { RequestUtils } from '@wordpress/e2e-test-utils-playwright';
 import fs from 'fs';
+import { cli } from '@woocommerce/e2e-utils';
 
 /**
  * Internal dependencies
  */
-import { customer } from './test-data/data/data';
+import { customer, admin } from './test-data/data/data';
 
 const loginAsCustomer = async ( config: FullConfig ) => {
 	const { stateDir, baseURL, userAgent } = config.projects[ 0 ].use;
 
 	// used throughout tests for authentication
-	process.env.ADMINSTATE = `${ stateDir }adminState.json`;
 	process.env.CUSTOMERSTATE = `${ stateDir }customerState.json`;
 
 	try {
@@ -75,6 +75,52 @@ const loginAsCustomer = async ( config: FullConfig ) => {
 	await browser.close();
 };
 
+const prepareAttributes = async ( config: FullConfig ) => {
+	const { baseURL, userAgent } = config.projects[ 0 ].use;
+
+	// Specify user agent when running against an external test site to avoid getting HTTP 406 NOT ACCEPTABLE errors.
+	const contextOptions = { baseURL, userAgent };
+
+	// Create browser, browserContext, and page for customer and admin users
+	const browser = await chromium.launch();
+	const context = await browser.newContext( contextOptions );
+	const page = await context.newPage();
+
+	await page.goto( `/wp-admin` );
+	await page.fill( 'input[name="log"]', admin.username );
+	await page.fill( 'input[name="pwd"]', admin.password );
+	await page.click( 'text=Log In' );
+
+	/*
+	 * Intercept the dialog event.
+	 * This is needed because when the regenerate
+	 * button is clicked, a dialog is shown.
+	 */
+	page.on( 'dialog', async ( dialog ) => {
+		await dialog.accept();
+	} );
+
+	await page.goto( '/wp-admin/admin.php?page=wc-status&tab=tools' );
+
+	await page.click( '.regenerate_product_attributes_lookup_table input' );
+
+	await context.close();
+	await browser.close();
+
+	/*
+	 * Note that the two commands below are intentionally
+	 * duplicated as we need to run the cron task twice as
+	 * we need to process more than 1 batch of items.
+	 */
+	await cli(
+		`npm run wp-env run tests-cli wp action-scheduler run --hooks="woocommerce_run_product_attribute_lookup_regeneration_callback"`
+	);
+
+	await cli(
+		`npm run wp-env run tests-cli wp action-scheduler run --hooks="woocommerce_run_product_attribute_lookup_regeneration_callback"`
+	);
+};
+
 async function globalSetup( config: FullConfig ) {
 	const { storageState, baseURL } = config.projects[ 0 ].use;
 	const storageStatePath =
@@ -91,6 +137,7 @@ async function globalSetup( config: FullConfig ) {
 	await requestUtils.setupRest();
 	await requestContext.dispose();
 
+	await prepareAttributes( config );
 	await loginAsCustomer( config );
 }
 

tests/e2e-pw/tests/attributes-filter/filter-products-by-attributes-count.block_theme.spec.ts

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
+
+test.describe( 'Filter by Attributes Block - with All products Block', () => {
+	test( 'should show correct attrs count (color=blue|query_type_color=or)', async ( {
+		page,
+	} ) => {
+		await page.goto(
+			'/active-filters-block/?filter_color=blue&query_type_color=or'
+		);
+		await page.waitForLoadState( 'networkidle' );
+
+		// Check if the page has loaded successfully.
+		await expect( page.getByText( 'Active Filters block' ) ).toBeVisible();
+
+		const expectedValues = [ '4', '0', '2', '2', '0' ];
+
+		await expect(
+			page
+				.locator( 'ul.wc-block-attribute-filter-list' )
+				.first()
+				.locator(
+					'> li:not([class^="is-loading"]) .wc-filter-element-label-list-count > span:not([class^="screen-reader"])'
+				)
+		).toHaveText( expectedValues );
+	} );
+
+	test( 'should show correct attrs count (color=blue,gray|query_type_color=or)', async ( {
+		page,
+	} ) => {
+		await page.goto(
+			'/active-filters-block/?filter_color=blue,gray&query_type_color=or'
+		);
+		await page.waitForLoadState( 'networkidle' );
+
+		// Check if the page has loaded successfully.
+		await expect( page.getByText( 'Active Filters block' ) ).toBeVisible();
+
+		const expectedValues = [ '4', '3', '2', '2', '0' ];
+
+		await expect(
+			page
+				.locator( 'ul.wc-block-attribute-filter-list' )
+				.first()
+				.locator(
+					'> li:not([class^="is-loading"]) .wc-filter-element-label-list-count > span:not([class^="screen-reader"])'
+				)
+		).toHaveText( expectedValues );
+	} );
+
+	test( 'should show correct attrs count (color=blue|query_type_color=or|min_price=15|max_price=40)', async ( {
+		page,
+	} ) => {
+		await page.goto(
+			'/active-filters-block/?filter_color=blue&query_type_color=or&min_price=15&max_price=40'
+		);
+		await page.waitForLoadState( 'networkidle' );
+
+		// Check if the page has loaded successfully.
+		await expect( page.getByText( 'Active Filters block' ) ).toBeVisible();
+
+		const expectedValues = [ '2', '0', '1', '1', '0' ];
+
+		await expect(
+			page
+				.locator( 'ul.wc-block-attribute-filter-list' )
+				.first()
+				.locator(
+					'> li:not([class^="is-loading"]) .wc-filter-element-label-list-count > span:not([class^="screen-reader"])'
+				)
+		).toHaveText( expectedValues );
+	} );
+} );