Something went wrong. Try again.
Web frontend and supporting services for lance.blue
Something went wrong. Try again.
2.1 kB · 56 lines
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657/** * The waiting screen's moving parts, checked structurally: there is no DOM * under `npm test`, and both of the ways these break look fine in a build. * * The scanline is animation, so it needs a reduced-motion rule, and a rule * that is simply absent is invisible until somebody who set the preference * loads the screen. The scanline and Cancel are both cut with clip-path, * which clips an element's outline along with its background — so a focus * ring on one of them has to be an inset shadow, and an outlined one * disappears without any rule failing. * * Run with `npm test`. */import { test } from "node:test";import assert from "node:assert/strict";import { readFile } from "node:fs/promises";import { join } from "node:path";
const web = join(new URL(".", import.meta.url).pathname, "..");const css = await readFile(join(web, "src/styles.css"), "utf8");const screen = await readFile(join(web, "src/screens/waiting.ts"), "utf8");
test("every class the screen writes has a rule", () => { const classes = new Set( [...screen.matchAll(/className: "([^"]+)"/g)].flatMap((m) => m[1].split(/\s+/), ), ); for (const name of classes) { assert.ok(css.includes(`.${name}`), `no rule for .${name}`); }});
test("the scanline stops when motion is not wanted", () => { assert.match(css, /\.waiting-scan-sweep\s*{[^}]*animation:/); const reduced = [ ...css.matchAll( /@media \(prefers-reduced-motion: reduce\) {([\s\S]*?)\n}/g, ), ] .map((m) => m[1]) .join("\n"); assert.match(reduced, /\.waiting-scan-sweep[^}]*animation: none/);});
test("the cancel plate's focus ring is inset", () => { // The ring is set once, for every button and everything wearing .plate, and // Cancel is a button. A per-control copy is what this used to check. const rule = css.match( /button:focus-visible,\s*\.plate:focus-visible\s*{([^}]*)}/, )?.[1]; assert.ok(rule, "no shared focus-visible rule for plates"); assert.match(rule, /outline: 0/); assert.match(rule, /box-shadow: inset/); assert.match(css, /\.waiting-cancel\s*{[^}]*--notch:/);});