Something went wrong. Try again.
Web frontend and supporting services for lance.blue
Something went wrong. Try again.
2.8 kB · 75 lines
JavaScript
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576/** * The stamp says one word, in three places, and two of those places cannot * import the file that defines it. * * alpha-stamp.ts builds the hero's and the app footer's. Base.astro's masthead * and Footer.astro write the same span by hand, because the blog's pages never * run the app. Nothing errors when they drift: the page still renders, with * two different words on it, or with a stamp that has lost its styling and is * a bare word in the middle of the masthead. * * 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 read = (path) => readFile(join(web, path), "utf8");
const stamp = await read("src/alpha-stamp.ts");const layout = await read("src/layouts/Base.astro");const astroFooter = await read("src/components/Footer.astro");const chrome = await read("src/chrome.ts");const home = await read("src/screens/home.ts");const css = await read("src/styles.css");
const word = stamp.match(/ALPHA = "([^"]+)"/)?.[1];assert.ok(word, "alpha-stamp.ts no longer declares ALPHA as a literal");
test("the two hand-written stamps say what alpha-stamp.ts says", () => { for (const [name, source] of [ ["Base.astro", layout], ["Footer.astro", astroFooter], ]) { assert.match( source, new RegExp(`class="stamp stamp-\\w+"[^>]*>${word}<`), `${name} does not stamp ${word}`, ); }});
test("the masthead's stamp is outside the brand link", () => { // Inside it, the anchor's aria-label would replace it and the one copy on // the page a screen reader is given would be the one it never reads. const brand = layout.slice( layout.indexOf('<a class="brand"'), layout.indexOf("</a>"), ); assert.doesNotMatch(brand, /class="stamp/, "the stamp is inside the anchor");});
test("every place that stamps has a rule to draw it with", () => { const variants = new Set([ ...[...stamp.matchAll(/"(hero|foot)"/g)].map((m) => m[1]), ...[...layout.matchAll(/class="stamp stamp-(\w+)"/g)].map((m) => m[1]), ...[...astroFooter.matchAll(/class="stamp stamp-(\w+)"/g)].map((m) => m[1]), ]);
assert.ok(css.includes(".stamp {"), "styles.css has no .stamp"); for (const variant of variants) { assert.ok( css.includes(`.stamp-${variant} {`), `styles.css has no .stamp-${variant}`, ); } // The masthead's sits beside the wordmark in a box of its own. assert.ok(css.includes(".brand-block {"), "styles.css has no .brand-block");});
test("the app's own two stamps are still stamped", () => { assert.match(home, /alphaStamp\("hero"\)/, "the hero lost its stamp"); assert.match(chrome, /alphaStamp\("foot"\)/, "the app footer lost its stamp");});