E2E: Product Query: Popular filters presets

tests/e2e/config/jest.config.js

@@ -36,4 +36,5 @@ module.exports = {
 		'utils',
 	],
 	transformIgnorePatterns: [ 'node_modules/(?!(woocommerce)/)' ],
+	testMatch: [ '**/?(*.)+(spec|test).[jt]s?(x)' ],
 };

tests/e2e/specs/backend/__fixtures__/products-beta.fixture.json

@@ -0,0 +1 @@
+{"title":"Products (Beta) Block","pageContent":"<!-- wp:query {\"queryId\":1,\"query\":{\"perPage\":9,\"pages\":0,\"offset\":0,\"postType\":\"product\",\"order\":\"asc\",\"orderBy\":\"title\",\"author\":\"\",\"search\":\"\",\"exclude\":[],\"sticky\":\"\",\"inherit\":false,\"__woocommerceAttributes\":[],\"__woocommerceStockStatus\":[\"instock\",\"outofstock\",\"onbackorder\"]},\"displayLayout\":{\"type\":\"flex\",\"columns\":3},\"namespace\":\"woocommerce/product-query\"} --><div class=\"wp-block-query\"><!-- wp:post-template --><!-- wp:woocommerce/product-image {\"isDescendentOfQueryLoop\":true} /--><!-- wp:post-title {\"textAlign\":\"center\",\"level\":3,\"fontSize\":\"medium\",\"__woocommerceNamespace\":\"woocommerce/product-query/product-title\"} /--><!-- wp:woocommerce/product-price {\"isDescendentOfQueryLoop\":true,\"textAlign\":\"center\",\"fontSize\":\"small\"} /--><!-- wp:woocommerce/product-button {\"isDescendentOfQueryLoop\":true,\"textAlign\":\"center\",\"fontSize\":\"small\"} /--><!-- /wp:post-template --><!-- wp:query-pagination {\"layout\":{\"type\":\"flex\",\"justifyContent\":\"center\"}} --><!-- wp:query-pagination-previous /--><!-- wp:query-pagination-numbers /--><!-- wp:query-pagination-next /--><!-- /wp:query-pagination --><!-- wp:query-no-results --><!-- wp:paragraph {\"placeholder\":\"Add text or blocks that will display when a query returns no results.\"} --><p></p><!-- /wp:paragraph --><!-- /wp:query-no-results --></div><!-- /wp:query -->"}

tests/e2e/specs/backend/product-query/advanced-filters.test.ts

