@bongos/core 1.19.714 → 1.19.724

package/tests/watch_roster_self_row.mjs

@@ -0,0 +1,289 @@
+// tests/watch_roster_self_row.mjs — the reader's OWN row on the Watch roster,
+// EXECUTED (task 1003720, re-filed from task 1002951).
+//
+// The bug, as the owner reported it from Discord #bugs: "I cannot press
+// offboard". GET /builders/roster returns EVERY builder — the reader included —
+// and the row painted a live rank <select> and a live Offboard pill on all of
+// them. But both routes behind that row refuse a self-change categorically and
+// always will:
+//
+//   PATCH /builders/:id/rank    → 403 cannot_change_own_rank
+//   PATCH /builders/:id/status  → 403 cannot_change_own_status
+//
+// (src/bongos/routes/builders.js — the guard that stops the last Archon demoting
+// or offboarding themselves and locking everyone out.) res.fail() defaults the
+// envelope's message to the CODE, so pressing your own Offboard produced a toast
+// reading "Could not change standing: cannot_change_own_status" and nothing else.
+// From the owner's seat that is a button that does not work.
+//
+// The page now renders no control on that row and states why once under the
+// table. These are assertions about what a human sees and clicks, so this runs
+// the real watch.js inside `vm` against the real watch.html, with a makeLedger
+// that actually calls rowHtml — a source-text grep cannot see which row got
+// which cell, and the no-op ledger stub in tests/watch_applications_queue.mjs
+// renders no roster rows at all.
+//
+// Run:  node tests/watch_roster_self_row.mjs
+
+import { strict as assert } from 'node:assert';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { fileURLToPath } from 'node:url';
+import { makeRunner, makeEl, parseInto } from './helpers.mjs';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules/hall-ui/public');
+const SRC = fs.readFileSync(path.join(HALL, 'watch.js'), 'utf8');
+const PAGE = fs.readFileSync(path.join(HALL, 'watch.html'), 'utf8');
+
+const { test, summary } = makeRunner();
+
+const escapeHtml = (s) => String(s == null ? '' : s).replace(/[&<>"']/g,
+  (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+
+const tick = () => new Promise((r) => setTimeout(r, 0));
+async function settle() { for (let i = 0; i < 40; i++) await tick(); }
+
+const ok = (data) => ({ status: 200, ok: true, data });
+
+// The branding pack renames every rank (the neutral pack calls archon "Owner"),
+// which is why a hardcoded rank word in page copy is banned. This stub renames
+// them too, so a test for "the foot line does not spell Archon" is real.
+const RANK_LABELS = { xenos: 'Newcomer', thetes: 'Contributor', metic: 'Trusted', archon: 'Owner' };
+const rankLabel = (r) => RANK_LABELS[r] || String(r || '');
+
+// The viewer is builder 1. Rows as GET /builders/roster returns them — note the
+// viewer sits in the MIDDLE, which is where the live roster puts the owner: the
+// order is inactive-last, then still-onboarding, then created_at DESC.
+const VIEWER_ID = '1';
+const ROSTER = [
+  { id: '90', display_name: 'Alpha', github_login: 'alpha', rank: 'archon', total_credits: 9200, karma: 4, active_claim_count: 1, stale_claim: false, status: 'active' },
+  { id: '1', display_name: 'The Owner', github_login: 'theowner', rank: 'archon', total_credits: 6896, karma: 68, active_claim_count: 2, stale_claim: false, status: 'active' },
+  { id: '92', display_name: 'Gamma', github_login: 'gamma', rank: 'thetes', total_credits: 830, karma: 1, active_claim_count: 0, stale_claim: false, status: 'active' },
+  { id: '93', display_name: 'Delta', github_login: 'delta', rank: 'xenos', total_credits: 40, karma: 0, active_claim_count: 0, stale_claim: false, status: 'inactive' },
+];
+
+// ===========================================================================
+// Boot the real page against a scripted API and hand back handles.
+// ===========================================================================
+
+async function boot(opts = {}) {
+  const {
+    builders = ROSTER,
+    me = { id: VIEWER_ID, rank: 'archon', github_login: 'theowner' },
+    patchResult = null,
+  } = opts;
+
+  const requests = [];
+  const toasts = [];
+  const prompts = [];
+
+  const api = {
+    async request(method, p, init) {
+      const body = init && init.body;
+      requests.push({ method, path: p, body });
+      const route = String(p).replace('/api/bongos', '').split('?')[0];
+      if (method === 'GET' && route === '/me') return ok({ builder: me });
+      if (method === 'GET' && route === '/builders/roster') return ok({ builders });
+      if (method === 'PATCH' && route.startsWith('/builders/')) {
+        return patchResult || ok({ builder: { id: route.split('/')[2] } });
+      }
+      // Every other panel on this page loads independently and degrades on its
+      // own; an unscripted shape is exactly the failure `section` swallows.
+      return ok({});
+    },
+  };
+
+  const documentObj = {
+    readyState: 'complete',
+    body: makeEl('body'),
+    documentElement: makeEl('html'),
+    createElement: (tag) => makeEl(tag),
+    getElementById(id) { return this.body.querySelector(`#${id}`); },
+    querySelector(sel) { return this.body.querySelector(sel); },
+    querySelectorAll(sel) { return this.body.querySelectorAll(sel); },
+    addEventListener() {},
+  };
+  parseInto(documentObj.body, PAGE);
+
+  const locationObj = { hostname: 'builders.example.test', pathname: '/builders/watch', search: '', hash: '', assign() {} };
+
+  const kit = {
+    makeTabs: () => ({}),
+    // A ledger that REALLY renders: the whole question here is which row got
+    // which cell, and a no-op render answers none of it.
+    makeLedger: ({ mount, columns, rowHtml }) => ({
+      render(rows) {
+        mount.innerHTML =
+          '<table class="ledger"><thead><tr>' +
+          columns.map((c) => `<th>${escapeHtml(typeof c === 'string' ? c : c.label)}</th>`).join('') +
+          '</tr></thead><tbody>' + rows.map((r) => rowHtml(r)).join('') + '</tbody></table>';
+      },
+    }),
+    makePager: () => ({ page: 1, perPage: 25 }),
+    emptyStateHtml: (msg) => `<div class="empty-state"><p>${escapeHtml(msg)}</p></div>`,
+    makeFilterBar: (o) => { o.mount.innerHTML = '<div class="filters"></div>'; return { el: o.mount, values: () => ({}) }; },
+  };
+
+  const windowObj = {
+    __BRANDING__: { project: { joinability: 'apply' } },
+    OTB: {
+      escapeHtml,
+      $: (sel) => documentObj.querySelector(sel),
+      num: (v) => Number(v),
+      fmtInt: (n) => String(n),
+      fmtCompact: (n) => String(n),
+      fmtDate: (iso) => String(iso).slice(0, 10),
+      rankLabel,
+      toast: (m) => toasts.push(m),
+    },
+    OTBKit: kit,
+    OTBBranding: { currencyLabel: () => 'Credits' },
+    BongosClient: { createClient: () => api },
+    location: locationObj,
+    prompt: (msg) => { prompts.push(msg); return 'left for a new job'; },
+    addEventListener() {},
+  };
+
+  const sandbox = {
+    window: windowObj, document: documentObj, location: locationObj,
+    console: { log() {}, warn() {}, error() {} },
+    setTimeout, clearTimeout, Promise, Date, Math, JSON, Error, isNaN,
+    Number, String, Object, Array, Boolean, Set, Map, RegExp,
+    encodeURIComponent, decodeURIComponent, parseInt, parseFloat,
+  };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(SRC, sandbox, { filename: 'watch.js' });
+  await settle();
+
+  const rosterBody = () => documentObj.getElementById('roster-body');
+  const rows = () => rosterBody().querySelectorAll('tr').filter((tr) => tr.querySelectorAll('td').length);
+  const rowFor = (login) => rows().find((tr) => tr.querySelectorAll('td')[0].textContent.includes('@' + login));
+  const patches = () => requests.filter((r) => r.method === 'PATCH');
+  const footText = () => rosterBody().querySelectorAll('p').map((p) => p.textContent).join(' ');
+
+  return { requests, toasts, prompts, documentObj, rosterBody, rows, rowFor, patches, footText, settle };
+}
+
+const cells = (tr) => tr.querySelectorAll('td');
+
+// ===========================================================================
+// 1. The viewer's own row offers neither control.
+// ===========================================================================
+
+await test('the viewer\'s own row renders no Offboard button', async () => {
+  const h = await boot();
+  const mine = h.rowFor('theowner');
+  assert.ok(mine, 'the roster did not render the viewer\'s own row');
+  assert.equal(mine.querySelectorAll('[data-roster-status]').length, 0,
+    'the viewer\'s own row still carries a status button the server refuses outright');
+});
+
+await test('the viewer\'s own row renders no rank select', async () => {
+  const h = await boot();
+  const mine = h.rowFor('theowner');
+  assert.equal(mine.querySelectorAll('[data-roster-rank]').length, 0,
+    'the viewer\'s own row still carries a rank select the server refuses outright');
+});
+
+await test('the own row still SHOWS the rank and says whose row it is', async () => {
+  const h = await boot();
+  const c = cells(h.rowFor('theowner'));
+  assert.equal(c[1].textContent.trim(), 'Owner', 'the own row lost the rank it should still state');
+  assert.match(c[6].textContent, /you/i, 'the own row\'s action cell says nothing about why it is empty');
+});
+
+// ===========================================================================
+// 2. Every OTHER row keeps both controls — the fix must not disarm the roster.
+// ===========================================================================
+
+await test('every other row keeps its Offboard / Reactivate button', async () => {
+  const h = await boot();
+  for (const login of ['alpha', 'gamma', 'delta']) {
+    const tr = h.rowFor(login);
+    assert.equal(tr.querySelectorAll('[data-roster-status]').length, 1,
+      `row @${login} lost its status control`);
+  }
+  // The inactive builder offers the OTHER verb, as before.
+  assert.equal(h.rowFor('delta').querySelector('[data-roster-status]').getAttribute('data-roster-status'), 'active');
+  assert.equal(h.rowFor('alpha').querySelector('[data-roster-status]').getAttribute('data-roster-status'), 'inactive');
+});
+
+await test('every other row keeps its rank select', async () => {
+  const h = await boot();
+  for (const login of ['alpha', 'gamma', 'delta']) {
+    assert.equal(h.rowFor(login).querySelectorAll('[data-roster-rank]').length, 1,
+      `row @${login} lost its rank select`);
+  }
+});
+
+await test('another builder\'s Offboard still reaches the route', async () => {
+  const h = await boot();
+  const btn = h.rowFor('gamma').querySelector('[data-roster-status]');
+  // The roster DELEGATES: the listener is on #roster-body, not on the button, so
+  // a list that pages cannot strand a row without one. The DOM stub's fire()
+  // does not bubble, so firing on the button reaches nothing — dispatch on the
+  // section and name the button as the target, the way a real click arrives.
+  h.rosterBody().fire('click', { target: btn });
+  await h.settle();
+  const p = h.patches();
+  assert.equal(p.length, 1, `expected one PATCH, got ${p.length}`);
+  assert.match(p[0].path, /\/builders\/92\/status$/);
+  assert.equal(p[0].body.status, 'inactive');
+  assert.equal(p[0].body.reason, 'left for a new job', 'the offboarding reason was dropped');
+  assert.equal(h.prompts.length, 1, 'the reason prompt no longer runs');
+});
+
+// ===========================================================================
+// 3. The foot line says why, in the pack's own words.
+// ===========================================================================
+
+await test('a foot line under the roster explains the empty row', async () => {
+  const h = await boot();
+  assert.match(h.footText(), /your own row carries no controls/i,
+    'nothing under the roster explains why one row has no controls');
+});
+
+await test('the foot line names the rank from the pack, never a hardcoded "Archon"', async () => {
+  const h = await boot();
+  const foot = h.footText();
+  assert.match(foot, /Owner/, 'the foot line does not name the rank through rankLabel()');
+  assert.ok(!/archon/i.test(foot), `the foot line hardcodes a rank word: ${foot}`);
+});
+
+await test('no foot line when the viewer is not on the roster', async () => {
+  // A Metic reading the roster of a project they are not listed on: there is no
+  // own row, so there is nothing to explain.
+  const h = await boot({ builders: ROSTER.filter((b) => b.id !== VIEWER_ID) });
+  assert.ok(!/your own row/i.test(h.footText()), 'the foot line rendered with no own row on the table');
+});
+
+// ===========================================================================
+// 4. Degrade: an unidentifiable viewer must not mark the WRONG row.
+// ===========================================================================
+
+await test('no id from /me leaves every row exactly as it was', async () => {
+  const h = await boot({ me: { rank: 'archon', github_login: 'theowner' } });
+  assert.equal(h.rows().length, ROSTER.length);
+  for (const b of ROSTER) {
+    assert.equal(h.rowFor(b.github_login).querySelectorAll('[data-roster-status]').length, 1,
+      `row @${b.github_login} was disarmed although the viewer could not be identified`);
+  }
+  assert.ok(!/your own row/i.test(h.footText()));
+});
+
+await test('the match is by value, not by type — a numeric id still matches', async () => {
+  // node-postgres hands bigints back as TEXT, so /me may answer with a string
+  // where the roster answers with a number (or the reverse). A `===` comparison
+  // here is the same bug the /rank route's own guard was fixed for in #348.
+  const h = await boot({
+    me: { id: 1, rank: 'archon', github_login: 'theowner' },
+    builders: ROSTER.map((b) => (b.id === VIEWER_ID ? { ...b, id: '1' } : b)),
+  });
+  assert.equal(h.rowFor('theowner').querySelectorAll('[data-roster-status]').length, 0,
+    'a numeric /me id did not match the roster\'s string id — the own row is armed again');
+});
+
+summary('watch roster — the viewer\'s own row');