@bongos/core 1.21.51 → 1.21.52

package/tests/hub_account_page.mjs

@@ -18,7 +18,9 @@
 //      header of its own — the same markup as projects.html, cosmos.css's rules,
 //      no map search, links into /projects, Account as the current place — and
 //      the bands EXECUTED: the chip from GET /me, open/close, Escape, the arrows,
-//      a click outside, and sign out as the POST.
+//      a click outside, and sign out as the POST. The bands script is the shared
+//      assets/hub-bar.js since task 1004489 (the three footer doors load it too),
+//      so the page's own script and that file run together here, as in a browser.
 //
 // DB-free. Run:  node --test tests/hub_account_page.mjs
 
@@ -37,6 +39,7 @@ const LANDING = path.join(ROOT, 'modules', 'public-landing', 'public');
 const HALL = path.join(ROOT, 'modules', 'hall-ui', 'public');
 const PAGE = fs.readFileSync(path.join(LANDING, 'account.html'), 'utf8').replace(/\r\n/g, '\n');
 const SCRIPT = PAGE.split('<script>').pop().split('</script>')[0];
+const BAR = fs.readFileSync(path.join(LANDING, 'assets', 'hub-bar.js'), 'utf8');
 const HUB = fs.readFileSync(path.join(LANDING, 'projects.html'), 'utf8').replace(/\r\n/g, '\n');
 const COSMOS = fs.readFileSync(path.join(LANDING, 'assets', 'cosmos.css'), 'utf8');
 
