@bongos/core 1.24.26 → 1.24.28

package/tests/speciality_walkthrough_ui.mjs

@@ -1,5 +1,6 @@
-// tests/speciality_walkthrough_ui.mjs — the skills walkthrough a person is taken
-// through when they adopt a speciality (task 1004073, part 2 of 3 of ADR 0310).
+// tests/speciality_walkthrough_ui.mjs — the ADOPTER's side of the speciality
+// tools: taking one on, the skills walkthrough it opens, and stopping it (task
+// 1004073, part 2 of 3 of ADR 0310; on My agents too since task 1005052).
 //
 // The owner's ruling: an adopted speciality's skills start OFF, "and you should
 // walk through what comes with each, people need to learn the system". The task
@@ -9,21 +10,19 @@
 // every step, no control that decides without the person seeing each skill, and
 // nothing written until the recap is saved.
 //
-// This EXECUTES the real modules/hall-ui/public/settings-specialities.js in a vm
-// under a minimal DOM stub (the tests/goal_criterion_confirm_ui.mjs precedent —
-// there is no jsdom here), against a fake API, and drives real clicks through the
-// delegated handler the page wires.
+// THE SAFETY STEP. A speciality someone else wrote puts their prose into your
+// sessions, so its full instructions are on the card, open, before the control
+// that adopts it — pinned below on both pages.
+//
+// TWO PAGES, ONE COMPONENT (task 1005052). modules/hall-ui/public/speciality-tools.js
+// is mounted by Settings and by My agents. Every case runs once per page, booted
+// on THAT page's own markup (tests/helpers.mjs bootSpecialityTools), so a host
+// lost from either page fails that page's run.
 //
 // Run:  node tests/speciality_walkthrough_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 SRC = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/settings-specialities.js'), 'utf8');
