Add e2e tests to verify block templates can be customized if the theme has its own custom templates

.github/workflows/blocks-playwright.yml

@@ -37,6 +37,11 @@ jobs:
                             file: playwright.side-effects.config.ts,
                             resultPath: test-results-side-effects,
                         },
+                        {
+                            name: BlockThemeWithTemplates,
+                            file: playwright.block-theme-with-templates.config.ts,
+                            resultPath: test-results-block-theme-with-templates,
+                        },
                     ]
         steps:
             - uses: actions/checkout@v3

plugins/woocommerce-blocks/package.json

@@ -84,10 +84,12 @@
 		"test:debug": "ndb .",
 		"test:e2e": "sh ./bin/check-env.sh && pnpm playwright test --config=tests/e2e/playwright.config.ts",
 		"test:e2e:report": "sh ./bin/check-env.sh && npx playwright test --config=tests/e2e/playwright.config.ts --reporter=html",
-		"test:e2e:side-effects": "pnpm run test:e2e -- --config=tests/e2e/playwright.side-effects.config.ts",
-		"test:e2e:side-effects:report": "pnpm run test:e2e:report -- --config=tests/e2e/playwright.side-effects.config.ts",
-		"test:e2e:classic-theme": "pnpm run test:e2e -- --config=tests/e2e/playwright.classic-theme.config.ts",
-		"test:e2e:classic-theme:report": "pnpm run test:e2e:report -- --config=tests/e2e/playwright.classic-theme.config.ts",
+		"test:e2e:side-effects": "pnpm run test:e2e --config=tests/e2e/playwright.side-effects.config.ts",
+		"test:e2e:side-effects:report": "pnpm run test:e2e:report --config=tests/e2e/playwright.side-effects.config.ts --reporter=html",
+		"test:e2e:classic-theme": "pnpm run test:e2e --config=tests/e2e/playwright.classic-theme.config.ts",
+		"test:e2e:classic-theme:report": "pnpm run test:e2e:report --config=tests/e2e/playwright.classic-theme.config.ts",
+		"test:e2e:block-theme-with-templates": "pnpm run test:e2e --config=tests/e2e/playwright.block-theme-with-templates.config.ts",
+		"test:e2e:block-theme-with-templates:report": "pnpm run test:e2e:report --config=tests/e2e/playwright.block-theme-with-templates.config.ts",
 		"test:e2e:jest": "pnpm 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": "pnpm 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": "pnpm 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",

plugins/woocommerce-blocks/tests/e2e/README.md

@@ -43,21 +43,21 @@ cd plugins/woocommerce-blocks/
 ```
 
 ```sh
-npm run env:start
+pnpm run env:start
 ```
 
 ```sh
-npm run test:e2e
+pnpm run test:e2e
 ```
 
 ### To run the test again, re-create the environment to start with a fresh state
 
 ```sh
-npm run env:restart
+pnpm run env:restart
 ```
 
 ```sh
-npm run test:e2e
+pnpm run test:e2e
 ```
 
 ### Tests with side effects
@@ -68,42 +68,58 @@ custom plugins) are tests with side effects and we
 tests to a separate test suite:
 
 ```sh
-npm run test:e2e:side-effects
+pnpm run test:e2e:side-effects
 ```
 
-_Note: All commands parameters of `test:e2e` can be used for
+_Note: All command parameters of `test:e2e` can be used for
 `test:e2e:side-effects`._
 
+### Tests with a classic theme and a block theme with custom templates
+
+By default, e2e tests run in a non-customized block theme. However, we also have
+some e2e tests which run specifically in a classic theme and in a block theme
+with custom templates. They can be run like this:
+
+```sh
+pnpm run test:e2e:classic-theme
+```
+
+```sh
+pnpm run test:e2e:block-theme-with-templates
+```
+
+_Note: All command parameters of `test:e2e` can be used for these commands too.
+
 ### Other ways of running tests
 
 Headless mode:
 
 ```sh
-npm run test:e2e
+pnpm run test:e2e
 ```
 
 Interactive UI mode:
 
 ```sh
-npm run test:e2e -- --ui
+pnpm run test:e2e -- --ui
 ```
 
 Headed mode:
 
 ```sh
-npm run test:e2e -- --headed
+pnpm run test:e2e -- --headed
 ```
 
 Debug mode:
 
 ```sh
-npm run test:e2e -- --debug
+pnpm run test:e2e -- --debug
 ```
 
 Running a single test:
 
 ```sh
