layout-sidebar.test.ts
typescript
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171
fix(layout): two-column sticky sidebar scroll across all pa…
Human
minor
⚠ breaking
8 days ago
| 1 | import { describe, it, expect, beforeAll } from "vitest"; |
| 2 | import { execSync } from "node:child_process"; |
| 3 | import { readFileSync } from "node:fs"; |
| 4 | import path from "node:path"; |
| 5 | import { fileURLToPath } from "node:url"; |
| 6 | |
| 7 | const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../.."); |
| 8 | const appCssPath = path.join(root, "musehub/templates/musehub/static/app.css"); |
| 9 | |
| 10 | function compiledCss(): string { |
| 11 | return readFileSync(appCssPath, "utf8"); |
| 12 | } |
| 13 | |
| 14 | describe("layout sidebar compiled CSS (musehub#84)", () => { |
| 15 | beforeAll(() => { |
| 16 | execSync("npm run build:css", { cwd: root, stdio: "pipe" }); |
| 17 | }); |
| 18 | |
| 19 | it("SIDEBAR_06: app.css contains no 100vh", () => { |
| 20 | expect(compiledCss()).not.toMatch(/100vh/); |
| 21 | }); |
| 22 | |
| 23 | it("SIDEBAR_06: app.css uses 100dvh for viewport-bound panels", () => { |
| 24 | expect(compiledCss()).toMatch(/100dvh/); |
| 25 | }); |
| 26 | |
| 27 | it("SIDEBAR_01: layout-two-col utility includes min-height:0", () => { |
| 28 | expect(compiledCss()).toMatch(/\.layout-two-col\{[^}]*min-height:0/); |
| 29 | }); |
| 30 | |
| 31 | it("SIDEBAR_02: layout-sidebar utility is sticky and scrollable", () => { |
| 32 | const css = compiledCss(); |
| 33 | expect(css).toMatch(/\.layout-sidebar\{[^}]*position:sticky/); |
| 34 | expect(css).toMatch(/\.layout-sidebar\{[^}]*overflow-y:auto/); |
| 35 | expect(css).toMatch(/\.layout-sidebar\{[^}]*max-height:calc\(100dvh/); |
| 36 | }); |
| 37 | |
| 38 | it("SIDEBAR_03: layout-sidebar resets to static flow below 900px", () => { |
| 39 | expect(compiledCss()).toMatch( |
| 40 | /@media\s*\(max-width:\s*900px\)\s*\{[^}]*\.layout-sidebar\{[^}]*position:static/, |
| 41 | ); |
| 42 | }); |
| 43 | |
| 44 | it("SIDEBAR_05: sticky sidebars use --sticky-offset with header fallback", () => { |
| 45 | const css = compiledCss(); |
| 46 | expect(css).toMatch(/top:var\(--sticky-offset,\s*var\(--header-height\)\)/); |
| 47 | expect(css).toMatch(/100dvh - var\(--sticky-offset,\s*var\(--header-height\)\)/); |
| 48 | }); |
| 49 | }); |
File History
1 commit
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171
fix(layout): two-column sticky sidebar scroll across all pa…
Human
minor
⚠
8 days ago