Migrate Classic Block E2E tests to Playwright

.github/workflows/playwright.yml

@@ -61,4 +61,4 @@ jobs:
       - uses: actions/upload-artifact@v3
         with:
           name: playwright-report
-          path: ./tests/e2e-pw/artifacts/test-results
+          path: playwright-report

.wp-env.json

@@ -4,7 +4,8 @@
 		"https://downloads.wordpress.org/plugin/woocommerce.latest-stable.zip",
 		"https://github.com/WP-API/Basic-Auth/archive/master.zip",
 		"https://downloads.wordpress.org/plugin/wordpress-importer.0.8.zip",
-		"./tests/mocks/woo-test-helper"
+		"./tests/mocks/woo-test-helper",
+		"."
 	],
 	"env": {
 		"tests": {

docs/contributors/e2e-guidelines.md

@@ -18,13 +18,16 @@ The first folder is named "e2e" and it contains all the E2E tests that were crea
 
 #### Structure
 
-There are two Playwright projects configuration:
+There are three Playwright projects configuration:
 
--   blockTheme
--   classicTheme
+- blockTheme
+- blockThemeWithGlobalSideEffects
+- classicTheme
 
 The blockTheme project runs the tests with the suffix _block_theme_. In this case, the theme is a block theme. The block theme is the default WordPress theme. Currently, it is Twenty-Twenty Three. You should use this configuration if you want test the block with the Site Editor.
 
+The blockThemeWithGlobalSideEffects project runs the tests with the suffix _block_theme.side_effects_. These tests have side effects that can potentially impact other end-to-end (E2E) tests. Due to the nature of these tests and their potential impact, they are not executed in parallel with other tests.
+
 The classicTheme project runs the tests with the suffix _classic_theme_. In this case, the theme is a Twenty Twenty-One. You should use this configuration if you want test the block with a classic theme.
 
 Each block should have a dedicated folder with a scoped util file if you want share some logic related to the block.

tests/e2e-pw/playwright-utils/test.ts

@@ -10,7 +10,11 @@ import {
 	RequestUtils,
 } from '@wordpress/e2e-test-utils-playwright';
 
-import { TemplateApiUtils, STORAGE_STATE_PATH } from '@woocommerce/e2e-utils';
+import {
+	TemplateApiUtils,
+	STORAGE_STATE_PATH,
+	EditorUtils,
+} from '@woocommerce/e2e-utils';
 
 /**
  * Set of console logging types observed to protect against unexpected yet
@@ -100,6 +104,7 @@ const test = base.extend<
 		editor: Editor;
 		pageUtils: PageUtils;
 		templateApiUtils: TemplateApiUtils;
+		editorUtils: EditorUtils;
 		snapshotConfig: void;
 	},
 	{
@@ -129,6 +134,9 @@ const test = base.extend<
 	},
 	templateApiUtils: async ( {}, use ) =>
 		await use( new TemplateApiUtils( request ) ),
+	editorUtils: async ( { editor }, use ) => {
+		await use( new EditorUtils( editor ) );
+	},
 	requestUtils: [
 		async ( {}, use, workerInfo ) => {
 			const requestUtils = await RequestUtils.setup( {

tests/e2e-pw/playwright.config.ts

@@ -27,9 +27,10 @@ const config: ExtendedPlaywrightTestConfig = {
 	globalTeardown: require.resolve( './global-teardown' ),
 	testDir: 'tests',
 	retries: CI ? 2 : 0,
-	workers: 4,
-	fullyParallel: true,
-	reporter: process.env.CI ? [ [ 'github' ], [ 'list' ] ] : 'list',
+	workers: 1,
+	reporter: process.env.CI
+		? [ [ 'github' ], [ 'list' ], [ 'html' ] ]
+		: 'list',
 	maxFailures: E2E_MAX_FAILURES ? Number( E2E_MAX_FAILURES ) : 0,
 	use: {
 		baseURL: BASE_URL,
@@ -50,10 +51,16 @@ const config: ExtendedPlaywrightTestConfig = {
 			testMatch: /.*.block_theme.spec.ts/,
 			dependencies: [ 'blockThemeConfiguration' ],
 		},
+		{
+			name: 'blockThemeWithGlobalSideEffects',
+			testMatch: /.*.block_theme.side_effects.spec.ts/,
+			dependencies: [ 'blockTheme' ],
+			fullyParallel: false,
+		},
 		{
 			name: 'classicThemeConfiguration',
 			testMatch: /block-theme.setup.ts/,
-			dependencies: [ 'blockTheme' ],
+			dependencies: [ 'blockThemeWithGlobalSideEffects' ],
 		},
 		{
 			name: 'classicTheme',

tests/e2e-pw/tests/classic-template/classic-template.block_theme.side_effects.spec.ts

@@ -0,0 +1,117 @@
+/**
+ * External dependencies
+ */
+import { BlockData } from '@woocommerce/e2e-types';
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
+import { cli } from '@woocommerce/e2e-utils';
+
+/**
+ * Internal dependencies
+ */
+
+const blockData: BlockData = {
+	name: 'woocommerce/legacy-template',
+	mainClass: '.wc-block-price-filter',
+	selectors: {
+		frontend: {},
+		editor: {},
+	},
+};
+
+const templates = {
+	'single-product': {
+		templateTitle: 'Single Product',
+		slug: 'single-product',
+		frontendPage: '/product/single/',
+	},
+	'taxonomy-product_attribute': {
+		templateTitle: 'Product Attribute',
+		slug: 'taxonomy-product_attribute',
+		frontendPage: '/product-attribute/color/',
+	},
+
+	'taxonomy-product_cat': {
+		templateTitle: 'Product Category',
+		slug: 'taxonomy-product_cat',
+		frontendPage: '/product-category/music/',
+	},
+	// We don't have products with tags in the test site. Uncomment this when we have products with tags.
+	// 'taxonomy-product_tag': {
+	// 	templateTitle: 'Product Tag',
+	// 	slug: 'taxonomy-product_tag',
+	// 	frontendPage: '/product-tag/hoodie/',
+	// },
+	'archive-product': {
+		templateTitle: 'Product Catalog',
+		slug: 'archive-product',
+		frontendPage: '/shop/',
+	},
+	'product-search-results': {
+		templateTitle: 'Product Search Results',
+		slug: 'product-search-results',
+		frontendPage: '/?s=single&post_type=product',
+	},
+};
+
+for ( const { templateTitle, slug, frontendPage } of Object.values(
+	templates
+) ) {
+	test.describe( `${ blockData.name } Block `, () => {
+		test.beforeAll( async () => {
+			await cli(
+				'npm run wp-env run tests-cli "wp option update wc_blocks_use_blockified_product_grid_block_as_template false"'
+			);
+		} );
+
+		test( `is rendered on ${ templateTitle } template`, async ( {
+			admin,
+			editorUtils,
+			editor,
+		} ) => {
+			await admin.visitSiteEditor( {
+				postId: `woocommerce/woocommerce//${ slug }`,
+				postType: 'wp_template',
+			} );
+
+			await editor.canvas.click( 'body' );
+
+			const block = await editorUtils.getBlockByName( blockData.name );
+			expect( block ).not.toBeNull();
+		} );
+
+		test( `is rendered on ${ templateTitle } template - frontend side`, async ( {
+			admin,
+			editor,
+			page,
+		} ) => {
+			await admin.visitSiteEditor( {
+				postId: `woocommerce/woocommerce//${ slug }`,
+				postType: 'wp_template',
+			} );
+
+			await editor.canvas.click( 'body' );
+
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: 'Hello World' },
+			} );
+
+			await editor.saveSiteEditorEntities();
+
+			await page.goto( frontendPage );
+
+			const helloWorldText = await page.getByText( 'Hello World' );
+
+			expect( helloWorldText ).not.toBeNull();
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await cli(
+				'npm run wp-env run tests-cli "wp option delete wc_blocks_use_blockified_product_grid_block_as_template"'
+			);
+
+			await requestUtils.deleteAllTemplates( 'wp_template' );
+			await requestUtils.deleteAllTemplates( 'wp_template_part' );
+		} );
+	} );
+}