@@ -0,0 +1,156 @@
+/**
+ * External dependencies
+ */
+import {
+	saveOrPublish,
+	selectBlockByName,
+	findToolsPanelWithTitle,
+	getFixtureProductsData,
+	shopper,
+	getToggleIdByLabel,
+} from '@woocommerce/blocks-test-utils';
+import { ElementHandle } from 'puppeteer';
+import { setCheckbox } from '@woocommerce/e2e-utils';
+import { ensureSidebarOpened, canvas } from '@wordpress/e2e-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import { GUTENBERG_EDITOR_CONTEXT, describeOrSkip } from '../../../utils';
+import {
+	block,
+	SELECTORS,
+	resetProductQueryBlockPage,
+	toggleAdvancedFilter,
+	getPreviewProducts,
+	getFrontEndProducts,
+	clearSelectedTokens,
+	selectToken,
+} from './common';
+
+describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
+	`${ block.name } > Advanced Filters`,
+	() => {
+		let $productFiltersPanel: ElementHandle< Node >;
+		const defaultCount = getFixtureProductsData().length;
+		const saleCount = getFixtureProductsData( 'sale_price' ).length;
+		const outOfStockCount = getFixtureProductsData( 'stock_status' ).filter(
+			( status: string ) => status === 'outofstock'
+		).length;
+
+		beforeEach( async () => {
+			/**
+			 * Reset the block page before each test to ensure the block is
+			 * inserted in a known state. This is also needed to ensure each
+			 * test can be run individually.
+			 */
+			await resetProductQueryBlockPage();
+			await ensureSidebarOpened();
+			await selectBlockByName( block.slug );
+			$productFiltersPanel = await findToolsPanelWithTitle(
+				'Advanced Filters'
+			);
+		} );
+
+		/**
+		 * Reset the content of Product Query Block page after this test suite
+		 * to avoid breaking other tests.
+		 */
+		afterAll( async () => {
+			await resetProductQueryBlockPage();
+		} );
+
+		it( 'Editor preview shows all products by default', async () => {
+			expect( await getPreviewProducts() ).toHaveLength( defaultCount );
+		} );
+
+		it( 'On the front end, blocks shows all products by default', async () => {
+			expect( await getPreviewProducts() ).toHaveLength( defaultCount );
+		} );
+
+		describe( 'Sale Status', () => {
+			it( 'Sale status is disabled by default', async () => {
+				await expect( $productFiltersPanel ).not.toMatch(
+					'Show only products on sale'
+				);
+			} );
+
+			it( 'Can add and remove Sale Status filter', async () => {
+				await toggleAdvancedFilter( 'Sale status' );
+				await expect( $productFiltersPanel ).toMatch(
+					'Show only products on sale'
+				);
+				await toggleAdvancedFilter( 'Sale status' );
+				await expect( $productFiltersPanel ).not.toMatch(
+					'Show only products on sale'
+				);
+			} );
+
+			it( 'Enable Sale Status > Editor preview shows only on sale products', async () => {
+				await toggleAdvancedFilter( 'Sale status' );
+				await setCheckbox(
+					await getToggleIdByLabel( 'Show only products on sale' )
+				);
+				expect( await getPreviewProducts() ).toHaveLength( saleCount );
+			} );
+
+			it( 'Enable Sale Status > On the front end, block shows only on sale products', async () => {
+				await toggleAdvancedFilter( 'Sale status' );
+				await setCheckbox(
+					await getToggleIdByLabel( 'Show only products on sale' )
+				);
+				await canvas().waitForSelector( SELECTORS.productsGrid );
+				await saveOrPublish();
+				await shopper.block.goToBlockPage( block.name );
+				expect( await getFrontEndProducts() ).toHaveLength( saleCount );
+			} );
+		} );
+
+		describe( 'Stock Status', () => {
+			it( 'Stock status is enabled by default', async () => {
+				await expect( $productFiltersPanel ).toMatchElement(
+					SELECTORS.formTokenField.label,
+					{ text: 'Stock status' }
+				);
+			} );
+
+			it( 'Can add and remove Stock Status filter', async () => {
+				await toggleAdvancedFilter( 'Stock status' );
+				await expect( $productFiltersPanel ).not.toMatchElement(
+					SELECTORS.formTokenField.label,
+					{ text: 'Stock status' }
+				);
+				await toggleAdvancedFilter( 'Stock status' );
+				await expect( $productFiltersPanel ).toMatchElement(
+					SELECTORS.formTokenField.label,
+					{ text: 'Stock status' }
+				);
+			} );
+
+			it( 'All statuses are enabled by default', async () => {
+				await expect( $productFiltersPanel ).toMatch( 'In stock' );
+				await expect( $productFiltersPanel ).toMatch( 'Out of stock' );
+				await expect( $productFiltersPanel ).toMatch( 'On backorder' );
+			} );
+
+			it( 'Set Stock status to Out of stock > Editor preview shows only out-of-stock products', async () => {
+				await clearSelectedTokens( $productFiltersPanel );
+				await selectToken( 'Stock status', 'Out of stock' );
+				expect( await getPreviewProducts() ).toHaveLength(
+					outOfStockCount
+				);
+			} );
+
+			it( 'Set Stock status to Out of stock > On the front end, block shows only out-of-stock products', async () => {
+				await clearSelectedTokens( $productFiltersPanel );
+				await selectToken( 'Stock status', 'Out of stock' );
+				await canvas().waitForSelector( SELECTORS.productsGrid );
+				await saveOrPublish();
+				await shopper.block.goToBlockPage( block.name );
+				expect( await getFrontEndProducts() ).toHaveLength(
+					outOfStockCount
+				);
+			} );
+		} );
+	}
+);