Add basic e2e tests

.eslintrc.json

@@ -36,6 +36,18 @@
 		{
 			"files": [ "**/test/**/*.js" ],
 			"extends": [ "plugin:@wordpress/eslint-plugin/test-unit" ]
+		},
+		{
+			"files": [ "specs/**/*.js" ],
+			"rules": {
+				"import/no-extraneous-dependencies": [
+					"error",
+					{
+						"peerDependencies": true,
+						"devDependencies": true
+					}
+				]
+			}
 		}
 	]
 }

.github/workflows/pr-checks.yml

@@ -123,3 +123,38 @@ jobs:
 
             - name: Run PHP tests
               run: npm run test:unit:php:base
+    e2e:
+        name: E2E Tests
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Setup Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version-file: '.nvmrc'
+                  cache: npm
+
+            - name: Install Node Dependencies
+              run: npm i
+
+            - name: Build JavaScript
+              run: npm run build
+
+            - name: Install Playwright browsers
+              run: npx playwright install --with-deps chromium
+
+            - name: Start wp-env
+              run: npm run test:unit:php:setup
+
+            - name: Run E2E tests
+              run: npm run test:e2e
+
+            - name: Upload test artifacts on failure
+              uses: actions/upload-artifact@v4
+              if: failure()
+              with:
+                  name: playwright-artifacts
+                  path: artifacts/
+                  if-no-files-found: ignore

.gitignore

@@ -37,3 +37,6 @@ build/
 *.result.*
 
 dev-env/
+
+# Playwright e2e test artifacts (screenshots, traces, test results)
+artifacts/

package.json

@@ -27,7 +27,9 @@
 	"devDependencies": {
 		"@actions/core": "^3.0.0",
 		"@emotion/babel-plugin": "^11.13.5",
+		"@playwright/test": "^1.58.2",
 		"@wordpress/base-styles": "^6.16.0",
+		"@wordpress/e2e-test-utils-playwright": "^1.40.0",
 		"@wordpress/env": "^10.0.0",
 		"@wordpress/scripts": "^31.5.0",
 		"babel-plugin-inline-json-import": "^0.3.2",
@@ -57,7 +59,9 @@
 		"update-version": "node update-version-and-changelog.js",
 		"prepare": "husky",
 		"wp-env": "wp-env",
-		"test:unit": "wp-scripts test-unit-js --config test/unit/jest.config.js"
+		"test:unit": "wp-scripts test-unit-js --config test/unit/jest.config.js",
+		"test:e2e": "wp-scripts test-playwright",
+		"test:e2e:debug": "wp-scripts test-playwright --ui"
 	},
 	"lint-staged": {
 		"*.{js,json,yml}": [

playwright.config.js

@@ -0,0 +1,2 @@
+process.env.WP_BASE_URL ??= 'http://localhost:8989';
+module.exports = require( '@wordpress/scripts/config/playwright.config' );

specs/editor-sidebar.spec.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Create Block Theme — Site Editor Sidebar', () => {
+	test( 'plugin sidebar button is present in the editor toolbar', async ( {
+		admin,
+		page,
+	} ) => {
+		await admin.visitSiteEditor( { canvas: 'edit' } );
+		await expect(
+			page.getByRole( 'button', { name: 'Create Block Theme' } )
+		).toBeVisible();
+	} );
+
+	test( 'clicking the toolbar button opens the plugin sidebar', async ( {
+		admin,
+		page,
+	} ) => {
+		await admin.visitSiteEditor( { canvas: 'edit' } );
+		await page
+			.getByRole( 'button', { name: 'Create Block Theme' } )
+			.click();
+		await expect(
+			page.getByRole( 'button', { name: 'Save Changes to Theme' } )
+		).toBeVisible();
+	} );
+} );

specs/landing-page.spec.js

@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+const { execSync } = require( 'child_process' );
+
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+const E2E_THEME_SLUG = 'e2e-test-theme';
+
+test.describe( 'Create Block Theme — Admin Landing Page', () => {
+	let originalThemeSlug;
+
+	test.beforeAll( async ( { requestUtils } ) => {
+		const themes = await requestUtils.rest( { path: '/wp/v2/themes' } );
+		const active = themes.find( ( { status } ) => status === 'active' );
+		originalThemeSlug = active?.stylesheet;
+
+		if (
+			themes.some( ( { stylesheet } ) => stylesheet === E2E_THEME_SLUG )
+		) {
+			execSync(
+				`npx wp-env run tests-cli wp theme delete ${ E2E_THEME_SLUG }`,
+				{ stdio: 'ignore' }
+			);
+		}
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		if ( originalThemeSlug ) {
+			await requestUtils.activateTheme( originalThemeSlug );
+		}
+
+		const themes = await requestUtils.rest( { path: '/wp/v2/themes' } );
+		if (
+			themes.some( ( { stylesheet } ) => stylesheet === E2E_THEME_SLUG )
+		) {
+			execSync(
+				`npx wp-env run tests-cli wp theme delete ${ E2E_THEME_SLUG }`,
+				{ stdio: 'ignore' }
+			);
+		}
+	} );
+
+	test( 'page loads and shows main heading', async ( { admin, page } ) => {
+		await admin.visitAdminPage(
+			'themes.php',
+			'page=create-block-theme-landing'
+		);
+		await expect(
+			page.getByRole( 'heading', { name: 'What would you like to do?' } )
+		).toBeVisible();
+	} );
+
+	test( 'clicking export downloads a zip file', async ( { admin, page } ) => {
+		await admin.visitAdminPage(
+			'themes.php',
+			'page=create-block-theme-landing'
+		);
+		const [ download ] = await Promise.all( [
+			page.waitForEvent( 'download' ),
+			page.getByRole( 'button', { name: /Export/ } ).click(),
+		] );
+		expect( download.suggestedFilename() ).toMatch( /\.zip$/ );
+	} );
+
+	test( 'create blank theme modal opens with name field', async ( {
+		admin,
+		page,
+	} ) => {
+		await admin.visitAdminPage(
+			'themes.php',
+			'page=create-block-theme-landing'
+		);
+		await page
+			.getByRole( 'button', { name: /Create a new Blank Theme/i } )
+			.click();
+		await expect( page.getByLabel( /Theme name/i ) ).toBeVisible();
+	} );
+
+	test( 'create blank theme end-to-end', async ( {
+		admin,
+		page,
+		requestUtils,
+	} ) => {
+		await admin.visitAdminPage(
+			'themes.php',
+			'page=create-block-theme-landing'
+		);
+
+		// Accept the alert dialog that fires on successful theme creation.
+		page.once( 'dialog', ( dialog ) => dialog.accept() );
+
+		await page
+			.getByRole( 'button', { name: /Create a new Blank Theme/i } )
+			.click();
+		await page.getByLabel( /Theme name/i ).fill( 'E2E Test Theme' );
+		await page
+			.getByRole( 'button', {
+				name: 'Create and Activate Blank Theme',
+			} )
+			.click();
+
+		await page.waitForURL( /site-editor/, { waitUntil: 'commit' } );
+
+		const themes = await requestUtils.rest( { path: '/wp/v2/themes' } );
+		const active = themes.find( ( { status } ) => status === 'active' );
+		expect( active?.stylesheet ).toBe( E2E_THEME_SLUG );
+	} );
+} );