Add e2e tests for the Page Content Wrapper block (#44122)

* Add Page Content Wrapper e2e tests

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>

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();
+		} );
+	} );
+} );

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() );

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
+