@@ -62,7 +65,9 @@ test('portable and dark only: stamped title, balanced sentinels, no :root, no ba
 });
 
 test('the script builds no markup from strings, and the controls are real markup', () => {
-  assert.doesNotMatch(SCRIPT, /innerHTML|insertAdjacentHTML|outerHTML/, 'live DOM is textContent / createElement only');
+  for (const [name, src] of [['the page', SCRIPT], ['assets/hub-bar.js', BAR]]) {
+    assert.doesNotMatch(src, /innerHTML|insertAdjacentHTML|outerHTML/, `${name}: live DOM is textContent / createElement only`);
+  }
   for (const id of ['fName', 'fBio', 'fHandle', 'fLinkWebsite', 'fLinkX', 'fLinkLinkedin', 'fLinkDiscord', 'profileSave', 'handleSave', 'privacySave', 'recordSave']) {
     assert.match(PAGE, new RegExp(`id="${id}"`), `#${id} ships in the markup`);
   }
@@ -76,8 +81,17 @@ test('the script builds no markup from strings, and the controls are real markup
 test('the door returns here, and the page calls only its own-scoped routes', () => {
   assert.match(PAGE, /href="\/api\/bongos\/auth\/web\/start\?return=\/account&amp;repos=1"/, 'sign-in lands back on /account, asking for repo access once (task 1004549)');
   const calls = [...SCRIPT.matchAll(/request\('(GET|PATCH|POST)', '([^']+)'/g)].map((m) => `${m[1]} ${m[2]}`);
-  assert.deepEqual([...new Set(calls)].sort(), ['GET /me', 'GET /me/cross-project','PATCH /me/cross-project', 'PATCH /me/handle', 'PATCH /me/profile'].sort());
-  assert.match(SCRIPT, /fetch\(API \+ '\/auth\/logout', \{ method: 'POST'/, 'sign out is the hub logout POST');
+  assert.deepEqual([...new Set(calls)].sort(), ['GET /me/cross-project', 'PATCH /me/cross-project', 'PATCH /me/handle', 'PATCH /me/profile'].sort());
+  // the bar's two calls live in the shared asset: the identity read and sign out
+  const barCalls = [...BAR.matchAll(/fetch\(API \+ '([^']+)', \{ method: '(GET|POST)'/g)].map((m) => `${m[2]} ${m[1]}`);
+  assert.deepEqual(barCalls.sort(), ['GET /me', 'POST /auth/logout']);
+  assert.match(BAR, /var API = '\/api\/bongos';/);
+});
+
+test('the bar’s script is the shared asset, loaded before the page’s own (task 1004489)', () => {
+  assert.match(PAGE, /<script src="\/assets\/hub-bar\.js"><\/script>\n<script>\n\(function \(\) \{/, 'hub-bar.js runs first, so window.HubBar exists when the page script asks for it');
+  assert.doesNotMatch(SCRIPT, /function (openBand|closeMenus|openMenu|paintBar)\b|\/auth\/logout/, 'no second copy of the bands, the chip or sign out in the page');
+  assert.match(SCRIPT, /var bar = window\.HubBar \|\| \{ paint: function \(\) \{\}, ready: Promise\.resolve\(null\) \};/, 'and the page survives the asset failing to load');
 });
 
 // ── 1b. the bar is the hub's (task 1004455) ──────────────────────────────────
@@ -259,7 +273,10 @@ function boot(answer) {
     return Promise.resolve({ status, ok: status >= 200 && status < 300, json: () => Promise.resolve(data) });
   };
   const location = { hostname: 'cloudbongos.com', pathname: '/account' };
-  vm.runInNewContext(SCRIPT, { document, fetch, location, window: { location: { assign(p) { dom.assigned = p; } } }, URL, Array, Object, JSON, Promise });
+  // one global, as in the browser: hub-bar.js sets window.HubBar, then the page reads it
+  const ctx = vm.createContext({ document, fetch, location, window: { location: { assign(p) { dom.assigned = p; } } }, URL, Array, Object, JSON, Promise });
+  vm.runInContext(BAR, ctx);
+  vm.runInContext(SCRIPT, ctx);
   return dom;
 }
 const settle = async () => { for (let i = 0; i < 8; i++) await new Promise((r) => setImmediate(r)); };

package/tests/landing_legal_pages.mjs

@@ -7,6 +7,10 @@
 // the builders/status hosts), they are PORTABLE (server-stamped, no baked apex or
 // repo, apex-only claims removed off the hub), and BOTH footers link them.
 //
+// They also wear the hub's bar (task 1004489): the same markup as projects.html
+// and account.html, and assets/hub-bar.js EXECUTED against each page's served
+// shape on the hub and on a child instance.
+//
 // DB-free: static HTML through the same transforms landingPage() applies, plus
 // the platform app over an ephemeral listener (the public_landing_projects shape).
 //
@@ -17,6 +21,7 @@ import { test, before, after } from 'node:test';
 import http from 'node:http';
 import fs from 'node:fs';
 import path from 'node:path';
+import vm from 'node:vm';
 import { fileURLToPath } from 'node:url';
 import { createRequire } from 'node:module';
 
@@ -126,6 +131,276 @@ test('cosmos.css carries the footer-nav rule beside .foot a', () => {
   assert.match(css, /\.foot \.footNav\{/);
 });
 
+// ── the hub's bar (task 1004489) ───────────────────────────────────────────
+//
+// /projects and /account wear the hub's bar and its two bands; the doors used to
+// draw their own simple header, so a footer link swapped the whole chrome. Now
+// they wear the same bar: the hub's markup, cosmos.css's rules, no map search,
+// band links naming /projects in full, no item the current place, and Account
+// apex-only (these pages serve on EVERY instance; /account only on the hub).
+// The behaviour is assets/hub-bar.js, shared with account.html, EXECUTED below
+// against each page's own markup in both shapes.
+
+const HUB = read('projects.html');
+const ACCOUNT = read('account.html');
+const BAR = read('assets/hub-bar.js');
+const bandOf = (html, id) => {
+  const m = html.match(new RegExp(`<div class="menuBand" id="${id}"[\\s\\S]*?\\n</div>`));
+  assert.ok(m, `#${id} is a whole band`);
+  return m[0];
+};
+const bandLinks = (band) => [...band.matchAll(/<a class="bandT[^"]*" href="([^"]+)"[^>]*>([^<]+)<\/a>/g)].map((m) => [m[2], m[1]]);
+// the bar and both bands, from the skip link to the end of the profile band
+const chrome = (html) => {
+  const m = html.match(/<a class="skip vh"[\s\S]*?<div class="menuBand" id="menuProfile"[\s\S]*?\n<\/div>\n/);
+  assert.ok(m, 'the skip link, the bar and both bands are one block');
+  return m[0];
+};
+
+for (const p of PAGES) {
+  test(`${p.file}: the bar is the hub's own — its markup, no simple header, no map search`, () => {
+    const html = read(p.file);
+    assert.doesNotMatch(html, /<header class="top">|class="btn-space"|class="mark"/, 'the simple header is gone');
+    assert.doesNotMatch(html, /id="(mapQ|qWrap|qToggle|onlyMine)"/, 'the search only filters the map, so it stays on the map');
+    for (const piece of [
+      '<header class="shell bar">',
+      '<a class="barMark" id="barMark" href="/">',
+      '<ellipse cx="8.4" cy="5.6" rx="6.6" ry="2.9"/>',
+      '<button class="trig" type="button" id="projTrig" data-menu="projects" aria-expanded="false" aria-controls="menuProjects">Projects<svg class="cv" viewBox="0 0 20 20" aria-hidden="true"><path d="m5.6 8 4.4 4.4L14.4 8"/></svg></button>',
+      '<button class="trig who" type="button" id="who" data-menu="profile" aria-expanded="false" aria-controls="menuProfile" hidden>',
+      '<div class="menuBand" id="menuProjects" data-menu="projects" hidden>',
+      '<div class="menuBand" id="menuProfile" data-menu="profile" hidden>',
+      '<div class="bandIn bandProfile">',
+      '<!--apex-only:start--><li class="bandCell"><a class="bandT" href="/account">Account</a></li><!--apex-only:end-->',
+      '<li class="bandCell"><a class="bandT signout" href="/api/bongos/auth/logout">Sign out</a></li>',
+    ]) {
+      assert.ok(HUB.includes(piece), `projects.html no longer carries: ${piece}`);
+      assert.ok(html.includes(piece), `${p.file} does not carry the hub's: ${piece}`);
+    }
+    assert.ok(html.includes(`<a class="signinDoor" id="signinTop" hidden href="/api/bongos/auth/web/start?return=${p.route}&amp;repos=1">Sign in</a>`),
+      'signed out, the door in the chip’s slot returns to this page, asking for repo access like every hub door (task 1004549)');
+    assert.match(html, /<a class="skip vh" href="#legal">Skip to content<\/a>\n/);
+    assert.match(html, /<main class="legal" id="legal">/, 'the skip link has its landmark');
+  });
+
+  test(`${p.file}: the bands say what the hub's say and lead into /projects; nothing here is the current place`, () => {
+    const html = read(p.file);
+    const clauses = (band) => [...band.matchAll(/>([^<]+)<\/a><span class="bandC">([^<]+)<\/span>/g)].map((m) => [m[1], m[2]]);
+    assert.deepEqual(clauses(bandOf(html, 'menuProjects')), clauses(bandOf(HUB, 'menuProjects')), 'the Projects band’s items and clauses are the hub’s');
+    assert.deepEqual(bandLinks(bandOf(html, 'menuProjects')), [
+      ['Sky', '/projects?view=map'], ['Table', '/projects?view=map&amp;sub=table'],
+      ['Your projects', '/projects?view=mine'], ['New project', '/projects?view=new'],
+    ], 'this page has no views of its own, so every item names /projects in full');
+    assert.deepEqual(bandLinks(bandOf(html, 'menuProfile')), [
+      ['My projects', '/projects?view=mine'], ['Account', '/account'], ['Sign out', '/api/bongos/auth/logout'],
+    ]);
+    assert.doesNotMatch(chrome(html), /aria-current/, 'no band item is this page');
+    const child = stripApexOnly(html, false);
+    assert.deepEqual(bandLinks(bandOf(child, 'menuProfile')), [
+      ['My projects', '/projects?view=mine'], ['Sign out', '/api/bongos/auth/logout'],
+    ], 'a child instance has no account page, so it loses the item whole');
+  });
+
+  test(`${p.file}: the bar is not restyled, and its script is the shared asset`, () => {
+    const html = read(p.file);
+    const styles = [...html.matchAll(/<style>([\s\S]*?)<\/style>/g)].map((m) => m[1]).join('\n');
+    assert.doesNotMatch(styles, /\.(shell|bar|barMark|barLeft|barRight|trig|who|signinDoor|menuBand|band[A-Z]\w*)\b[^{}]*\{/, 'no bar or band rule in the page');
+    assert.match(html, /<\/footer>\n<script src="\/assets\/hub-bar\.js"><\/script>\n<\/body>/, 'one shared script, after the markup it drives');
+    assert.doesNotMatch(html, /<script>/, 'and no inline copy of the bands');
+    assert.match(html, /<a data-link-hall href="\{\{buildersOrigin\}\}">Builders' hall<\/a><\/nav><\/footer>/, 'the hall keeps a door in the footer row now the bar has no Hall pill, as on /account');
+  });
+}
+
+test('the three doors and the account page carry one bar: identical but for the sign-in return and the current place', () => {
+  const norm = (html, route) => chrome(html)
+    .replace(`return=${route}&amp;`, 'return=ROUTE&amp;')
+    .replace(/href="#\w+">Skip to content/, 'href="#MAIN">Skip to content')
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .replace(/^[ \t]*\n/gm, '')
+    .replace(' aria-current="page"', '');
+  const doors = PAGES.map((p) => norm(read(p.file), p.route));
+  assert.equal(doors[1], doors[0], 'terms.html and privacy.html');
+  assert.equal(doors[2], doors[0], 'contact.html and privacy.html');
+  assert.equal(norm(ACCOUNT, '/account'), doors[0], 'account.html and the doors: one bar, so a change to it is a change to all four');
+});
+
+test('cosmos.css still carries the bar and the bands the doors lean on', () => {
+  const css = fs.readFileSync(path.join(LANDING, 'assets', 'cosmos.css'), 'utf8');
+  for (const rule of ['.bar{', '.barMark{', '.trig{', '.signinDoor{', '.menuBand{']) assert.ok(css.includes(rule), `cosmos.css still carries ${rule}`);
+});
+
+test('assets/hub-bar.js builds no markup from strings and makes only the bar’s two calls', () => {
+  assert.doesNotMatch(BAR, /innerHTML|insertAdjacentHTML|outerHTML/);
+  const calls = [...BAR.matchAll(/fetch\(API \+ '([^']+)', \{ method: '(GET|POST)'/g)].map((m) => `${m[2]} ${m[1]}`);
+  assert.deepEqual(calls.sort(), ['GET /me', 'POST /auth/logout']);
+  assert.doesNotMatch(BAR, /gtag|plausible|googletagmanager/, 'the privacy page promises no trackers');
+});
+
+// A DOM stub just wide enough for the bar: every id in the markup is an element
+// (hidden where the markup says so), each band's links are items in markup order,
+// and fetch answers from a handler. Booted from the SERVED shape of the page —
+// hub or child — so the child's missing Account item is what the script meets.
+function bootBar(html, answer, pathname) {
+  const els = new Map();
+  const listeners = (o) => { o._on = {}; o.addEventListener = (t, f) => { (o._on[t] ||= []).push(f); }; return o; };
+  const el = (id, hidden, attrs) => listeners({
+    id, hidden, attrs, textContent: '',
+    getAttribute(n) { return n in attrs ? attrs[n] : null; },
+    setAttribute(n, v) { attrs[n] = v; },
+    closest(sel) { return sel === '.trig' && /\btrig\b/.test(attrs.class || '') ? this : null; },
+    focus() { document.activeElement = this; },
+  });
+  for (const m of html.matchAll(/<(\w+)([^>]*?)\sid="([\w-]+)"([^>]*)>/g)) {
+    const attrs = Object.fromEntries([...(m[2] + m[4]).matchAll(/\s([\w-]+)="([^"]*)"/g)].map((a) => [a[1], a[2]]));
+    els.set(m[3], el(m[3], /\shidden\b/.test(m[2] + m[4]), attrs));
+  }
+  const trigs = [...els.values()].filter((e) => /\btrig\b/.test(e.attrs.class || ''));
+  const bands = [...html.matchAll(/<div class="menuBand" id="(\w+)"[\s\S]*?\n<\/div>/g)].map((m) => {
+    const band = els.get(m[1]);
+    band.items = [...m[0].matchAll(/<li class="bandCell"(?: id="(\w+)")?><a class="([^"]+)" href="([^"]+)"([^>]*)>([^<]+)<\/a>/g)].map((a) => ({
+      cls: a[2], href: a[3], text: a[5], cell: els.get(a[1]) || { hidden: false },
+      focus() { document.activeElement = this; },
+      closest(sel) {
+        if (sel === 'a') return this;
+        if (sel === '[aria-current="page"]') return a[4].includes(' aria-current="page"') ? this : null;
+        if (sel === 'a.signout') return /\bsignout\b/.test(this.cls) ? this : null;
+        if (sel === '.menuBand') return band;
+        if (sel === '[hidden]') return this.cell.hidden ? this.cell : null;
+        return null;
+      },
+    }));
+    band.contains = (x) => band.items.includes(x);
+    band.querySelector = () => band.items.find((i) => !i.cell.hidden) || null;
+    band.querySelectorAll = () => band.items;
+    return band;
+  });
+  const docOn = {};
+  const event = (extra) => ({ prevented: false, preventDefault() { this.prevented = true; }, ...extra });
+  const calls = [];
+  const dom = {
+    els, calls, assigned: null,
+    active: () => document.activeElement,
+    band: (id) => els.get(id),
+    item: (id, text) => els.get(id).items.find((i) => i.text === text),
+    click(target, detail = 1) {
+      const band = bands.find((b) => b.items.includes(target));
+      const ev = event({ target, detail });
+      for (const f of [...(target._on ? target._on.click || [] : []), ...(band ? band._on.click || [] : []), ...(docOn.click || [])]) f(ev);
+      return ev;
+    },
+    key(key) { const ev = event({ key }); for (const f of docOn.keydown || []) f(ev); return ev; },
+    focusout(band, relatedTarget) { for (const f of band._on.focusout || []) f({ relatedTarget }); },
+  };
+  const document = {
+    cookie: '', activeElement: null,
+    addEventListener: (t, f) => { (docOn[t] ||= []).push(f); },
+    getElementById: (id) => els.get(id) || null,
+    querySelector(sel) {
+      if (sel === '.menuBand:not([hidden])') return bands.find((b) => !b.hidden) || null;
+      if (sel === '.trig[aria-expanded="true"]') return trigs.find((t) => t.attrs['aria-expanded'] === 'true') || null;
+      throw new Error(`unstubbed selector: ${sel}`);
+    },
+    querySelectorAll(sel) {
+      if (sel === '.trig') return trigs;
+      if (sel === '.menuBand') return bands;
+      throw new Error(`unstubbed selector: ${sel}`);
+    },
+  };
+  const fetch = (url, init = {}) => {
+    const p = url.replace(/^\/api\/bongos/, '');
+    calls.push({ method: init.method || 'GET', path: p });
+    const { status, data } = answer(init.method || 'GET', p);
+    return Promise.resolve({ status, ok: status >= 200 && status < 300, json: () => Promise.resolve(data) });
+  };
+  const window = { location: { assign(to) { dom.assigned = to; } } };
+  vm.runInNewContext(BAR, { document, fetch, window, location: { hostname: 'cloudbongos.com', pathname }, Array, Promise });
+  dom.window = window;
+  return dom;
+}
+const settle = async () => { for (let i = 0; i < 6; i++) await new Promise((r) => setImmediate(r)); };
+const ME = { builder: { id: '1', github_login: 'octocat', avatar_url: 'https://avatars.example/u/1' } };
+const signedIn = (m, p) => (p === '/me' ? { status: 200, data: ME } : { status: 204, data: null });
+
+for (const p of PAGES) {
+  for (const hub of [true, false]) {
+    const shape = hub ? 'the hub' : 'a child instance';
+    test(`${p.file} on ${shape}, executed: signed out the door takes the chip's slot; signed in the chip names the login`, async () => {
+      const served = stripApexOnly(read(p.file), hub);
+      const out = bootBar(served, () => ({ status: 401, data: { error: { code: 'unauthenticated' } } }), p.route);
+      await settle();
+      assert.deepEqual(out.calls, [{ method: 'GET', path: '/me' }], 'one identity read, nothing else');
+      assert.equal(out.els.get('who').hidden, true, 'no chip without a session');
+      assert.equal(out.els.get('signinTop').hidden, false);
+      assert.equal(out.els.get('mineCell').hidden, true, 'and the Projects band offers no Your projects');
+      assert.equal(await out.window.HubBar.ready, null);
+
+      const dom = bootBar(served, signedIn, p.route);
+      await settle();
+      assert.equal(dom.els.get('who').hidden, false);
+      assert.equal(dom.els.get('signinTop').hidden, true);
+      assert.equal(dom.els.get('whoLogin').textContent, 'octocat');
+      assert.equal(dom.els.get('bandWhoLogin').textContent, 'octocat');
+      assert.equal(dom.els.get('who').getAttribute('aria-label'), 'Account, octocat');
+      for (const id of ['whoImg', 'bandWhoImg']) assert.equal(dom.els.get(id).src, 'https://avatars.example/u/1');
+      assert.equal(dom.els.get('mineCell').hidden, false);
+      assert.deepEqual(dom.band('menuProfile').items.map((i) => i.text), hub ? ['My projects', 'Account', 'Sign out'] : ['My projects', 'Sign out']);
+    });
+  }
+
+  test(`${p.file}, executed: the bands open and close the way the hub's do — toggle, one at a time, outside, Tab out, keys`, async () => {
+    const dom = bootBar(stripApexOnly(read(p.file), true), signedIn, p.route);
+    await settle();
+    const [projTrig, who] = [dom.els.get('projTrig'), dom.els.get('who')];
+    const [projects, profile] = [dom.band('menuProjects'), dom.band('menuProfile')];
+    const expanded = (t) => t.getAttribute('aria-expanded');
+
+    dom.click(projTrig);
+    assert.deepEqual([projects.hidden, expanded(projTrig)], [false, 'true']);
+    dom.click(projTrig);
+    assert.deepEqual([projects.hidden, expanded(projTrig)], [true, 'false'], 'the trigger toggles');
+    dom.click(projTrig);
+    dom.click(who);
+    assert.deepEqual([projects.hidden, profile.hidden, expanded(who)], [true, false, 'true'], 'opening one closes the other');
+    dom.click({ closest: () => null });
+    assert.deepEqual([profile.hidden, expanded(who)], [true, 'false'], 'a click outside closes');
+
+    dom.click(who);
+    const acct = dom.click(dom.item('menuProfile', 'Account'));
+    assert.equal(acct.prevented, false, 'Account is a real navigation from here — this page is not it');
+    assert.equal(profile.hidden, true, 'an item activated closes its band');
+
+    dom.click(projTrig);
+    dom.focusout(projects, null);
+    assert.equal(projects.hidden, false, 'a null relatedTarget is left to the document click');
+    dom.focusout(projects, { closest: () => null });
+    assert.equal(projects.hidden, true, 'Tab out of the band closes it');
+
+    assert.equal(dom.key('ArrowDown').prevented, false, 'with nothing open the keys are the page’s');
+    dom.click(projTrig, 0);
+    assert.equal(dom.active().text, 'Sky', 'a keyboard activation lands on the first item');
+    dom.key('ArrowUp');
+    assert.equal(dom.active().text, 'New project', 'ArrowUp wraps past the first item');
+    dom.key('ArrowDown');
+    dom.key('ArrowDown');
+    assert.equal(dom.active().text, 'Table');
+    dom.key('Escape');
+    assert.equal(projects.hidden, true);
+    assert.equal(dom.active(), projTrig, 'Escape hands focus back to the trigger');
+  });
+
+  test(`${p.file}, executed: sign out is the profile band's anchor upgraded to the POST, then this page again`, async () => {
+    const dom = bootBar(stripApexOnly(read(p.file), false), signedIn, p.route);
+    await settle();
+    assert.equal(dom.click(dom.item('menuProfile', 'My projects')).prevented, false, 'every other item is a real navigation');
+    dom.click(dom.els.get('who'));
+    const ev = dom.click(dom.item('menuProfile', 'Sign out'));
+    assert.equal(ev.prevented, true, 'the GET the href names would leave the session live');
+    await settle();
+    assert.deepEqual(dom.calls.at(-1), { method: 'POST', path: '/auth/logout' });
+    assert.equal(dom.assigned, p.route);
+  });
+}
+
 // ── served on the apex, under the instance's identity, never elsewhere ─────
 
 let server;