tests/e2e-pw/tests/classic-template/utils.ts

@@ -0,0 +1,9 @@
+export const WOOCOMMERCE_ID = 'woocommerce/woocommerce';
+
+export const getDefaultTemplateProps = ( templateTitle: string ) => {
+	return {
+		templateTitle,
+		addedBy: WOOCOMMERCE_ID,
+		hasActions: false,
+	};
+};

tests/e2e-pw/tests/price-filter/price-filter.block_theme.spec.ts → tests/e2e-pw/tests/price-filter/price-filter.block_theme.side_effects.spec.ts

@@ -3,7 +3,7 @@
  */
 import { BlockData } from '@woocommerce/e2e-types';
 import { test, expect } from '@woocommerce/e2e-playwright-utils';
-import { BASE_URL, getBlockByName } from '@woocommerce/e2e-utils';
+import { BASE_URL, cli, getBlockByName } from '@woocommerce/e2e-utils';
 
 /**
  * Internal dependencies
@@ -105,6 +105,11 @@ test.describe( `${ blockData.name } Block - with All products Block`, () => {
 } );
 
 test.describe( `${ blockData.name } Block - with PHP classic template`, () => {
+	test.beforeAll( async () => {
+		await cli(
+			'npm run wp-env run tests-cli "wp option update wc_blocks_use_blockified_product_grid_block_as_template false"'
+		);
+	} );
 	test.beforeEach( async ( { admin, page, editor } ) => {
 		await admin.visitSiteEditor( {
 			postId: 'woocommerce/woocommerce//archive-product',
@@ -178,4 +183,10 @@ test.describe( `${ blockData.name } Block - with PHP classic template`, () => {
 
 		expect( products ).toHaveLength( 1 );
 	} );
+
+	test.afterAll( async () => {
+		await cli(
+			'npm run wp-env run tests-cli "wp option delete wc_blocks_use_blockified_product_grid_block_as_template"'
+		);
+	} );
 } );