fix(webview): swap visual regression target off deprecated toolkit

Author: edelauna

webview-ui/playwright-ct.config.ts

@@ -46,6 +46,7 @@ export default defineConfig({
 			optimizeDeps: {
 				exclude: ["@vscode/codicons"],
 			},
+			publicDir: path.resolve(dirname, "../src/assets/images"),
 		},
 		viewport: { width: 520, height: 360 },
 		deviceScaleFactor: 1,

webview-ui/playwright/index.tsx

@@ -2,9 +2,8 @@ import "./vscode-theme-dark.css"
 import "@vscode/codicons/dist/codicon.css"
 import "../src/index.css"
 
-// Eagerly load the toolkit into the CT entry chunk so lazy component chunks
-// reference already-registered custom elements. Splitting the toolkit into a
-// separate lazy chunk triggers a Vite 8/Rolldown scope-hoist bug that leaves
-// `FoundationElement` in a TDZ (`FoundationElement$N is not defined`).
-// See vitejs/vite#22583 and vscode-webview-ui-toolkit#561 (deprecated).
-import "@vscode/webview-ui-toolkit/react"
+// Components read `window.IMAGES_BASE_URI` at mount time to resolve extension
+// image assets. Under Playwright CT the extension host isn't present, so seed
+// it to serve from the CT bundle root (mapped to src/assets/images via
+// `publicDir` in playwright-ct.config.ts).
+;(window as unknown as { IMAGES_BASE_URI: string }).IMAGES_BASE_URI = ""

webview-ui/src/components/chat/__tests__/ProgressIndicator.visual.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+import { expect, test } from "@playwright/experimental-ct-react"
+
+import RooHero from "../RooHero"
+
+test("renders the welcome hero in the VS Code dark theme", async ({ mount }) => {
+	const component = await mount(<RooHero />)
+
+	await component.evaluate(async () => {
+		await document.fonts.ready
+		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+	})
+
+	await expect(component).toHaveScreenshot("zoo-hero-dark.png")
+})