Merge pull request #423 from KevinBatdorf/fix/cache-browsers-and-types

Author: KevinBatdorf

.github/workflows/playwright-nightly.yml

@@ -47,9 +47,25 @@ jobs:
 
     - run: npm ci --prefer-offline --no-audit --no-fund
 
+    - name: Get Playwright version
+      id: pw-version
+      run: echo "version=$(npx playwright --version | awk '{print $2}')" >> "$GITHUB_OUTPUT"
+
+    - name: Cache Playwright browsers
+      uses: actions/cache@v4
+      id: pw-cache
+      with:
+        path: ~/.cache/ms-playwright
+        key: playwright-${{ steps.pw-version.outputs.version }}
+
     - name: Install Playwright Browsers
+      if: steps.pw-cache.outputs.cache-hit != 'true'
       run: npx playwright install --with-deps
 
+    - name: Install Playwright deps only
+      if: steps.pw-cache.outputs.cache-hit == 'true'
+      run: npx playwright install-deps
+
     - name: Build project
       run: npm run build
       env:

.github/workflows/playwright.yml

@@ -46,9 +46,25 @@ jobs:
 
     - run: npm ci --prefer-offline --no-audit --no-fund
 
+    - name: Get Playwright version
+      id: pw-version
+      run: echo "version=$(npx playwright --version | awk '{print $2}')" >> "$GITHUB_OUTPUT"
+
+    - name: Cache Playwright browsers
+      uses: actions/cache@v4
+      id: pw-cache
+      with:
+        path: ~/.cache/ms-playwright
+        key: playwright-${{ steps.pw-version.outputs.version }}
+
     - name: Install Playwright Browsers
+      if: steps.pw-cache.outputs.cache-hit != 'true'
       run: npx playwright install --with-deps
 
+    - name: Install Playwright deps only
+      if: steps.pw-cache.outputs.cache-hit == 'true'
+      run: npx playwright install-deps
+
     - name: Build project
       run: npm run build
       env:

package.json

@@ -8,7 +8,7 @@
 	"scripts": {
 		"build": "wp-scripts build",
 		"format": "biome format --write .",
-		"lint": "biome check .",
+		"lint": "biome check . && tsc --noEmit",
 		"lint:fix": "biome check --fix .",
 		"packages-update": "wp-scripts packages-update",
 		"plugin-zip": "wp-scripts plugin-zip",

playwright.config.ts

@@ -1,13 +1,15 @@
-import { existsSync, globSync } from 'node:fs';
+import { existsSync } from 'node:fs';
 import { basename, dirname, join } from 'node:path';
 import { defineConfig, devices } from '@playwright/test';
+import fg from 'fast-glob';
 
 const BASE_PORT = 9400;
 const WP_VERSION = process.env.WP_VERSION || 'latest';
 const RUN_PROJECT = process.env.RUN_PROJECT;
 
 // Discover spec files that have a blueprint.json in the same directory
-const specs = globSync('**/*.spec.ts', { ignore: ['node_modules/**'] })
+const specs = fg
+	.sync('**/*.spec.ts', { ignore: ['node_modules/**'] })
 	.map((spec) => {
 		const dir = dirname(spec);
 		const blueprint = join(dir, 'blueprint.json');
@@ -19,7 +21,16 @@ const specs = globSync('**/*.spec.ts', { ignore: ['node_modules/**'] })
 			blueprint,
 		};
 	})
-	.filter(Boolean);
+	.filter(
+		(
+			s,
+		): s is {
+			name: string;
+			dir: string;
+			spec: string;
+			blueprint: string;
+		} => s !== null,
+	);
 
 const active = RUN_PROJECT
 	? specs.filter((p) => p.name === RUN_PROJECT)

tests/helpers.ts

@@ -1,4 +1,9 @@
-import type { Admin, Editor, Page } from '@wordpress/e2e-test-utils-playwright';
+import type { Page } from '@playwright/test';
+import type {
+	Admin,
+	Editor,
+	RequestUtils,
+} from '@wordpress/e2e-test-utils-playwright';
 import { expect } from '@wordpress/e2e-test-utils-playwright';
 
 /** Get the block locator within the editor canvas */
@@ -147,7 +152,7 @@ export async function setupCodeBlock({
 	admin: Admin;
 	editor: Editor;
 	page: Page;
-	requestUtils: { login: () => Promise<void> };
+	requestUtils: RequestUtils;
 }) {
 	await requestUtils.login();
 	await admin.createNewPost({ title: 'Test post' });

tests/themes-and-languages/themes-and-languages.spec.ts

@@ -89,8 +89,8 @@ test.describe('Theme switching', () => {
 	test('Theme CTA can be removed via filter hook', async ({ page, editor }) => {
 		// Use wp.hooks.addFilter to replace themes with only Nord
 		await page.evaluate(() => {
-			// @ts-expect-error wp is global in WP admin
-			window.wp.hooks.addFilter(
+			// biome-ignore lint/suspicious/noExplicitAny: WP global
+			(window as any).wp.hooks.addFilter(
 				'blocks.codeBlockPro.themes',
 				'test/override',
 				() => ({
@@ -112,17 +112,10 @@ test.describe('Theme switching', () => {
 		await expect(ctaLinks).toHaveCount(0);
 	});
 
-	test('Random theme renders without errors', async ({ page, editor }) => {
+	test('Theme renders without errors', async ({ page, editor }) => {
 		await addCode(editor, 'const x = 1;');
-		await openPanel(page, 'Theme');
-		const themeButtons = page.locator('button[id^="code-block-pro-theme-"]');
-		const count = await themeButtons.count();
-		expect(count).toBeGreaterThan(0);
-		const randomIndex = Math.floor(Math.random() * Math.min(count, 10));
-		const btn = themeButtons.nth(randomIndex);
-		await btn.scrollIntoViewIfNeeded();
-		await btn.click();
-		// Should not show loading or error text
+		// Switch to a specific non-default theme
+		await setTheme(page, 'github-dark');
 		const block = getBlock(editor);
 		await expect(block).toContainText('const');
 		const blockHtml = await block.innerHTML();

tsconfig.json

@@ -13,8 +13,15 @@
 		"resolveJsonModule": true,
 		"isolatedModules": true,
 		"jsx": "preserve",
+		"types": ["node"],
 		"incremental": true
 	},
-	"include": ["src/**/*.ts", "src/**/*.tsx", "src/front/front.js"],
+	"include": [
+		"src/**/*.ts",
+		"src/**/*.tsx",
+		"src/front/front.js",
+		"playwright.config.ts",
+		"tests/**/*.ts"
+	],
 	"exclude": ["node_modules"]
 }