+import { makeRunner, bootSpecialityTools, SPECIALITY_PAGES } from './helpers.mjs';
+
 const { test, summary } = makeRunner();
 
 const explained = (name, extra = {}) => ({
@@ -56,163 +55,183 @@ const SKILLS_BODY = {
   ],
 };
 
-// Boot the page script and return a handle to drive it.
-async function boot({ catalog = [speciality()], skillsBody = SKILLS_BODY } = {}) {
-  const requests = [];
-  const toasts = [];
-  const els = new Map();
-  const handlers = new Map();
-  const makeEl = (id) => ({
-    id, hidden: id === 'specialities-scroll', innerHTML: '', textContent: '', elements: {},
-    addEventListener(type, fn) { handlers.set(`${id}:${type}`, fn); },
-  });
-  for (const id of ['specialities-scroll', 'specialities-rows', 'speciality-suggestions', 'specialities-status']) els.set(id, makeEl(id));
-  let focused = null;
-
-  const fetch = async (url, opts = {}) => {
-    const method = opts.method || 'GET';
-    const p = url.replace('/api/bongos', '');
-    requests.push({ method, path: p, body: opts.body ? JSON.parse(opts.body) : undefined });
-    let body = {};
-    if (method === 'GET' && p === '/specialities') body = { specialities: catalog };
-    else if (method === 'GET' && p === '/me/specialities') body = { adoptions: [] };
-    else if (method === 'GET' && p === '/specialities/offered') body = { suggestions: [] };
-    else if (method === 'GET' && /\/skills$/.test(p)) body = skillsBody;
-    else if (method === 'POST' && /\/adopt$/.test(p)) body = { adoption: { active: true } };
-    else if (method === 'PUT' && /\/skills$/.test(p)) body = { adoption: { enabled_skills: JSON.parse(opts.body).enabled_skills } };
-    return { ok: true, status: 200, json: async () => body };
-  };
-
-  const document = {
-    readyState: 'complete',
-    getElementById: (id) => els.get(id) || null,
-    addEventListener() {},
-    querySelector: (sel) => (sel.includes('data-walk-focus') ? { focus() { focused = 'walk-heading'; } } : null),
-  };
-  const window = {
-    OTB: {
-      escapeHtml: (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'),
-      $: () => null,
-      toast: (m) => toasts.push(m),
-      roleAxisLabel: () => 'Role',
-    },
-    location: { assign() {} },
-  };
-  vm.runInNewContext(SRC, { window, document, fetch, JSON, Promise, Map, Set, String, Number, Array, Object, Math, RegExp, console });
-  const settle = () => new Promise((r) => setTimeout(r, 0));
-  for (let i = 0; i < 5; i++) await settle();
-
-  const rows = els.get('specialities-rows');
-  // A click through the delegated handler, on the first button whose attribute matches.
-  async function click(attr, value) {
-    const re = new RegExp(`<button[^>]*${attr}="${value}"[^>]*>`);
-    const tag = re.exec(rows.innerHTML);
-    assert.ok(tag, `no ${attr}="${value}" button in:\n${rows.innerHTML}`);
-    const dataset = {};
-    for (const [, k, v] of tag[0].matchAll(/data-([a-z]+)="([^"]*)"/g)) dataset[k] = v;
-    const btn = { dataset };
-    const target = { closest: (sel) => (sel === `button[${attr}]` ? btn : null) };
-    handlers.get('specialities-rows:click')({ target });
-    for (let i = 0; i < 6; i++) await settle();
-  }
-  const text = () => rows.innerHTML.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ');
-  return { els, rows, requests, toasts, click, text, focused: () => focused };
+async function boot(page, { catalog = [speciality()], skillsBody = SKILLS_BODY, ...rest } = {}) {
+  const h = bootSpecialityTools({ page, catalog, skills: { 9: skillsBody }, ...rest });
+  await h.ready();
+  return h;
 }
+const ROWS = '#specialities-rows';
+const writes = (h) => h.writes();
+const text = (h) => h.text('specialities-rows');
+
+for (const page of SPECIALITY_PAGES) {
+  await test(`${page}: the specialities panel is revealed once its reads answer — it shipped hidden and nothing ever showed it`, async () => {
+    const h = await boot(page);
+    assert.equal(h.el('specialities-scroll').hidden, false);
+  });
 
-const writes = (h) => h.requests.filter((r) => r.method !== 'GET');
+  await test(`${page}: adopting a speciality that offers skills opens the walkthrough on the FIRST skill, with nothing written yet`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="adopt"]`);
+    assert.ok(h.requests.some((r) => r.method === 'GET' && r.path === '/specialities/9/skills'), 'the walkthrough read its skills');
+    assert.match(text(h), /Skill 1 of 3 in Economics/, 'only INSTALLED skills are steps');
+    assert.ok(h.focused() && 'data-walk-focus' in h.focused().attrs, 'focus moves to the step, not left on a button that is gone');
+    assert.deepEqual(writes(h).map((r) => r.path), ['/specialities/9/adopt'], 'no enabled set was written by adopting');
+  });
 
-await test('the specialities panel is revealed once its reads answer — it shipped hidden and nothing ever showed it', async () => {
-  const h = await boot();
-  assert.equal(h.els.get('specialities-scroll').hidden, false);
-});
+  await test(`${page}: it is not a page of checkboxes: one skill per step, and no control decides for several at once`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="adopt"]`);
+    assert.ok(!/type="checkbox"/.test(h.html('specialities-rows')), 'no checkbox anywhere in the walkthrough');
+    assert.ok(!/(turn|enable|select) (them )?all/i.test(text(h)), 'no "turn them all on"');
+    assert.ok(text(h).includes('recall') && !text(h).includes('status does its one thing'), 'the next skill is not shown yet');
+  });
 
-await test('adopting a speciality that offers skills opens the walkthrough on the FIRST skill, with nothing written yet', async () => {
-  const h = await boot();
-  await h.click('data-act', 'adopt');
-  assert.ok(h.requests.some((r) => r.method === 'GET' && r.path === '/specialities/9/skills'), 'the walkthrough read its skills');
-  assert.match(h.text(), /Skill 1 of 3 in Economics/, 'only INSTALLED skills are steps');
-  assert.equal(h.focused(), 'walk-heading', 'focus moves to the step, not left on a button that is gone');
-  assert.deepEqual(writes(h).map((r) => r.path), ['/specialities/9/adopt'], 'no enabled set was written by adopting');
-});
+  await test(`${page}: every step answers what it does, when to reach for it, and what it costs`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="adopt"]`);
+    for (let step = 0; step < 3; step++) {
+      for (const q of ['What it does', 'When to reach for it', 'What it costs']) assert.ok(text(h).includes(q), `step ${step + 1} is missing "${q}"`);
+      await h.click(`${ROWS} button[data-walk="off"]`);
+    }
+  });
 
-await test('it is not a page of checkboxes: one skill per step, and no control decides for several at once', async () => {
-  const h = await boot();
-  await h.click('data-act', 'adopt');
-  assert.ok(!/type="checkbox"/.test(h.rows.innerHTML), 'no checkbox anywhere in the walkthrough');
-  assert.ok(!/(turn|enable|select) (them )?all/i.test(h.text()), 'no "turn them all on"');
-  assert.ok(h.text().includes('recall') && !h.text().includes('status does its one thing'), 'the next skill is not shown yet');
-});
+  await test(`${page}: a rank-gated skill says so BEFORE the choice — turning it on grants nothing`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="adopt"]`);
+    await h.click(`${ROWS} button[data-walk="off"]`);
+    await h.click(`${ROWS} button[data-walk="off"]`);
+    const t = text(h);
+    assert.match(t, /Skill 3 of 3/);
+    assert.match(t, /Metic rank or above.*does not change that/);
+    assert.match(t, /What it needs on your machine gh/);
+  });
 