-npm run test:e2e ./tests/e2e/tests/example.spec.ts
+pnpm run test:e2e ./tests/e2e/tests/example.spec.ts
 ```
 
 To see all options, run the following command:

plugins/woocommerce-blocks/tests/e2e/block-theme-with-templates.setup.ts

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

plugins/woocommerce-blocks/tests/e2e/playwright.block-theme-with-templates.config.ts

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { defineConfig } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import config from './playwright.config';
+
+export default defineConfig( {
+	...config,
+	outputDir: 'artifacts/test-results-block-theme-with-templates',
+	fullyParallel: true,
+	workers: 1,
+	projects: [
+		{
+			name: 'blockThemeWithTemplatesConfiguration',
+			testDir: '.',
+			testMatch: /block-theme-with-templates.setup.ts/,
+		},
+		{
+			name: 'blockThemeWithTemplates',
+			testMatch: /.*.block_theme_with_templates.spec.ts/,
+			dependencies: [ 'blockThemeWithTemplatesConfiguration' ],
+		},
+	],
+} );

plugins/woocommerce-blocks/tests/e2e/tests/templates/cart-template.block_theme.spec.ts

@@ -6,6 +6,7 @@
 const permalink = '/cart';
 const templatePath = 'woocommerce/woocommerce//page-cart';
 const templateType = 'wp_template';
+const userText = 'Hello World in the template';
 
 test.describe( 'Test the cart template', async () => {
 	test( 'Template can be opened in the site editor', async ( {
@@ -112,12 +113,10 @@
 		await editorUtils.closeWelcomeGuideModal();
 		await editorUtils.editor.insertBlock( {
 			name: 'core/paragraph',
-			attributes: { content: 'Hello World in the template' },
+			attributes: { content: userText },
 		} );
 		await editorUtils.saveTemplate();
 		await page.goto( permalink, { waitUntil: 'domcontentloaded' } );
-		await expect(
-			page.getByText( 'Hello World in the template' ).first()
-		).toBeVisible();
+		await expect( page.getByText( userText ).first() ).toBeVisible();
 	} );
 } );

plugins/woocommerce-blocks/tests/e2e/tests/templates/checkout-header-template-part.block_theme.spec.ts

@@ -5,6 +5,7 @@ import { test, expect } from '@woocommerce/e2e-playwright-utils';
 
 const templatePath = 'woocommerce/woocommerce//checkout-header';
 const templateType = 'wp_template_part';
+const userText = 'Hello World in the header';
 
 test.afterAll( async ( { requestUtils } ) => {
 	await requestUtils.deleteAllTemplates( 'wp_template' );
@@ -38,15 +39,15 @@ test.describe( 'Test the checkout header template part', async () => {
 		await editorUtils.closeWelcomeGuideModal();
 		await editorUtils.editor.insertBlock( {
 			name: 'core/paragraph',
-			attributes: { content: 'Hello World in the header' },
+			attributes: { content: userText },
 		} );
 		await editorUtils.saveTemplate();
 		await frontendUtils.goToShop();
 		await frontendUtils.emptyCart();
 		await frontendUtils.addToCart( 'Beanie' );
 		await frontendUtils.goToCheckout();
 		await expect(
-			frontendUtils.page.getByText( 'Hello World in the header' ).first()
+			frontendUtils.page.getByText( userText ).first()
 		).toBeVisible();
 	} );
 } );

plugins/woocommerce-blocks/tests/e2e/tests/templates/checkout-template.block_theme.spec.ts

@@ -6,6 +6,7 @@ import { test, expect } from '@woocommerce/e2e-playwright-utils';
 const permalink = '/checkout';
 const templatePath = 'woocommerce/woocommerce//page-checkout';
 const templateType = 'wp_template';
+const userText = 'Hello World in the template';
 
 test.describe( 'Test the checkout template', async () => {
 	test( 'Template can be opened in the site editor', async ( {
@@ -110,17 +111,15 @@ test.describe( 'Test editing the checkout template', async () => {
 		await editorUtils.closeWelcomeGuideModal();
 		await editorUtils.editor.insertBlock( {
 			name: 'core/paragraph',
-			attributes: { content: 'Hello World in the template' },
+			attributes: { content: userText },
 		} );
 		await editorUtils.saveTemplate();
 		await frontendUtils.goToShop();
 		await frontendUtils.emptyCart();
 		await frontendUtils.addToCart();
 		await frontendUtils.goToCheckout();
 		await expect(
-			frontendUtils.page
-				.getByText( 'Hello World in the template' )
-				.first()
+			frontendUtils.page.getByText( userText ).first()
 		).toBeVisible();
 	} );
 } );