@bongos/core 1.19.473 → 1.19.474

package/tests/hall_reference_world.mjs

@@ -0,0 +1,222 @@
+// tests/hall_reference_world.mjs — the REFERENCE room in the chrome world:
+// drachmae, and what the reading-room archetype owes a second document
+// (task 1003473, goal 1000081).
+//
+// tests/hall_reading_world.mjs pins the reading rooms (the primer, the diagrams
+// index, the deck, the ladder); this is the same job for the one document
+// people SCAN rather than read. Everything here is a fact that is silent in a
+// browser: the page still renders, it just renders the primer's instruments on
+// a document that has no end to reach, or an outline that stops one level
+// short of the questions people came with.
+//
+// What it locks:
+//   * ONE ROOM, ONE MODIFIER. drachmae opts into `room room--reference` and
+//     loads room.css alone. primer.css holds only the acknowledge gate and
+//     was loaded here for nothing; the reference rules live in room.css §8, so
+//     the next scanned document takes them by one body class.
+//   * THE LINEAR-READ INSTRUMENTS ARE OFF. No progress hairline, no section
+//     counters, no "About a five-minute read" — and the primer keeps all three.
+//   * THE OUTLINE GOES TO h3 DEPTH and lights the entry AND its part.
+//   * EVERY HEADING IS AN ADDRESS. `.room-anchor` on h2/h3/h4, a 24px box of
+//     its own, copying the absolute link on click; a deep link lands after the
+//     async render, or the browser's own jump finds nothing.
+//   * THE PARSER REACHES h4, and a heading that carries a link slugs by its
+//     text. The economy doc's six earning sources are `####`, and the shared
+//     reader stopped at `###`, so they rendered as paragraphs with a literal
+//     "####" — the largest defect on the page, and invisible to every floor.
+//   * NESTED EMPHASIS RENDERS. "**It's the API *list* price**" showed its
+//     asterisks because the bold rule refused an inner `*`.
+//   * THE LIVE TABLE IS A SECTION AHEAD OF THE CLOSING LINKS, not an appendix
+//     after "dig deeper".
+//
+// Reproduce the renders these came from (the populated document needs the
+// fixture harness; the kit stub serves neither the markdown nor the bounty feed):
+//   node scripts/hall-preview/server.js --port 4620 --fixture-me
+//   node modules/ui-design/kit/render.js --states modules/hall-ui/public/drachmae.states.json \
+//     --base-in http://builders.localhost:4620 --base-out http://builders.localhost:4620
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules', 'hall-ui', 'public');
+const read = (f) => fs.readFileSync(path.join(HALL, f), 'utf8');
+
+const roomCss = read('room.css');
+const mdReaderJs = read('md-reader.js');
+const drachmaeHtml = read('drachmae.html');
+const drachmaeJs = read('drachmae.js');
+const drachmaeStates = JSON.parse(read('drachmae.states.json'));
+const primerHtml = read('primer.html');
+const primerJs = read('primer.js');
+
+const decomment = (css) => css.replace(/\/\*[\s\S]*?\*\//g, '');
+const dehtmlcomment = (html) => html.replace(/<!--[\s\S]*?-->/g, '');
+const dejscomment = (js) => js.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '');
+// The body of the first rule matching `selector {`, comments stripped. Takes a
+// PLAIN selector and escapes it here.
+const rule = (css, selector) => {
+  const esc = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const m = decomment(css).match(new RegExp(`(^|[},])\\s*${esc}\\s*\\{([^}]*)\\}`, 'm'));
+  return m ? m[2] : null;
+};
+
+// md-reader.js is a browser IIFE that only touches `window` and `location`.
+function loadReader() {
+  const sandbox = { window: {}, location: { hostname: 'builders.example.com', href: 'https://builders.example.com/drachmae' } };
+  vm.createContext(sandbox);
+  vm.runInContext(mdReaderJs, sandbox, { filename: 'md-reader.js' });
+  return sandbox.window.OTBMdReader;
+}
+
+// ---- 1. one room, one modifier ----------------------------------------------
+
+test('drachmae opts into the room and its reference rules, and loads the archetype sheet alone', () => {
+  assert.match(drachmaeHtml, /<body class="room room--reference"/, 'the reference is the room with one modifier, not a second archetype');
+  assert.match(drachmaeHtml, /href="\/builders\/room\.css"/, 'the archetype is loaded');
+  assert.doesNotMatch(dehtmlcomment(drachmaeHtml), /primer\.css/,
+    'primer.css holds only the acknowledge gate, which a reference has no use for');
+  assert.match(drachmaeHtml, /class="page-head page-head--room"/, 'the head keeps the room voice');
+});
+
+test('the reference rules live in room.css, keyed on the body modifier', () => {
+  const css = decomment(roomCss);
+  assert.match(css, /\.room--reference \.primer-article h2::before,\s*\.room--reference \.primer-toc__list a::before\s*\{\s*content:\s*none/,
+    'the counters are off on a reference');
+  assert.ok(rule(roomCss, '.room--reference .primer-toc__sub'), 'the nested contents have a rule');
+  assert.ok(rule(roomCss, '.room--reference .primer-toc__list a.is-trail'), 'the part of the lit entry is the trail');
+  assert.match(rule(roomCss, '.primer-article h2::before') || '', /counter-increment/,
+    'and the primer keeps its counter — the modifier turns it off, the archetype still draws it');
+});
+
+// ---- 2. the linear-read instruments are off ---------------------------------
+
+test('the reference carries no progress hairline, no acknowledge gate and no read time', () => {
+  const html = dehtmlcomment(drachmaeHtml);
+  assert.doesNotMatch(html, /primer-progress/, 'no progress hairline: a reference has no end to reach');
+  assert.doesNotMatch(dejscomment(drachmaeJs), /primer-progress|setupProgressBar/, 'and the script drives none');
+  assert.doesNotMatch(html, /primer-ack/, 'no acknowledge gate');
+  assert.doesNotMatch(html, /minute read/i, 'the sub line says what kind of document this is, not how long it takes');
+});
+
+test('the primer keeps all three — the modifier is drachmae\'s, not the room\'s', () => {
+  assert.doesNotMatch(primerHtml, /room--reference/);
+  assert.match(primerHtml, /primer-progress__bar/);
+  assert.match(primerJs, /function setupProgressBar/, 'the primer\'s gate is fed by its progress');
+});
+
+// ---- 3. the outline -----------------------------------------------------------
+
+test('the outline is read from the rendered h2s AND h3s and nests them', () => {
+  assert.match(drachmaeJs, /querySelectorAll\('h2\[id\], h3\[id\]'\)/, 'the contents are collected from the DOM, to h3 depth');
+  assert.match(drachmaeJs, /class="primer-toc__sub"/, 'h3s nest under their part');
+  assert.match(drachmaeJs, /classList\.toggle\('is-trail'/, 'the spy marks the lit entry\'s part');
+  assert.match(drachmaeHtml, /id="primer-toc-current"/, 'the phone toggle has a middle that names the part');
+  assert.match(drachmaeJs, /current\.textContent = active \? active\.part : ''/, 'and the spy writes it');
+});
+
+test('the toggle\'s chevron is drawn, and the contents are named for a reference', () => {
+  assert.doesNotMatch(dehtmlcomment(drachmaeHtml), /▾/, 'no glyph standing in for an icon');
+  assert.match(drachmaeHtml, /<svg class="primer-toc__chevron"/);
+  assert.match(drachmaeHtml, /id="primer-toc-heading">On this page</, 'a reference is "on this page", not "in this guide"');
+});
+
+// ---- 4. every heading is an address -------------------------------------------
+
+test('every h2, h3 and h4 gets an anchor that is a real link and copies the address', () => {
+  assert.match(drachmaeJs, /querySelectorAll\('h2\[id\], h3\[id\], h4\[id\]'\)/);
+  assert.match(drachmaeJs, /className = 'room-anchor'/);
+  assert.match(drachmaeJs, /a\.href = `#\$\{h\.id\}`/, 'the anchor is the heading\'s own id, so it works with no script');
+  assert.match(drachmaeJs, /navigator\.clipboard\.writeText\(url\)/, 'the click copies the absolute address');
+  const anchor = rule(roomCss, '.room--reference .primer-article .room-anchor');
+  assert.ok(anchor, 'the anchor has its own rule, scoped to the reference, at higher specificity than the prose link');
+  assert.match(anchor, /width:\s*24px/); assert.match(anchor, /height:\s*24px/);
+  assert.match(anchor, /text-decoration:\s*none/);
+  assert.ok(rule(roomCss, '.room--reference .primer-article :is(:target, .is-target) > .room-anchor'),
+    'the one the reader arrived at takes the accent — by :target, or by the mark the landing sets when :target resolved against nothing');
+});
+
+test('a deep link lands after the async render, the live section and the fonts', () => {
+  assert.match(drachmaeJs, /function landOnHash\(\)[\s\S]*classList\.add\('is-target'\)[\s\S]*scrollIntoView/);
+  const src = dejscomment(drachmaeJs);
+  const inserted = src.indexOf('await insertBountySection(article)');
+  const landed = src.indexOf('.then(landOnHash)');
+  assert.ok(inserted > -1 && landed > inserted, 'landOnHash runs once the rate card has taken its place, or the offsets it lands on are wrong');
+  assert.match(src, /document\.fonts\.ready[\s\S]*\.then\(landOnHash\)/, 'and after the fonts: a swap after the jump moves everything above the target');
+});
+
+test('on a phone the collapsed outline rides under the top bar, so the toggle can name the part from anywhere', () => {
+  const m = decomment(roomCss).match(/@media \(max-width: 760px\)\s*\{\s*\.room--reference \.primer-toc\s*\{([^}]*)\}/);
+  assert.ok(m, 'the reference re-sticks the contents at phone width (the archetype makes them static there)');
+  assert.match(m[1], /position:\s*sticky/);
+  assert.match(m[1], /z-index:\s*var\(--z-progress\)/, 'below the top bar in the ladder');
+});
+
+// ---- 5. the live table --------------------------------------------------------
+
+test('the live rate card is a section ahead of the closing links, not an appendix after them', () => {
+  assert.match(drachmaeJs, /CLOSING_H2 = \/\^see it\/i/);
+  assert.match(drachmaeJs, /article\.insertBefore\(section, closing\)/);
+  assert.match(drachmaeJs, /else article\.appendChild\(section\)/, 'a retitled footer falls back to appending');
+});
+
+// ---- 6. the parser, actually run ----------------------------------------------
+
+test('the shared parser reaches h4 — the six earning sources rendered as paragraphs with a literal ####', () => {
+  const MD = loadReader();
+  const { html, headings } = MD.parseMarkdown('#### 4. Achievements\n\nUnlocking one pays its bonus.\n', (h) => h);
+  assert.equal(headings.length, 1);
+  assert.equal(headings[0].level, 4);
+  assert.match(html, /<h4 id="4-achievements">4\. Achievements<\/h4>/);
+  assert.doesNotMatch(html, /####/);
+});
+
+test('a paragraph breaks before an h4 the way it breaks before an h3', () => {
+  const MD = loadReader();
+  const { html } = MD.parseMarkdown('a line\n#### A head\n', (h) => h);
+  assert.match(html, /<p>a line<\/p>\s*<h4/);
+});
+
+test('a heading that carries a link slugs by its text, so the copied address stays readable', () => {
+  const MD = loadReader();
+  const withLink = '2. Per-task credits, adjusted by *kind* ([ADR 0023](../adr/0023-kind-multipliers-and-idea-bonus.md))';
+  assert.equal(MD.slugify(withLink), MD.slugify('2. Per-task credits, adjusted by *kind* (ADR 0023)'));
+  assert.doesNotMatch(MD.slugify(withLink), /adr0023|md$/, 'the target path is not part of the address');
+});
+
+test('emphasis inside a bold run renders — the API list-price line showed its asterisks', () => {
+  const MD = loadReader();
+  const { html } = MD.parseMarkdown('- **It is the API *list* price, deliberately** and not the rest\n', (h) => h);
+  assert.match(html, /<strong>It is the API <em>list<\/em> price, deliberately<\/strong> and not the rest/);
+  const two = MD.parseMarkdown('**a** and **b**\n', (h) => h).html;
+  assert.match(two, /<strong>a<\/strong> and <strong>b<\/strong>/, 'and two bold runs on one line stay two');
+});
+
+// ---- 7. the room's h4 -----------------------------------------------------------
+
+test('the room gives the fourth level a rule, the measure and the anchor offset', () => {
+  const h4 = rule(roomCss, '.primer-article h4');
+  assert.ok(h4, 'room.css styles h4 now that the parser emits it');
+  assert.match(h4, /scroll-margin-top/, 'a deep link to an h4 clears the top bar');
+  const measured = decomment(roomCss).match(/\.primer-article\s*>\s*p,[\s\S]*?\{([^}]*)\}/);
+  assert.ok(measured, 'the measured-children list exists');
+  assert.match(measured[0], /\.primer-article\s*>\s*h4/, 'and the h4 is measured with the prose');
+});
+
+// ---- 8. the states file and the one h1 ------------------------------------------
+
+test('the states file measures the reference\'s own states, including the deep link', () => {
+  for (const name of ['read', 'toc-open', 'jump', 'out']) assert.ok(drachmaeStates.states[name], `state ${name}`);
+  assert.match(drachmaeStates.states.jump.url, /#how-karma-is-earned-and-lost$/, 'the jump lands on an h3, so the trail is what the shot proves');
+  assert.ok(drachmaeStates.reducedMotion, 'the kill switch is exercised');
+});
+
+test('the reference renders exactly one h1, the page head\'s', () => {
+  const html = dehtmlcomment(drachmaeHtml);
+  assert.equal([...html.matchAll(/<h1\b/g)].length, 1);
+  assert.match(html, /<h1 class="page-head__h">/);
+});