@bongos/core 1.19.534 → 1.19.535

package/tests/hall_reading_world.mjs

@@ -520,3 +520,156 @@ test('the vouched shapes still become links, exactly as before', () => {
   const degraded = MD.parseMarkdown('[t](../../CLAUDE.md)\n', MD.makeResolveLinkHref({ baseDir: 'docs/onboarding/' })).html;
   assert.ok(degraded.includes('<a href="../../CLAUDE.md"'), 'and with no bases a repo path still degrades to a link, as §10 pins above');
 });
+
+// ---- the deck draws its dates (task 1003447, `legibility-series-are-drawn`) --
+//
+// /public/versions has always carried started_at and shipped_at per version, and
+// the deck drew NEITHER: both dates reached the browser and came out as "Sep
+// 2026" on a shipped pill. The SERIES lives in roadmap-timeline.js and
+// tests/hall_kit_charts.mjs runs it against the real fixture; what belongs here
+// is the deck's half — that the section is composed, gated and placed the way
+// the reading rooms compose everything else.
+
+test('the deck asks the kit to draw its timeline, and hand-rolls nothing', () => {
+  const js = read('roadmap.js');
+  assert.match(js, /window\.OTBRoadmapTimeline/, 'the series comes from its own module');
+  assert.match(js, /timelineCardHtml\(all, now\)/, 'over the merged versions');
+  assert.match(js, /html \+= timelineHtml\(all, Date\.now\(\)\)/, 'and lands in the deck');
+  // §6b holds this globally; pinned here because a Gantt is the shape most
+  // likely to be reached for as "just a few divs with a left offset".
+  for (const f of ['roadmap.js', 'roadmap-timeline.js']) {
+    assert.doesNotMatch(read(f), /<(?:path|polyline|rect)\b[^>]*\b(?:d|points)="\$\{/,
+      `${f} builds no SVG geometry by hand`);
+    assert.doesNotMatch(read(f), /class="[^"]*(?:__|-)(?:fill|bar|track)[^"]*"[^>]*style="width:/,
+      `${f} draws no bar by hand`);
+  }
+  assert.match(read('roadmap-timeline.js'), /k\.barSeriesHtml\(/, 'the spans are the kit\'s bar series');
+});
+
+test('a missing timeline module leaves the deck exactly as it was', () => {
+  // The section is additive: the module is a <script> that can 404 behind a bad
+  // deploy, and when it does the deck must render its hero and its cards rather
+  // than an empty band or a thrown boot.
+  const js = read('roadmap.js');
+  const fn = js.slice(js.indexOf('function timelineHtml'), js.indexOf('function sectionHtml'));
+  assert.match(fn, /mod \? mod\.timelineCardHtml/, 'the module is checked before it is called');
+  assert.match(fn, /card \? sectionHtml\([\s\S]*?\) : ''/, 'and a null card renders no section at all');
+});
+
+// Boot roadmap.js in a stub DOM with the real dom-utils, the real kit and the
+// real timeline module, answer /public/progress + /public/versions with the
+// checked-in fixtures, and hand back what landed in #rm-root.
+//
+// This is the half the source pins and the kit's own RUN test both miss: the
+// GLUE. `mergeVersions()` maps `m.started_at`/`m.shipped_at` onto `start`/`ship`
+// and the timeline reads those names — a rename or a typo on either side leaves
+// every span unparsable, the section renders nothing, and every other test in
+// this file still passes because none of them run the mapping.
+async function bootRoadmap({ progress, versions } = {}) {
+  const FIX = path.join(ROOT, 'scripts', 'hall-preview', 'fixtures');
+  const fx = (f) => JSON.parse(fs.readFileSync(path.join(FIX, f), 'utf8'));
+  const prog = progress || fx('public__progress.json');
+  // public__versions.json, not versions.json: the deck calls the PUBLIC route.
+  const vers = versions || fx('public__versions.json');
+
+  const els = new Map();
+  const makeEl = () => ({
+    dataset: {}, style: {}, textContent: '', hidden: false, _html: '',
+    classList: { add() {}, remove() {}, toggle() { return false; }, contains() { return false; } },
+    setAttribute() {}, getAttribute() { return null; },
+    addEventListener() {}, appendChild() {}, insertAdjacentHTML(_, h) { this._html += h; },
+    closest() { return null; }, querySelector() { return null; }, querySelectorAll() { return []; },
+    set innerHTML(v) { this._html = String(v); }, get innerHTML() { return this._html; },
+  });
+  const documentObj = {
+    getElementById(id) { if (!els.has(id)) els.set(id, makeEl()); return els.get(id); },
+    querySelector(sel) {
+      const s = String(sel);
+      return s.startsWith('#') ? this.getElementById(s.slice(1)) : makeEl();
+    },
+    querySelectorAll() { return []; },
+    createElement() { return makeEl(); },
+    addEventListener() {},
+  };
+  const client = {
+    request: async (_m, urlPath) => {
+      if (urlPath.includes('/public/progress')) return { ok: true, status: 200, data: prog };
+      if (urlPath.includes('/public/versions')) return { ok: true, status: 200, data: vers };
+      // No goals: goalSummary() swallows the failure by design, and the goal
+      // layer is not what this test is about.
+      return { ok: false, status: 500, data: {} };
+    },
+  };
+  const windowObj = {
+    BongosClient: { createClient: () => client },
+    __BRANDING__: {}, __MODULES__: { enabled: {} },
+    localStorage: { getItem: () => null, setItem() {}, removeItem() {} },
+    location: { hash: '', pathname: '/roadmap', search: '', assign() {} },
+    addEventListener() {}, matchMedia: () => ({ matches: false, addEventListener() {} }),
+  };
+  const sandbox = {
+    window: windowObj, document: documentObj, location: windowObj.location,
+    localStorage: windowObj.localStorage,
+    CSS: { escape: (s) => String(s) }, history: { replaceState() {} },
+    console: { ...console, error() {}, warn() {} },
+    setTimeout, clearTimeout, URLSearchParams, Intl,
+  };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  for (const f of ['dom-utils.js', 'hall-kit.js', 'roadmap-timeline.js', 'roadmap.js']) {
+    vm.runInContext(read(f), sandbox, { filename: f });
+  }
+  for (let i = 0; i < 10; i++) await new Promise((r) => setTimeout(r, 0));
+  return { html: documentObj.getElementById('rm-root').innerHTML, prog, vers };
+}
+
+test('RUN: the deck really draws its timeline — mergeVersions\' field mapping included', async () => {
+  const { html, vers } = await bootRoadmap();
+  assert.ok(html.length > 0, 'the deck rendered');
+  assert.match(html, /class="rm-sec__t">In time</, 'the timeline section is on the page');
+  assert.match(html, /class="kit-bars"/, 'and it is the kit drawing it');
+  assert.doesNotMatch(html, /NaN|Infinity|undefined/, 'no broken geometry reaches the DOM');
+
+  // Every version the fixture gives a start date has a bar, labelled by its id.
+  // This is the assertion that fails if `start`/`ship` ever drift from
+  // `started_at`/`shipped_at`: the mapping breaks, no date parses, and the
+  // section quietly disappears.
+  const started = vers.versions.filter((v) => v.started_at);
+  assert.ok(started.length >= 2, 'the fixture has enough started versions to be a timeline');
+  for (const v of started) {
+    assert.ok(html.includes(`class="kit-bars__label">${v.id}<`), `${v.id} has a bar`);
+  }
+  // A version still running says "now" rather than naming a date nothing recorded.
+  if (vers.versions.some((v) => v.started_at && !v.shipped_at)) {
+    assert.match(html, /→ now</, 'an open span reads "now"');
+  }
+  // Later versions sit further along the shared axis — the whole point of a
+  // timeline, and the thing a plain bar series would NOT show.
+  const offsets = [...html.matchAll(/margin-left:(\d+)%/g)].map((m) => Number(m[1]));
+  assert.ok(offsets.length >= 1, 'spans are offset, not all flush left');
+  assert.deepEqual(offsets, [...offsets].sort((a, b) => a - b), 'offsets grow with start date');
+});
+
+test('RUN: a deck whose versions carry no dates renders every other section unharmed', async () => {
+  // The degradation that matters: /public/versions is fetched with a
+  // `.catch(() => [])`, so a 404 or a stripped payload must cost the timeline
+  // and nothing else. Before this task the whole page relied on that silently.
+  const { html } = await bootRoadmap({
+    versions: { versions: [{ id: 'BONGOS-V1', name: 'x', status: 'building', started_at: null, shipped_at: null }] },
+  });
+  assert.doesNotMatch(html, /In time</, 'no timeline section');
+  assert.match(html, /rm-hero/, 'but the hero still renders');
+  assert.doesNotMatch(html, /NaN|undefined/);
+});
+
+test('the timeline module is a pure builder, so it is testable and cannot boot itself', () => {
+  const src = read('roadmap-timeline.js');
+  // The node-require-safe tail (the hall-kit.js / dom-utils.js contract): the
+  // ONLY eval-time side effect is the assignment, and only when a window exists.
+  assert.match(src, /if \(typeof window !== 'undefined'\) window\.OTBRoadmapTimeline = api;/);
+  assert.match(src, /if \(typeof module !== 'undefined' && module\.exports\) module\.exports = api;/);
+  // It must not reach for the page: no document, no fetch, no client.
+  for (const forbidden of [/\bdocument\./, /\bfetch\(/, /BongosClient/]) {
+    assert.doesNotMatch(src, forbidden, `roadmap-timeline.js touches ${forbidden} — it is a builder, not a page`);
+  }
+});