@bongos/core 1.24.27 → 1.24.28

package/tests/helpers.mjs

@@ -1015,6 +1015,167 @@ export function bootSkyPage({
   return out;
 }
 
+// bootSpecialityTools — boot THE SPECIALITY TOOLS for real on a page's OWN markup
+// (task 1005052). One component, modules/hall-ui/public/speciality-tools.js, is
+// mounted by Settings and by My agents, and it finds every host by id. So, on the
+// bootSkyPage rule, the DOM here is the page's own: its specialities section
+// (`#specialities-scroll`) is parsed out of `<page>.html` into the mini-DOM above,
+// an id the page does not carry is null here too, and an id the component renders
+// itself (the create form's skills picker) exists only once its markup says so. A
+// host lost from either page fails that page's run.
+//
+// The fake API keeps the builder's adoptions as STATE: adopt adds one, abandon
+// drops it, the walkthrough's PUT sets its enabled skills, so a reload after a
+// write reads what the write did. Clicks, submits, typing and the details toggle
+// are dispatched on the real parsed element and bubble to the listener the
+// component wired, so `closest()` in its handlers walks the real tree.
+//
+//   const h = await bootSpecialityTools({ page: 'my-agents', catalog, adoptions });
+//   await h.click('#specialities-rows button[data-act="adopt"]');
+//   h.writes()   → the non-GET requests, with their bodies
+//   h.text('specialities-rows'), h.toasts, h.events (the DOM events it dispatched)
+export const SPECIALITY_PAGES = ['settings', 'my-agents'];
+function specialitySection(page) {
+  const html = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public', `${page}.html`), 'utf8').replace(/<!--[\s\S]*?-->/g, '');
+  const at = html.indexOf('id="specialities-scroll"');
+  if (at < 0) return '';
+  const start = html.lastIndexOf('<section', at);
+  return html.slice(start, html.indexOf('</section>', at) + '</section>'.length);
+}
+export function bootSpecialityTools({
+  page = 'settings', catalog = [], adoptions = [], suggestions = [], skills = {}, installed = [], answer = null,
+} = {}) {
+  const src = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/speciality-tools.js'), 'utf8');
+  let focused = null;
+  const docListeners = new Map();
+  function node(tag, attrs = {}) {
+    const el = makeEl(tag, attrs);
+    el.hidden = 'hidden' in attrs;
+    el.open = 'open' in attrs;
+    el.checked = 'checked' in attrs;
+    el.focus = () => { focused = el; };
+    el.matches = (sel) => matches(el, sel);
+    // `:checked` is the one pseudo-class the component reads (the ticked skills)
+    const all = el.querySelectorAll.bind(el);
+    el.querySelectorAll = (sel) => (String(sel).endsWith(':checked') ? all(String(sel).slice(0, -':checked'.length)).filter((x) => x.checked) : all(sel));
+    if (tag === 'form') {
+      Object.defineProperty(el, 'elements', {
+        get() { const o = {}; for (const f of el.querySelectorAll('input, select, textarea')) if (f.name) o[f.name] = f; return o; },
+      });
+      el.reset = () => { for (const f of el.querySelectorAll('input, select, textarea')) { f._value = null; f.checked = 'checked' in f.attrs; } };
+    }
+    return el;
+  }
+  function parse(host, html) {
+    host.children = []; host._text = '';
+    const stack = [host];
+    const re = /<(\/?)([a-zA-Z][\w-]*)([^>]*?)(\/?)>/g;
+    let last = 0; let m;
+    const addText = (raw) => { if (raw) stack[stack.length - 1]._text += decodeEntities(raw); };
+    while ((m = re.exec(html))) {
+      addText(html.slice(last, m.index)); last = re.lastIndex;
+      const tag = m[2].toLowerCase();
+      if (m[1]) { for (let i = stack.length - 1; i > 0; i--) if (stack[i].tagName === tag) { stack.length = i; break; } continue; }
+      const el = node(tag, parseAttrs(m[3]));
+      stack[stack.length - 1].appendChild(el);
+      if (!m[4] && !VOID_TAGS.has(tag)) stack.push(el);
+    }
+    addText(html.slice(last));
+  }
+  const patchInnerHtml = (el) => Object.defineProperty(el, 'innerHTML', {
+    get() { return this._html === null ? '' : this._html; },
+    set(v) { this._html = String(v); this._value = null; parse(this, this._html); walk(this, (c) => { patchInnerHtml(c); return null; }); },
+    configurable: true,
+  });
+  const root = node('body', {});
+  patchInnerHtml(root);
+  parse(root, specialitySection(page));
+  walk(root, (c) => { patchInnerHtml(c); return null; });
+  const hostIds = [];
+  walk(root, (c) => { if (c.id) hostIds.push(c.id); return null; });
+  const byId = (id) => walk(root, (c) => (c.id === id ? c : null));
+  const query = (sel) => {
+    let scope = [root];
+    for (const part of String(sel).trim().split(/\s+/)) {
+      const next = [];
+      for (const s of scope) walk(s, (c) => { if (matches(c, part)) next.push(c); return null; });
+      scope = next;
+      if (!scope.length) return null;
+    }
+    return scope[0];
+  };
+  function dispatch(target, type) {
+    const ev = { type, target, defaultPrevented: false, preventDefault() { this.defaultPrevented = true; } };
+    for (let n = target; n; n = n.parentNode) (n.listeners[type] || []).forEach((fn) => fn(ev));
+    (docListeners.get(type) || []).forEach((fn) => fn(ev));
+    return ev;
+  }
+  const events = [];
+  const documentObj = {
+    readyState: 'complete',
+    getElementById: byId,
+    querySelector: query,
+    addEventListener: (type, fn) => { if (!docListeners.has(type)) docListeners.set(type, []); docListeners.get(type).push(fn); },
+    dispatchEvent: (ev) => { events.push(ev.type); return true; },
+  };
+
+  // ── the API: the catalogue fixed, the builder's adoptions as state ─────────
+  const requests = [];
+  const mine = adoptions.map((a) => ({ ...a }));
+  const fetchFn = async (url, opts = {}) => {
+    const method = opts.method || 'GET';
+    const p = String(url).replace('/api/bongos', '');
+    const body = opts.body ? JSON.parse(opts.body) : undefined;
+    requests.push({ method, path: p, body });
+    const custom = answer && answer(method, p, body);
+    let status = 200;
+    let data = {};
+    const id = (/^\/specialities\/(\d+)/.exec(p) || [])[1];
+    if (custom) ({ status, data } = custom);
+    else if (method === 'GET' && p === '/specialities') data = { specialities: catalog };
+    else if (method === 'GET' && p === '/me/specialities') data = { adoptions: mine.map((a) => ({ ...a })) };
+    else if (method === 'GET' && p === '/specialities/offered') data = { suggestions };
+    else if (method === 'GET' && p === '/specialities/installed-skills') data = { skills: installed };
+    else if (method === 'GET' && /\/skills$/.test(p)) { data = skills[id] || {}; status = skills[id] ? 200 : 404; }
+    else if (method === 'POST' && /\/adopt$/.test(p)) { if (!mine.some((a) => String(a.id) === id)) mine.push({ id: Number(id), active: true, enabled_skills: [] }); data = { adoption: { active: true } }; }
+    else if (method === 'POST' && /\/abandon$/.test(p)) { const was = mine.some((a) => String(a.id) === id); mine.splice(0, mine.length, ...mine.filter((a) => String(a.id) !== id)); data = { ok: true, was_active: was }; }
+    else if (method === 'POST' && /\/documents$/.test(p)) { status = 201; data = { document: { id: 1, title: body.title } }; }
+    else if (method === 'PUT' && /\/skills$/.test(p)) { mine.forEach((a) => { if (String(a.id) === id) a.enabled_skills = body.enabled_skills; }); data = { adoption: { enabled_skills: body.enabled_skills } }; }
+    else if (method === 'PATCH') data = { speciality: { id: Number(id) } };
+    else if (method === 'POST' && p === '/specialities') { status = 201; data = { speciality: { id: 13 } }; }
+    else status = 404;
+    return { ok: status < 400, status, json: async () => data };
+  };
+
+  const toasts = [];
+  const out = { page, hostIds, requests, toasts, events, navigated: null };
+  const windowObj = {
+    OTB: { ...realOTB(), toast: (m) => toasts.push(m) },
+    location: { assign: (u) => { out.navigated = u; } },
+  };
+  class CustomEvent { constructor(type, init) { this.type = type; this.detail = init && init.detail; } }
+  const sandbox = { window: windowObj, document: documentObj, fetch: fetchFn, CustomEvent, JSON, Promise, Map, Set, String, Number, Array, Object, Math, RegExp, Error, console, setTimeout };
+  vm.createContext(sandbox);
+  vm.runInContext(src, sandbox, { filename: 'speciality-tools.js' });
+
+  const settleAll = async () => { for (let i = 0; i < 12; i++) await settle(); };
+  const must = (sel) => { const el = query(sel); if (!el) throw new Error(`${page}: no ${sel}`); return el; };
+  return Object.assign(out, {
+    ready: settleAll,
+    el: byId,
+    find: query,
+    html: (id) => (byId(id) ? byId(id).innerHTML : ''),
+    text: (id) => (byId(id) ? byId(id).innerHTML.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ') : ''),
+    writes: () => requests.filter((r) => r.method !== 'GET'),
+    focused: () => focused,
+    click: async (sel) => { const el = must(sel); dispatch(el, 'click'); await settleAll(); return el; },
+    submit: async (sel) => { const el = must(sel); const ev = dispatch(el, 'submit'); await settleAll(); return ev; },
+    type: async (sel, value) => { const el = must(sel); el.value = value; dispatch(el, 'input'); await settleAll(); return el; },
+    tick: (sel) => { const el = must(sel); el.checked = true; return el; },
+    toggle: async (id) => { const el = byId(id); if (!el) throw new Error(`${page}: no #${id}`); el.open = !el.open; dispatch(el, 'toggle'); await settleAll(); return el; },
+  });
+}
+
 // namesFieldKey — does this source USE `key` as a Full Idea field key, as
 // opposed to merely containing the word? (task 1004085 / BV2.R06.)
 //

package/tests/speciality_offer_ui.mjs

@@ -1,27 +1,30 @@
-// tests/speciality_offer_ui.mjs — a speciality's OWNER chooses what it offers,
-// from the hall (task 1004404; ADR 0310 §1).
+// tests/speciality_offer_ui.mjs — the OWNER's side of the speciality tools:
+// creating one, training it, and choosing what it offers (task 1004404; ADR 0310
+// §1; on My agents too since task 1005052).
 //
-// Before this only the API could set a speciality's offered skills, so nothing
-// made in the hall offered any and the adoption walkthrough never appeared. These
-// pin that the owner can choose on create AND afterwards, that each choice shows
-// the skill's plain description, that only installed skills are choices, and that
-// a skill removed since is named rather than silently kept.
+// Before task 1004404 only the API could set a speciality's offered skills, so
+// nothing made in the hall offered any and the adoption walkthrough never
+// appeared. These pin that the owner can choose on create AND afterwards, that
+// each choice shows the skill's plain description, that only installed skills are
+// choices, and that a skill removed since is named rather than silently kept —
+// and that training adds a document in one request, refused inline when a field
+// is empty.
 //
-// Like tests/speciality_walkthrough_ui.mjs this EXECUTES the real
-// modules/hall-ui/public/settings-specialities.js in a vm under a minimal DOM
-// stub against a fake API, and drives the delegated handlers the page wires.
+// TWO PAGES, ONE COMPONENT (task 1005052). modules/hall-ui/public/speciality-tools.js
+// is mounted by Settings and by My agents, and it renders its own create form, so
+// neither page carries a second copy of that markup. 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_offer_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';
+import { makeRunner, bootSpecialityTools, SPECIALITY_PAGES } 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');
-const HTML = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/settings.html'), 'utf8');
+const SRC = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/speciality-tools.js'), 'utf8');
 const { test, summary } = makeRunner();
 
 const INSTALLED = [
@@ -33,153 +36,183 @@ const INSTALLED = [
 const mine = (over = {}) => ({ id: 12, name: 'Pricing', discipline: 'engineer', summary: '', contract_md: '', visibility: 'private', adoptable: true, mine: true, skills: ['recall', 'retired-skill'], ...over });
 const theirs = (over = {}) => ({ id: 9, name: 'Economics', discipline: 'ideator', summary: '', contract_md: '', visibility: 'public', adoptable: true, mine: false, skills: ['recall'], ...over });
 
-// The checked boxes a form would submit, read off the rendered markup.
+// The ticked boxes in rendered markup.
 const checkedIn = (html) => [...html.matchAll(/<input type="checkbox" name="skill" value="([^"]+)" checked/g)].map((m) => m[1]);
-const fakeForm = (dataset, values) => ({
-  dataset,
-  querySelectorAll: (sel) => (sel === 'input[name="skill"]:checked' ? values.map((value) => ({ value })) : []),
-});
 
-async function boot({ catalog = [mine(), theirs()] } = {}) {
-  const requests = [];
-  const toasts = [];
-  const els = new Map();
-  const handlers = new Map();
-  const makeEl = (id) => ({
-    id, hidden: id === 'specialities-scroll', innerHTML: '', textContent: '', elements: {}, dataset: {}, open: false,
-    addEventListener(type, fn) { handlers.set(`${id}:${type}`, fn); },
-  });
-  for (const id of ['specialities-scroll', 'specialities-rows', 'speciality-suggestions', 'specialities-status', 'speciality-create', 'speciality-create-offer', 'speciality-create-skills']) els.set(id, makeEl(id));
-  // The create form's fields, as settings.html declares them.
-  const create = els.get('speciality-create');
-  const field = (value) => ({ value, addEventListener() {} });
-  create.elements = { name: field(''), discipline: field(''), summary: field(''), contract_md: field(''), visibility: field('private'), sellable: { checked: false, disabled: false, addEventListener() {} } };
-  create.reset = () => { create.elements.name.value = ''; };
-  create.querySelectorAll = () => [];
-
-  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' && p === '/specialities/installed-skills') body = { skills: INSTALLED };
-    else if (method === 'PATCH') body = { speciality: { id: 12 } };
-    else if (method === 'POST' && p === '/specialities') body = { speciality: { id: 13 } };
-    return { ok: true, status: 200, json: async () => body };
-  };
-
-  const document = { readyState: 'complete', getElementById: (id) => els.get(id) || null, addEventListener() {}, querySelector: () => 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 = async () => { for (let i = 0; i < 8; i++) await new Promise((r) => setTimeout(r, 0)); };
-  await settle();
-
-  const rows = els.get('specialities-rows');
-  async function click(act, id) {
-    const btn = { dataset: { act, id: String(id) } };
-    handlers.get('specialities-rows:click')({ target: { closest: (sel) => (sel === 'button[data-act]' ? btn : null) } });
-    await settle();
-  }
-  async function submitOffer(id, values) {
-    const form = fakeForm({ id: String(id) }, values);
-    handlers.get('specialities-rows:submit')({ target: { closest: (sel) => (sel === 'form.speciality-offer' ? form : null) }, preventDefault() {} });
-    await settle();
-  }
-  return { els, rows, requests, toasts, click, submitOffer, handlers, create, settle };
+async function boot(page, { catalog = [mine(), theirs()], ...rest } = {}) {
+  const h = bootSpecialityTools({ page, catalog, installed: INSTALLED, ...rest });
+  await h.ready();
+  return h;
 }
-
-const writes = (h) => h.requests.filter((r) => r.method !== 'GET');
+const ROWS = '#specialities-rows';
+const OFFER = `${ROWS} form.speciality-offer`;
+const writes = (h) => h.writes();
 const installedReads = (h) => h.requests.filter((r) => r.path === '/specialities/installed-skills').length;
+// every element id the component looks up
+const HOSTS = [...new Set([...SRC.matchAll(/\bel\('([a-z-]+)'\)/g)].map((m) => m[1]))];
 
-await test('only a speciality you own has an "Offered skills" control', async () => {
-  const h = await boot();
-  const buttons = [...h.rows.innerHTML.matchAll(/data-act="offer" data-id="(\d+)"/g)].map((m) => m[1]);
-  assert.deepEqual(buttons, ['12']);
-});
-
-await test('opening it lists every installed skill with its plain description and cost, the current offer ticked', async () => {
-  const h = await boot();
-  assert.equal(installedReads(h), 0, 'nothing is fetched until the owner asks');
-  await h.click('offer', 12);
-  assert.equal(installedReads(h), 1);
-  const html = h.rows.innerHTML;
-  for (const k of INSTALLED) {
-    assert.ok(html.includes(`value="${k.name}"`), `${k.name} is a choice`);
-    assert.ok(html.includes(k.does), `${k.name} shows what it does`);
-    assert.ok(html.includes(k.cost), `${k.name} shows what it costs`);
+await test('the component names the hosts it reads (sanity: the scan below has something to check)', () => {
+  for (const id of ['specialities-scroll', 'specialities-rows', 'speciality-suggestions', 'specialities-status', 'speciality-create', 'speciality-create-offer', 'speciality-create-skills']) {
+    assert.ok(HOSTS.includes(id), `speciality-tools.js reads #${id}`);
   }
-  assert.deepEqual(checkedIn(html), ['recall'], 'what it offers today is ticked');
-  assert.match(html, /Offering a skill turns nothing on/);
 });
 
-await test('a skill it offers that the instance no longer has is named, not offered as a choice', async () => {
-  const h = await boot();
-  await h.click('offer', 12);
-  assert.ok(!h.rows.innerHTML.includes('value="retired-skill"'), 'not a checkbox');
-  assert.match(h.rows.innerHTML, /No longer on this project, so saving drops it from the offer: <code>retired-skill<\/code>/);
-});
+for (const page of SPECIALITY_PAGES) {
+  await test(`${page}: the page carries every host the component reads, and no second copy of the create form`, async () => {
+    const h = await boot(page);
+    for (const id of HOSTS) assert.ok(h.el(id), `${page}.html: #${id} is there once the component has run`);
+    assert.ok(h.hostIds.includes('speciality-create'), `${page}.html declares the create form's host`);
+    const html = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public', `${page}.html`), 'utf8');
+    const form = html.slice(html.indexOf('<form id="speciality-create"'), html.indexOf('</form>', html.indexOf('<form id="speciality-create"')));
+    assert.doesNotMatch(form, /<(input|select|textarea)\b/, `${page}.html: the create form is EMPTY — the component renders it, so there is one copy`);
+    assert.ok(html.includes('/builders/speciality-tools.js'), `${page}.html loads the component`);
+    assert.ok(html.includes('/builders/speciality-tools.css'), `${page}.html loads its sheet`);
+  });
 
-await test('saving sends exactly the ticked skills as one PATCH, and nothing is written before', async () => {
-  const h = await boot();
-  await h.click('offer', 12);
-  assert.equal(writes(h).length, 0);
-  await h.submitOffer(12, ['recall', 'status']);
-  const w = writes(h);
-  assert.equal(w.length, 1);
-  assert.equal(w[0].method, 'PATCH');
-  assert.equal(w[0].path, '/specialities/12');
-  assert.deepEqual(w[0].body, { skills: ['recall', 'status'] });
-  assert.ok(h.toasts.some((m) => /offers 2 skills/.test(m)));
-  assert.ok(!/class="speciality-offer"/.test(h.rows.innerHTML), 'the editor closes on save');
-});
+  await test(`${page}: the create form the component renders carries every field, and the skills picker INSIDE the form it submits with`, async () => {
+    const h = await boot(page);
+    const form = h.el('speciality-create');
+    assert.deepEqual(Object.keys(form.elements).sort(), ['contract_md', 'discipline', 'name', 'sellable', 'summary', 'visibility']);
+    assert.deepEqual(form.elements.discipline.querySelectorAll('option').map((o) => o.attrs.value), ['', 'engineer', 'ideator', 'artist', 'ui']);
+    assert.deepEqual(form.elements.visibility.querySelectorAll('option').map((o) => o.attrs.value), ['private', 'project', 'public']);
+    assert.ok(form.querySelector('details#speciality-create-offer'), 'the picker is inside the form');
+    assert.ok(form.querySelector('#speciality-create-skills'), 'with the host its choices fill');
+  });
 
-await test('offering nothing is a choice too', async () => {
-  const h = await boot();
-  await h.click('offer', 12);
-  await h.submitOffer(12, []);
-  assert.deepEqual(writes(h)[0].body, { skills: [] });
-});
+  await test(`${page}: only a speciality you own has "Train" and "Offered skills"`, async () => {
+    const h = await boot(page);
+    for (const act of ['offer', 'train']) {
+      const ids = [...h.html('specialities-rows').matchAll(new RegExp(`data-act="${act}" data-id="(\\d+)"`, 'g'))].map((m) => m[1]);
+      assert.deepEqual(ids, ['12'], act);
+    }
+  });
 
-await test('the installed list is read once per page, however often the editor opens', async () => {
-  const h = await boot();
-  await h.click('offer', 12);
-  await h.click('offer', 12); // close
-  await h.click('offer', 12); // open again
-  assert.equal(installedReads(h), 1);
-});
+  await test(`${page}: opening "Offered skills" lists every installed skill with its plain description and cost, the current offer ticked`, async () => {
+    const h = await boot(page);
+    assert.equal(installedReads(h), 0, 'nothing is fetched until the owner asks');
+    await h.click(`${ROWS} button[data-act="offer"]`);
+    assert.equal(installedReads(h), 1);
+    const html = h.html('specialities-rows');
+    for (const k of INSTALLED) {
+      assert.ok(html.includes(`value="${k.name}"`), `${k.name} is a choice`);
+      assert.ok(html.includes(k.does), `${k.name} shows what it does`);
+      assert.ok(html.includes(k.cost), `${k.name} shows what it costs`);
+    }
+    assert.deepEqual(checkedIn(html), ['recall'], 'what it offers today is ticked');
+    assert.match(html, /Offering a skill turns nothing on/);
+  });
 
-await test('the create form offers the same choices, filled on first open, and sends them with the new speciality', async () => {
-  const h = await boot();
-  const box = h.els.get('speciality-create-offer');
-  const host = h.els.get('speciality-create-skills');
-  box.open = true;
-  h.handlers.get('speciality-create-offer:toggle')();
-  await h.settle();
-  for (const k of INSTALLED) assert.ok(host.innerHTML.includes(`value="${k.name}"`) && host.innerHTML.includes(k.does));
-  assert.deepEqual(checkedIn(host.innerHTML), [], 'a new speciality starts offering nothing');
-  h.create.elements.name.value = 'New one';
-  h.create.elements.discipline.value = 'engineer';
-  h.create.querySelectorAll = (sel) => (sel === 'input[name="skill"]:checked' ? [{ value: 'status' }] : []);
-  h.handlers.get('speciality-create:submit')({ preventDefault() {} });
-  await h.settle();
-  const post = writes(h).find((r) => r.method === 'POST' && r.path === '/specialities');
-  assert.ok(post, 'created');
-  assert.deepEqual(post.body.skills, ['status']);
-});
+  await test(`${page}: a skill it offers that the instance no longer has is named, not offered as a choice`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="offer"]`);
+    assert.ok(!h.html('specialities-rows').includes('value="retired-skill"'), 'not a checkbox');
+    assert.match(h.html('specialities-rows'), /No longer on this project, so saving drops it from the offer: <code>retired-skill<\/code>/);
+  });
 
-await test('settings.html carries the create form\'s picker inside the form it submits with', () => {
-  const form = HTML.slice(HTML.indexOf('<form id="speciality-create"'), HTML.indexOf('</form>', HTML.indexOf('<form id="speciality-create"')));
-  assert.match(form, /<details id="speciality-create-offer"/);
-  assert.match(form, /id="speciality-create-skills"/);
-});
+  await test(`${page}: "Find a skill" narrows the list as you type`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="offer"]`);
+    await h.type(`${OFFER} .speciality-offer__filter`, 'version');
+    const shown = h.find(`${OFFER} .speciality-offer__list`).children.filter((li) => !li.hidden).map((li) => li.querySelector('input').attrs.value);
+    assert.deepEqual(shown, ['status'], 'matched on the plain description, not only the name');
+  });
+
+  await test(`${page}: saving sends exactly the ticked skills as one PATCH, and nothing is written before`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="offer"]`);
+    assert.equal(writes(h).length, 0);
+    h.tick(`${OFFER} input[value="status"]`);
+    const ev = await h.submit(OFFER);
+    assert.equal(ev.defaultPrevented, true, 'the page does not navigate');
+    const w = writes(h);
+    assert.equal(w.length, 1);
+    assert.equal(w[0].method, 'PATCH');
+    assert.equal(w[0].path, '/specialities/12');
+    assert.deepEqual(w[0].body, { skills: ['recall', 'status'] });
+    assert.ok(h.toasts.some((m) => /offers 2 skills/.test(m)));
+    assert.ok(!/class="speciality-offer"/.test(h.html('specialities-rows')), 'the editor closes on save');
+  });
+
+  await test(`${page}: offering nothing is a choice too`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="offer"]`);
+    h.find(`${OFFER} input[value="recall"]`).checked = false;
+    await h.submit(OFFER);
+    assert.deepEqual(writes(h)[0].body, { skills: [] });
+  });
+
+  await test(`${page}: the installed list is read once per page, however often the editor opens`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="offer"]`);
+    await h.click(`${ROWS} button[data-act="offer"]`); // close
+    await h.click(`${ROWS} button[data-act="offer"]`); // open again
+    assert.equal(installedReads(h), 1);
+  });
+
+  await test(`${page}: training adds a document to your own speciality in one POST, and the form closes`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="train"]`);
+    const form = h.find(`${ROWS} form.speciality-train`);
+    assert.ok(form, 'Train opens the form in its card');
+    assert.match(form.textContent, /indexed\s+for recall, not pasted into every session/);
+    form.elements.title.value = '  How we price a swap  ';
+    form.elements.body_md.value = 'Start from the spread.';
+    await h.submit(`${ROWS} form.speciality-train`);
+    assert.deepEqual(writes(h).map((r) => [r.method, r.path, r.body]), [['POST', '/specialities/12/documents', { title: 'How we price a swap', body_md: 'Start from the spread.' }]]);
+    assert.ok(h.toasts.includes('Added.'));
+    assert.equal(h.find(`${ROWS} form.speciality-train`), null, 'the form closes on save');
+  });
+
+  await test(`${page}: a document with no title or no body is refused inline, before any request`, async () => {
+    const h = await boot(page);
+    await h.click(`${ROWS} button[data-act="train"]`);
+    h.find(`${ROWS} form.speciality-train`).elements.title.value = 'Only a title';
+    await h.submit(`${ROWS} form.speciality-train`);
+    assert.equal(writes(h).length, 0);
+    assert.equal(h.el('specialities-status').textContent, 'A document needs both a title and some content.');
+  });
+
+  await test(`${page}: a document it already knows says so`, async () => {
+    const h = await boot(page, { answer: (m, p) => (m === 'POST' && /\/documents$/.test(p) ? { status: 200, data: { skipped: true, reason: 'already_trained' } } : null) });
+    await h.click(`${ROWS} button[data-act="train"]`);
+    const form = h.find(`${ROWS} form.speciality-train`);
+    form.elements.title.value = 'T';
+    form.elements.body_md.value = 'B';
+    await h.submit(`${ROWS} form.speciality-train`);
+    assert.ok(h.toasts.includes('It already knew that one.'));
+  });
+
+  await test(`${page}: the create form offers the same choices, filled on first open, and sends them with the new speciality`, async () => {
+    const h = await boot(page);
+    const host = h.el('speciality-create-skills');
+    await h.toggle('speciality-create-offer');
+    for (const k of INSTALLED) assert.ok(host.innerHTML.includes(`value="${k.name}"`) && host.innerHTML.includes(k.does));
+    assert.deepEqual(checkedIn(host.innerHTML), [], 'a new speciality starts offering nothing');
+    const form = h.el('speciality-create');
+    form.elements.name.value = 'New one';
+    form.elements.discipline.value = 'engineer';
+    h.tick('#speciality-create-skills input[value="status"]');
+    await h.submit('#speciality-create');
+    const post = writes(h).find((r) => r.method === 'POST' && r.path === '/specialities');
+    assert.ok(post, 'created');
+    assert.deepEqual(post.body, { name: 'New one', discipline: 'engineer', summary: '', contract_md: '', visibility: 'private', sellable: false, skills: ['status'] });
+    assert.ok(h.toasts.includes('Speciality created.'));
+  });
+
+  await test(`${page}: create refuses a nameless or roleless speciality inline, and a private one cannot be for sale`, async () => {
+    const h = await boot(page);
+    const form = h.el('speciality-create');
+    await h.submit('#speciality-create');
+    assert.equal(h.el('specialities-status').textContent, 'Give it a name.');
+    form.elements.name.value = 'X';
+    await h.submit('#speciality-create');
+    assert.match(h.el('specialities-status').textContent, /^Pick which role it sits under\.$/);
+    assert.equal(writes(h).length, 0);
+    assert.equal(form.elements.sellable.disabled, true, 'private (the default) cannot be sold');
+    form.elements.visibility.value = 'public';
+    form.elements.visibility.fire('change', {});
+    assert.equal(form.elements.sellable.disabled, false);
+  });
+}
 
 summary();