diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/page-content-wrapper/page-content-wrapper.block_theme.side_effects.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/page-content-wrapper/page-content-wrapper.block_theme.side_effects.spec.ts new file mode 100644 index 00000000000..0c25ec8ae73 --- /dev/null +++ b/plugins/woocommerce-blocks/tests/e2e/tests/page-content-wrapper/page-content-wrapper.block_theme.side_effects.spec.ts @@ -0,0 +1,76 @@ +/** + * External dependencies + */ +import { test, expect } from '@woocommerce/e2e-playwright-utils'; +import type { FrontendUtils } from '@woocommerce/e2e-utils'; + +// Instead of testing the block individually, we test the Cart and Checkout +// templates, which make use of the block. +const templates = [ + { + title: 'Cart', + blockClassName: '.wc-block-cart', + visitPage: async ( { + frontendUtils, + }: { + frontendUtils: FrontendUtils; + } ) => { + await frontendUtils.goToCart(); + }, + }, + { + title: 'Checkout', + blockClassName: '.wc-block-checkout', + visitPage: async ( { + frontendUtils, + }: { + frontendUtils: FrontendUtils; + } ) => { + await frontendUtils.goToShop(); + await frontendUtils.addToCart(); + await frontendUtils.goToCheckout(); + }, + }, +]; +const userText = 'Hello World in the page'; + +test.describe( 'Page Content Wrapper', async () => { + templates.forEach( async ( template ) => { + test( `the content of the ${ template.title } page is correctly rendered in the ${ template.title } template`, async ( { + admin, + page, + editorUtils, + frontendUtils, + } ) => { + await admin.visitAdminPage( 'edit.php?post_type=page' ); + page.getByLabel( `“${ template.title }” (Edit)` ).click(); + await editorUtils.closeWelcomeGuideModal(); + + // Prevent trying to insert the paragraph block before the editor is ready. + await page.locator( template.blockClassName ).waitFor(); + + await editorUtils.editor.insertBlock( { + name: 'core/paragraph', + attributes: { content: userText }, + } ); + await editorUtils.updatePost(); + + // Verify edits are in the template when viewed from the frontend. + await template.visitPage( { frontendUtils } ); + await expect( page.getByText( userText ).first() ).toBeVisible(); + + // Clean up the paragraph block added before. + await admin.visitAdminPage( 'edit.php?post_type=page' ); + page.getByLabel( `“${ template.title }” (Edit)` ).click(); + await editorUtils.closeWelcomeGuideModal(); + + // Prevent trying to insert the paragraph block before the editor is ready. + await page.locator( template.blockClassName ).waitFor(); + + await editorUtils.removeBlocks( { + name: 'core/paragraph', + } ); + await editorUtils.updatePost(); + } ); + } ); +} ); diff --git a/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts b/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts index 7e6ad504edb..f7d34c90334 100644 --- a/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts +++ b/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts @@ -84,6 +84,27 @@ export class EditorUtils { ); } + async removeBlocks( { name }: { name: string } ) { + await this.page.evaluate( + ( { name: _name } ) => { + const blocks = window.wp.data + .select( 'core/block-editor' ) + .getBlocks() as ( BlockRepresentation & { + clientId: string; + } )[]; + const matchingBlocksClientIds = blocks + .filter( ( block ) => { + return block && block.name === _name; + } ) + .map( ( block ) => block?.clientId ); + window.wp.data + .dispatch( 'core/block-editor' ) + .removeBlocks( matchingBlocksClientIds ); + }, + { name } + ); + } + async closeModalByName( name: string ) { const isModalOpen = await this.page.getByLabel( name ).isVisible(); @@ -367,6 +388,15 @@ export class EditorUtils { .waitFor(); } + async updatePost() { + await this.page.click( 'role=button[name="Update"i]' ); + + await this.page + .getByRole( 'button', { name: 'Dismiss this notice' } ) + .filter( { hasText: 'updated' } ) + .waitFor(); + } + async publishAndVisitPost() { await this.editor.publishPost(); const url = new URL( this.page.url() ); diff --git a/plugins/woocommerce/changelog/44122-add-page-content-wrapper-e2e-tests b/plugins/woocommerce/changelog/44122-add-page-content-wrapper-e2e-tests new file mode 100644 index 00000000000..d870d4f0781 --- /dev/null +++ b/plugins/woocommerce/changelog/44122-add-page-content-wrapper-e2e-tests @@ -0,0 +1,4 @@ +Significance: patch +Type: add +Comment: Add e2e tests for the Page Content Wrapper block +