Product Query: implement compatibility with Filter by Rating block #7631

Product Query: implement compatibility with Filter by Rating block

src/BlockTypes/ProductQuery.php

@@ -350,6 +350,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 ),
 		);
 
 	}
@@ -419,6 +420,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(),
 		);
 	}
 
@@ -710,5 +712,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 );
+		$product_visibility_terms = wc_get_product_visibility_term_ids();
+
+		if ( empty( $filter_rating_values ) ) {
+			return array();
+		}
+
+		$parsed_filter_rating_values = explode( ',', $filter_rating_values );
+
+		if ( empty( $parsed_filter_rating_values ) || empty( $product_visibility_terms ) ) {
+			return array();
+		}
 
+		$rating_query = 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',
+					'terms'         => $rating_query,
+					'operator'      => 'IN',
+					'rating_filter' => true,
+				),
+			),
+		);
+	}
+
+}

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';
+
 }

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

@@ -26,6 +26,8 @@ import {
 	waitForCanvas,
 } from '../../utils';
 
+import { saveOrPublish } from '../../../utils';
+
 const block = {
 	name: 'Filter by Rating',
 	slug: 'woocommerce/rating-filter',
@@ -37,6 +39,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 +57,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 +94,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 +207,120 @@ 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( 'Product Query' );
+			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 render', async () => {
+			await expect( page ).toMatchElement( block.class );
+		} );
+
+		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,
+			} );
+
+			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 openBlockEditorSettings();
+			await page.waitForXPath(
+				block.selectors.editor.filterButtonToggle
+			);
+
+			const [ filterButtonToggle ] = await page.$x(
+				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 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
+			);
+		} );
+	} );
 } );