test(webview): combine codex speed snapshots

Author: WebMad

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

@@ -1,10 +1,7 @@
 /* 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 { OpenAiCodexServiceTier } from "@roo-code/types/model"
 
 import { TranslationContext } from "@src/i18n/TranslationContext"
 import { TooltipProvider } from "@src/components/ui/tooltip"
@@ -19,19 +16,16 @@ const translations: Record<string, string> = {
 	"settings:openAiCodexSpeed.fast": "Fast (1.5x speed, increased usage)",
 }
 
-interface OpenAICodexFixtureProps {
-	value?: OpenAiCodexServiceTierValue
-}
-
-export const OpenAICodexFixture = ({ value = OpenAiCodexServiceTier.Default }: OpenAICodexFixtureProps) => (
+export const OpenAICodexFixture = () => (
 	<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 value={value} onValueChange={() => {}} />
+			<div className="flex w-[480px] flex-col gap-4 bg-vscode-editor-background p-4 text-vscode-foreground">
+				<OpenAICodexSpeedSelector value={OpenAiCodexServiceTier.Default} onValueChange={() => {}} />
+				<OpenAICodexSpeedSelector value={OpenAiCodexServiceTier.Priority} onValueChange={() => {}} />
 			</div>
 		</TooltipProvider>
 	</TranslationContext.Provider>

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

@@ -1,7 +1,5 @@
 import React from "react"
 
-import { OpenAiCodexServiceTier } from "@roo-code/types/model"
-
 import { expect, test } from "../../../../../playwright/coverage-fixture"
 import { OpenAICodexFixture } from "./OpenAICodex.visual.fixture"
 
@@ -24,54 +22,49 @@ const themes = [
 	},
 ] 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")
+	test(`renders both OpenAI Codex speeds in the VS Code ${theme.name} theme`, async ({ mount }) => {
+		const component = await mount(<OpenAICodexFixture />)
+		const selectors = component.getByTestId("openai-codex-service-tier")
+		const selector = selectors.first()
 
-			await selector.evaluate((element, { bodyClass, themeId }) => {
-				const { document } = element.ownerDocument.defaultView!
+		await expect(selectors).toHaveCount(2)
+		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")!
+			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()))
+					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 expect(selector).toHaveScreenshot(`openai-codex-speed-selector-${tier.name}-${theme.name}.png`)
+		await component.evaluate(async () => {
+			await document.fonts.ready
+			await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
 		})
-	}
+
+		await expect(component).toHaveScreenshot(`openai-codex-speed-selector-states-${theme.name}.png`)
+	})
 }