| 1 | // Run: tsx src/__tests__/settings-responsive-layout.test.ts |
| 2 | |
| 3 | import { readFileSync } from "node:fs"; |
| 4 | import { dirname, resolve } from "node:path"; |
| 5 | import { fileURLToPath } from "node:url"; |
| 6 | |
| 7 | const testDir = dirname(fileURLToPath(import.meta.url)); |
| 8 | const styles = readFileSync(resolve(testDir, "../styles.css"), "utf8"); |
| 9 | |
| 10 | let passed = 0; |
| 11 | let failed = 0; |
| 12 | |
| 13 | function eq(actual: unknown, expected: unknown, label: string) { |
| 14 | if (actual === expected) { |
| 15 | process.stdout.write(` PASS ${label}\n`); |
| 16 | passed += 1; |
| 17 | } else { |
| 18 | process.stdout.write(` FAIL ${label}: expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}\n`); |
| 19 | failed += 1; |
| 20 | } |
| 21 | } |
| 22 | |
| 23 | function ruleBlock(source: string, selector: string): string { |
| 24 | const start = source.indexOf(`${selector} {`); |
| 25 | if (start < 0) return ""; |
| 26 | const bodyStart = source.indexOf("{", start) + 1; |
| 27 | const end = source.indexOf("}", bodyStart); |
| 28 | return source.slice(bodyStart, end); |
| 29 | } |
| 30 | |
| 31 | function declaration(block: string, property: string): string | undefined { |
| 32 | const match = block.match(new RegExp(`(?:^|;)\\s*${property}\\s*:\\s*([^;]+)`)); |
| 33 | return match?.[1].trim(); |
| 34 | } |
| 35 | |
| 36 | console.log("\nsettings responsive layout contract"); |
| 37 | |
| 38 | const wideTail = ruleBlock(styles, ".memory-tabs-row__tail"); |
| 39 | eq(declaration(wideTail, "display"), "contents", "wide memory controls preserve the original row flex items"); |
| 40 | eq(declaration(wideTail, "flex"), undefined, "wide memory wrapper does not compete in flex sizing"); |
| 41 | |
| 42 | const settingsResponsiveStart = styles.indexOf("/* ── responsive: compact content on narrow screens"); |
| 43 | const narrowStart = styles.indexOf("@media (max-width: 900px)", settingsResponsiveStart); |
| 44 | const narrowEnd = styles.indexOf("@media (max-width: 760px)", narrowStart); |
| 45 | const narrowSettings = styles.slice(narrowStart, narrowEnd); |
| 46 | const narrowTail = ruleBlock(narrowSettings, ".memory-tabs-row__tail"); |
| 47 | |
| 48 | eq(declaration(narrowTail, "display"), "flex", "narrow memory controls form a flex group"); |
| 49 | eq(declaration(narrowTail, "flex"), "0 1 100%", "narrow memory controls stay on their own row"); |
| 50 | eq(declaration(narrowTail, "min-width"), "0", "narrow memory controls may shrink without overflowing"); |
| 51 | eq(declaration(narrowTail, "gap"), "12px", "narrow memory controls retain their compact spacing"); |
| 52 | |
| 53 | console.log(`\n${passed} passed, ${failed} failed, ${passed + failed} total`); |
| 54 | if (failed > 0) process.exit(1); |
| 55 |