Skip to content

Commit 1977341

Browse files
WebMadWebMad
committed
test(webview): add Codex speed selector visual coverage
1 parent 69e5851 commit 1977341

5 files changed

Lines changed: 92 additions & 38 deletions

File tree

‎webview-ui/src/components/settings/providers/OpenAICodex.tsx‎

Lines changed: 6 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,18 @@ import React from "react"
22

33
import {
44
OPEN_AI_CODEX_SERVICE_TIER_KEY,
5-
OpenAiCodexServiceTier,
65
type ProviderSettings,
76
openAiCodexDefaultModelId,
87
openAiCodexModels,
98
} from "@roo-code/types"
109

1110
import { useAppTranslation } from "@src/i18n/TranslationContext"
12-
import {
13-
Button,
14-
Select,
15-
SelectContent,
16-
SelectItem,
17-
SelectTrigger,
18-
SelectValue,
19-
StandardTooltip,
20-
} from "@src/components/ui"
11+
import { Button } from "@src/components/ui"
2112
import { vscode } from "@src/utils/vscode"
2213

2314
import { ModelPicker } from "../ModelPicker"
2415
import { OpenAICodexRateLimitDashboard } from "./OpenAICodexRateLimitDashboard"
16+
import { OpenAICodexSpeedSelector } from "./OpenAICodexSpeedSelector"
2517

2618
interface OpenAICodexProps {
2719
apiConfiguration: ProviderSettings
@@ -81,34 +73,10 @@ export const OpenAICodex: React.FC<OpenAICodexProps> = ({
8173
hidePricing
8274
/>
8375

84-
<div className="flex flex-col gap-1" data-testid="openai-codex-service-tier">
85-
<div className="flex items-center gap-1">
86-
<label className="block font-medium">{t("settings:openAiCodexSpeed.label")}</label>
87-
<StandardTooltip content={t("settings:openAiCodexSpeed.tooltip")}>
88-
<i className="codicon codicon-info text-vscode-descriptionForeground text-xs" />
89-
</StandardTooltip>
90-
</div>
91-
<Select
92-
value={apiConfiguration[OPEN_AI_CODEX_SERVICE_TIER_KEY] ?? OpenAiCodexServiceTier.Default}
93-
onValueChange={(value) =>
94-
setApiConfigurationField(
95-
OPEN_AI_CODEX_SERVICE_TIER_KEY,
96-
value as ProviderSettings[typeof OPEN_AI_CODEX_SERVICE_TIER_KEY],
97-
)
98-
}>
99-
<SelectTrigger className="w-full">
100-
<SelectValue placeholder={t("settings:common.select")} />
101-
</SelectTrigger>
102-
<SelectContent>
103-
<SelectItem value={OpenAiCodexServiceTier.Default}>
104-
{t("settings:openAiCodexSpeed.standard")}
105-
</SelectItem>
106-
<SelectItem value={OpenAiCodexServiceTier.Priority}>
107-
{t("settings:openAiCodexSpeed.fast")}
108-
</SelectItem>
109-
</SelectContent>
110-
</Select>
111-
</div>
76+
<OpenAICodexSpeedSelector
77+
value={apiConfiguration[OPEN_AI_CODEX_SERVICE_TIER_KEY]}
78+
onValueChange={(value) => setApiConfigurationField(OPEN_AI_CODEX_SERVICE_TIER_KEY, value)}
79+
/>
11280
</div>
11381
)
11482
}

‎webview-ui/src/components/settings/providers/OpenAICodexSpeedSelector.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from "react"
2+
3+
import {
4+
OpenAiCodexServiceTier,
5+
type OpenAiCodexServiceTier as OpenAiCodexServiceTierValue,
6+
} from "@roo-code/types/model"
7+
8+
import { useAppTranslation } from "@src/i18n/TranslationContext"
9+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StandardTooltip } from "@src/components/ui"
10+
11+
interface OpenAICodexSpeedSelectorProps {
12+
value?: OpenAiCodexServiceTierValue
13+
onValueChange: (value: OpenAiCodexServiceTierValue) => void
14+
}
15+
16+
export const OpenAICodexSpeedSelector: React.FC<OpenAICodexSpeedSelectorProps> = ({ value, onValueChange }) => {
17+
const { t } = useAppTranslation()
18+
19+
return (
20+
<div className="flex flex-col gap-1" data-testid="openai-codex-service-tier">
21+
<div className="flex items-center gap-1">
22+
<label className="block font-medium">{t("settings:openAiCodexSpeed.label")}</label>
23+
<StandardTooltip content={t("settings:openAiCodexSpeed.tooltip")}>
24+
<i className="codicon codicon-info text-vscode-descriptionForeground text-xs" />
25+
</StandardTooltip>
26+
</div>
27+
<Select value={value ?? OpenAiCodexServiceTier.Default} onValueChange={onValueChange}>
28+
<SelectTrigger className="w-full">
29+
<SelectValue placeholder={t("settings:common.select")} />
30+
</SelectTrigger>
31+
<SelectContent>
32+
<SelectItem value={OpenAiCodexServiceTier.Default}>
33+
{t("settings:openAiCodexSpeed.standard")}
34+
</SelectItem>
35+
<SelectItem value={OpenAiCodexServiceTier.Priority}>
36+
{t("settings:openAiCodexSpeed.fast")}
37+
</SelectItem>
38+
</SelectContent>
39+
</Select>
40+
</div>
41+
)
42+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from "react"
2+
3+
import { TranslationContext } from "@src/i18n/TranslationContext"
4+
import { TooltipProvider } from "@src/components/ui/tooltip"
5+
import { OpenAICodexSpeedSelector } from "../OpenAICodexSpeedSelector"
6+
7+
const translations: Record<string, string> = {
8+
"settings:common.select": "Select",
9+
"settings:openAiCodexSpeed.label": "Speed",
10+
"settings:openAiCodexSpeed.tooltip":
11+
"Fast uses Codex priority processing for about 1.5x speed and consumes more subscription quota.",
12+
"settings:openAiCodexSpeed.standard": "Standard",
13+
"settings:openAiCodexSpeed.fast": "Fast (1.5x speed, increased usage)",
14+
}
15+
16+
export const OpenAICodexFixture = () => (
17+
<TranslationContext.Provider
18+
value={{
19+
t: (key) => translations[key] ?? key,
20+
i18n: null as unknown as typeof import("../../../../i18n/setup").default,
21+
}}>
22+
<TooltipProvider>
23+
<div className="w-[480px] bg-vscode-editor-background p-4 text-vscode-foreground">
24+
<OpenAICodexSpeedSelector onValueChange={() => {}} />
25+
</div>
26+
</TooltipProvider>
27+
</TranslationContext.Provider>
28+
)

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react"
2+
3+
import { expect, test } from "../../../../../playwright/coverage-fixture"
4+
import { OpenAICodexFixture } from "./OpenAICodex.visual.fixture"
5+
6+
test("renders the OpenAI Codex speed selector in the VS Code dark theme", async ({ mount }) => {
7+
const component = await mount(<OpenAICodexFixture />)
8+
const selector = component.getByTestId("openai-codex-service-tier")
9+
10+
await selector.evaluate(async () => {
11+
await document.fonts.ready
12+
await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
13+
})
14+
15+
await expect(selector).toHaveScreenshot("openai-codex-speed-selector-dark.png")
16+
})

‎webview-ui/src/components/settings/providers/__tests__/__screenshots__/openai-codex-speed-selector-dark.png‎

2.99 KB
Loading

0 commit comments

Comments
 (0)