Move cart widget tests to playwright and ensure classic/block theme configs are executed correctly (#10669)

Author: opr

.github/workflows/playwright.yml

@@ -14,6 +14,7 @@ jobs:
       matrix:
         config: [
           { name: Normal, file: playwright.config.ts, resultPath: test-results },
+          { name: Classic, file: playwright.classic-theme.config.ts, resultPath: test-results-classic-theme },
           { name: SideEffects, file: playwright.side-effects.config.ts, resultPath: test-results-side-effects },
         ]
     steps:

package.json

@@ -83,6 +83,8 @@
 		"test:e2e:report": "sh ./bin/check-env.sh && npx playwright test --config=tests/e2e/playwright.config.ts --reporter=html",
 		"test:e2e:side-effects": "npm run test:e2e -- --config=tests/e2e/playwright.side-effects.config.ts",
 		"test:e2e:side-effects:report": "npm run test:e2e:report -- --config=tests/e2e/playwright.side-effects.config.ts",
+		"test:e2e:classic-theme": "npm run test:e2e -- --config=tests/e2e/playwright.classic-theme.config.ts",
+		"test:e2e:classic-theme:report": "npm run test:e2e:report -- --config=tests/e2e/playwright.classic-theme.config.ts",
 		"test:e2e:jest": "npm run wp-env:config && cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config.js NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js",
 		"test:e2e:jest:dev": "npm run wp-env:config && cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config-dev.js NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js",
 		"test:e2e:jest:dev-watch": "npm run wp-env:config && cross-env JEST_PUPPETEER_CONFIG=tests/e2e-jest/config/jest-puppeteer.config-dev.js NODE_CONFIG_DIR=tests/e2e-jest/config wp-scripts test-e2e --config tests/e2e-jest/config/jest.config.js --watch",

tests/e2e-jest/specs/backend/cart.test.js

@@ -1,6 +1,19 @@
 /**
  * External dependencies
  */
-import { BLOCK_THEME_SLUG, cli } from '@woocommerce/e2e-utils';
+import {
+	BLOCK_THEME_NAME,
+	BLOCK_THEME_SLUG,
+	cli,
+} from '@woocommerce/e2e-utils';
+import { test as setup, expect } from '@woocommerce/e2e-playwright-utils';
 
-cli( `npm run wp-env run tests-cli "wp theme activate ${ BLOCK_THEME_SLUG }` );
+setup( 'Sets up the block theme', async ( { admin } ) => {
+	await cli(
+		`npm run wp-env run tests-cli "wp theme install ${ BLOCK_THEME_SLUG } --activate"`
+	);
+	await admin.page.goto( '/wp-admin/themes.php' );
+	await expect(
+		admin.page.getByText( `Active: ${ BLOCK_THEME_NAME }` )
+	).toBeVisible();
+} );

tests/e2e/block-theme.setup.ts

@@ -1,8 +1,19 @@
 /**
  * External dependencies
  */
-import { CLASSIC_THEME_SLUG, cli } from '@woocommerce/e2e-utils';
+import {
+	CLASSIC_THEME_NAME,
+	CLASSIC_THEME_SLUG,
+	cli,
+} from '@woocommerce/e2e-utils';
+import { test as setup, expect } from '@woocommerce/e2e-playwright-utils';
 
-cli(
-	`npm run wp-env run tests-cli "wp theme activate ${ CLASSIC_THEME_SLUG }`
-);
+setup( 'Sets up the classic theme', async ( { admin } ) => {
+	await cli(
+		`npm run wp-env run tests-cli "wp theme install ${ CLASSIC_THEME_SLUG } --activate"`
+	);
+	await admin.page.goto( '/wp-admin/themes.php' );
+	await expect(
+		admin.page.getByText( `Active: ${ CLASSIC_THEME_NAME }` )
+	).toBeVisible();
+} );

tests/e2e/classic-theme.setup.ts

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { defineConfig } from '@playwright/test';
+import path from 'path';
+
+/**
+ * Internal dependencies
+ */
+import config from './playwright.config';
+
+export default defineConfig( {
+	...config,
+	outputDir: path.join(
+		process.cwd(),
+		'artifacts/test-results-side-effects'
+	),
+	fullyParallel: false,
+	workers: 1,
+	projects: [
+		{
+			name: 'classicThemeConfiguration',
+			testDir: '.',
+			testMatch: /classic-theme.setup.ts/,
+		},
+		{
+			name: 'classicTheme',
+			testMatch: /.*.classic_theme.spec.ts/,
+			dependencies: [ 'classicThemeConfiguration' ],
+		},
+	],
+} );

tests/e2e/playwright.classic-theme.config.ts

@@ -44,22 +44,14 @@ const config: ExtendedPlaywrightTestConfig = {
 	projects: [
 		{
 			name: 'blockThemeConfiguration',
+			testDir: '.',
 			testMatch: /block-theme.setup.ts/,
 		},
 		{
 			name: 'blockTheme',
 			testMatch: /.*.block_theme.spec.ts/,
 			dependencies: [ 'blockThemeConfiguration' ],
 		},
-		{
-			name: 'classicThemeConfiguration',
-			testMatch: /classic-theme.setup.ts/,
-		},
-		{
-			name: 'classicTheme',
-			testMatch: /.*.classic_theme.spec.ts/,
-			dependencies: [ 'classicThemeConfiguration' ],
-		},
 	],
 };
 

tests/e2e/playwright.config.ts

@@ -20,6 +20,7 @@ export default defineConfig( {
 	projects: [
 		{
 			name: 'blockThemeConfiguration',
+			testDir: '.',
 			testMatch: /block-theme.setup.ts/,
 		},
 		{

tests/e2e/playwright.side-effects.config.ts

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
+
+test.describe( 'Merchant → Cart', () => {
+	test.describe( 'in widget editor', () => {
+		test( "can't be inserted in a widget area", async ( {
+			editorUtils,
+			page,
+		} ) => {
+			await page.goto( '/wp-admin/widgets.php' );
+			await editorUtils.closeModalByName( 'Welcome to block Widgets' );
+
+			await editorUtils.openGlobalBlockInserter();
+			await editorUtils.page
+				.getByLabel( 'Search for blocks and patterns' )
+				.fill( 'woocommerce/cart' );
+			const cartButton = editorUtils.page.getByRole( 'option', {
+				name: 'Cart',
+				exact: true,
+			} );
+			await expect( cartButton ).toBeHidden();
+		} );
+	} );
+} );

tests/e2e/tests/cart/cart-block.merchant.classic_theme.spec.ts

@@ -4,7 +4,9 @@
 import path from 'path';
 
 export const BLOCK_THEME_SLUG = 'twentytwentythree';
-export const CLASSIC_THEME_SLUG = 'twentytwentyone';
+export const BLOCK_THEME_NAME = 'Twenty Twenty-Three';
+export const CLASSIC_THEME_SLUG = 'storefront';
+export const CLASSIC_THEME_NAME = 'Storefront';
 export const BASE_URL = 'http://localhost:8889';
 export const STORAGE_STATE_PATH = path.join(
 	process.cwd(),