@bongos/core 1.19.482 → 1.19.484

package/tests/hall_board_world.mjs

@@ -220,3 +220,202 @@ test('the link a list writes carries WHERE it was opened from — path, query an
   sandbox.location.hash = '#backlog';
   assert.equal(api.href('7'), '/task/7?from=%2Fwork%23backlog', 'on the builders host the hall is mounted at /');
 });
+
+// ---- 8. Home matches its board mock (task 1003464) ---------------------------
+//
+// The owner compared live Home against docs/design/mocks/hall/board/v3.html and
+// found four gaps the floors cannot see: the greeting was never built (the page
+// opened cold on a row of numbers, its h1 sr-only), the band ended ragged
+// (`align-items: start` let Standing shrink under Goals), the Standing card had
+// no fact ledger, and the system banners stacked inside it against the
+// placement rule. A floor measures overflow and contrast; none compares a page
+// to the mock it was built from — so these pins do, statically and then by
+// RUNNING hall-render.js against a stub DOM.
+
+const indexHtml = read('index.html');
+const hallRenderJs = read('hall-render.js');
+const buildersJs = read('builders.js');
+const goalInboxJs = read('goal-inbox.js');
+
+test('the greeting IS the page\'s one h1, in the board\'s label voice, with a sub-line beside it', () => {
+  const h1s = indexHtml.match(/<h1\b/g) || [];
+  assert.equal(h1s.length, 1, 'one-header-main-h1: the greeting must BECOME the h1, never add a second');
+  assert.match(indexHtml, /<div class="page-head page-head--board page-head--hall">\s*<h1 id="hall-h1" class="page-head__h">Builders' Hall<\/h1>\s*<p id="hall-sub" class="page-head__sub" hidden><\/p>/,
+    'the h1 is visible (no sr-only), keeps the id brand-apply.js writes into, and the sub-line ships hidden');
+  assert.doesNotMatch(indexHtml, /id="hall-h1" class="sr-only"/, 'the sr-only h1 is gone');
+});
+
+test('the band ends level: no align-items on the grid, so the two cards stretch', () => {
+  const band = rule(styleCss, '.view-zone--band');
+  assert.ok(band, '.view-zone--band has a rule');
+  assert.doesNotMatch(band, /align-items/, 'the mock\'s .band declares none — stretch is what makes Standing end where Goals ends');
+  assert.match(styleCss.replace(/\/\*[\s\S]*?\*\//g, ''), /@media \(max-width:\s*768px\)[\s\S]*?\.view-zone--band \{ grid-template-columns: 1fr; \}/,
+    'and the single-column fallback still exists below 768px (the task text said 860; the sheet says 768)');
+});
+
+test('the Standing card is the mock\'s: an identity line and a three-row fact ledger, no banner', () => {
+  const block = hallRenderJs.match(/const homeStanding = document\.getElementById\('home-standing-body'\);[\s\S]*?renderSystemNotices\(/);
+  assert.ok(block, 'the Home card render is where it was');
+  assert.match(block[0], /class="home-who"/, 'the identity line');
+  assert.match(block[0], /<dt>\$\{escapeHtml\(curLabel\(true\)\)\}<\/dt>/,
+    'the currency row takes its label from the branding contract at render time — a data-currency-label attribute is rebranded once at load, before this row exists');
+  for (const label of ['On the board', 'Preferred work']) {
+    assert.match(block[0], new RegExp(`<dt>${label}</dt>`), `the ledger row: ${label}`);
+  }
+  assert.match(block[0], /: PREFS_EMPTY\}/, 'the empty-preference copy is the one string both Standing surfaces share');
+  assert.doesNotMatch(block[0], /Banner\}/, 'no banner is stacked into the card any more');
+  for (const sel of ['.home-who', '.home-facts', '.home-facts dt', '.home-facts dd']) {
+    assert.ok(rule(styleCss, sel), `style.css styles ${sel}`);
+  }
+  assert.match(rule(styleCss, '.home-who__avatar') || '', /var\(--skeleton\)/, 'the avatar placeholder is the skeleton tone, not --bg-deep (pure black in dark)');
+});
+
+test('the system notices are inbox LINES, first in the card, and counted by its refresh()', () => {
+  const mount = goalInboxJs.match(/host\.innerHTML =([\s\S]*?);/);
+  assert.ok(mount, 'the inbox mounts its slices');
+  const sys = mount[1].indexOf('id="attention-system"');
+  const goals = mount[1].indexOf('id="attention-goals"');
+  assert.ok(sys > -1 && sys < goals, '#attention-system is a slice, ahead of the goals slice');
+  assert.match(hallRenderJs, /function renderSystemNotices\(/, 'hall-render.js renders them from the /me state it already holds');
+  const fn = hallRenderJs.match(/function renderSystemNotices\([\s\S]*?\n  \}\n/);
+  assert.ok(fn, 'renderSystemNotices is a whole function');
+  assert.match(fn[0], /class="ginbox__item ginbox__item--/, 'rows carry .ginbox__item, so OTBAttention.refresh() counts them');
+  assert.match(fn[0], /OTBAttention[\s\S]*refresh\(\)/, 'and the renderer asks the card to re-decide its visibility');
+  assert.doesNotMatch(fn[0], /covered/, 'a "we cover it" note is information, not an action, and does not land in the inbox');
+  // the rebase-owed line carries task refs as links in prose; a 13.5px link
+  // with no compensation sits under the 24px floor, and the kit stub renders
+  // no notices, so this is pinned in the sheet rather than left to a render
+  for (const sel of ['.ginbox__line a', '.ginbox__goal, .triage-inbox__link, .next-up__title']) {
+    const r = rule(styleCss, sel) || '';
+    assert.match(r, /min-height:\s*24px/, `${sel} clears the floor`);
+    assert.match(r, /padding:\s*3px 0/, `${sel} buys it with the row recipe`);
+  }
+});
+
+test('the greeting reads /me, the public progress and the claimable feed, and builders.js feeds all three', () => {
+  assert.match(buildersJs, /getJSON\(`\$\{API\}\/public\/progress`\)/, 'Home fetches the public progress once');
+  assert.match(buildersJs, /lastClaimableCount = resp && Array\.isArray\(resp\.claimable\) \? resp\.claimable\.length : null;/,
+    'the claimable feed Home already fetches for Next-up answers the count');
+  assert.match(buildersJs, /get lastProgressState\(\)/, 'the renderer reads progress through a getter, so it cannot freeze at boot');
+  assert.match(buildersJs, /get lastClaimableCount\(\)/, 'and the count the same way');
+  assert.equal((buildersJs.match(/renderGreeting\(\)/g) || []).length, 3, 'rendered after /me, after progress and after the claimable feed — each half as it lands');
+});
+
+// Boot hall-render.js against a stub DOM and a ctx of getters (the way
+// builders.js builds it) and read what the greeting and the card actually say.
+function bootHallRender({ me, progress = null, claimable = null, leaderboard = [] }) {
+  const els = new Map();
+  const makeEl = () => ({
+    dataset: {}, style: {}, textContent: '', hidden: false, _html: '', innerHTML: '',
+    classList: { add() {}, remove() {}, toggle() { return false; }, contains() { return false; } },
+    setAttribute() {}, getAttribute() { return null; }, addEventListener() {},
+    querySelector() { return makeEl(); }, querySelectorAll() { return []; }, appendChild() {}, remove() {},
+  });
+  const documentObj = {
+    getElementById(id) { if (!els.has(id)) els.set(id, makeEl()); return els.get(id); },
+    querySelector(sel) { return this.getElementById(String(sel).replace(/^#/, '')); },
+    querySelectorAll() { return []; },
+    createElement() { return makeEl(); },
+    addEventListener() {},
+    body: { dataset: {} }, documentElement: { dataset: {} },
+  };
+  const escapeHtml = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const windowObj = {
+    OTB: { escapeHtml, $: (sel) => documentObj.querySelector(sel), fmtNum: (n) => Number(n || 0).toLocaleString('en-US'), moduleOn: () => false },
+    // the factory builds the Standing ships pager + rail at creation
+    OTBKit: { makePager: () => ({ page: 1, perPage: 10 }), makeSectionRail: () => ({ render() {}, refresh() {} }), paginate: (rows) => rows, shipVisualThumbHtml: () => '' },
+    OTBTaskDetail: { href: (id) => `/task/${id}?from=%2F` },
+    location: { hostname: 'builders.example.com', pathname: '/', hash: '', href: 'https://builders.example.com/' },
+    localStorage: { getItem() { return null; }, setItem() {}, removeItem() {} },
+    addEventListener() {},
+  };
+  const sandbox = { window: windowObj, document: documentObj, location: windowObj.location, localStorage: windowObj.localStorage, console, setTimeout, clearTimeout, Date, URL };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(read('hall-render.js'), sandbox, { filename: 'hall-render.js' });
+  const ctx = {
+    API: '/api/gds', RANK_ORDER: ['xenos', 'thetes', 'metic', 'archon'], api: {}, brandWorld: () => 'Cloud Bongos',
+    curLabel: (caps) => (caps ? 'Credits' : 'credits'), emptyRow: () => '', fmtDate: (d) => String(d).slice(0, 10),
+    mins: (m) => `${m}m`, normalizeRank: (r) => String(r || '').toLowerCase(), pct: (n) => `${n}%`, postJSON: async () => ({}),
+    rankLabel: (r) => r, rankWeight: () => 0, signClasses: () => '', toast() {}, usd: (n) => `$${n}`,
+    instanceRepo: null, newcomerGated: false,
+    get lastMeState() { return me; }, get lastCostState() { return me.cost || null; }, get lastKarmaState() { return me.karma || null; },
+    get lastNeedsState() { return me.needs || null; }, get lastRebaseState() { return me.needs_rebase_tasks || null; },
+    get lastProgressState() { return progress; }, get lastClaimableCount() { return claimable; },
+  };
+  const api = windowObj.OTBHallRender(ctx);
+  api.lbState.rows = leaderboard;
+  return { api, el: (id) => documentObj.getElementById(id) };
+}
+
+const ME = {
+  builder: { id: 7, display_name: 'Percy Jackson', github_login: 'percy', rank: 'metic', total_credits: 14441, karma: 96, preferred_disciplines: [], created_at: '2026-01-01T00:00:00Z' },
+  needs: { items: [{ state: 'action_needed', title: 'Image-generation key', message: 'Your free art coverage has ended.', action: { href: '/settings#art', label: 'Add your key' } }] },
+  cost: { level: 'warn', spend_mtd_usd: 80, budget_mtd_usd: 100, pct_used: 80 },
+  needs_rebase_tasks: [{ id: 1003460 }],
+};
+const LEADERBOARD = [{ github_login: 'a', total_credits: 20000 }, { github_login: 'percy', total_credits: 14441 }, { github_login: 'b', total_credits: 3 }, { github_login: 'c', total_credits: 1 }];
+const PROGRESS = { progress: [{ version_id: 'BONGOS-V1', status: 'building', total_count: 605, percent_complete: 75 }, { version_id: 'V2', status: 'planning', total_count: 9000, percent_complete: 0 }] };
+
+test('RUN: the greeting names the builder, and the sub-line says how far the version is and what is claimable', () => {
+  const { api, el } = bootHallRender({ me: ME, progress: PROGRESS, claimable: 5 });
+  api.renderGreeting();
+  assert.match(el('hall-h1').textContent, /^Good (morning|afternoon|evening), Percy Jackson$/);
+  assert.equal(el('hall-sub').textContent, 'BONGOS-V1 is 75 percent shipped. Five tasks are claimable right now.');
+  assert.equal(el('hall-sub').hidden, false);
+});
+
+test('RUN: each half of the sentence renders as its data lands, and the line hides with neither', () => {
+  const none = bootHallRender({ me: ME });
+  none.api.renderGreeting();
+  assert.equal(none.el('hall-sub').hidden, true, 'nothing to say yet');
+  const onlyProgress = bootHallRender({ me: ME, progress: PROGRESS });
+  onlyProgress.api.renderGreeting();
+  assert.equal(onlyProgress.el('hall-sub').textContent, 'BONGOS-V1 is 75 percent shipped.');
+  const zero = bootHallRender({ me: ME, progress: PROGRESS, claimable: 0 });
+  zero.api.renderGreeting();
+  assert.match(zero.el('hall-sub').textContent, /Nothing is claimable right now\.$/);
+  const one = bootHallRender({ me: ME, claimable: 1 });
+  one.api.renderGreeting();
+  assert.equal(one.el('hall-sub').textContent, 'One task is claimable right now.');
+  const many = bootHallRender({ me: ME, claimable: 63 });
+  many.api.renderGreeting();
+  assert.equal(many.el('hall-sub').textContent, '63 tasks are claimable right now.');
+});
+
+test('RUN: the Standing card carries the three facts, the place as "2nd of 4", and no banner', () => {
+  const { api, el } = bootHallRender({ me: ME, leaderboard: LEADERBOARD });
+  api.renderProfile(ME.builder);
+  const html = el('home-standing-body').innerHTML;
+  assert.match(html, /<p class="home-who__name">Percy Jackson<\/p>/);
+  assert.match(html, /<p class="home-who__handle">@percy<\/p>/);
+  // written from curLabel(true), not a data-currency-label attribute: brand-apply
+  // rebrands those once at load, and this row is stamped after /me answers
+  assert.match(html, /<dt>Credits<\/dt><dd>14,441<\/dd>/);
+  assert.match(html, /<dt>On the board<\/dt><dd>2nd of 4<\/dd>/);
+  assert.match(html, /<dt>Preferred work<\/dt><dd>Not set yet<\/dd>/, 'the mock\'s copy for an empty preference');
+  assert.doesNotMatch(html, /profile__(needs|budget|rebase)/, 'the banners are not in the card');
+  const withPrefs = bootHallRender({ me: ME, leaderboard: [] });
+  withPrefs.api.renderProfile({ ...ME.builder, preferred_disciplines: ['engineer', 'ui'] });
+  assert.match(withPrefs.el('home-standing-body').innerHTML, /<dd>engineer, ui<\/dd>/);
+  assert.match(withPrefs.el('home-standing-body').innerHTML, /<dt>On the board<\/dt><dd>—<\/dd>/, 'no roll yet: a dash, not a wrong place');
+});
+
+test('RUN: the three notices are inbox lines with a kind, a line and — where one exists — a door', () => {
+  const { api, el } = bootHallRender({ me: ME });
+  api.renderProfile(ME.builder);
+  const html = el('attention-system').innerHTML;
+  assert.match(html, /<h3 class="ginbox__sec-h">From the system<\/h3>/);
+  assert.equal((html.match(/class="ginbox__item /g) || []).length, 3, 'rebase, the needed input, the budget');
+  assert.match(html, /ginbox__item--danger"><div class="ginbox__body"><span class="ginbox__kind">Rebase owed<\/span>/);
+  assert.match(html, /<a href="\/task\/1003460\?from=%2F">task 1003460<\/a>/, 'a task ref is a door through OTBTaskDetail.href, never a bare #N');
+  assert.match(html, /ginbox__item--warn"><div class="ginbox__body"><span class="ginbox__kind">Image-generation key<\/span>/);
+  assert.match(html, /<a class="btn-ghost" href="\/settings#art">Add your key<\/a>/);
+  assert.match(html, /<span class="ginbox__kind">Approaching monthly budget<\/span>/);
+  const quiet = bootHallRender({ me: { builder: ME.builder } });
+  quiet.api.renderProfile(ME.builder);
+  assert.equal(quiet.el('attention-system').innerHTML, '', 'nothing owed, nothing rendered');
+  const covered = bootHallRender({ me: { builder: ME.builder, needs: { items: [{ state: 'covered', title: 'Art', message: 'We cover it.' }] } } });
+  covered.api.renderProfile(ME.builder);
+  assert.equal(covered.el('attention-system').innerHTML, '', 'a covered need is not an action');
+});