40 lines
2.3 KiB
TypeScript
40 lines
2.3 KiB
TypeScript
import assert from "node:assert/strict";
|
|
import { readFileSync } from "node:fs";
|
|
import test from "node:test";
|
|
|
|
const starterHome = readFileSync(new URL("../src/components/starter-home.tsx", import.meta.url), "utf8");
|
|
const css = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");
|
|
const design = readFileSync(new URL("../DESIGN.md", import.meta.url), "utf8");
|
|
|
|
function starterEntryBlock(): string {
|
|
const start = css.indexOf(".starter-entry {");
|
|
const end = css.indexOf(".starter-entry > svg");
|
|
assert.ok(start >= 0 && end > start);
|
|
return css.slice(start, end);
|
|
}
|
|
|
|
test("starter entries stay native buttons with a 36px pill and a 44px hit area", () => {
|
|
assert.match(starterHome, /<button[\s\S]*className="starter-entry"/);
|
|
assert.equal(starterHome.match(/className="starter-entry"/g)?.length, 2);
|
|
assert.doesNotMatch(starterHome, /starter-hero|product-entrypoint|daily-starlanguage-card|birth-rectification-card/);
|
|
assert.doesNotMatch(starterHome, /正在加载|InlineSpinner|animate-spin/);
|
|
const block = starterEntryBlock();
|
|
assert.match(block, /min-height:\s*36px/);
|
|
assert.match(block, /--starter-entry-border:\s*color-mix\(in srgb, var\(--color-border\) 62%, transparent\)/);
|
|
assert.match(block, /border:\s*1px solid var\(--starter-entry-border\)/);
|
|
assert.doesNotMatch(block, /border:\s*1px solid var\(--color-border-strong\)/);
|
|
assert.match(css, /\.starter-entry::after\s*\{[^}]*inset:\s*-4px/);
|
|
});
|
|
|
|
test("starter entry hover stays softer than the action color and focus is a 3px ring", () => {
|
|
const hover = css.slice(css.indexOf(".starter-entry:not(:disabled):hover"), css.indexOf(".starter-entry:focus-visible"));
|
|
assert.match(hover, /color-mix\(in srgb, var\(--color-border-strong\) 45%, var\(--color-border\)\)/);
|
|
assert.doesNotMatch(hover, /border-color:\s*var\(--color-action\)/);
|
|
assert.match(css, /\.starter-entry:focus-visible\s*\{[^}]*outline:\s*3px solid color-mix\(in srgb, var\(--color-focus\) 80%, transparent\)/);
|
|
assert.match(css, /\.starter-entry\[data-opening="true"\]\s*\{\s*cursor:\s*progress/);
|
|
assert.match(css, /@media \(max-width:\s*375px\)\s*\{[^}]*\.starter-entry-row\s*\{\s*max-width:\s*100%/);
|
|
assert.match(css, /@media \(prefers-reduced-motion:\s*reduce\)[\s\S]*transition-duration:\s*\.01ms !important/);
|
|
assert.match(design, /--starter-entry-border/);
|
|
assert.match(design, /inset: -4px/);
|
|
});
|