fix(webview): guard telemetry queue and fix visual test CI failures

Author: edelauna

src/core/webview/webviewMessageHandler.ts

@@ -659,6 +659,10 @@ export const webviewMessageHandler = async (
 			telemetrySettingQueue = telemetrySettingQueue
 				.catch(() => undefined)
 				.then(async () => {
+					if (!TelemetryService.hasInstance()) {
+						return
+					}
+
 					const telemetrySetting = getGlobalState("telemetrySetting") || "unset"
 					TelemetryService.instance.updateTelemetryState(
 						isTelemetryOptedIn(telemetrySetting) && vscode.env.isTelemetryEnabled,

webview-ui/src/components/chat/__tests__/ChatView.scroll-debug-repro.spec.tsx

@@ -92,6 +92,9 @@ vi.mock("./WorktreeSelector", () => ({ WorktreeSelector: () => null }))
 
 vi.mock("@vscode/webview-ui-toolkit/react", () => ({
 	VSCodeLink: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+	VSCodeButton: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
+		<button onClick={onClick}>{children}</button>
+	),
 }))
 
 vi.mock("@/components/ui", async (importOriginal) => {

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

@@ -1,47 +1,15 @@
 import React from "react"
-import i18next from "i18next"
-import { I18nextProvider, initReactI18next } from "react-i18next"
+import { I18nextProvider } 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 },
-})
+import { visualTestI18n, visualTestTranslations } from "./TelemetryBanner.visual.i18n"
 
 export const TelemetryBannerFixture = () => (
 	<I18nextProvider i18n={visualTestI18n}>
 		<TranslationContext.Provider
 			value={{
-				t: (key) => translations[key] ?? key,
+				t: (key) => visualTestTranslations[key] ?? key,
 				i18n: null as unknown as typeof import("../../../i18n/setup").default,
 			}}>
 			<TelemetryBanner />

webview-ui/src/components/common/__tests__/TelemetryBanner.visual.i18n.ts

@@ -0,0 +1,36 @@
+import i18next from "i18next"
+import { initReactI18next } from "react-i18next"
+
+export const visualTestTranslations: 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. init() returns a
+// promise even for inline resources, so callers must await it before mounting.
+export const visualTestI18n = i18next.createInstance()
+
+export const visualTestI18nReady = visualTestI18n.use(initReactI18next).init({
+	lng: "en",
+	fallbackLng: "en",
+	ns: ["welcome"],
+	defaultNS: "welcome",
+	resources: {
+		en: {
+			welcome: {
+				telemetry: {
+					helpImprove: visualTestTranslations["welcome:telemetry.helpImprove"],
+					helpImproveMessage: visualTestTranslations["welcome:telemetry.helpImproveMessage"],
+					accept: visualTestTranslations["welcome:telemetry.accept"],
+					decline: visualTestTranslations["welcome:telemetry.decline"],
+				},
+			},
+		},
+	},
+	interpolation: { escapeValue: false },
+})

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

@@ -2,8 +2,11 @@ import React from "react"
 
 import { expect, test } from "../../../../playwright/coverage-fixture"
 import { TelemetryBannerFixture } from "./TelemetryBanner.visual.fixture"
+import { visualTestI18nReady } from "./TelemetryBanner.visual.i18n"
 
 test("renders the telemetry consent banner in the VS Code dark theme", async ({ mount }) => {
+	await visualTestI18nReady
+
 	const component = await mount(<TelemetryBannerFixture />)
 
 	await component.evaluate(async () => {