diff --git a/plugins/woocommerce-blocks/tests/e2e/specs/backend/mini-cart.test.js b/plugins/woocommerce-blocks/tests/e2e/specs/backend/mini-cart.test.js index 9b3595e4e72..129904e746a 100644 --- a/plugins/woocommerce-blocks/tests/e2e/specs/backend/mini-cart.test.js +++ b/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 ); + } ); + } ); } ); diff --git a/plugins/woocommerce-blocks/tests/e2e/utils.js b/plugins/woocommerce-blocks/tests/e2e/utils.js index ecf46d57c90..699f804af47 100644 --- a/plugins/woocommerce-blocks/tests/e2e/utils.js +++ b/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(); +};