Add e2e tests to verify disabled blocks can't be inserted into widget areas (https://github.com/woocommerce/woocommerce-blocks/pull/4910)

plugins/woocommerce-blocks/tests/e2e/specs/backend/all-products.test.js

@@ -2,10 +2,16 @@
  * External dependencies
  */
 import { getAllBlocks, switchUserToAdmin } from '@wordpress/e2e-test-utils';
-
 import { visitBlockPage } from '@woocommerce/blocks-test-utils';
+import { merchant } from '@woocommerce/e2e-utils';
 
-import { insertBlockDontWaitForInsertClose } from '../../utils.js';
+import {
+	searchForBlock,
+	insertBlockDontWaitForInsertClose,
+	openWidgetEditor,
+	closeModalIfExists,
+	openWidgetsEditorBlockInserter,
+} from '../../utils.js';
 
 const block = {
 	name: 'All Products',
@@ -14,17 +20,34 @@ const block = {
 };
 
 describe( `${ block.name } Block`, () => {
-	beforeAll( async () => {
-		await switchUserToAdmin();
-		await visitBlockPage( `${ block.name } Block` );
+	describe( 'in page editor', () => {
+		beforeAll( async () => {
+			await switchUserToAdmin();
+			await visitBlockPage( `${ block.name } Block` );
+		} );
+
+		it( 'can only be inserted once', async () => {
+			await insertBlockDontWaitForInsertClose( block.name );
+			expect( await getAllBlocks() ).toHaveLength( 1 );
+		} );
+
+		it( 'renders without crashing', async () => {
+			await expect( page ).toRenderBlock( block );
+		} );
 	} );
 
-	it( 'can only be inserted once', async () => {
-		await insertBlockDontWaitForInsertClose( block.name );
-		expect( await getAllBlocks() ).toHaveLength( 1 );
-	} );
+	describe( 'in widget editor', () => {
+		it( "can't be inserted in a widget area", async () => {
+			await merchant.login();
+			await openWidgetEditor();
+			await closeModalIfExists();
+			await openWidgetsEditorBlockInserter();
+			await searchForBlock( block.name );
+			const allProductsButton = await page.$x(
+				`//button//span[text()='${ block.name }']`
+			);
 
-	it( 'renders without crashing', async () => {
-		await expect( page ).toRenderBlock( block );
+			expect( allProductsButton ).toHaveLength( 0 );
+		} );
 	} );
 } );

plugins/woocommerce-blocks/tests/e2e/specs/backend/cart.test.js

@@ -11,10 +11,14 @@ import {
 	findLabelWithText,
 	visitBlockPage,
 } from '@woocommerce/blocks-test-utils';
+import { merchant } from '@woocommerce/e2e-utils';
 
 import {
+	searchForBlock,
 	insertBlockDontWaitForInsertClose,
-	closeInserter,
+	openWidgetEditor,
+	closeModalIfExists,
+	openWidgetsEditorBlockInserter,
 } from '../../utils.js';
 
 const block = {
@@ -29,94 +33,115 @@ if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 2 ) {
 }
 
 describe( `${ block.name } Block`, () => {
-	describe( `before compatibility notice is dismissed`, () => {
-		beforeAll( async () => {
-			// make sure CartCheckoutCompatibilityNotice will appear
-			await page.evaluate( () => {
-				localStorage.removeItem(
-					'wc-blocks_dismissed_compatibility_notices'
-				);
+	describe( 'in page editor', () => {
+		describe( `before compatibility notice is dismissed`, () => {
+			beforeAll( async () => {
+				// make sure CartCheckoutCompatibilityNotice will appear
+				await page.evaluate( () => {
+					localStorage.removeItem(
+						'wc-blocks_dismissed_compatibility_notices'
+					);
+				} );
+				await visitBlockPage( `${ block.name } Block` );
+			} );
+
+			it( 'shows compatibility notice', async () => {
+				const compatibilityNoticeTitle = await page.$x(
+					`//h1[contains(text(), 'Compatibility notice')]`
+				);
+				expect( compatibilityNoticeTitle.length ).toBe( 1 );
 			} );
-			await visitBlockPage( `${ block.name } Block` );
 		} );
 
-		it( 'shows compatibility notice', async () => {
-			const compatibilityNoticeTitle = await page.$x(
-				`//h1[contains(text(), 'Compatibility notice')]`
-			);
-			expect( compatibilityNoticeTitle.length ).toBe( 1 );
+		describe( 'after compatibility notice is dismissed', () => {
+			beforeAll( async () => {
+				await page.evaluate( () => {
+					localStorage.setItem(
+						'wc-blocks_dismissed_compatibility_notices',
+						'["cart"]'
+					);
+				} );
+				await switchUserToAdmin();
+				await visitBlockPage( `${ block.name } Block` );
+			} );
+
+			afterAll( async () => {
+				await page.evaluate( () => {
+					localStorage.removeItem(
+						'wc-blocks_dismissed_compatibility_notices'
+					);
+				} );
+			} );
+
+			it( 'can only be inserted once', async () => {
+				await insertBlockDontWaitForInsertClose( block.name );
+				expect( await getAllBlocks() ).toHaveLength( 1 );
+			} );
+
+			it( 'renders without crashing', async () => {
+				await expect( page ).toRenderBlock( block );
+			} );
+
+			it( 'shows empty cart when changing the view', async () => {
+				await page.waitForSelector( block.class ).catch( () => {
+					throw new Error(
+						`Could not find an element with class ${ block.class } - the block probably did not load correctly.`
+					);
+				} );
+				await page.click( block.class );
+				await expect( page ).toMatchElement(
+					'[hidden] .wc-block-cart__empty-cart__title'
+				);
+				await clickButton( 'Empty Cart' );
+				await expect( page ).not.toMatchElement(
+					'[hidden] .wc-block-cart__empty-cart__title'
+				);
+				// Simulate user scrolling up so the block toolbar doesn't cover
+				// the `Full Cart` button.
+				await page.evaluate( () => {
+					document
+						.querySelector( '.wc-block-view-switch-control' )
+						.scrollIntoView( {
+							block: 'center',
+							inline: 'center',
+						} );
+				} );
+				await clickButton( 'Full Cart' );
+				await expect( page ).toMatchElement(
+					'[hidden] .wc-block-cart__empty-cart__title'
+				);
+			} );
+
+			describe( 'attributes', () => {
+				beforeEach( async () => {
+					await openDocumentSettingsSidebar();
+					await page.click( block.class );
+				} );
+
+				it( 'can toggle Shipping calculator', async () => {
+					const selector = `${ block.class } .wc-block-components-totals-shipping__change-address-button`;
+					const toggleLabel = await findLabelWithText(
+						'Shipping calculator'
+					);
+					await expect( toggleLabel ).toToggleElement( selector );
+				} );
+			} );
 		} );
 	} );
 
-	describe( 'after compatibility notice is dismissed', () => {
-		beforeAll( async () => {
-			await page.evaluate( () => {
-				localStorage.setItem(
-					'wc-blocks_dismissed_compatibility_notices',
-					'["cart"]'
-				);
-			} );
-			await switchUserToAdmin();
-			await visitBlockPage( `${ block.name } Block` );
-		} );
-
-		afterAll( async () => {
-			await page.evaluate( () => {
-				localStorage.removeItem(
-					'wc-blocks_dismissed_compatibility_notices'
-				);
-			} );
-		} );
-
-		it( 'can only be inserted once', async () => {
-			await insertBlockDontWaitForInsertClose( block.name );
-			expect( await getAllBlocks() ).toHaveLength( 1 );
-		} );
-
-		it( 'renders without crashing', async () => {
-			await expect( page ).toRenderBlock( block );
-		} );
-
-		it( 'shows empty cart when changing the view', async () => {
-			await page.waitForSelector( block.class ).catch( () => {
-				throw new Error(
-					`Could not find an element with class ${ block.class } - the block probably did not load correctly.`
-				);
-			} );
-			await page.click( block.class );
-			await expect( page ).toMatchElement(
-				'[hidden] .wc-block-cart__empty-cart__title'
+	describe( 'in widget editor', () => {
+		it( "can't be inserted in a widget area", async () => {
+			await merchant.login();
+			await openWidgetEditor();
+			await closeModalIfExists();
+			await openWidgetsEditorBlockInserter();
+			await searchForBlock( block.name );
+			const cartButton = await page.$x(
+				`//button//span[text()='${ block.name }']`
 			);
-			await clickButton( 'Empty Cart' );
-			await expect( page ).not.toMatchElement(
-				'[hidden] .wc-block-cart__empty-cart__title'
-			);
-			// Simulate user scrolling up so the block toolbar doesn't cover
-			// the `Full Cart` button.
-			await page.evaluate( () => {
-				document
-					.querySelector( '.wc-block-view-switch-control' )
-					.scrollIntoView( { block: 'center', inline: 'center' } );
-			} );
-			await clickButton( 'Full Cart' );
-			await expect( page ).toMatchElement(
-				'[hidden] .wc-block-cart__empty-cart__title'
-			);
-		} );
 
-		describe( 'attributes', () => {
-			beforeEach( async () => {
-				await openDocumentSettingsSidebar();
-				await page.click( block.class );
-			} );
-
-			it( 'can toggle Shipping calculator', async () => {
-				const selector = `${ block.class } .wc-block-components-totals-shipping__change-address-button`;
-				const toggleLabel = await findLabelWithText(
-					'Shipping calculator'
-				);
-				await expect( toggleLabel ).toToggleElement( selector );
-			} );
+			// This one match is the Cart widget.
+			expect( cartButton ).toHaveLength( 1 );
 		} );
 	} );
 } );

plugins/woocommerce-blocks/tests/e2e/specs/backend/checkout.test.js

@@ -11,9 +11,14 @@ import {
 	visitBlockPage,
 	selectBlockByName,
 } from '@woocommerce/blocks-test-utils';
+import { merchant } from '@woocommerce/e2e-utils';
 
 import {
+	searchForBlock,
 	insertBlockDontWaitForInsertClose,
+	openWidgetEditor,
+	closeModalIfExists,
+	openWidgetsEditorBlockInserter,
 	closeInserter,
 } from '../../utils.js';
 
@@ -29,142 +34,163 @@ if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 2 ) {
 }
 
 describe( `${ block.name } Block`, () => {
-	describe( `before compatibility notice is dismissed`, () => {
-		beforeAll( async () => {
-			// make sure CartCheckoutCompatibilityNotice will appear
-			await page.evaluate( () => {
-				localStorage.removeItem(
-					'wc-blocks_dismissed_compatibility_notices'
-				);
+	describe( 'in page editor', () => {
+		describe( `before compatibility notice is dismissed`, () => {
+			beforeAll( async () => {
+				// make sure CartCheckoutCompatibilityNotice will appear
+				await page.evaluate( () => {
+					localStorage.removeItem(
+						'wc-blocks_dismissed_compatibility_notices'
+					);
+				} );
+				await visitBlockPage( `${ block.name } Block` );
+			} );
+
+			it( 'shows compatibility notice', async () => {
+				const compatibilityNoticeTitle = await page.$x(
+					`//h1[contains(text(), 'Compatibility notice')]`
+				);
+				expect( compatibilityNoticeTitle.length ).toBe( 1 );
 			} );
-			await visitBlockPage( `${ block.name } Block` );
 		} );
 
-		it( 'shows compatibility notice', async () => {
-			const compatibilityNoticeTitle = await page.$x(
-				`//h1[contains(text(), 'Compatibility notice')]`
-			);
-			expect( compatibilityNoticeTitle.length ).toBe( 1 );
+		describe( 'after compatibility notice is dismissed', () => {
+			beforeAll( async () => {
+				await page.evaluate( () => {
+					localStorage.setItem(
+						'wc-blocks_dismissed_compatibility_notices',
+						'["checkout"]'
+					);
+				} );
+				await switchUserToAdmin();
+				await visitBlockPage( `${ block.name } Block` );
+			} );
+			afterAll( async () => {
+				await page.evaluate( () => {
+					localStorage.removeItem(
+						'wc-blocks_dismissed_compatibility_notices'
+					);
+				} );
+			} );
+
+			it( 'can only be inserted once', async () => {
+				await insertBlockDontWaitForInsertClose( block.name );
+				await closeInserter();
+				expect( await getAllBlocks() ).toHaveLength( 1 );
+			} );
+
+			it( 'renders without crashing', async () => {
+				await expect( page ).toRenderBlock( block );
+			} );
+
+			describe( 'attributes', () => {
+				beforeEach( async () => {
+					await openDocumentSettingsSidebar();
+					await selectBlockByName( block.slug );
+				} );
+
+				it( 'can enable dark mode inputs', async () => {
+					const toggleLabel = await findLabelWithText(
+						'Dark mode inputs'
+					);
+					await toggleLabel.click();
+
+					await expect( page ).toMatchElement(
+						`.wc-block-checkout.has-dark-controls`
+					);
+
+					await toggleLabel.click();
+
+					await expect( page ).not.toMatchElement(
+						`.wc-block-checkout.has-dark-controls`
+					);
+				} );
+			} );
+
+			describe( 'shipping address block attributes', () => {
+				beforeEach( async () => {
+					await openDocumentSettingsSidebar();
+					await selectBlockByName(
+						'woocommerce/checkout-shipping-address-block'
+					);
+				} );
+
+				describe( 'Company input', () => {
+					const selector = `${ block.class } #shipping-company`;
+
+					it( 'visibility can be toggled', async () => {
+						await expect( 'Company' ).toToggleElement( selector );
+					} );
+
+					it( 'required attribute can be toggled', async () => {
+						// Company is disabled by default, so first we need to enable it.
+						const toggleLabel = await findLabelWithText(
+							'Company'
+						);
+						await toggleLabel.click();
+						await expect(
+							'Require company name?'
+						).toToggleRequiredAttrOf( selector );
+					} );
+				} );
+
+				describe( 'Apartment input', () => {
+					it( 'visibility can be toggled', async () => {
+						const selector = `${ block.class } #shipping-address_2`;
+						await expect(
+							'Apartment, suite, etc.'
+						).toToggleElement( selector );
+					} );
+				} );
+
+				describe( 'Phone input', () => {
+					const selector = `${ block.class } #shipping-phone`;
+
+					it( 'visibility can be toggled', async () => {
+						await expect( 'Phone' ).toToggleElement( selector );
+					} );
+
+					it( 'required attribute can be toggled', async () => {
+						await expect(
+							'Require phone number?'
+						).toToggleRequiredAttrOf( selector );
+					} );
+				} );
+			} );
+
+			describe( 'action block attributes', () => {
+				beforeEach( async () => {
+					await openDocumentSettingsSidebar();
+					await selectBlockByName(
+						'woocommerce/checkout-actions-block'
+					);
+				} );
+
+				describe( 'Return to cart link', () => {
+					it( 'visibility can be toggled', async () => {
+						const selector = `${ block.class } .wc-block-components-checkout-return-to-cart-button`;
+						const toggleLabel = await findLabelWithText(
+							'Show a "Return to Cart" link'
+						);
+						await expect( toggleLabel ).toToggleElement( selector );
+					} );
+				} );
+			} );
 		} );
 	} );
 
-	describe( 'after compatibility notice is dismissed', () => {
-		beforeAll( async () => {
-			await page.evaluate( () => {
-				localStorage.setItem(
-					'wc-blocks_dismissed_compatibility_notices',
-					'["checkout"]'
-				);
-			} );
-			await switchUserToAdmin();
-			await visitBlockPage( `${ block.name } Block` );
-		} );
-		afterAll( async () => {
-			await page.evaluate( () => {
-				localStorage.removeItem(
-					'wc-blocks_dismissed_compatibility_notices'
-				);
-			} );
-		} );
+	describe( 'in widget editor', () => {
+		it( "can't be inserted in a widget area", async () => {
+			await merchant.login();
+			await openWidgetEditor();
+			await closeModalIfExists();
+			await openWidgetsEditorBlockInserter();
+			await searchForBlock( block.name );
+			const checkoutButton = await page.$x(
+				`//button//span[text()='${ block.name }']`
+			);
 
-		it( 'can only be inserted once', async () => {
-			await insertBlockDontWaitForInsertClose( block.name );
-			await closeInserter();
-			expect( await getAllBlocks() ).toHaveLength( 1 );
-		} );
-
-		it( 'renders without crashing', async () => {
-			await expect( page ).toRenderBlock( block );
-		} );
-
-		describe( 'attributes', () => {
-			beforeEach( async () => {
-				await openDocumentSettingsSidebar();
-				await selectBlockByName( block.slug );
-			} );
-
-			it( 'can enable dark mode inputs', async () => {
-				const toggleLabel = await findLabelWithText(
-					'Dark mode inputs'
-				);
-				await toggleLabel.click();
-
-				await expect( page ).toMatchElement(
-					`.wc-block-checkout.has-dark-controls`
-				);
-
-				await toggleLabel.click();
-
-				await expect( page ).not.toMatchElement(
-					`.wc-block-checkout.has-dark-controls`
-				);
-			} );
-		} );
-
-		describe( 'shipping address block attributes', () => {
-			beforeEach( async () => {
-				await openDocumentSettingsSidebar();
-				await selectBlockByName(
-					'woocommerce/checkout-shipping-address-block'
-				);
-			} );
-
-			describe( 'Company input', () => {
-				const selector = `${ block.class } #shipping-company`;
-
-				it( 'visibility can be toggled', async () => {
-					await expect( 'Company' ).toToggleElement( selector );
-				} );
-
-				it( 'required attribute can be toggled', async () => {
-					// Company is disabled by default, so first we need to enable it.
-					const toggleLabel = await findLabelWithText( 'Company' );
-					await toggleLabel.click();
-					await expect(
-						'Require company name?'
-					).toToggleRequiredAttrOf( selector );
-				} );
-			} );
-
-			describe( 'Apartment input', () => {
-				it( 'visibility can be toggled', async () => {
-					const selector = `${ block.class } #shipping-address_2`;
-					await expect( 'Apartment, suite, etc.' ).toToggleElement(
-						selector
-					);
-				} );
-			} );
-
-			describe( 'Phone input', () => {
-				const selector = `${ block.class } #shipping-phone`;
-
-				it( 'visibility can be toggled', async () => {
-					await expect( 'Phone' ).toToggleElement( selector );
-				} );
-
-				it( 'required attribute can be toggled', async () => {
-					await expect(
-						'Require phone number?'
-					).toToggleRequiredAttrOf( selector );
-				} );
-			} );
-		} );
-
-		describe( 'action block attributes', () => {
-			beforeEach( async () => {
-				await openDocumentSettingsSidebar();
-				await selectBlockByName( 'woocommerce/checkout-actions-block' );
-			} );
-
-			describe( 'Return to cart link', () => {
-				it( 'visibility can be toggled', async () => {
-					const selector = `${ block.class } .wc-block-components-checkout-return-to-cart-button`;
-					const toggleLabel = await findLabelWithText(
-						'Show a "Return to Cart" link'
-					);
-					await expect( toggleLabel ).toToggleElement( selector );
-				} );
-			} );
+			expect( checkoutButton ).toHaveLength( 0 );
 		} );
 	} );
 } );

plugins/woocommerce-blocks/tests/e2e/specs/frontend/cart.test.js

@@ -1,13 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	switchUserToAdmin,
-	ensureSidebarOpened,
-	openPublishPanel,
-	findSidebarPanelWithTitle,
-	findSidebarPanelToggleButtonWithTitle,
-} from '@wordpress/e2e-test-utils';
+import { switchUserToAdmin } from '@wordpress/e2e-test-utils';
 import { shopper } from '@woocommerce/e2e-utils';
 
 /**

plugins/woocommerce-blocks/tests/e2e/specs/frontend/checkout.test.js

@@ -3,11 +3,9 @@
  */
 import {
 	merchant,
-	createSimpleProduct,
 	setCheckbox,
 	settingsPageSaveChanges,
 	verifyCheckboxIsSet,
-	switchUserToAdmin,
 } from '@woocommerce/e2e-utils';
 
 /**

plugins/woocommerce-blocks/tests/e2e/utils.js

@@ -5,6 +5,7 @@ import {
 	openGlobalBlockInserter,
 	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
+import { WP_ADMIN_DASHBOARD } from '@woocommerce/e2e-utils';
 
 const INSERTER_SEARCH_SELECTOR =
 	'.components-search-control__input,.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
@@ -16,8 +17,7 @@ const INSERTER_SEARCH_SELECTOR =
  *
  * @param {string} searchTerm The text to search the inserter for.
  */
-async function searchForBlock( searchTerm ) {
-	await openGlobalBlockInserter();
+export async function searchForBlock( searchTerm ) {
 	await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
 	await page.focus( INSERTER_SEARCH_SELECTOR );
 	await pressKeyWithModifier( 'primary', 'a' );
@@ -31,9 +31,10 @@ async function searchForBlock( searchTerm ) {
  * @param {string} searchTerm The text to search the inserter for.
  */
 export async function insertBlockDontWaitForInsertClose( searchTerm ) {
+	await openGlobalBlockInserter();
 	await searchForBlock( searchTerm );
 	const insertButton = (
-		await page.$x( `//button//span[contains(text(), '${ searchTerm }')]` )
+		await page.$x( `//button//span[text()='${ searchTerm }']` )
 	 )[ 0 ];
 	await insertButton.click();
 }
@@ -53,3 +54,29 @@ export const closeInserter = async () => {
 		'.edit-post-header [aria-label="Toggle block inserter"]'
 	);
 };
+
+const WP_ADMIN_WIDGETS_EDITOR = WP_ADMIN_DASHBOARD + 'widgets.php';
+
+export const openWidgetEditor = async () => {
+	await page.goto( WP_ADMIN_WIDGETS_EDITOR, {
+		waitUntil: 'networkidle0',
+	} );
+};
+
+export const closeModalIfExists = async () => {
+	if (
+		await page.evaluate( () => {
+			return !! document.querySelector( '.components-modal__header' );
+		} )
+	) {
+		await page.click(
+			'.components-modal__header [aria-label="Close dialog"]'
+		);
+	}
+};
+
+export const openWidgetsEditorBlockInserter = async () => {
+	await page.click(
+		'.edit-widgets-header [aria-label="Add block"],.edit-widgets-header [aria-label="Toggle block inserter"]'
+	);
+};