diff --git a/assets/js/blocks/product-query/inspector-controls.tsx b/assets/js/blocks/product-query/inspector-controls.tsx index 3ba006a7ad3..58f3865b5de 100644 --- a/assets/js/blocks/product-query/inspector-controls.tsx +++ b/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 ? ( <> - { Object.entries( INSPECTOR_CONTROLS ).map( - ( [ key, Control ] ) => - allowedControls?.includes( key ) ? ( - - ) : null - ) } + { availableControls.map( ( [ key, Control ] ) => ( + + ) ) } diff --git a/package.json b/package.json index c347f0bae2e..d130c692ae3 100644 --- a/package.json +++ b/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", diff --git a/tests/e2e/fixtures/fixture-data.js b/tests/e2e/fixtures/fixture-data.js index 61e713d73ec..2fb4a4145ba 100644 --- a/tests/e2e/fixtures/fixture-data.js +++ b/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: [ diff --git a/tests/e2e/specs/backend/__fixtures__/product-query.fixture.json b/tests/e2e/specs/backend/__fixtures__/product-query.fixture.json new file mode 100644 index 00000000000..b9373c83d8c --- /dev/null +++ b/tests/e2e/specs/backend/__fixtures__/product-query.fixture.json @@ -0,0 +1 @@ +{"title":"Product Query Block","pageContent":"

No product found.

"} diff --git a/tests/e2e/specs/backend/product-query.test.ts b/tests/e2e/specs/backend/product-query.test.ts new file mode 100644 index 00000000000..7dc77922b4c --- /dev/null +++ b/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', + } + ); + } ); + } ); + } +);