Product Query - Add e2e tests for the filter by price block (#7351)

* Product Query - Add e2e tests for the Filter By Price block

* fix comment

* remove not used import

* update description

* update functions after merge

* improve check

Author: gigitux

src/BlockTypes/ProductQuery.php

@@ -327,7 +327,7 @@ private function get_filter_by_price_query() {
 		$max_price_query = empty( $max_price ) ? array() : [
 			'key'     => '_price',
 			'value'   => $max_price,
-			'compare' => '<=',
+			'compare' => '<',
 			'type'    => 'numeric',
 		];
 

tests/e2e/specs/shopper/filter-products-by-price.test.ts

@@ -24,7 +24,7 @@ import {
 	useTheme,
 	waitForAllProductsBlockLoaded,
 } from '../../utils';
-import { clickLink } from '../../../utils';
+import { clickLink, saveOrPublish } from '../../../utils';
 
 const block = {
 	name: 'Filter by Price',
@@ -38,6 +38,7 @@ const block = {
 		frontend: {
 			priceMaxAmount: '.wc-block-price-filter__amount--max',
 			productsList: '.wc-block-grid__products > li',
+			queryProductsList: '.wp-block-post-template > li',
 			classicProductsList: '.products.columns-3 > li',
 			submitButton: '.wc-block-components-filter-submit-button',
 		},
@@ -83,7 +84,7 @@ describe( `${ block.name } Block`, () => {
 			await page.goto( link );
 		} );
 
-		it( 'should render', async () => {
+		it( 'should render products', async () => {
 			await waitForAllProductsBlockLoaded();
 			const products = await page.$$( selectors.frontend.productsList );
 
@@ -139,7 +140,7 @@ describe( `${ block.name } Block`, () => {
 			await deleteAllTemplates( 'wp_template_part' );
 		} );
 
-		it( 'should render', async () => {
+		it( 'should render products', async () => {
 			const products = await page.$$(
 				selectors.frontend.classicProductsList
 			);
@@ -179,7 +180,7 @@ describe( `${ block.name } Block`, () => {
 			await expect( page ).toMatch( block.foundProduct );
 		} );
 
-		it( 'should refresh the page only if the user click on button', async () => {
+		it( 'should refresh the page only if the user clicks on button', async () => {
 			await goToTemplateEditor( {
 				postId: productCatalogTemplateId,
 			} );
@@ -201,10 +202,13 @@ describe( `${ block.name } Block`, () => {
 			await page.waitForSelector( block.class + '.is-loading', {
 				hidden: true,
 			} );
+
 			expect( isRefreshed ).not.toBeCalled();
 
 			await setMaxPrice();
 
+			expect( isRefreshed ).not.toBeCalled();
+
 			await clickLink( selectors.frontend.submitButton );
 
 			await page.waitForSelector(
@@ -226,4 +230,113 @@ describe( `${ block.name } Block`, () => {
 			);
 		} );
 	} );
+
+	describe( 'with Product Query Block', () => {
+		let editorPageUrl = '';
+		let frontedPageUrl = '';
+		beforeAll( async () => {
+			await switchUserToAdmin();
+			await createNewPost( {
+				postType: 'post',
+				title: block.name,
+			} );
+
+			await insertBlock( 'Product Query' );
+			await insertBlock( block.name );
+			await insertBlock( 'Active Product Filters' );
+			await page.waitForNetworkIdle();
+			await publishPost();
+
+			editorPageUrl = page.url();
+			frontedPageUrl = await page.evaluate( () =>
+				wp.data.select( 'core/editor' ).getPermalink()
+			);
+			await page.goto( frontedPageUrl );
+		} );
+
+		it( 'should render products', async () => {
+			const products = await page.$$(
+				selectors.frontend.queryProductsList
+			);
+
+			expect( products ).toHaveLength( 5 );
+		} );
+
+		it( 'should show only products that match the filter', async () => {
+			const isRefreshed = jest.fn( () => void 0 );
+			page.on( 'load', isRefreshed );
+
+			await page.waitForSelector( block.class + '.is-loading', {
+				hidden: true,
+			} );
+
+			await expect( page ).toMatch( block.foundProduct );
+			expect( isRefreshed ).not.toBeCalled();
+
+			await Promise.all( [ setMaxPrice(), page.waitForNavigation() ] );
+
+			await page.waitForSelector( selectors.frontend.queryProductsList );
+			const products = await page.$$(
+				selectors.frontend.queryProductsList
+			);
+
+			const pageURL = page.url();
+			const parsedURL = new URL( pageURL );
+
+			expect( isRefreshed ).toBeCalledTimes( 1 );
+			expect( products ).toHaveLength( 1 );
+
+			expect( parsedURL.search ).toEqual(
+				block.urlSearchParamWhenFilterIsApplied
+			);
+			await expect( page ).toMatch( block.foundProduct );
+		} );
+
+		it( 'should refresh the page only if the user click on button', async () => {
+			await page.goto( editorPageUrl );
+
+			await openBlockEditorSettings();
+			await selectBlockByName( block.slug );
+			await page.waitForXPath(
+				block.selectors.editor.filterButtonToggle
+			);
+			const [ filterButtonToggle ] = await page.$x(
+				block.selectors.editor.filterButtonToggle
+			);
+			await filterButtonToggle.click();
+
+			await saveOrPublish();
+			await page.goto( frontedPageUrl );
+
+			const isRefreshed = jest.fn( () => void 0 );
+			page.on( 'load', isRefreshed );
+			await page.waitForSelector( block.class + '.is-loading', {
+				hidden: true,
+			} );
+
+			expect( isRefreshed ).not.toBeCalled();
+
+			await setMaxPrice();
+
+			expect( isRefreshed ).not.toBeCalled();
+
+			await clickLink( selectors.frontend.submitButton );
+
+			await page.waitForSelector( selectors.frontend.queryProductsList );
+
+			const products = await page.$$(
+				selectors.frontend.queryProductsList
+			);
+
+			const pageURL = page.url();
+			const parsedURL = new URL( pageURL );
+
+			expect( isRefreshed ).toBeCalledTimes( 1 );
+			expect( products ).toHaveLength( 1 );
+			await expect( page ).toMatch( block.foundProduct );
+			expect( parsedURL.search ).toEqual(
+				block.urlSearchParamWhenFilterIsApplied
+			);
+		} );
+	} );
 } );

tests/e2e/specs/shopper/filter-products-by-rating.test.ts

@@ -157,7 +157,7 @@ describe( `${ block.name } Block`, () => {
 
 			await waitForCanvas();
 			await selectBlockByName( block.slug );
-			await openBlockEditorSettings( { isFSEEditor: true } );
+			await openBlockEditorSettings();
 			await page.waitForXPath(
 				block.selectors.editor.filterButtonToggle
 			);