@bongos/core 1.19.469 → 1.19.470

package/tests/hall_catalog_world.mjs

@@ -0,0 +1,181 @@
+// tests/hall_catalog_world.mjs — the catalog pages in the chrome world (task
+// 1003472, goal 1000081): modules and the repo atlas, REDESIGNED rather than
+// re-skinned. Static pins over the shipped source: the module catalog is ONE
+// panel of the oversight family's rows (the card grid, the boxed search and
+// the .mod-chip alias are gone), the description is clamped with a details
+// disclosure under it, the right column is the family's grant toggle or a
+// state pill and never an accent fill, the submit door sits on the row, and
+// the figure band carries the numbers the page head used to say as prose; the
+// atlas keeps its nine semantic colours and puts every piece of chrome around
+// the scene in the shell's dialect — the panel is a .scroll, the view switch
+// the tab strip, the detail card a hairline panel with no shadow — and gains
+// an island index a keyboard or a phone can open.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const PUB = path.join(ROOT, 'modules', 'hall-ui', 'public');
+const read = (f) => fs.readFileSync(path.join(PUB, f), 'utf8').replace(/\r\n/g, '\n');
+// Negative pins read the code, not its comments (a comment that says what left
+// would otherwise fail the pin that says it left).
+const decomment = (src) => src.replace(/\/\*[\s\S]*?\*\//g, '').replace(/<!--[\s\S]*?-->/g, '').replace(/^\s*\/\/.*$/gm, '');
+const STYLE = read('style.css');
+const OVERSIGHT = read('oversight.css');
+const tokensDefined = (css, where) => {
+  for (const t of new Set([...css.matchAll(/var\((--[a-z0-9-]+)\)/g)].map((m) => m[1]))) {
+    const declared = (src) => new RegExp(`(^\\s*|[{;]\\s*)${t}:`, 'm').test(src);
+    assert.ok(declared(STYLE) || declared(OVERSIGHT) || declared(css),
+      `${where} spends ${t}, which neither style.css, oversight.css nor the sheet itself defines`);
+  }
+};
+const noAlias = (rawCss, where) => {
+  const css = decomment(rawCss);
+  const alias = css.match(/--(surface|surface-2|border|border-strong|accent-weak|accent-text)\b/g) || [];
+  assert.deepEqual(alias, [], `${where} spends a compat alias: ${alias.join(', ')}`);
+};
+
+// ---- modules ----------------------------------------------------------------
+
+test('modules: ONE panel of family rows — the filter bar, the figure band and two groups on one .scroll', () => {
+  const html = read('modules.html');
+  assert.match(html, /<link rel="stylesheet" href="\/builders\/oversight\.css">\s*<link rel="stylesheet" href="\/builders\/modules\.css">/, 'the family sheet loads before the page sheet');
+  assert.equal((html.match(/class="scroll[ "]/g) || []).length, 1, 'one panel, not three');
+  assert.match(html, /<div id="mod-filters"><\/div>/, 'the kit filter bar has a mount');
+  assert.match(html, /class="ov-figs" id="mod-figs"/, 'the figure band is the family\'s');
+  assert.match(html, /<ul class="ov-rows" id="core-grid">/, 'the core catalog is a run of rows');
+  assert.match(html, /<ul class="ov-rows" id="own-grid">/, 'the project\'s own modules are a run of rows');
+  assert.equal((html.match(/class="ov-group__head"/g) || []).length, 2, 'two group heads');
+  assert.doesNotMatch(decomment(html), /mod-grid|mod-card|mod-browse|submit-scroll|class="settings-status"/, 'the card grid, the boxed search and the third panel are gone');
+  assert.doesNotMatch(html, /\d+ module\(s\)/, 'the page head no longer says the numbers as prose');
+});
+
+test('modules: the row is the oversight row — title with the mono key, clamped description, facts, one control on the right', () => {
+  const js = read('modules.js');
+  assert.match(js, /<li class="ov-row mod-row" data-key=/, 'each module is an .ov-row');
+  assert.match(js, /<span class="ov-row__title">\$\{escapeHtml\(m\.title \|\| m\.key\)\}<span class="ov-mono">\$\{escapeHtml\(m\.key\)\}<\/span>/, 'the key rides inside the title in mono');
+  assert.match(js, /class="ov-row__sub mod-row__desc"/, 'the description is the sub line');
+  assert.match(js, /<details class="mod-more"/, 'a details disclosure opens the rest');
+  assert.match(js, /<div class="ov-row__facts">\$\{provenancePill\(m\)\}\$\{attributionFacts\(m\)\}\$\{upkeepFact\(m\)\}<\/div>/, 'provenance, credit and upkeep are the facts line');
+  assert.match(js, /<div class="ov-row__right mod-row__right">\$\{rightHtml\(m\)\}<\/div>/, 'the right column is one function');
+  const css = read('modules.css');
+  assert.match(css, /\.mod-row__desc \{[^}]*-webkit-line-clamp: 2/, 'the description clamps to two lines');
+  assert.match(css, /\.mod-row:has\(\.mod-more\[open\]\) \.mod-row__desc/, 'and lifts the clamp while the details are open');
+  assert.doesNotMatch(decomment(js), /class="mod-chip|innerHTML = .*style=|<span style=/, 'no .mod-chip, no inline style');
+});
+
+test('modules: the switch is the family grant toggle or a state pill — never an accent fill, never a dead control', () => {
+  const js = read('modules.js');
+  assert.match(js, /class="ov-toggle mod-toggle" aria-pressed=/, 'the toggle is .ov-toggle with aria-pressed');
+  assert.match(js, /: `<span class="fact-pill \$\{on \? 'fact-pill--ok' : ''\}"/, 'a viewer below the floor sees the state as a pill');
+  assert.match(js, /rankLabel\('metic'\)/, 'the floor is written from the pack');
+  assert.doesNotMatch(js, /Metic\+/, 'and never as a hardcoded rank');
+  const css = decomment(read('modules.css'));
+  assert.doesNotMatch(css, /background:\s*var\(--accent\)/, 'no accent fill on a state');
+  assert.doesNotMatch(css, /button\.mod-toggle|\[data-on=/, 'the old accent-filled toggle is gone');
+  assert.match(js, /class="btn-ghost btn--sm mod-submit" data-submit-key=/, 'the submit door is a ghost pill on the row');
+});
+
+test('modules: upkeep colours the exception — undeclared is the warn pill, maintained a plain fact', () => {
+  const js = read('modules.js');
+  assert.match(js, /fact-pill fact-pill--warn"[^>]*>upkeep undeclared</, 'undeclared upkeep is the warn pill');
+  assert.match(js, /<span class="ov-fact">upkeep <b>\$\{escapeHtml\(status\)\}<\/b><\/span>/, 'a maintained module reads as a plain fact');
+  assert.match(js, /fact-pill fact-pill--info">core-loaded</, 'core-loaded is the info pill');
+  assert.match(js, /<span class="fact-chip">\$\{escapeHtml\(m\.license\)\}<\/span>/, 'the licence is a chip');
+});
+
+test('modules: the kit filter bar carries the search and a state lens, and the empty state is the kit\'s', () => {
+  const js = read('modules.js');
+  assert.match(js, /kit\.makeFilterBar\(\{/, 'the bar is the kit\'s');
+  assert.match(js, /search: \{ id: 'mod-search'/, 'the search keeps its id (the states file fills it)');
+  assert.match(js, /\{ id: 'mod-state', label: 'State'/, 'a state lens');
+  assert.match(js, /kit\.emptyStateHtml\(/, 'empties are the kit\'s');
+  assert.doesNotMatch(decomment(js), /mod-empty/, '.mod-empty is gone');
+  const html = read('modules.html');
+  assert.match(html, /<script src="\/builders\/hall-kit\.js"><\/script>/, 'and the page loads the kit');
+});
+
+test('modules: the figure band carries modules, enabled, built here and undeclared upkeep', () => {
+  const js = read('modules.js');
+  for (const label of ['modules', 'enabled', 'built here', 'no upkeep']) {
+    assert.match(js, new RegExp(`fig\\('${label}'`), `figure: ${label}`);
+  }
+});
+
+test('modules.css spends only the fifteen, and every token it names exists', () => {
+  const css = read('modules.css');
+  noAlias(css, 'modules.css');
+  tokensDefined(css, 'modules.css');
+  assert.doesNotMatch(decomment(css), /#[0-9a-f]{3,8}\b/i, 'no literal colours');
+});
+
+test('the shell no longer aliases .mod-chip onto the pill', () => {
+  const alias = STYLE.slice(STYLE.indexOf('.fact-pill,\n'), STYLE.indexOf('{', STYLE.indexOf('.fact-pill,\n')));
+  assert.doesNotMatch(alias, /mod-chip/, 'modules takes .fact-pill by name');
+});
+
+// ---- atlas ------------------------------------------------------------------
+
+test('atlas: the nine semantic colours stay fixed literals, and nothing else in the sheet is one', () => {
+  const css = read('atlas.css');
+  for (const t of ['--ab-sun', '--ab-sky', '--ab-coral', '--ab-paper', '--ab-good', '--ab-core', '--ab-db', '--ab-ghost', '--ab-danger']) {
+    assert.match(css, new RegExp(`${t}:#[0-9a-f]{6}`), `${t} is a fixed literal (ADR 0094)`);
+  }
+  const rest = decomment(css).replace(/--ab-(sun|sky|coral|paper|good|core|db|ghost|danger):#[0-9a-f]{6}/g, '');
+  assert.deepEqual(rest.match(/#[0-9a-f]{3,8}\b/gi) || [], [], 'no other literal colour');
+  noAlias(css, 'atlas.css');
+  tokensDefined(css, 'atlas.css');
+  assert.doesNotMatch(rest, /box-shadow/, 'no box-shadow: the world draws depth with hairlines');
+});
+
+test('atlas: the panel is the shell\'s .scroll and the view switch is the shell\'s tab strip', () => {
+  const html = read('atlas.html');
+  assert.match(html, /<section class="scroll atlas-page"/, 'the map sits on a .scroll');
+  assert.match(html, /<div class="kit-tabs ab-views" role="tablist"/, 'the view switch is .kit-tabs');
+  assert.equal((html.match(/class="setup__tab" role="tab" data-view=/g) || []).length, 2, 'two tabs');
+  assert.doesNotMatch(decomment(html), /ab-modes|ab-chip"|class="card"/, 'the segmented box, the live chip and the empty card are gone');
+  const css = decomment(read('atlas.css'));
+  assert.doesNotMatch(css, /\.ab-modes|\.ab-chip\b|radial-gradient|\.ab-empty \.card/, 'and their rules with them');
+  const js = read('atlas.js');
+  assert.match(js, /setAttribute\('aria-selected'/, 'the script switches the tabs by aria-selected');
+  assert.doesNotMatch(decomment(js), /classList\.toggle\('active'/, 'not by an .active class');
+});
+
+test('atlas: the detail card is a hairline panel whose facts are the shell\'s pills and chips, and a neighbour is a door', () => {
+  const css = read('atlas.css');
+  assert.match(css, /\.ab-popup\{[^}]*border:var\(--line\) solid var\(--rule\)/, 'the card closes on one rule hairline');
+  const js = read('atlas.js');
+  assert.match(js, /fact-pill fact-pill--' \+ \(PILL\[n\.badge\.k\]/, 'the badge is a status pill');
+  assert.match(js, /<span class="fact-chip">' \+ esc\(n\.metric\)/, 'the metric is a chip');
+  assert.match(js, /<button type="button" class="fact-chip ab-jump" data-node=/, 'a connected island is a button');
+  assert.doesNotMatch(decomment(js), /ab-chip2|ab-badge ab-b-|↔/, 'the glass chips, the private badges and the arrow glyph are gone');
+  assert.match(js, /ev\.key === 'Escape'/, 'Escape closes the card');
+});
+
+test('atlas: the island index renders every node of the view as a row a keyboard can open', () => {
+  const html = read('atlas.html');
+  assert.match(html, /<details class="kit-collapse ab-index" id="ab-index">/, 'the index is a collapsible under the map');
+  assert.match(html, /<ul class="ov-rows" id="ab-index-rows"><\/ul>/, 'its rows are the family\'s');
+  const js = read('atlas.js');
+  assert.match(js, /function drawIndex\(d\)/, 'the index is drawn per view');
+  assert.match(js, /<li class="ov-row ov-row--dense ab-ix" data-node=/, 'each island is a dense row');
+  assert.match(js, /class="ov-row__title ab-ix__t" aria-expanded="false" aria-controls=/, 'the title is a disclosure button');
+  assert.match(js, /body\.innerHTML = detailHTML\(nodeById\(id\)\)/, 'and opens the same detail the map\'s card shows');
+  assert.match(js, /matchMedia\('\(max-width: 640px\)'\)\.matches\) indexEl\.open = true/, 'open by default on a phone, where the index is the read');
+  assert.match(js, /drawIndex\(d\);/, 'drawn on every render');
+});
+
+test('atlas: the hub breathes at the world\'s ambient floor, not as a pulse', () => {
+  const css = read('atlas.css');
+  const m = css.match(/animation:abbreathe (\d+)s/);
+  assert.ok(m && Number(m[1]) >= 20, 'the loop is 20s or slower');
+});
+
+test('the states files exercise the redesign\'s new states', () => {
+  const mod = JSON.parse(read('modules.states.json'));
+  for (const s of ['browse', 'search-empty', 'lens', 'details', 'out']) assert.ok(mod.states[s], `modules: ${s}`);
+  const atlas = JSON.parse(read('atlas.states.json'));
+  for (const s of ['map', 'truth', 'detail', 'index', 'out']) assert.ok(atlas.states[s], `atlas: ${s}`);
+});