-await test('every step answers what it does, when to reach for it, and what it costs', async () => {
-  const h = await boot();
-  await h.click('data-act', 'adopt');
-  for (let step = 0; step < 3; step++) {
-    const t = h.text();
-    for (const q of ['What it does', 'When to reach for it', 'What it costs']) assert.ok(t.includes(q), `step ${step + 1} is missing "${q}"`);
-    await h.click('data-walk', 'off');
-  }
-});
+  await test(`${page}: the recap names every skill with what it does and the choice made, then saves exactly the ones turned on`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="adopt"]`);
+    await h.click(`${ROWS} button[data-walk="on"]`);
+    await h.click(`${ROWS} button[data-walk="off"]`);
+    await h.click(`${ROWS} button[data-walk="on"]`);
+    const t = text(h);
+    assert.match(t, /Your choices for Economics/);
+    assert.match(t, /2 of 3 turned on/);
+    for (const n of ['recall', 'status', 'goal-review']) assert.ok(t.includes(`${n} does its one thing.`), `the recap restates what ${n} does`);
+    assert.ok(!t.includes('And a second sentence'), 'one line each, not the whole description again');
+    assert.match(t, /no longer on this project.*gone/, 'an offered skill removed since is named, not offered');
+    assert.equal(writes(h).length, 1, 'still nothing written before Save');
+    await h.click(`${ROWS} button[data-walk="save"]`);
+    const put = writes(h).find((r) => r.method === 'PUT');
+    assert.ok(put, 'Save wrote the set');
+    assert.equal(put.path, '/specialities/9/skills');
+    assert.deepEqual(put.body, { enabled_skills: ['recall', 'goal-review'] });
+    assert.ok(h.toasts.some((m) => /2 of 3/.test(m)));
+  });
 
-await test('a rank-gated skill says so BEFORE the choice — turning it on grants nothing', async () => {
-  const h = await boot();
-  await h.click('data-act', 'adopt');
-  await h.click('data-walk', 'off');
-  await h.click('data-walk', 'off');
-  const t = h.text();
-  assert.match(t, /Skill 3 of 3/);
-  assert.match(t, /Metic rank or above.*does not change that/);
-  assert.match(t, /What it needs on your machine gh/);
-});
+  await test(`${page}: Back revisits a decision and the new choice is the one saved`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="adopt"]`);
+    await h.click(`${ROWS} button[data-walk="on"]`);
+    await h.click(`${ROWS} button[data-walk="back"]`);
+    assert.match(text(h), /Skill 1 of 3/);
+    assert.match(h.html('specialities-rows'), /data-walk="on" aria-pressed="true"/, 'the earlier choice shows when you step back to it');
+    await h.click(`${ROWS} button[data-walk="off"]`);
+    await h.click(`${ROWS} button[data-walk="off"]`);
+    await h.click(`${ROWS} button[data-walk="off"]`);
+    await h.click(`${ROWS} button[data-walk="save"]`);
+    assert.deepEqual(writes(h).find((r) => r.method === 'PUT').body, { enabled_skills: [] });
+  });
 
