@bongos/core 1.21.40 → 1.21.41

package/tests/page_notes_panel.mjs

@@ -0,0 +1,145 @@
+// tests/page_notes_panel.mjs — the hall side of the artist's page feedback doc
+// (task 1004496): the palette tool craft-mode.js puts in the top bar, and the
+// reader in page-notes.js. The server half is tests/page_notes.mjs.
+//
+// Runs the REAL craft-mode.js over a small DOM: the palette shows in Artistry
+// alone and leaves when the mode changes, pressing it loads page-notes.js once
+// (same ?v as craft-mode.js) and a ?note= link opens the doc in any mode. Then
+// the REAL page-notes.js reader: it escapes the doc and shows only this module's
+// own images, which is what keeps a doc from pulling a picture off another site.
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules/hall-ui/public');
+const CRAFT = fs.readFileSync(path.join(HALL, 'craft-mode.js'), 'utf8');
+const NOTES = fs.readFileSync(path.join(HALL, 'page-notes.js'), 'utf8');
+
+function node(tag, id, cls) {
+  const attrs = {};
+  const listeners = {};
+  const el = {
+    tagName: tag, id: id || '', className: cls || '', dataset: {}, children: [], parentNode: null, innerHTML: '', title: '', type: '', src: '',
+    setAttribute(k, v) { attrs[k] = String(v); }, getAttribute(k) { return k in attrs ? attrs[k] : null; },
+    hasAttribute(k) { return k in attrs; }, removeAttribute(k) { delete attrs[k]; },
+    get nextSibling() { const s = this.parentNode && this.parentNode.children; return s ? s[s.indexOf(this) + 1] || null : null; },
+    appendChild(c) { c.parentNode = this; this.children.push(c); if (this.onAppend) this.onAppend(c); return c; },
+    insertBefore(c, ref) { c.parentNode = this; const at = ref ? this.children.indexOf(ref) : -1; if (at === -1) this.children.push(c); else this.children.splice(at, 0, c); return c; },
+    removeChild(c) { this.children.splice(this.children.indexOf(c), 1); c.parentNode = null; return c; },
+    querySelector(sel) { return all(this).find((n) => sel === '.' + n.className) || null; },
+    querySelectorAll() { return []; },
+    addEventListener(t, fn) { (listeners[t] ||= []).push(fn); },
+    click() { (listeners.click || []).forEach((fn) => fn({ target: el })); },
+    classList: { toggle() {} },
+  };
+  return el;
+}
+function all(root) { return root.children.flatMap((c) => [c, ...all(c)]); }
+
+function boot({ session = {}, search = '' } = {}) {
+  const sidebar = node('NAV', 'app-sidebar');
+  const topbar = node('DIV', 'app-topbar');
+  const side = topbar.appendChild(node('DIV', '', 'topbar-side'));
+  const sw = side.appendChild(node('DIV', 'craft-switch'));
+  const head = node('HEAD');
+  const loaded = [];
+  const root = node('HTML');
+  const everything = () => [sidebar, topbar, ...all(sidebar), ...all(topbar)];
+  const document = {
+    documentElement: root, body: node('BODY'), head, activeElement: null,
+    currentScript: { src: 'https://h/builders/craft-mode.js?v=2026-10-04-test' },
+    getElementById: (id) => everything().find((n) => n.id === id) || null,
+    querySelectorAll: (sel) => (sel === '[data-craft-tool]' ? everything().filter((n) => n.hasAttribute('data-craft-tool')) : []),
+    createElement: (t) => node(t.toUpperCase()),
+    addEventListener() {}, removeEventListener() {}, dispatchEvent() { return true; },
+  };
+  const mk = (obj) => ({ getItem: (k) => (k in obj ? obj[k] : null), setItem: (k, v) => { obj[k] = String(v); }, removeItem: (k) => { delete obj[k]; } });
+  const opened = [];
+  const window = { localStorage: mk({}), sessionStorage: mk(session), matchMedia: () => ({ matches: false }), location: { search } };
+  // "Loading" page-notes.js: record the tag, then define the API it would define.
+  head.onAppend = (tag) => {
+    loaded.push(tag.src);
+    window.OTBPageNotes = { open: () => opened.push('open'), openNote: (id) => opened.push('note ' + id) };
+    tag.onload();
+  };
+  const sandbox = { window, document, Promise, CustomEvent: class { constructor(t, i) { this.type = t; Object.assign(this, i); } } };
+  vm.createContext(sandbox);
+  vm.runInContext(CRAFT, sandbox, { filename: 'craft-mode.js' });
+  window.OTBCraftMode.mount();
+  return { craft: window.OTBCraftMode, side, sw, loaded, opened, tools: () => all(side).filter((n) => n.hasAttribute('data-craft-tool')) };
+}
+const flush = () => new Promise((r) => setTimeout(r, 0));
+
+test('THE PALETTE: in the top bar in Artistry alone, right before the switch, and gone when the mode changes', () => {
+  const p = boot({ session: { 'hall-craft': 'artistry' } });
+  assert.deepEqual(p.tools().map((t) => t.id), ['craft-tool-palette']);
+  assert.equal(p.tools()[0].nextSibling, p.sw, 'it sits right before the mode switch');
+  assert.equal(p.tools()[0].getAttribute('aria-label'), 'Write feedback on this page');
+  for (const m of ['building', 'ideating', 'governing', 'legacy']) {
+    p.craft.choose(m);
+    assert.equal(p.tools().length, 0, `no palette in ${m}`);
+  }
+  p.craft.choose('artistry');
+  p.craft.choose('artistry');
+  assert.equal(p.tools().length, 1, 'choosing Artistry twice draws one palette');
+  assert.equal(boot().tools().length, 0, 'and none with no mode at all');
+});
+
+test('pressing it loads page-notes.js once, at the same version as craft-mode.js, and opens it', async () => {
+  const p = boot({ session: { 'hall-craft': 'artistry' } });
+  assert.deepEqual(p.loaded, [], 'nothing loads until the palette is pressed');
+  p.tools()[0].click();
+  await flush();
+  p.tools()[0].click();
+  await flush();
+  assert.deepEqual(p.loaded, ['/builders/page-notes.js?v=2026-10-04-test']);
+  assert.deepEqual(p.opened, ['open', 'open']);
+});
+
+test('a ?note= link opens that doc on arrival, in any mode', async () => {
+  const p = boot({ search: '?note=42' });
+  await flush();
+  assert.deepEqual(p.opened, ['note 42']);
+  const q = boot({ session: { 'hall-craft': 'governing' }, search: '?x=1&note=7' });
+  await flush();
+  assert.deepEqual(q.opened, ['note 7']);
+  const bad = boot({ search: '?note=7x' });
+  await flush();
+  assert.deepEqual(bad.opened, [], 'a malformed id opens nothing');
+});
+
+// ---------- the reader ----------
+function reader() {
+  const window = { location: { pathname: '/studio' } };
+  const document = { body: { dataset: { page: 'studio', pageTitle: 'Studio' } }, title: 'Studio — hall' };
+  const sandbox = { window, document };
+  vm.createContext(sandbox);
+  vm.runInContext(NOTES, sandbox, { filename: 'page-notes.js' });
+  return window.OTBPageNotes;
+}
+
+test('the reader escapes the doc and shows ONLY this module\'s own images', () => {
+  const R = reader();
+  const html = R.renderBody('# Header <b>\n- one\n- two\n\nSee ![shot](/api/bongos/page-notes/images/12) and ![x](https://evil.example/a.png)\n<script>alert(1)</script>');
+  assert.match(html, /<h3 class="pn-doc__h">Header &lt;b&gt;<\/h3>/);
+  assert.match(html, /<ul><li>one<\/li><li>two<\/li><\/ul>/);
+  assert.match(html, /<img class="pn-doc__img" src="\/api\/bongos\/page-notes\/images\/12" alt="shot" loading="lazy">/);
+  assert.doesNotMatch(html, /<img[^>]+evil\.example/, 'another site\'s image is left as text');
+  assert.doesNotMatch(html, /<script/);
+  assert.equal((html.match(/<img/g) || []).length, 1);
+});
+
+test('the doc names its page the way the page inventory does', () => {
+  const R = reader();
+  assert.deepEqual(JSON.parse(JSON.stringify(R.page())), { id: 'builders:studio', path: '/studio', title: 'Studio' });
+});
+
+test('colours live in style.css, and the panel and tool are styled there', () => {
+  assert.doesNotMatch(NOTES, /#[0-9a-f]{3,6}\b|rgba?\(/i, 'no colour literal in the panel script');
+  const css = fs.readFileSync(path.join(HALL, 'style.css'), 'utf8');
+  for (const sel of ['.craft-tool {', '.pn {', '.pn__panel {', '.pn__text {', '.pn-doc__img {']) assert.ok(css.includes(sel), sel);
+});