Product Query: implement compatibility with Filter by Rating block (#…

…7792) * Product Query: implement compatibility with Filter by Rating block #7631 Product Query: implement compatibility with Filter by Rating block * address feedback * address feedback * add comment
woocommerce · Dec 7, 2022 · 84b2aae · 84b2aae
1 parent be1eaf6
commit 84b2aae
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 10 deletions.
diff --git a/src/BlockTypes/ProductQuery.php b/src/BlockTypes/ProductQuery.php
@@ -354,6 +354,7 @@ function( $acc, $array ) {
 			'price_filter_query_args'      => array( PriceFilter::MIN_PRICE_QUERY_VAR, PriceFilter::MAX_PRICE_QUERY_VAR ),
 			'stock_filter_query_args'      => array( StockFilter::STOCK_STATUS_QUERY_VAR ),
 			'attributes_filter_query_args' => $attributes_filter_query_args,
+			'rating_filter_query_args'     => array( RatingFilter::RATING_QUERY_VAR ),
 		);
 
 	}
@@ -423,6 +424,7 @@ private function get_queries_by_applied_filters() {
 			'price_filter'        => $this->get_filter_by_price_query(),
 			'attributes_filter'   => $this->get_filter_by_attributes_query(),
 			'stock_status_filter' => $this->get_filter_by_stock_status_query(),
+			'rating_filter'       => $this->get_filter_by_rating_query(),
 		);
 	}
 
@@ -715,5 +717,42 @@ private function get_global_query( $parsed_block ) {
 		return $query;
 	}
 
-}
+	/**
+	 * Return a query that filters products by rating.
+	 *
+	 * @return array
+	 */
+	private function get_filter_by_rating_query() {
+		$filter_rating_values = get_query_var( RatingFilter::RATING_QUERY_VAR );
+		if ( empty( $filter_rating_values ) ) {
+			return array();
+		}
+
+		$parsed_filter_rating_values = explode( ',', $filter_rating_values );
+		$product_visibility_terms    = wc_get_product_visibility_term_ids();
+
+		if ( empty( $parsed_filter_rating_values ) || empty( $product_visibility_terms ) ) {
+			return array();
+		}
 
+		$rating_terms = array_map(
+			function( $rating ) use ( $product_visibility_terms ) {
+				return $product_visibility_terms[ 'rated-' . $rating ];
+			},
+			$parsed_filter_rating_values
+		);
+
+		return array(
+			'tax_query' => array(
+				array(
+					'field'         => 'term_taxonomy_id',
+					'taxonomy'      => 'product_visibility',
+					'terms'         => $rating_terms,
+					'operator'      => 'IN',
+					'rating_filter' => true,
+				),
+			),
+		);
+	}
+
+}
diff --git a/src/BlockTypes/RatingFilter.php b/src/BlockTypes/RatingFilter.php
@@ -11,5 +11,7 @@ class RatingFilter extends AbstractBlock {
 	 *
 	 * @var string
 	 */
-	protected $block_name = 'rating-filter';
+	protected $block_name  = 'rating-filter';
+	const RATING_QUERY_VAR = 'rating_filter';
+
 }
diff --git a/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts b/tests/e2e/specs/shopper/filter-products-by-attribute.test.ts
@@ -61,7 +61,7 @@ const goToShopPage = () =>
 		waitUntil: 'networkidle0',
 	} );
 