-await test('the recap names every skill with what it does and the choice made, then saves exactly the ones turned on', async () => {
-  const h = await boot();
-  await h.click('data-act', 'adopt');
-  await h.click('data-walk', 'on');
-  await h.click('data-walk', 'off');
-  await h.click('data-walk', 'on');
-  const t = h.text();
-  assert.match(t, /Your choices for Economics/);
-  assert.match(t, /2 of 3 turned on/);
-  for (const n of ['recall', 'status', 'goal-review']) assert.ok(t.includes(`${n} does its one thing.`), `the recap restates what ${n} does`);
-  assert.ok(!t.includes('And a second sentence'), 'one line each, not the whole description again');
-  assert.match(t, /no longer on this project.*gone/, 'an offered skill removed since is named, not offered');
-  assert.equal(writes(h).length, 1, 'still nothing written before Save');
-  await h.click('data-walk', 'save');
-  const put = writes(h).find((r) => r.method === 'PUT');
-  assert.ok(put, 'Save wrote the set');
-  assert.equal(put.path, '/specialities/9/skills');
-  assert.deepEqual(put.body, { enabled_skills: ['recall', 'goal-review'] });
-  assert.ok(h.toasts.some((m) => /2 of 3/.test(m)));
-});
+  await test(`${page}: finishing later writes nothing, so every skill stays off — the default the ruling asked for`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="adopt"]`);
+    await h.click(`${ROWS} button[data-walk="on"]`);
+    await h.click(`${ROWS} button[data-walk="close"]`);
+    assert.ok(!/skill-walk/.test(h.html('specialities-rows')), 'the walkthrough closed');
+    assert.ok(!writes(h).some((r) => r.method === 'PUT'), 'a half-finished walk saves nothing');
+  });
 
-await test('Back revisits a decision and the new choice is the one saved', async () => {
-  const h = await boot();
-  await h.click('data-act', 'adopt');
-  await h.click('data-walk', 'on');
-  await h.click('data-walk', 'back');
-  assert.match(h.text(), /Skill 1 of 3/);
-  assert.match(h.rows.innerHTML, /data-walk="on" aria-pressed="true"/, 'the earlier choice shows when you step back to it');
-  await h.click('data-walk', 'off');
-  await h.click('data-walk', 'off');
-  await h.click('data-walk', 'off');
-  await h.click('data-walk', 'save');
-  assert.deepEqual(writes(h).find((r) => r.method === 'PUT').body, { enabled_skills: [] });
-});
+  await test(`${page}: a speciality that offers no skills adopts without a walkthrough`, async () => {
+    const h = await boot(page, { catalog: [speciality({ skills: [] })] });
+    await h.click(`${ROWS} button[data-act="adopt"]`);
+    assert.ok(!h.requests.some((r) => /\/skills$/.test(r.path)), 'no skills read for a speciality with none');
+    assert.ok(!/skill-walk/.test(h.html('specialities-rows')));
+  });
 
-await test('finishing later writes nothing, so every skill stays off — the default the ruling asked for', async () => {
-  const h = await boot();
-  await h.click('data-act', 'adopt');
-  await h.click('data-walk', 'on');
-  await h.click('data-walk', 'close');
-  assert.ok(!/skill-walk/.test(h.rows.innerHTML), 'the walkthrough closed');
-  assert.ok(!writes(h).some((r) => r.method === 'PUT'), 'a half-finished walk saves nothing');
-});
+  // ---- the safety step, and the rest of the adopter's tools (task 1005052) ----
+
+  await test(`${page}: SAFETY — someone else's speciality shows its full instructions, open, in the same card as the only control that adopts it`, async () => {
+    const contract = 'Argue from mechanism, not vibes.\nAlways name the assumption a number rests on.';
+    const h = await boot(page, { catalog: [speciality({ contract_md: contract })], suggestions: [speciality({ id: 21, name: 'Rates', contract_md: contract })] });
+    for (const host of ['specialities-rows', 'speciality-suggestions']) {
+      const card = h.find(`#${host} li[data-id]`);
+      assert.ok(card, `${host}: the speciality has a card`);
+      const details = card.querySelector('details');
+      assert.ok(details && details.open, `${host}: its instructions are OPEN, not folded behind a summary`);
+      assert.equal(card.querySelector('pre').textContent, contract, `${host}: the whole instruction, word for word`);
+      assert.match(card.querySelector('summary').textContent, /written by someone else/, `${host}: and whose they are`);
+      assert.match(details.textContent, /You did not write this\. Read it before using the speciality/);
+      assert.ok(card.querySelector('button[data-act="adopt"]'), `${host}: the adopt control is in that same card`);
+    }
+    assert.equal(h.find('button[data-adopt]'), null, 'no other control adopts it');
+  });
 
