Product Query: implement compatibility with Filter by Rating block (https://github.com/woocommerce/woocommerce-blocks/pull/7792)
* Product Query: implement compatibility with Filter by Rating block woocommerce/woocommerce-blocks#7631 Product Query: implement compatibility with Filter by Rating block * address feedback * address feedback * add comment
This commit is contained in:
parent
47aa2ae27b
commit
9436488da4
|
@ -354,6 +354,7 @@ class ProductQuery extends AbstractBlock {
|
||||||
'price_filter_query_args' => array( PriceFilter::MIN_PRICE_QUERY_VAR, PriceFilter::MAX_PRICE_QUERY_VAR ),
|
'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 ),
|
'stock_filter_query_args' => array( StockFilter::STOCK_STATUS_QUERY_VAR ),
|
||||||
'attributes_filter_query_args' => $attributes_filter_query_args,
|
'attributes_filter_query_args' => $attributes_filter_query_args,
|
||||||
|
'rating_filter_query_args' => array( RatingFilter::RATING_QUERY_VAR ),
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -423,6 +424,7 @@ class ProductQuery extends AbstractBlock {
|
||||||
'price_filter' => $this->get_filter_by_price_query(),
|
'price_filter' => $this->get_filter_by_price_query(),
|
||||||
'attributes_filter' => $this->get_filter_by_attributes_query(),
|
'attributes_filter' => $this->get_filter_by_attributes_query(),
|
||||||
'stock_status_filter' => $this->get_filter_by_stock_status_query(),
|
'stock_status_filter' => $this->get_filter_by_stock_status_query(),
|
||||||
|
'rating_filter' => $this->get_filter_by_rating_query(),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -715,5 +717,42 @@ class ProductQuery extends AbstractBlock {
|
||||||
return $query;
|
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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
@ -11,5 +11,7 @@ class RatingFilter extends AbstractBlock {
|
||||||
*
|
*
|
||||||
* @var string
|
* @var string
|
||||||
*/
|
*/
|
||||||
protected $block_name = 'rating-filter';
|
protected $block_name = 'rating-filter';
|
||||||
|
const RATING_QUERY_VAR = 'rating_filter';
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -61,7 +61,7 @@ const goToShopPage = () =>
|
||||||
waitUntil: 'networkidle0',
|
waitUntil: 'networkidle0',
|
||||||
} );
|
} );
|
||||||
|
|
||||||
describe.skip( `${ block.name } Block`, () => {
|
describe( `${ block.name } Block`, () => {
|
||||||
describe( 'with All Products Block', () => {
|
describe( 'with All Products Block', () => {
|
||||||
beforeAll( async () => {
|
beforeAll( async () => {
|
||||||
await switchUserToAdmin();
|
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 =
|
const productCatalogTemplateId =
|
||||||
'woocommerce/woocommerce//archive-product';
|
'woocommerce/woocommerce//archive-product';
|
||||||
|
|
||||||
|
|
|
@ -64,7 +64,7 @@ const setMaxPrice = async () => {
|
||||||
await page.keyboard.press( 'Tab' );
|
await page.keyboard.press( 'Tab' );
|
||||||
};
|
};
|
||||||
|
|
||||||
describe.skip( `${ block.name } Block`, () => {
|
describe( `${ block.name } Block`, () => {
|
||||||
describe( 'with All Products Block', () => {
|
describe( 'with All Products Block', () => {
|
||||||
beforeAll( async () => {
|
beforeAll( async () => {
|
||||||
await switchUserToAdmin();
|
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 =
|
const productCatalogTemplateId =
|
||||||
'woocommerce/woocommerce//archive-product';
|
'woocommerce/woocommerce//archive-product';
|
||||||
|
|
||||||
|
|
|
@ -11,7 +11,10 @@ import {
|
||||||
import {
|
import {
|
||||||
selectBlockByName,
|
selectBlockByName,
|
||||||
insertBlockUsingSlash,
|
insertBlockUsingSlash,
|
||||||
|
saveOrPublish,
|
||||||
|
getToggleIdByLabel,
|
||||||
} from '@woocommerce/blocks-test-utils';
|
} from '@woocommerce/blocks-test-utils';
|
||||||
|
import { setCheckbox } from '@woocommerce/e2e-utils';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
|
@ -37,6 +40,7 @@ const block = {
|
||||||
},
|
},
|
||||||
frontend: {
|
frontend: {
|
||||||
productsList: '.wc-block-grid__products > li',
|
productsList: '.wc-block-grid__products > li',
|
||||||
|
queryProductsList: '.wp-block-post-template > li',
|
||||||
classicProductsList: '.products.columns-3 > li',
|
classicProductsList: '.products.columns-3 > li',
|
||||||
fiveStarInput: ".wc-block-rating-filter label[for='5'] input",
|
fiveStarInput: ".wc-block-rating-filter label[for='5'] input",
|
||||||
submitButton: '.wc-block-components-filter-submit-button',
|
submitButton: '.wc-block-components-filter-submit-button',
|
||||||
|
@ -54,7 +58,7 @@ const goToShopPage = () =>
|
||||||
waitUntil: 'networkidle0',
|
waitUntil: 'networkidle0',
|
||||||
} );
|
} );
|
||||||
|
|
||||||
describe.skip( `${ block.name } Block`, () => {
|
describe( `${ block.name } Block`, () => {
|
||||||
describe( 'with All Products Block', () => {
|
describe( 'with All Products Block', () => {
|
||||||
let link = '';
|
let link = '';
|
||||||
beforeAll( async () => {
|
beforeAll( async () => {
|
||||||
|
@ -91,7 +95,7 @@ describe.skip( `${ block.name } Block`, () => {
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
describe( 'with PHP classic template', () => {
|
describe.skip( 'with PHP classic template', () => {
|
||||||
const productCatalogTemplateId =
|
const productCatalogTemplateId =
|
||||||
'woocommerce/woocommerce//archive-product';
|
'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
|
||||||
|
);
|
||||||
|
} );
|
||||||
|
} );
|
||||||
} );
|
} );
|
||||||
|
|
|
@ -53,7 +53,7 @@ const goToShopPage = () =>
|
||||||
waitUntil: 'networkidle0',
|
waitUntil: 'networkidle0',
|
||||||
} );
|
} );
|
||||||
|
|
||||||
describe.skip( `${ block.name } Block`, () => {
|
describe( `${ block.name } Block`, () => {
|
||||||
describe( 'with All Products Block', () => {
|
describe( 'with All Products Block', () => {
|
||||||
let link = '';
|
let link = '';
|
||||||
beforeAll( async () => {
|
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 =
|
const productCatalogTemplateId =
|
||||||
'woocommerce/woocommerce//archive-product';
|
'woocommerce/woocommerce//archive-product';
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue