test(webview): cover codex speed themes

Author: WebMad

webview-ui/playwright/index.tsx

@@ -1,6 +1,7 @@
 import "./vscode-theme-dark.css"
 import "@vscode/codicons/dist/codicon.css"
 import "../src/index.css"
+import "./vscode-theme-light.css"
 
 // 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

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

@@ -0,0 +1,35 @@
+.vscode-light {
+	color-scheme: light;
+	--vscode-foreground: #3b3b3b;
+	--vscode-disabledForeground: #61616180;
+	--vscode-descriptionForeground: #717171;
+	--vscode-errorForeground: #a1260d;
+	--vscode-focusBorder: #0090f1;
+	--vscode-editor-foreground: #333333;
+	--vscode-editor-background: #ffffff;
+	--vscode-button-foreground: #ffffff;
+	--vscode-button-background: #007acc;
+	--vscode-button-hoverBackground: #0062a3;
+	--vscode-dropdown-foreground: #3b3b3b;
+	--vscode-dropdown-background: #ffffff;
+	--vscode-dropdown-border: #cecece;
+	--vscode-input-foreground: #3b3b3b;
+	--vscode-input-background: #ffffff;
+	--vscode-input-border: #cecece;
+	--vscode-list-hoverForeground: #3b3b3b;
+	--vscode-list-hoverBackground: #e8e8e8;
+	--vscode-list-focusBackground: #d6ebff;
+	--vscode-list-activeSelectionBackground: #0060c0;
+	--vscode-list-activeSelectionForeground: #ffffff;
+	--vscode-toolbar-hoverBackground: #e8e8e8;
+	--vscode-widget-border: #d4d4d4;
+	--vscode-widget-shadow: #00000029;
+	--vscode-menu-foreground: #3b3b3b;
+	--vscode-menu-background: #ffffff;
+	--vscode-editorHoverWidget-foreground: #3b3b3b;
+	--vscode-editorHoverWidget-background: #f8f8f8;
+	--vscode-editorHoverWidget-border: #c8c8c8;
+	--vscode-scrollbarSlider-background: #64646466;
+	--vscode-scrollbarSlider-hoverBackground: #64646499;
+	--vscode-scrollbarSlider-activeBackground: #00000099;
+}

webview-ui/src/components/settings/providers/__tests__/OpenAICodex.visual.fixture.tsx

@@ -1,6 +1,11 @@
 /* v8 ignore file -- Playwright component fixture is covered by the visual test. */
 import React from "react"
 
+import {
+	OpenAiCodexServiceTier,
+	type OpenAiCodexServiceTier as OpenAiCodexServiceTierValue,
+} from "@roo-code/types/model"
+
 import { TranslationContext } from "@src/i18n/TranslationContext"
 import { TooltipProvider } from "@src/components/ui/tooltip"
 import { OpenAICodexSpeedSelector } from "../OpenAICodexSpeedSelector"
@@ -14,15 +19,19 @@ const translations: Record<string, string> = {
 	"settings:openAiCodexSpeed.fast": "Fast (1.5x speed, increased usage)",
 }
 
-export const OpenAICodexFixture = () => (
+interface OpenAICodexFixtureProps {
+	value?: OpenAiCodexServiceTierValue
+}
+
+export const OpenAICodexFixture = ({ value = OpenAiCodexServiceTier.Default }: OpenAICodexFixtureProps) => (
 	<TranslationContext.Provider
 		value={{
 			t: (key) => translations[key] ?? key,
 			i18n: null as unknown as typeof import("../../../../i18n/setup").default,
 		}}>
 		<TooltipProvider>
 			<div className="w-[480px] bg-vscode-editor-background p-4 text-vscode-foreground">
-				<OpenAICodexSpeedSelector onValueChange={() => {}} />
+				<OpenAICodexSpeedSelector value={value} onValueChange={() => {}} />
 			</div>
 		</TooltipProvider>
 	</TranslationContext.Provider>

webview-ui/src/components/settings/providers/__tests__/OpenAICodex.visual.tsx

@@ -1,16 +1,77 @@
 import React from "react"
 
+import { OpenAiCodexServiceTier } from "@roo-code/types/model"
+
 import { expect, test } from "../../../../../playwright/coverage-fixture"
 import { OpenAICodexFixture } from "./OpenAICodex.visual.fixture"
 
-test("renders the OpenAI Codex speed selector in the VS Code dark theme", async ({ mount }) => {
-	const component = await mount(<OpenAICodexFixture />)
-	const selector = component.getByTestId("openai-codex-service-tier")
+const themes = [
+	{
+		name: "dark",
+		bodyClass: "vscode-dark",
+		themeId: "Default Dark Modern",
+		editorBackground: "#1e1e1e",
+		dropdownBackground: "#3c3c3c",
+		triggerBackground: "rgb(60, 60, 60)",
+	},
+	{
+		name: "light",
+		bodyClass: "vscode-light",
+		themeId: "Default Light Modern",
+		editorBackground: "#ffffff",
+		dropdownBackground: "#ffffff",
+		triggerBackground: "rgb(255, 255, 255)",
+	},
+] as const
+
+const tiers = [
+	{ name: "standard", value: OpenAiCodexServiceTier.Default },
+	{ name: "priority", value: OpenAiCodexServiceTier.Priority },
+] as const
+
+for (const theme of themes) {
+	for (const tier of tiers) {
+		test(`renders the ${tier.name} OpenAI Codex speed in the VS Code ${theme.name} theme`, async ({ mount }) => {
+			const component = await mount(<OpenAICodexFixture value={tier.value} />)
+			const selector = component.getByTestId("openai-codex-service-tier")
+
+			await selector.evaluate((element, { bodyClass, themeId }) => {
+				const { document } = element.ownerDocument.defaultView!
+
+				document.documentElement.className = bodyClass
+				document.body.className = bodyClass
+				document.body.dataset.vscodeThemeId = themeId
+			}, theme)
+			await expect
+				.poll(() =>
+					selector.evaluate((element) => {
+						const body = element.ownerDocument.body
+						const styles = getComputedStyle(body)
+						const trigger = element.querySelector("button")!
+
+						return {
+							documentClass: element.ownerDocument.documentElement.className,
+							bodyClass: body.className,
+							editorBackground: styles.getPropertyValue("--vscode-editor-background").trim(),
+							dropdownBackground: styles.getPropertyValue("--vscode-dropdown-background").trim(),
+							triggerBackground: getComputedStyle(trigger).backgroundColor,
+						}
+					}),
+				)
+				.toEqual({
+					documentClass: theme.bodyClass,
+					bodyClass: theme.bodyClass,
+					editorBackground: theme.editorBackground,
+					dropdownBackground: theme.dropdownBackground,
+					triggerBackground: theme.triggerBackground,
+				})
 
-	await selector.evaluate(async () => {
-		await document.fonts.ready
-		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
-	})
+			await selector.evaluate(async () => {
+				await document.fonts.ready
+				await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+			})
 
-	await expect(selector).toHaveScreenshot("openai-codex-speed-selector-dark.png")
-})
+			await expect(selector).toHaveScreenshot(`openai-codex-speed-selector-${tier.name}-${theme.name}.png`)
+		})
+	}
+}