Move cart widget tests to playwright and ensure classic/block theme c…

…onfigs are executed correctly (#10669)
woocommerce · Aug 28, 2023 · 4531790 · 4531790
1 parent 6f58d5a
commit 4531790
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 62 deletions.
diff --git a/.github/workflows/playwright.yml b/.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:

diff --git a/package.json b/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",

diff --git a/tests/e2e-jest/specs/backend/cart.test.js b/tests/e2e-jest/specs/backend/cart.test.js
diff --git a/tests/e2e/block-theme.setup.ts b/tests/e2e/block-theme.setup.ts
@@ -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();
+} );
diff --git a/tests/e2e/classic-theme.setup.ts b/tests/e2e/classic-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();
+} );
diff --git a/tests/e2e/playwright.classic-theme.config.ts b/tests/e2e/playwright.classic-theme.config.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' ],
+		},
+	],
+} );
diff --git a/tests/e2e/playwright.config.ts b/tests/e2e/playwright.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' ],
-		},
 	],
 };
 

diff --git a/tests/e2e/playwright.side-effects.config.ts b/tests/e2e/playwright.side-effects.config.ts
@@ -20,6 +20,7 @@ export default defineConfig( {
 	projects: [
 		{
 			name: 'blockThemeConfiguration',
+			testDir: '.',
 			testMatch: /block-theme.setup.ts/,
 		},
 		{

diff --git a/tests/e2e/tests/cart/cart-block.merchant.classic_theme.spec.ts b/tests/e2e/tests/cart/cart-block.merchant.classic_theme.spec.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();
+		} );
+	} );
+} );
diff --git a/tests/e2e/utils/constants.ts b/tests/e2e/utils/constants.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(),

diff --git a/tests/e2e/utils/editor/editor-utils.page.ts b/tests/e2e/utils/editor/editor-utils.page.ts
@@ -65,6 +65,17 @@ export class EditorUtils {
 		);
 	}
 
+	async closeModalByName( name: string ) {
+		const isModalOpen = await this.page.getByLabel( name ).isVisible();
+
+		// eslint-disable-next-line playwright/no-conditional-in-test
+		if ( isModalOpen ) {
+			await this.page
+				.getByLabel( name )
+				.getByRole( 'button', { name: 'Close' } )
+				.click();
+		}
+	}
 	async replaceBlockByBlockName( name: string, nameToInsert: string ) {
 		await this.page.evaluate(
 			( { name: _name, nameToInsert: _nameToInsert } ) => {

diff --git a/tests/e2e/utils/frontend/frontend-utils.page.ts b/tests/e2e/utils/frontend/frontend-utils.page.ts
@@ -27,6 +27,7 @@ export class FrontendUtils {
 	}
 
 	async addToCart( itemName = '' ) {
+		await this.page.waitForLoadState( 'domcontentloaded' );
 		if ( itemName !== '' ) {
 			await this.page
 				.getByLabel( `Add “${ itemName }” to your cart` )