E2E tests for Product Query Block (woocommerce#7386)

assets/js/blocks/product-query/inspector-controls.tsx

@@ -37,17 +37,19 @@ export const withProductQueryControls =
 	< T extends EditorBlock< T > >( BlockEdit: ElementType ) =>
 	( props: ProductQueryBlock ) => {
 		const allowedControls = useAllowedControls( props.attributes );
-		return isWooQueryBlockVariation( props ) ? (
+
+		const availableControls = Object.entries( INSPECTOR_CONTROLS ).filter(
+			( [ key ] ) => allowedControls?.includes( key )
+		);
+		return isWooQueryBlockVariation( props ) &&
+			availableControls.length > 0 ? (
 			<>
 				<BlockEdit { ...props } />
 				<InspectorControls>
 					<PanelBody>
-						{ Object.entries( INSPECTOR_CONTROLS ).map(
-							( [ key, Control ] ) =>
-								allowedControls?.includes( key ) ? (
-									<Control { ...props } />
-								) : null
-						) }
+						{ availableControls.map( ( [ key, Control ] ) => (
+							<Control key={ key } { ...props } />
+						) ) }
 					</PanelBody>
 				</InspectorControls>
 			</>

package.json

@@ -23,7 +23,10 @@
 		"./assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/**/index.tsx",
 		"./assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts",
 		"./assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx",
-		"./assets/js/blocks/filter-wrapper/register-components.ts"
+		"./assets/js/blocks/filter-wrapper/register-components.ts",
+		"./assets/js/blocks/product-query/variations/**.tsx",
+		"./assets/js/blocks/product-query/index.tsx",
+		"./assets/js/blocks/product-query/inspector-controls.tsx"
 	],
 	"repository": {
 		"type": "git",

tests/e2e/fixtures/fixture-data.js

@@ -227,6 +227,7 @@ const Products = () => [
 		name: 'Woo Single #3 - Limited Edition',
 		type: 'simple',
 		regular_price: '100.00',
+		sale_price: '90.00',
 		virtual: true,
 		downloadable: true,
 		downloads: [

tests/e2e/specs/backend/__fixtures__/product-query.fixture.json

@@ -0,0 +1 @@
+{"title":"Product Query Block","pageContent":"<!-- wp:query {\"queryId\":0,\"query\":{\"perPage\":6,\"pages\":0,\"offset\":0,\"postType\":\"product\",\"order\":\"desc\",\"orderBy\":\"date\",\"author\":\"\",\"search\":\"\",\"exclude\":[],\"sticky\":\"\",\"inherit\":false},\"displayLayout\":{\"type\":\"flex\",\"columns\":3},\"namespace\":\"woocommerce/product-query\"} --><div class=\"wp-block-query\"><!-- wp:post-template --><!-- wp:woocommerce/product-image --><div class=\"is-loading\"></div><!-- /wp:woocommerce/product-image --><!-- wp:post-title {\"level\":3,\"fontSize\":\"large\"} /--><!-- /wp:post-template --><!-- wp:query-pagination --><!-- wp:query-pagination-previous /--><!-- wp:query-pagination-numbers /--><!-- wp:query-pagination-next /--><!-- /wp:query-pagination --><!-- wp:query-no-results --><!-- wp:paragraph --><p>No product found.</p><!-- /wp:paragraph --><!-- /wp:query-no-results --></div><!-- /wp:query -->"}

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

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import {
+	getAllBlocks,
+	switchUserToAdmin,
+	canvas,
+	openDocumentSettingsSidebar,
+	openListView,
+	setPostContent,
+	insertBlock,
+} from '@wordpress/e2e-test-utils';
+import { visitBlockPage } from '@woocommerce/blocks-test-utils';
+
+/**
+ * Internal dependencies
+ */
+import {
+	insertBlockDontWaitForInsertClose,
+	GUTENBERG_EDITOR_CONTEXT,
+	describeOrSkip,
+} from '../../utils';
+
+const block = {
+	name: 'Product Query',
+	slug: 'woocommerce/product-query',
+	class: '.wp-block-query',
+};
+
+describeOrSkip( GUTENBERG_EDITOR_CONTEXT === 'gutenberg' )(
+	`${ block.name } Block`,
+	() => {
+		beforeAll( async () => {
+			await switchUserToAdmin();
+			await visitBlockPage( `${ block.name } Block` );
+		} );
+
+		it( 'can be inserted more than once', async () => {
+			await insertBlockDontWaitForInsertClose( block.name );
+			expect( await getAllBlocks() ).toHaveLength( 2 );
+		} );
+
+		it( 'renders without crashing', async () => {
+			await expect( page ).toRenderBlock( block );
+		} );
+
+		it( 'Editor preview shows only on sale products after enabling `Show only products on sale`', async () => {
+			await visitBlockPage( `${ block.name } Block` );
+			const canvasEl = canvas();
+			await openDocumentSettingsSidebar();
+			await openListView();
+			await page.click(
+				'.block-editor-list-view-block__contents-container a.components-button'
+			);
+			const [ onSaleToggle ] = await page.$x(
+				'//label[text()="Show only products on sale"]'
+			);
+			await onSaleToggle.click();
+			await canvasEl.waitForSelector( `${ block.class } > p` );
+			await canvasEl.waitForSelector(
+				`${ block.class } > ul.wp-block-post-template`
+			);
+			const products = await canvasEl.$$(
+				`${ block.class } ul.wp-block-post-template > li.block-editor-block-preview__live-content`
+			);
+			expect( products ).toHaveLength( 1 );
+		} );
+
+		describe( 'On Sale variation', () => {
+			beforeAll( async () => {
+				await visitBlockPage( `${ block.name } Block` );
+				await setPostContent( '' );
+				await insertBlock( 'Products on Sale' );
+			} );
+
+			it( 'Show only on sale products', async () => {
+				const canvasEl = canvas();
+				await canvasEl.waitForSelector(
+					`${ block.class } > ul.wp-block-post-template`
+				);
+				const products = await canvasEl.$$(
+					`${ block.class } ul.wp-block-post-template > li.block-editor-block-preview__live-content`
+				);
+				expect( products ).toHaveLength( 1 );
+			} );
+
+			it( 'Does not have on sale toggle', async () => {
+				await openDocumentSettingsSidebar();
+				await openListView();
+				await page.click(
+					'.block-editor-list-view-block__contents-container a.components-button'
+				);
+				await expect( page ).not.toMatchElement(
+					'.block-editor-block-inspector',
+					{
+						text: 'Show only products on sale',
+					}
+				);
+			} );
+		} );
+	}
+);