Add tests for the Mini Cart Block when it is added on the FSE editor. (https://github.com/woocommerce/woocommerce-blocks/pull/6000)

* Add tests for the Mini Cart Block when it is added on the FSE editor woocommerce/woocommerce-blocks#5727

Add tests for the Mini Cart Block when it is added on the FSE editor

* not hardcoding selectors

* fix typo

* restore old searchForBlock function

* add export

* Revert "restore old searchForBlock function"

This reverts commit 7049ad85bc2752ad33933eec00da9682943ec35a.

* use searchForBlock from package only for FSE pages

* add fix for GB

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

@@ -1,3 +1,12 @@
+/**
+ * External dependencies
+ */
+import {
+	insertBlock,
+	canvas,
+	searchForBlock as searchForFSEBlock,
+} from '@wordpress/e2e-test-utils';
+
 /**
  * Internal dependencies
  */
@@ -7,12 +16,23 @@ import {
 	openWidgetEditor,
 	searchForBlock,
 	isBlockInsertedInWidgetsArea,
+	goToSiteEditor,
+	useTheme,
+	waitForCanvas,
+	addBlockToFSEArea,
 } from '../../utils.js';
 
 const block = {
 	name: 'Mini Cart',
 	slug: 'woocommerce/mini-cart',
 	class: '.wc-block-mini-cart',
+	selectors: {
+		insertButton: "//button//span[text()='Mini Cart']",
+		insertButtonDisabled:
+			"//button[@aria-disabled]//span[text()='Mini Cart']",
+		compatibilityNoticeTitle:
+			"//h1[contains(text(), 'Compatibility notice')]",
+	},
 };
 
 if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 3 ) {
@@ -30,10 +50,7 @@ const addBlockToWidgetsArea = async () => {
 	await closeModalIfExists();
 	await openWidgetsEditorBlockInserter();
 	await searchForBlock( block.name );
-	const miniCartButton = await page.$x(
-		`//button//span[text()='${ block.name }']`
-	);
-
+	const miniCartButton = await page.$x( block.selectors.insertButton );
 	await miniCartButton[ 0 ].click();
 };
 
@@ -57,7 +74,7 @@ describe( `${ block.name } Block`, () => {
 		it( 'the compatibility notice appears', async () => {
 			await addBlockToWidgetsArea();
 			const compatibilityNoticeTitle = await page.$x(
-				`//h1[contains(text(), 'Compatibility notice')]`
+				block.selectors.compatibilityNoticeTitle
 			);
 			expect( compatibilityNoticeTitle.length ).toBe( 1 );
 		} );
@@ -71,7 +88,7 @@ describe( `${ block.name } Block`, () => {
 			} );
 			await addBlockToWidgetsArea();
 			const compatibilityNoticeTitle = await page.$x(
-				`//h1[contains(text(), 'Compatibility notice')]`
+				block.selectors.compatibilityNoticeTitle
 			);
 			expect( compatibilityNoticeTitle.length ).toBe( 0 );
 		} );
@@ -79,13 +96,59 @@ describe( `${ block.name } Block`, () => {
 		it( 'can only be inserted once', async () => {
 			await addBlockToWidgetsArea();
 			const miniCartButton = await page.$x(
-				`//button[@aria-disabled]//span[text()='${ block.name }']`
+				block.selectors.insertButtonDisabled
 			);
 
 			expect( miniCartButton ).toHaveLength( 1 );
 		} );
 	} );
 
-	// @todo Add tests for the Mini Cart block in FSE editor
-	// describe( 'in FSE editor', () => {} );
+	describe( 'in FSE editor', () => {
+		useTheme( 'emptytheme' );
+
+		beforeEach( async () => {
+			// TODO: Update to always use site-editor.php once WordPress 6.0 is released and fix is verified.
+			await goToSiteEditor(
+				process.env.GUTENBERG_EDITOR_CONTEXT || 'core'
+			);
+			await removeDismissedCompatibilityNoticesFromLocalStorage();
+			await waitForCanvas();
+		} );
+
+		it( 'can be inserted in FSE area', async () => {
+			await insertBlock( block.name );
+			await expect( canvas() ).toMatchElement( block.class );
+		} );
+
+		it( 'the compatibility notice appears', async () => {
+			await addBlockToFSEArea( block.name );
+			const compatibilityNoticeTitle = await page.$x(
+				block.selectors.compatibilityNoticeTitle
+			);
+			expect( compatibilityNoticeTitle.length ).toBe( 1 );
+		} );
+
+		it( "after the compatibility notice is dismissed, it doesn't appear again", async () => {
+			await page.evaluate( () => {
+				localStorage.setItem(
+					'wc-blocks_dismissed_compatibility_notices',
+					'["mini-cart"]'
+				);
+			} );
+			await addBlockToFSEArea( block.name );
+			const compatibilityNoticeTitle = await page.$x(
+				block.selectors.compatibilityNoticeTitle
+			);
+			expect( compatibilityNoticeTitle.length ).toBe( 0 );
+		} );
+
+		it( 'can only be inserted once', async () => {
+			await insertBlock( block.name );
+			await searchForFSEBlock( block.name );
+			const miniCartButton = await page.$x(
+				block.selectors.insertButtonDisabled
+			);
+			expect( miniCartButton ).toHaveLength( 1 );
+		} );
+	} );
 } );

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

@@ -6,9 +6,10 @@ import {
 	activateTheme,
 	disableSiteEditorWelcomeGuide,
 	openGlobalBlockInserter,
-	pressKeyWithModifier,
 	switchUserToAdmin,
 	visitAdminPage,
+	pressKeyWithModifier,
+	searchForBlock as searchForFSEBlock,
 } from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 import { WP_ADMIN_DASHBOARD } from '@woocommerce/e2e-utils';
@@ -151,7 +152,7 @@ export const isBlockInsertedInWidgetsArea = async ( blockName ) => {
  * @param {string} [params.postId] ID of the template if we want to access template editor.
  * @param {'wp_template' | 'wp_template_part'} [params.postType='wp_template'] Type of template.
  */
-async function goToSiteEditor( editorContext = 'core', params ) {
+export async function goToSiteEditor( editorContext = 'core', params ) {
 	// There is a bug in Gutenberg/WPCore now that makes it impossible to rely on site-editor.php on setups
 	// with locally installed Gutenberg. Details in https://github.com/WordPress/gutenberg/issues/39639.
 	// TODO: Update to always use site-editor.php once WordPress 6.0 is released and fix is verified.
@@ -336,3 +337,18 @@ export function useTheme( themeSlug ) {
 		await activateTheme( previousTheme );
 	} );
 }
+
+/**
+ * Add a block to Full Site Editing.
+ *
+ * *Note:* insertBlock function gets focused on the canvas, this could prevent some dialogs from being displayed. e.g. compatibility notice.
+ *
+ * @param {string} blockName Block name.
+ */
+export const addBlockToFSEArea = async ( blockName ) => {
+	await searchForFSEBlock( blockName );
+	const insertButton = await page.waitForXPath(
+		`//button//span[contains(text(), '${ blockName }')]`
+	);
+	await insertButton.click();
+};