[Experimental] Add basic e2e test for new filter blocks (#43392)
This commit is contained in:
parent
6802b2720a
commit
8fb3d394a5
|
@ -0,0 +1,95 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import { test, expect } from '@woocommerce/e2e-playwright-utils';
|
||||||
|
|
||||||
|
const wrapperBlock = {
|
||||||
|
name: 'woocommerce/collection-filters',
|
||||||
|
title: 'Collection Filters',
|
||||||
|
};
|
||||||
|
const filterBlocks = [
|
||||||
|
{
|
||||||
|
name: 'woocommerce/collection-price-filter',
|
||||||
|
title: 'Collection Price Filter',
|
||||||
|
variation: 'Filter Products by Price',
|
||||||
|
heading: 'Filter by Price',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'woocommerce/collection-stock-filter',
|
||||||
|
title: 'Collection Stock Filter',
|
||||||
|
variation: 'Filter Products by Stock',
|
||||||
|
heading: 'Filter by Stock Status',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'woocommerce/collection-rating-filter',
|
||||||
|
title: 'Collection Rating Filter',
|
||||||
|
variation: 'Filter Products by Rating',
|
||||||
|
heading: 'Filter by Rating',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'woocommerce/collection-attribute-filter',
|
||||||
|
title: 'Collection Attribute Filter',
|
||||||
|
variation: 'Filter Products by Attribute',
|
||||||
|
heading: 'Filter Products by Attribute',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'woocommerce/collection-active-filters',
|
||||||
|
title: 'Collection Active Filters',
|
||||||
|
variation: 'Active Product Filters',
|
||||||
|
heading: 'Active Filters',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
test.describe( 'Filter blocks registration', async () => {
|
||||||
|
test.beforeEach( async ( { admin } ) => {
|
||||||
|
await admin.createNewPost();
|
||||||
|
} );
|
||||||
|
|
||||||
|
test( 'Wrapper block can be inserted through the inserter', async ( {
|
||||||
|
editor,
|
||||||
|
editorUtils,
|
||||||
|
} ) => {
|
||||||
|
await editorUtils.insertBlockUsingGlobalInserter( wrapperBlock.title );
|
||||||
|
|
||||||
|
await expect(
|
||||||
|
editor.canvas.getByLabel( `Block: ${ wrapperBlock.title }` )
|
||||||
|
).toBeVisible();
|
||||||
|
} );
|
||||||
|
|
||||||
|
test( 'Wrapper block contains all filter blocks by default', async ( {
|
||||||
|
editor,
|
||||||
|
editorUtils,
|
||||||
|
} ) => {
|
||||||
|
await editorUtils.insertBlockUsingGlobalInserter( wrapperBlock.title );
|
||||||
|
for ( const block of filterBlocks ) {
|
||||||
|
await expect(
|
||||||
|
editor.canvas.getByLabel( `Block: ${ block.title }` )
|
||||||
|
).toBeVisible();
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
|
||||||
|
test( 'Each filter block comes with a default title', async ( {
|
||||||
|
editor,
|
||||||
|
editorUtils,
|
||||||
|
} ) => {
|
||||||
|
await editorUtils.insertBlockUsingGlobalInserter( wrapperBlock.title );
|
||||||
|
for ( const block of filterBlocks ) {
|
||||||
|
await expect(
|
||||||
|
editor.canvas.getByText( block.heading )
|
||||||
|
).toBeVisible();
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
|
||||||
|
test( 'Variations can be inserted through the inserter.', async ( {
|
||||||
|
editor,
|
||||||
|
editorUtils,
|
||||||
|
} ) => {
|
||||||
|
for ( const block of filterBlocks ) {
|
||||||
|
await editorUtils.insertBlockUsingGlobalInserter( block.variation );
|
||||||
|
|
||||||
|
await expect(
|
||||||
|
editor.canvas.getByLabel( `Block: ${ block.title }` )
|
||||||
|
).toBeVisible();
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );
|
|
@ -115,6 +115,7 @@ class ProductCollectionPage {
|
||||||
} );
|
} );
|
||||||
await this.chooseCollectionInPost( collection );
|
await this.chooseCollectionInPost( collection );
|
||||||
await this.refreshLocators( 'editor' );
|
await this.refreshLocators( 'editor' );
|
||||||
|
await this.editor.openDocumentSettingsSidebar();
|
||||||
}
|
}
|
||||||
|
|
||||||
async publishAndGoToFrontend() {
|
async publishAndGoToFrontend() {
|
||||||
|
|
|
@ -362,4 +362,20 @@ export class EditorUtils {
|
||||||
await this.page.goto( '/wp-admin/widgets.php' );
|
await this.page.goto( '/wp-admin/widgets.php' );
|
||||||
await this.closeModalByName( 'Welcome to block Widgets' );
|
await this.closeModalByName( 'Welcome to block Widgets' );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Unlike the `insertBlock` method, which manipulates the block tree
|
||||||
|
* directly, this method simulates real user behavior when inserting a
|
||||||
|
* block to the editor by searching for block name then clicking on the
|
||||||
|
* first matching result.
|
||||||
|
*
|
||||||
|
* Besides, some blocks that manipulate their attributes after insertion
|
||||||
|
* aren't work probably with `insertBlock` as that method requires
|
||||||
|
* attributes object and uses that data to creat the block object.
|
||||||
|
*/
|
||||||
|
async insertBlockUsingGlobalInserter( blockTitle: string ) {
|
||||||
|
await this.openGlobalBlockInserter();
|
||||||
|
await this.page.getByPlaceholder( 'Search' ).fill( blockTitle );
|
||||||
|
await this.page.getByRole( 'option', { name: blockTitle } ).click();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
Significance: patch
|
||||||
|
Type: add
|
||||||
|
Comment: Experimental: Add basic E2E tests for filter blocks to verify block registration and rendering in the editor.
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue