Unified · Split
| @@ -4,9 +4,7 @@ import { renderToStaticMarkup } from "react-dom/server"; · 3 unmodified lines | |||
| 4 | import { | 4 | import { |
| 5 | resolveEnvironmentIdentificationPillLabel, | 5 | resolveEnvironmentIdentificationPillLabel, |
| 6 | resolveSidebarStageBackdropVariant, | 6 | resolveSidebarStageBackdropVariant, |
| 7 | resolveSidebarStageFocusRingOffsetClass, | ||
| 8 | StageBackdropArt, | 7 | StageBackdropArt, |
| 9 | StageBackdropButtonArt, | ||
| 10 | } from "./SidebarStageBackdrop"; | 8 | } from "./SidebarStageBackdrop"; |
| 11 | 9 | ||
| 12 | describe("SidebarStageBackdrop", () => { | 10 | describe("SidebarStageBackdrop", () => { |
| @@ -24,15 +22,6 @@ describe("SidebarStageBackdrop", () => { · 11 unmodified lines | |||
| 24 | expect(resolveEnvironmentIdentificationPillLabel("Alpha")).toBeNull(); | 22 | expect(resolveEnvironmentIdentificationPillLabel("Alpha")).toBeNull(); |
| 25 | }); | 23 | }); |
| 26 | 24 | ||
| 27 | it("matches the focus-ring offset to each artwork palette", () => { | ||
| 28 | expect(resolveSidebarStageFocusRingOffsetClass("nightly")).toBe( | ||
| 29 | "focus-visible:ring-offset-(--stage-night-bottom)", | ||
| 30 | ); | ||
| 31 | expect(resolveSidebarStageFocusRingOffsetClass("dev")).toBe( | ||
| 32 | "focus-visible:ring-offset-(--stage-art-bottom)", | ||
| 33 | ); | ||
| 34 | }); | ||
| 35 | |||
| 36 | it.each(["nightly", "dev"] as const)( | 25 | it.each(["nightly", "dev"] as const)( |
| 37 | "uses unique SVG definition ids when %s artwork is rendered more than once", | 26 | "uses unique SVG definition ids when %s artwork is rendered more than once", |
| 38 | (variant) => { | 27 | (variant) => { |
| @@ -48,26 +37,4 @@ describe("SidebarStageBackdrop", () => { · 9 unmodified lines | |||
| 48 | expect(new Set(ids).size).toBe(ids.length); | 37 | expect(new Set(ids).size).toBe(ids.length); |
| 49 | }, | 38 | }, |
| 50 | ); | 39 | ); |
| 51 | |||
| 52 | it("paints each artwork variant with theme-owned color tokens", () => { | ||
| 53 | const nightlyMarkup = renderToStaticMarkup(<StageBackdropArt variant="nightly" />); | ||
| 54 | const devMarkup = renderToStaticMarkup(<StageBackdropArt variant="dev" />); | ||
| 55 | |||
| 56 | expect(nightlyMarkup).toContain("var(--stage-night-bottom)"); | ||
| 57 | expect(nightlyMarkup).toContain("var(--stage-night-line)"); | ||
| 58 | expect(devMarkup).toContain("var(--stage-art-bottom)"); | ||
| 59 | expect(devMarkup).toContain("var(--stage-art-line)"); | ||
| 60 | expect(nightlyMarkup).not.toMatch(/#[0-9a-f]{3,8}/i); | ||
| 61 | expect(devMarkup).not.toMatch(/#[0-9a-f]{3,8}/i); | ||
| 62 | }); | ||
| 63 | |||
| 64 | it.each([ | ||
| 65 | ["nightly", "96 0 8192 96"], | ||
| 66 | ["dev", "64 0 8192 96"], | ||
| 67 | ] as const)("uses the compact %s crop inside the send button", (variant, viewBox) => { | ||
| 68 | const markup = renderToStaticMarkup(<StageBackdropButtonArt variant={variant} />); | ||
| 69 | |||
| 70 | expect(markup).toContain(`viewBox="${viewBox}"`); | ||
| 71 | expect(markup).toContain(`stage-${variant === "dev" ? "blueprint" : "nightly"}`); | ||
| 72 | }); | ||
| 73 | }); | 40 | }); |