test(webview-ui): add visual snapshot for TelemetryBanner

Author: edelauna

webview-ui/playwright/vscode-theme-dark.css

@@ -87,3 +87,27 @@ body {
 #root {
 	padding: 16px;
 }
+
+/* The @vscode/webview-ui-toolkit/react mock (aliased in for CT, same as Vitest) renders
+   VSCodeButton as a bare <button appearance="primary|secondary">, since that mock only needs
+   to be functional for behavior tests. Style it here so button screenshots match VS Code's
+   real appearance instead of an unstyled browser button. */
+button[appearance="primary"],
+button[appearance="secondary"] {
+	border: none;
+	border-radius: 2px;
+	padding: 4px 14px;
+	font-family: var(--vscode-font-family);
+	font-size: var(--vscode-font-size);
+	cursor: pointer;
+}
+
+button[appearance="primary"] {
+	color: var(--vscode-button-foreground);
+	background: var(--vscode-button-background);
+}
+
+button[appearance="secondary"] {
+	color: var(--vscode-button-secondaryForeground);
+	background: var(--vscode-button-secondaryBackground);
+}

webview-ui/src/components/common/__tests__/TelemetryBanner.visual.fixture.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import i18next from "i18next"
+import { I18nextProvider, initReactI18next } from "react-i18next"
+
+import { TranslationContext } from "@src/i18n/TranslationContext"
+import TelemetryBanner from "../TelemetryBanner"
+
+const translations: Record<string, string> = {
+	"welcome:telemetry.helpImprove": "Help Improve Zoo Code",
+	"welcome:telemetry.helpImproveMessage":
+		"Zoo Code collects error and usage data, linked to a per-install identifier, to help us fix bugs and improve the extension. This telemetry does not collect your code or prompts. You can turn this off in <settingsLink>settings</settingsLink>.",
+	"welcome:telemetry.accept": "Accept",
+	"welcome:telemetry.decline": "Decline",
+}
+
+// Trans reads from its own react-i18next instance rather than the useAppTranslation
+// context, so it needs a real (if minimal) i18next init to resolve helpImproveMessage
+// and the settingsLink interpolation instead of rendering nothing.
+const visualTestI18n = i18next.createInstance()
+void visualTestI18n.use(initReactI18next).init({
+	lng: "en",
+	fallbackLng: "en",
+	ns: ["welcome"],
+	defaultNS: "welcome",
+	resources: {
+		en: {
+			welcome: {
+				telemetry: {
+					helpImprove: translations["welcome:telemetry.helpImprove"],
+					helpImproveMessage: translations["welcome:telemetry.helpImproveMessage"],
+					accept: translations["welcome:telemetry.accept"],
+					decline: translations["welcome:telemetry.decline"],
+				},
+			},
+		},
+	},
+	interpolation: { escapeValue: false },
+})
+
+export const TelemetryBannerFixture = () => (
+	<I18nextProvider i18n={visualTestI18n}>
+		<TranslationContext.Provider
+			value={{
+				t: (key) => translations[key] ?? key,
+				i18n: null as unknown as typeof import("../../../i18n/setup").default,
+			}}>
+			<TelemetryBanner />
+		</TranslationContext.Provider>
+	</I18nextProvider>
+)

webview-ui/src/components/common/__tests__/TelemetryBanner.visual.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+
+import { expect, test } from "../../../../playwright/coverage-fixture"
+import { TelemetryBannerFixture } from "./TelemetryBanner.visual.fixture"
+
+test("renders the telemetry consent banner in the VS Code dark theme", async ({ mount }) => {
+	const component = await mount(<TelemetryBannerFixture />)
+
+	await component.evaluate(async () => {
+		await document.fonts.ready
+		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+	})
+
+	await expect(component).toHaveScreenshot("telemetry-banner-dark.png")
+})