@bongos/core 1.19.371 → 1.19.373

package/tests/goal_category_ui.mjs

@@ -0,0 +1,279 @@
+// tests/goal_category_ui.mjs — the hall shows a goal's category and filters by
+// it, and a task shows the one it inherits (task 1003276, goal 1000072,
+// criterion legibility-categories).
+//
+// This EXECUTES the real goals page in a vm under a minimal DOM/kit stub (the
+// tests/goal_criterion_confirm_ui.mjs precedent — there is no jsdom here), boots
+// it against a fake API serving a categorised goal and an uncategorised one, and
+// asserts on the HTML it actually writes and on what the Category control
+// actually narrows. Source pins are used only for the two properties a harness
+// cannot hold: that the chip is not a navigation destination, and that the other
+// two surfaces render it through the SAME shared helper.
+//
+// Run:  node tests/goal_category_ui.mjs
+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';
+import { makeRunner } from './helpers.mjs';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const read = (rel) => fs.readFileSync(path.join(ROOT, rel), 'utf8');
+const SRC = read('modules/hall-ui/public/goals-page.js');
+const TASK_LIB_SRC = read('modules/hall-ui/public/task-lib.js');
+const GOALS_LIB_SRC = read('modules/hall-ui/public/goals-lib.js');
+const GOALS_RENDER_SRC = read('modules/hall-ui/public/goals-render.js');
+const DOM_UTILS_SRC = read('modules/hall-ui/public/dom-utils.js');
+const WORK_SRC = read('modules/hall-ui/public/work.js');
+const TASK_PAGE_SRC = read('modules/hall-ui/public/task.js');
+const STYLE_CSS = read('modules/hall-ui/public/style.css');
+
+const { test, summary } = makeRunner();
+
+const SECURITY = { id: '3', slug: 'security', label: 'Security' };
+const ECONOMICS = { id: '6', slug: 'economics', label: 'Economics' };
+const CATEGORIES = [
+  { id: 3, slug: 'security', label: 'Security', sort_order: 50, active: true },
+  { id: 6, slug: 'economics', label: 'Economics', sort_order: 60, active: true },
+];
+
+const GOALS = [
+  { id: 7, version_id: 'V1', title: 'The walls hold', status: 'open', visibility: 'public', created_by: 9, scope_modules: [], category_id: '3', category: SECURITY },
+  { id: 8, version_id: 'V1', title: 'What a credit means', status: 'open', visibility: 'public', created_by: 9, scope_modules: [], category_id: '6', category: ECONOMICS },
+  { id: 9, version_id: 'V1', title: 'Nobody has placed this yet', status: 'open', visibility: 'public', created_by: 9, scope_modules: [], category_id: null, category: null },
+];
+
+// Boot goals-page.js on the LIST view and hand back the rendered grid plus a
+// handle on the filter bar's onChange, so a filter can actually be exercised
+// rather than asserted about.
+async function renderList() {
+  const calls = { requests: [], appended: [] };
+  const els = new Map();
+  // The page builds TWO filter bars (the goal list, and the goal-detail To-do
+  // list). Keep both and pick by the control we care about, or this harness
+  // silently tests the wrong one.
+  const bars = [];
+
+  const makeEl = (key) => ({
+    _key: key, dataset: {}, style: {}, title: '', textContent: '', hidden: false, disabled: false, value: '',
+    innerHTML: '',
+    classList: { add() {}, remove() {}, toggle() { return false; }, contains() { return false; } },
+    setAttribute() {}, getAttribute() { return null; }, removeAttribute() {},
+    appendChild(child) { calls.appended.push({ into: key, value: child.value, text: child.textContent }); },
+    focus() {}, click() {}, querySelectorAll() { return []; }, addEventListener() {},
+  });
+  const $ = (sel) => {
+    if (!sel) return null;
+    if (!els.has(sel)) els.set(sel, makeEl(sel));
+    return els.get(sel);
+  };
+
+  const api = {
+    request(method, p) {
+      calls.requests.push([method, p]);
+      const reply = (data) => Promise.resolve({ status: 200, ok: true, data });
+      if (method === 'GET' && /\/me$/.test(p)) return reply({ builder: { id: 1, rank: 'archon' }, active_claims: [] });
+      if (method === 'GET' && /\/goals$/.test(p)) return reply({ goals: GOALS });
+      if (method === 'GET' && /\/work-categories$/.test(p)) return reply({ categories: CATEGORIES });
+      if (method === 'GET' && /\/goals\/\d+$/.test(p)) {
+        const id = Number(p.match(/(\d+)$/)[1]);
+        return reply({ goal: GOALS.find((g) => Number(g.id) === id), members: [], criteria: [], dependencies: [] });
+      }
+      if (method === 'GET' && /\/tasks\?/.test(p)) return reply({ tasks: [] });
+      return reply({});
+    },
+  };
+
+  const windowObj = {
+    OTB: null, // filled by dom-utils.js, run for real below
+    OTBKit: {
+      makePager: (prefix) => ({ prefix, page: 1, perPage: 25 }),
+      paginate: (rows) => rows,
+      wirePager() {}, pagerBarHtml: () => '',
+      makeTabs: () => ({ setCount() {}, select() {}, activate() {} }),
+      makeFilterBar(spec) { bars.push(spec); },
+      emptyStateHtml: (m) => `<div class="kit-empty">${m}</div>`,
+      skeletonRows: () => '', ageChipHtml: () => '',
+    },
+    OTBBranding: { currencyLabel: () => 'credits', taskSettled: () => false, taskCreditValue: () => 0 },
+    BongosClient: { createClient: () => api },
+    location: { hash: '', pathname: '/builders/goals', assign() {} },
+    addEventListener() {}, scrollTo() {},
+    matchMedia: () => ({ matches: false, addEventListener() {} }),
+    localStorage: { getItem() { return null; }, setItem() {} },
+  };
+  const documentObj = {
+    body: { dataset: {} },
+    documentElement: { dataset: {}, style: {}, classList: { add() {}, remove() {}, toggle() { return false; }, contains() { return false; } } },
+    getElementById: (id) => $(`#${id}`),
+    querySelector: (sel) => $(sel),
+    querySelectorAll: () => [],
+    createElement: () => makeEl('created'),
+    addEventListener() {},
+  };
+
+  const sandbox = { window: windowObj, document: documentObj, location: windowObj.location, console, setTimeout, clearTimeout, Set, Map, Number, String, Array, Object, JSON, Math, Date, encodeURIComponent, Promise, RegExp };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(DOM_UTILS_SRC, sandbox, { filename: 'dom-utils.js' });
+  // dom-utils builds its own $ over document; the harness's element map is what
+  // the page must actually read, so point OTB.$ at it (the confirm-UI precedent).
+  windowObj.OTB.$ = $;
+  windowObj.OTB.fmtDate = () => '';
+  windowObj.OTB.toast = () => {};
+  vm.runInContext(TASK_LIB_SRC, sandbox, { filename: 'task-lib.js' });
+  vm.runInContext(GOALS_LIB_SRC, sandbox, { filename: 'goals-lib.js' });
+  vm.runInContext(GOALS_RENDER_SRC, sandbox, { filename: 'goals-render.js' });
+  vm.runInContext(SRC, sandbox, { filename: 'goals-page.js' });
+  for (let i = 0; i < 30; i++) await new Promise((r) => setTimeout(r, 0));
+
+  const controlIds = (spec) => [...(spec.primary || []), ...(spec.overflow || [])].map((c) => c.id);
+  const listBar = bars.find((b) => controlIds(b).includes('f-goal-version'));
+  assert.ok(listBar, `the goal-LIST filter bar must exist — saw ${JSON.stringify(bars.map(controlIds))}`);
+
+  const setFilter = async (id, value) => {
+    $(id).value = value;
+    assert.ok(listBar.onChange, 'the list filter bar must declare an onChange');
+    listBar.onChange();
+    for (let i = 0; i < 10; i++) await new Promise((r) => setTimeout(r, 0));
+    return $('#goal-grid').innerHTML;
+  };
+
+  return { calls, bars, listBar, controlIds, grid: () => $('#goal-grid').innerHTML, setFilter, categoryChip: windowObj.OTB.categoryChip };
+}
+
+// =========================================================================
+// The chip
+// =========================================================================
+
+await test('a categorised goal renders its category; an uncategorised one renders no chip', async () => {
+  const { grid } = await renderList();
+  const html = grid();
+  assert.match(html, /gr-cat[^>]*>Security/, 'the Security goal wears its label');
+  assert.match(html, /gr-cat[^>]*>Economics/, 'and so does the Economics one');
+  const chips = html.match(/class="gr-cat/g) || [];
+  assert.equal(chips.length, 2, `two of three goals are categorised — got ${chips.length} chips`);
+  assert.equal(/Uncategorised|Not categorised/i.test(html), false,
+    'an uncategorised goal shows NOTHING, not a grey placeholder pill — most goals will carry one, and a board of placeholders reads worse than a board with gaps');
+});
+
+await test('the same chip renders in the card view, from the same facts', async () => {
+  const { setFilter } = await renderList();
+  const html = await setFilter('#f-goal-view', 'cards');
+  assert.match(html, /goal-card/, 'the card view is what rendered');
+  assert.match(html, /gr-cat[^>]*>Security/, 'and it carries the category too');
+});
+
+// =========================================================================
+// The filter — the half the criterion actually asks for
+// =========================================================================
+
+await test('the Category control is declared on the kit filter bar (no bespoke markup)', async () => {
+  const { listBar, controlIds } = await renderList();
+  const ids = controlIds(listBar);
+  assert.ok(ids.includes('f-goal-category'), `Category must be a kit control — got ${JSON.stringify(ids)}`);
+});
+
+await test('the options come from the project SET, not from the goals on screen', async () => {
+  // "Present in every builders hall on any project" only holds if the vocabulary
+  // travels over the wire. A category nobody has used yet must still be offered.
+  const { calls, appended } = await renderList().then((r) => ({ calls: r.calls, appended: r.calls.appended }));
+  assert.ok(calls.requests.some(([m, p]) => m === 'GET' && /\/work-categories$/.test(p)),
+    'the page must READ the set rather than derive it from state.goals');
+  const into = appended.filter((a) => a.into === '#f-goal-category');
+  assert.deepEqual(into.map((a) => a.value), ['security', 'economics', 'none'],
+    'every category in the set, plus the uncategorised bucket');
+});
+
+await test('choosing a category narrows the board to it', async () => {
+  const { setFilter } = await renderList();
+  const html = await setFilter('#f-goal-category', 'security');
+  assert.match(html, /The walls hold/);
+  assert.equal(/What a credit means/.test(html), false, 'the Economics goal is filtered out');
+  assert.equal(/Nobody has placed this yet/.test(html), false, 'so is the uncategorised one');
+});
+
+await test('"not categorised yet" finds exactly the goals nobody has placed', async () => {
+  // This option is the point of the whole feature: it is the queue of goals the
+  // human still has to name a category for.
+  const { setFilter } = await renderList();
+  const html = await setFilter('#f-goal-category', 'none');
+  assert.match(html, /Nobody has placed this yet/);
+  assert.equal(/The walls hold/.test(html), false);
+});
+
+await test('the filter matches on the SLUG, so re-wording a label cannot break it', async () => {
+  await renderList();
+  const src = GOALS_RENDER_SRC.slice(GOALS_RENDER_SRC.indexOf('function filteredGoals'));
+  assert.match(src.slice(0, 1600), /category\?\.slug === cat/,
+    'match on slug (the stable key), never on the human label');
+});
+
+// =========================================================================
+// The rule: a chip is a label, not a destination
+// =========================================================================
+
+await test('the chip is NOT a link — a per-category page would be a navigation tier', async () => {
+  const { grid } = await renderList();
+  const html = grid();
+  const chip = html.slice(html.indexOf('class="gr-cat'), html.indexOf('class="gr-cat') + 200);
+  assert.equal(/<a\b/.test(chip), false, 'no anchor');
+  assert.equal(/href=/.test(chip), false, 'no href');
+  // And nothing in the CSS gives it a click affordance.
+  const rule = STYLE_CSS.slice(STYLE_CSS.indexOf('.gr-cat {'), STYLE_CSS.indexOf('.gr-cat {') + 400);
+  assert.equal(/cursor:\s*pointer/.test(rule), false,
+    'no pointer cursor — the chip must not even LOOK like a destination (ADR 0192)');
+});
+
+// =========================================================================
+// Inheritance: the task surfaces
+// =========================================================================
+
+await test('categoryChip marks an inherited chip and says where it came from', async () => {
+  const { categoryChip } = await renderList();
+  const own = categoryChip(SECURITY);
+  const inherited = categoryChip(SECURITY, { inherited: true });
+  assert.equal(/gr-cat--inherited/.test(own), false);
+  assert.match(inherited, /gr-cat--inherited/);
+  assert.match(inherited, /via goal/, 'a reader must not go hunting for a per-task editor');
+  assert.match(inherited, /inherited from this task&#39;s goal/, 'and the tooltip says so in full (escaped — it lands in an attribute)');
+  assert.equal(categoryChip(null), '', 'no category, no chip');
+  assert.equal(categoryChip({ label: '   ' }), '', 'a blank label is no label');
+});
+
+await test('categoryChip escapes what it renders', async () => {
+  const { categoryChip } = await renderList();
+  const html = categoryChip({ id: '1', slug: 'x', label: '<img src=x onerror=alert(1)>' });
+  assert.equal(/<img/.test(html), false);
+  assert.match(html, /&lt;img/);
+});
+
+await test('the Tasks board resolves a task\'s category THROUGH its goal', async () => {
+  // Inheritance is literal in the schema (no tasks.category column), so the board
+  // resolves it the same way — through goal_id, from the goals it already loads.
+  assert.match(WORK_SRC, /taskState\.goalCategories\[g\.id\] = g\.category \|\| null;/,
+    'the category rides along with the goal title the board already fetches');
+  assert.match(WORK_SRC, /categoryChip\(\s*\(taskState\.goalCategories \|\| \{\}\)\[String\(t\.goal_id\)\], \{ inherited: true \}\)/,
+    'and renders through the shared helper, marked inherited');
+  assert.equal(/taskState\.goalCategories.*filter|f-category/.test(WORK_SRC), false,
+    'the board must NOT filter or order on a category — nothing a person may not act on should decide what the queue offers');
+});
+
+await test('the task page names its goal and shows the inherited category', async () => {
+  assert.match(TASK_PAGE_SRC, /categoryChip\(goal && goal\.category, \{ inherited: true \}\)/);
+  assert.match(TASK_PAGE_SRC, /const goalName = goal && goal\.title/,
+    'the goal link used to read "Goal #1000072", which tells a person nothing');
+});
+
+await test('one renderer serves all three surfaces, so they cannot drift', () => {
+  // The chip lives in dom-utils.js because that is the only script the Goals
+  // page, the Tasks board and the task page all load.
+  assert.match(DOM_UTILS_SRC, /function categoryChip\(/);
+  for (const [name, src] of [['goals-render', GOALS_RENDER_SRC], ['work', WORK_SRC], ['task page', TASK_PAGE_SRC]]) {
+    assert.match(src, /categoryChip\(/, `${name} must render through the shared helper`);
+    assert.equal(/function categoryChip\(/.test(src), false, `${name} must not hold its own copy`);
+  }
+});
+
+summary();

package/tests/goal_criterion_confirm_ui.mjs

@@ -108,6 +108,12 @@ async function render({ rank = 'metic', goalStatus = 'open', criteria = Object.v
       escapeHtml: (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch])),
       $, fmtNum: (n) => String(n), fmtDate: () => '', rankLabel: (r) => r,
       toast: (m) => calls.toasts.push(m),
+      // task 1003276 — the goal detail head renders the category chip through
+      // this shared helper. Stubbed to '' because the chip is not this test's
+      // subject (tests/goal_category_ui.mjs runs the real one); it must be
+      // PRESENT, though — an undefined helper throws mid-render and takes the
+      // whole detail view down, which is how this stub first failed.
+      categoryChip: () => '',
     },
     OTBKit: {
       makePager: (prefix) => pager(prefix),