-describe.skip( `${ block.name } Block`, () => {
+describe( `${ block.name } Block`, () => {
 	describe( 'with All Products Block', () => {
 		beforeAll( async () => {
 			await switchUserToAdmin();
@@ -111,7 +111,9 @@ describe.skip( `${ block.name } Block`, () => {
 		} );
 	} );
 
-	describe( 'with PHP classic template', () => {
+	// Re-enable this test once wordpress/e2e-test-utils is updated.
+	// https://github.com/woocommerce/woocommerce-blocks/issues/7744
+	describe.skip( 'with PHP classic template', () => {
 		const productCatalogTemplateId =
 			'woocommerce/woocommerce//archive-product';
 

diff --git a/tests/e2e/specs/shopper/filter-products-by-price.test.ts b/tests/e2e/specs/shopper/filter-products-by-price.test.ts
@@ -64,7 +64,7 @@ const setMaxPrice = async () => {
 	await page.keyboard.press( 'Tab' );
 };
 
-describe.skip( `${ block.name } Block`, () => {
+describe( `${ block.name } Block`, () => {
 	describe( 'with All Products Block', () => {
 		beforeAll( async () => {
 			await switchUserToAdmin();
@@ -114,7 +114,9 @@ describe.skip( `${ block.name } Block`, () => {
 		} );
 	} );
 
-	describe( 'with PHP classic template', () => {
+	// Re-enable this test once wordpress/e2e-test-utils is updated.
+	// https://github.com/woocommerce/woocommerce-blocks/issues/7744
+	describe.skip( 'with PHP classic template', () => {
 		const productCatalogTemplateId =
 			'woocommerce/woocommerce//archive-product';
 

diff --git a/tests/e2e/specs/shopper/filter-products-by-rating.test.ts b/tests/e2e/specs/shopper/filter-products-by-rating.test.ts
@@ -11,7 +11,10 @@ import {
 import {
 	selectBlockByName,
 	insertBlockUsingSlash,
+	saveOrPublish,
+	getToggleIdByLabel,
 } from '@woocommerce/blocks-test-utils';
+import { setCheckbox } from '@woocommerce/e2e-utils';
 
 /**
  * Internal dependencies
@@ -37,6 +40,7 @@ const block = {
 		},
 		frontend: {
 			productsList: '.wc-block-grid__products > li',
+			queryProductsList: '.wp-block-post-template > li',
 			classicProductsList: '.products.columns-3 > li',
 			fiveStarInput: ".wc-block-rating-filter label[for='5'] input",
 			submitButton: '.wc-block-components-filter-submit-button',
@@ -54,7 +58,7 @@ const goToShopPage = () =>
 		waitUntil: 'networkidle0',
 	} );
 
-describe.skip( `${ block.name } Block`, () => {
+describe( `${ block.name } Block`, () => {
 	describe( 'with All Products Block', () => {
 		let link = '';
 		beforeAll( async () => {
@@ -91,7 +95,7 @@ describe.skip( `${ block.name } Block`, () => {
 		} );
 	} );
 
-	describe( 'with PHP classic template', () => {
+	describe.skip( 'with PHP classic template', () => {
 		const productCatalogTemplateId =
 			'woocommerce/woocommerce//archive-product';
 
@@ -204,4 +208,103 @@ describe.skip( `${ block.name } Block`, () => {
 			);
 		} );
 	} );
+
+	describe( 'with Product Query Block', () => {
+		let editorPageUrl = '';
+		let frontedPageUrl = '';
+
+		useTheme( 'emptytheme' );
+		beforeAll( async () => {
+			await switchUserToAdmin();
+			await createNewPost( {
+				postType: 'post',
+				title: block.name,
+			} );
+
+			await insertBlock( 'Products (Beta)' );
+			await insertBlock( block.name );
+			await page.waitForNetworkIdle();
+			await publishPost();
+
+			editorPageUrl = page.url();
+			frontedPageUrl = await page.evaluate( () =>
+				wp.data.select( 'core/editor' ).getPermalink()
+			);
+			await page.goto( frontedPageUrl );
+		} );
+
+		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,
+			} );
+
+			expect( isRefreshed ).not.toBeCalled();
+
+			await page.waitForSelector( selectors.frontend.fiveStarInput );
+
+			await Promise.all( [
+				page.waitForNavigation(),
+				page.click( selectors.frontend.fiveStarInput ),
+			] );
+
+			const products = await page.$$(
+				selectors.frontend.queryProductsList
+			);
+			const pageURL = page.url();
+			const parsedURL = new URL( pageURL );
+
+			expect( isRefreshed ).toBeCalledTimes( 1 );
+			expect( products ).toHaveLength( FIVE_STAR_PRODUCTS_AMOUNT );
+			expect( parsedURL.search ).toEqual(
+				block.urlSearchParamWhenFilterIsApplied
+			);
+		} );
+
+		it( 'should refresh the page only if the user click on button', async () => {
+			await page.goto( editorPageUrl );
+			await openBlockEditorSettings();
+			await selectBlockByName( block.slug );
+			await setCheckbox(
+				await getToggleIdByLabel( "Show 'Apply filters' button", 1 )
+			);
+
+			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 page.waitForSelector( selectors.frontend.fiveStarInput );
+			await page.click( selectors.frontend.fiveStarInput );
+			await Promise.all( [
+				page.waitForNavigation( {
+					waitUntil: 'networkidle0',
+				} ),
+				page.click( selectors.frontend.submitButton ),
+			] );
+
+			const pageURL = page.url();
+			const parsedURL = new URL( pageURL );
+
+			await page.waitForSelector( selectors.frontend.queryProductsList );
+			const products = await page.$$(
+				selectors.frontend.queryProductsList
+			);
+
+			expect( isRefreshed ).toBeCalledTimes( 1 );
+			expect( products ).toHaveLength( FIVE_STAR_PRODUCTS_AMOUNT );
+			expect( parsedURL.search ).toEqual(
+				block.urlSearchParamWhenFilterIsApplied
+			);
+		} );
+	} );
 } );
diff --git a/tests/e2e/specs/shopper/filter-products-by-stock.test.ts b/tests/e2e/specs/shopper/filter-products-by-stock.test.ts
@@ -53,7 +53,7 @@ const goToShopPage = () =>
 		waitUntil: 'networkidle0',
 	} );
 
-describe.skip( `${ block.name } Block`, () => {
+describe( `${ block.name } Block`, () => {
 	describe( 'with All Products Block', () => {
 		let link = '';
 		beforeAll( async () => {
@@ -92,7 +92,9 @@ describe.skip( `${ block.name } Block`, () => {
 		} );
 	} );
 
-	describe( 'with PHP classic template', () => {
+	// Re-enable this test once wordpress/e2e-test-utils is updated.
+	// https://github.com/woocommerce/woocommerce-blocks/issues/7744
+	describe.skip( 'with PHP classic template', () => {
 		const productCatalogTemplateId =
 			'woocommerce/woocommerce//archive-product';