| ... | @@ -1,3 +1,6 @@ | ... | @@ -1,3 +1,6 @@ |
| | 1 | // @effect-diagnostics nodeBuiltinImport:off - Regression coverage compares shipped CSS with the sidebar width contract. |
| | 2 | import * as NodeFS from "node:fs"; |
| | 3 | |
| 1 | import { describe, expect, it } from "vite-plus/test"; | 4 | import { describe, expect, it } from "vite-plus/test"; |
| 2 | | 5 | |
| 3 | import { | 6 | import { |
| ... | @@ -31,4 +34,22 @@ describe("thread sidebar width", () => { | ... | @@ -31,4 +34,22 @@ describe("thread sidebar width", () => { |
| 31 | it("keeps the sidebar minimum when the whole layout is narrower than its minimums", () => { | 34 | it("keeps the sidebar minimum when the whole layout is narrower than its minimums", () => { |
| 32 | expect(resolveInitialThreadSidebarWidth(900, 700)).toBe(THREAD_SIDEBAR_MIN_WIDTH); | 35 | expect(resolveInitialThreadSidebarWidth(900, 700)).toBe(THREAD_SIDEBAR_MIN_WIDTH); |
| 33 | }); | 36 | }); |
| | 37 | |
| | 38 | it("shows the desktop wordmark across the sidebar's full legal width range", () => { |
| | 39 | const sidebarStyles = NodeFS.readFileSync(new URL("../index.css", import.meta.url), "utf8"); |
| | 40 | const desktopHeaderStyles = sidebarStyles.slice( |
| | 41 | sidebarStyles.indexOf("@media (min-width: 48rem)"), |
| | 42 | sidebarStyles.indexOf("/* Stage-channel sidebar art"), |
| | 43 | ); |
| | 44 | const stageLabelThreshold = desktopHeaderStyles.match( |
| | 45 | /@container sidebar-header \(min-width: ([\d.]+)rem\) \{\s*\.sidebar-brand-stage \{\s*display: inline-flex;/, |
| | 46 | )?.[1]; |
| | 47 | |
| | 48 | expect(sidebarStyles).toMatch(/\.sidebar-brand \{\s*display: none;/); |
| | 49 | expect(desktopHeaderStyles).toMatch( |
| | 50 | /@media \(min-width: 48rem\) \{\s*\.sidebar-brand \{\s*display: flex;/, |
| | 51 | ); |
| | 52 | expect(THREAD_SIDEBAR_MIN_WIDTH).toBe(13 * 16); |
| | 53 | expect(Number(stageLabelThreshold) * 16).toBeGreaterThan(THREAD_SIDEBAR_MIN_WIDTH); |
| | 54 | }); |
| 34 | }); | 55 | }); |