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>
This commit is contained in:
Albert Juhé Lluveras 2024-01-29 10:11:43 +01:00 committed by GitHub
parent cfd8f36578
commit 7f735714a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 110 additions and 0 deletions

View File

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

View File

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

View File

@ -0,0 +1,4 @@
Significance: patch
Type: add
Comment: Add e2e tests for the Page Content Wrapper block