-await test('a speciality that offers no skills adopts without a walkthrough', async () => {
-  const h = await boot({ catalog: [speciality({ skills: [] })] });
-  await h.click('data-act', 'adopt');
-  assert.ok(!h.requests.some((r) => /\/skills$/.test(r.path)), 'no skills read for a speciality with none');
-  assert.ok(!/skill-walk/.test(h.rows.innerHTML));
-});
+  await test(`${page}: a speciality you use can be stopped: one POST /abandon, and the card offers it again`, async () => {
+    const h = await boot(page, { adoptions: [{ id: 9, active: true, enabled_skills: ['recall'] }] });
+    assert.match(text(h), /active/, 'the card says it is in use');
+    assert.match(text(h), /offers 4 skills, 1 on for you/, 'and how many of its skills are on');
+    assert.equal(h.find(`${ROWS} button[data-act="adopt"]`), null, 'in use: no "Use this"');
+    await h.click(`${ROWS} button[data-act="abandon"]`);
+    assert.deepEqual(writes(h).map((r) => `${r.method} ${r.path}`), ['POST /specialities/9/abandon']);
+    assert.ok(h.toasts.includes('Stopped using it.'));
+    assert.ok(h.find(`${ROWS} button[data-act="adopt"]`), 'stopped: it can be taken on again');
+    assert.equal(h.find(`${ROWS} button[data-act="abandon"]`), null);
+  });
+
+  await test(`${page}: stopping a speciality closes its walkthrough if it was open`, async () => {
+    const h = await boot(page, { adoptions: [{ id: 9, active: true, enabled_skills: [] }] });
+    await h.click(`${ROWS} button[data-act="walk"]`);
+    assert.match(h.html('specialities-rows'), /skill-walk/);
+    await h.click(`${ROWS} button[data-act="abandon"]`);
+    assert.ok(!/skill-walk/.test(h.html('specialities-rows')), 'no walkthrough for a speciality you stopped using');
+  });
+
+  await test(`${page}: "Choose its skills" reopens the walkthrough for one you use, and says which are on now`, async () => {
+    const h = await boot(page, { adoptions: [{ id: 9, active: true, enabled_skills: ['recall'] }], skillsBody: { ...SKILLS_BODY, enabled: ['recall'] } });
+    await h.click(`${ROWS} button[data-act="walk"]`);
+    assert.match(text(h), /Skill 1 of 3 in Economics/);
+    assert.match(text(h), /You have this one on at the moment/);
+    assert.equal(writes(h).length, 0, 'opening it writes nothing');
+  });
+
+  await test(`${page}: a suggestion adopts through the same act as the catalogue`, async () => {
+    const h = await boot(page, { suggestions: [speciality({ id: 21, name: 'Rates', skills: [] })] });
+    assert.match(h.text('speciality-suggestions'), /Suggested for you.*Rates/);
+    await h.click('#speciality-suggestions button[data-act="adopt"]');
+    assert.deepEqual(writes(h).map((r) => `${r.method} ${r.path}`), ['POST /specialities/21/adopt']);
+  });
+
+  await test(`${page}: adopting, stopping and saving its skills each tell the rest of the page, so what a session reads can be re-read`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="adopt"]`);
+    assert.deepEqual(h.events, ['otb:specialities-changed'], 'adopting');
+    for (let i = 0; i < 3; i++) await h.click(`${ROWS} button[data-walk="off"]`);
+    await h.click(`${ROWS} button[data-walk="save"]`);
+    assert.equal(h.events.length, 2, 'saving the skills');
+    await h.click(`${ROWS} button[data-act="abandon"]`);
+    assert.equal(h.events.length, 3, 'stopping');
+    const quiet = await boot(page, { catalog: [speciality({ mine: true })] });
+    await quiet.click(`${ROWS} button[data-act="train"]`);
+    assert.deepEqual(quiet.events, [], 'opening a tool that changes no session says nothing');
+  });
+
+  await test(`${page}: a refused adopt says why and changes nothing`, async () => {
+    const h = await boot(page, { answer: (m, p) => (m === 'POST' && /\/adopt$/.test(p) ? { status: 409, data: { message: 'already_adopted' } } : null) });
+    await h.click(`${ROWS} button[data-act="adopt"]`);
+    assert.equal(h.el('specialities-status').textContent, 'already_adopted');
+    assert.ok(!/skill-walk/.test(h.html('specialities-rows')), 'no walkthrough for an adopt that did not happen');
+    assert.deepEqual(h.events, [], 'and nothing told the page it changed');
+  });
+}
 
 summary();