[Experimental] Add basic e2e test for new filter blocks (#43392)

plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/basic.block_theme.spec.ts

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

plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.page.ts

@@ -115,6 +115,7 @@ class ProductCollectionPage {
 		} );
 		await this.chooseCollectionInPost( collection );
 		await this.refreshLocators( 'editor' );
+		await this.editor.openDocumentSettingsSidebar();
 	}
 
 	async publishAndGoToFrontend() {

plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts

@@ -362,4 +362,20 @@ export class EditorUtils {
 		await this.page.goto( '/wp-admin/widgets.php' );
 		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();
+	}
 }

plugins/woocommerce/changelog/add-basic-filter-blocks-e2e-tests

@@ -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.
+
+