|
1 | 1 | import { assert, describe, test } from "@rezi-ui/testkit"; |
2 | | -import { darkTheme } from "../../theme/presets.js"; |
| 2 | +import { |
| 3 | + darkTheme, |
| 4 | + dimmedTheme, |
| 5 | + draculaTheme, |
| 6 | + highContrastTheme, |
| 7 | + lightTheme, |
| 8 | + nordTheme, |
| 9 | +} from "../../theme/presets.js"; |
3 | 10 | import { compileTheme } from "../../theme/theme.js"; |
4 | 11 | import { ui } from "../../widgets/ui.js"; |
5 | 12 | import { type DrawOp, renderOps } from "./recipeRendering.test-utils.js"; |
6 | 13 |
|
7 | | -const dsTheme = compileTheme(darkTheme); |
| 14 | +const DS_THEMES = [ |
| 15 | + ["dark", compileTheme(darkTheme)], |
| 16 | + ["light", compileTheme(lightTheme)], |
| 17 | + ["dimmed", compileTheme(dimmedTheme)], |
| 18 | + ["high-contrast", compileTheme(highContrastTheme)], |
| 19 | + ["nord", compileTheme(nordTheme)], |
| 20 | + ["dracula", compileTheme(draculaTheme)], |
| 21 | +] as const; |
8 | 22 |
|
9 | 23 | function findTextOp(ops: readonly DrawOp[], text: string): DrawOp | undefined { |
10 | 24 | return ops.find((op) => op.kind === "drawText" && op.text.includes(text)); |
11 | 25 | } |
12 | 26 |
|
13 | 27 | describe("radioGroup recipe rendering", () => { |
14 | 28 | test("renders disabled options with disabled recipe colors", () => { |
15 | | - const ops = renderOps( |
16 | | - ui.radioGroup({ |
17 | | - id: "plans", |
18 | | - value: "pro", |
19 | | - options: [ |
20 | | - { value: "free", label: "Free" }, |
21 | | - { value: "pro", label: "Pro", disabled: true }, |
22 | | - { value: "enterprise", label: "Enterprise" }, |
23 | | - ], |
24 | | - }), |
25 | | - { |
26 | | - viewport: { cols: 40, rows: 4 }, |
27 | | - theme: dsTheme, |
28 | | - }, |
29 | | - ); |
| 29 | + for (const [name, theme] of DS_THEMES) { |
| 30 | + const ops = renderOps( |
| 31 | + ui.radioGroup({ |
| 32 | + id: "plans", |
| 33 | + value: "pro", |
| 34 | + options: [ |
| 35 | + { value: "free", label: "Free" }, |
| 36 | + { value: "pro", label: "Pro", disabled: true }, |
| 37 | + { value: "enterprise", label: "Enterprise" }, |
| 38 | + ], |
| 39 | + }), |
| 40 | + { |
| 41 | + viewport: { cols: 40, rows: 4 }, |
| 42 | + theme, |
| 43 | + }, |
| 44 | + ); |
30 | 45 |
|
31 | | - const label = findTextOp(ops, "Pro"); |
32 | | - assert.ok(label && label.kind === "drawText"); |
33 | | - if (!label || label.kind !== "drawText") return; |
| 46 | + const label = findTextOp(ops, "Pro"); |
| 47 | + assert.ok(label && label.kind === "drawText", `${name} theme should render disabled label`); |
| 48 | + if (!label || label.kind !== "drawText") continue; |
34 | 49 |
|
35 | | - const indicator = ops.find( |
36 | | - (op): op is Extract<DrawOp, { kind: "drawText" }> => |
37 | | - op.kind === "drawText" && op.text === "(o)" && op.y === label.y, |
38 | | - ); |
39 | | - assert.ok(indicator, "disabled selected option indicator should render"); |
40 | | - if (!indicator) return; |
| 50 | + const indicator = ops.find( |
| 51 | + (op): op is Extract<DrawOp, { kind: "drawText" }> => |
| 52 | + op.kind === "drawText" && op.text === "(o)" && op.y === label.y, |
| 53 | + ); |
| 54 | + assert.ok(indicator, `${name} theme should render disabled selected indicator`); |
| 55 | + if (!indicator) continue; |
41 | 56 |
|
42 | | - assert.deepEqual(indicator.style?.fg, dsTheme.colors["disabled.fg"]); |
43 | | - assert.deepEqual(label.style?.fg, dsTheme.colors["disabled.fg"]); |
| 57 | + assert.deepEqual(indicator.style?.fg, theme.colors["disabled.fg"]); |
| 58 | + assert.deepEqual(label.style?.fg, theme.colors["disabled.fg"]); |
| 59 | + } |
44 | 60 | }); |
45 | 61 | }); |
0 commit comments