@bongos/core 1.19.1016 → 1.19.1018

package/tests/card_apply_ui.mjs

@@ -0,0 +1,297 @@
+// tests/card_apply_ui.mjs — the "Apply to join" affordance on the map's
+// project card, EXECUTED (BV1.R10, task 1002286, goal 1000110).
+//
+// The idiom is tests/project_invite_ui.mjs beside it (there is no jsdom in
+// this repo): lift the region out of modules/public-landing/public/projects.html,
+// run it in a vm under a minimal DOM/fetch stub, and drive it directly —
+// rather than reading the source and hoping. cardApplyHtml/submitApply are
+// deliberately small and depend on only a handful of free variables
+// (isMember, hostOf, appliedOrigins, me, $, fetch, jsonOrEmpty, apiError,
+// signInAgain), all supplied by the sandbox the way project_invite_ui.mjs
+// supplies esc()/jsonOrEmpty()/apiError() rather than slicing them too.
+//
+// What it proves, and why each matters:
+//   • the button is invisible for the platform's own card, for a member (the
+//     "yours"/"you build here" chip already says that), and for a signed-out
+//     visitor (there is no session to file the request under) — C6's rule
+//     applied to a fourth region
+//   • Apply sends exactly { origin } on the cookie session, to the join relay
+//     R08 already built (POST /my-projects/join)
+//   • only `status === 'requested'` moves the button to Applied and marks the
+//     origin applied; every other outcome the relay can give (already_member,
+//     invite_only, open_enrollment, members_only, not_published) is shown as
+//     the DOOR'S OWN WORDS and leaves the button re-tryable — R08's relay
+//     invented this vocabulary once already; the card must not invent a
+//     second one
+//   • a refusal, an expired session and an unreachable platform are each said
+//     honestly and never mistaken for a filed application
+//   • loadMemberships() reads the `applied` echo GET /my-projects returns
+//     (R08, ADR 0201 D1.3) into appliedOrigins, by host, the same way it
+//     already reads `owned`/`building` into mineOrigins
+//
+// Run:  node --test --test-reporter=tap tests/card_apply_ui.mjs
+
+import test from 'node:test';
+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';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const LANDING = path.join(ROOT, 'modules', 'public-landing', 'public');
+const HUB = fs.readFileSync(path.join(LANDING, 'projects.html'), 'utf8').replace(/\r\n/g, '\n');
+const SCRIPT = (HUB.match(/<script>([\s\S]*?)<\/script>\s*<\/body>/) || [, ''])[1];
+
+// ── the card-apply region ────────────────────────────────────────────────
+const START = SCRIPT.indexOf('/* ══ APPLY TO JOIN (R10, task 1002286)');
+const END = SCRIPT.indexOf('function openCard(p, rel, returnTo) {');
+assert.ok(START > 0, 'the region must start at the APPLY TO JOIN banner');
+assert.ok(END > START, 'the region must end before openCard()');
+const REGION = SCRIPT.slice(START, END);
+for (const fn of ['function cardApplyHtml(', 'function submitApply(']) {
+  assert.ok(REGION.includes(fn), `the region must carry ${fn}`);
+}
+
+function boot({ me = { rank: 'thetes' }, appliedOrigins = {}, answers = [] } = {}) {
+  const requests = [];
+  const els = new Map();
+  const makeEl = (id) => ({
+    _id: id, textContent: '', className: '', _html: '', disabled: false,
+    set innerHTML(v) { this._html = String(v); },
+    get innerHTML() { return this._html; },
+  });
+  const $ = (id) => {
+    if (id == null) return null;
+    if (!els.has(id)) els.set(id, makeEl(id));
+    return els.get(id);
+  };
+
+  const queued = answers.slice();
+  const fetch = (url, init = {}) => {
+    requests.push({ url, method: init.method, body: init.body, credentials: init.credentials, headers: init.headers });
+    const a = queued.shift() || { ok: true, status: 200, body: { ok: true, status: 'requested', message: 'Requested.' } };
+    if (a.reject) return Promise.reject(new Error('offline'));
+    return Promise.resolve({ ok: a.ok, status: a.status, json: () => Promise.resolve(a.body) });
+  };
+
+  // isMember/hostOf mirror the real page's own trivial pure functions — kept
+  // here rather than sliced in, the project_invite_ui.mjs precedent for a
+  // dependency simple enough that a second, hand-written copy cannot drift.
+  const sandbox = {
+    $, fetch, console, Promise, JSON, String, Object,
+    me, appliedOrigins,
+    API: '/api/bongos',
+    isMember: (rel) => rel === 'owner' || rel === 'builder',
+    hostOf: (o) => String(o || '').replace(/^https?:\/\//, '').replace(/^www\./, '').replace(/\/.*$/, '').toLowerCase(),
+    jsonOrEmpty: (res) => res.json().catch(() => ({})),
+    apiError: (data, status) => ({
+      code: (data && data.error && data.error.code) || ('http_' + status),
+      message: (data && data.error && data.error.message) || '',
+    }),
+    signInAgain: () => 'Your session expired — <a href="/in">sign in again</a>.',
+  };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(REGION, sandbox, { filename: 'projects.html#card-apply' });
+
+  const settle = async () => { for (let i = 0; i < 10; i++) await Promise.resolve(); };
+  return { requests, sandbox, settle, $, msg: () => $('cardApplyMsg') };
+}
+
+// ── cardApplyHtml: who sees the button at all ───────────────────────────
+
+test('the platform\'s own card never offers Apply', () => {
+  const { sandbox } = boot();
+  const html = sandbox.cardApplyHtml({ isSelf: true, origin: 'https://x.example' }, 'none');
+  assert.equal(html, '');
+});
+
+test('a member sees nothing — the relationship chip already says so', () => {
+  const { sandbox } = boot();
+  for (const rel of ['owner', 'builder']) {
+    assert.equal(sandbox.cardApplyHtml({ origin: 'https://x.example' }, rel), '', rel);
+  }
+});
+
+test('a signed-out visitor sees nothing — there is no session to apply under', () => {
+  const { sandbox } = boot({ me: null });
+  assert.equal(sandbox.cardApplyHtml({ origin: 'https://x.example' }, 'none'), '');
+});
+
+test('a signed-in visitor with no filed application gets an enabled Apply button', () => {
+  const { sandbox } = boot();
+  const html = sandbox.cardApplyHtml({ origin: 'https://x.example' }, 'none');
+  assert.match(html, /id="cardApply"/);
+  assert.doesNotMatch(html, /disabled/);
+  assert.match(html, />Apply to join</);
+});
+
+test('an already-applied origin renders Applied, disabled — the echo, by host', () => {
+  const { sandbox } = boot({ appliedOrigins: { 'x.example': true } });
+  const html = sandbox.cardApplyHtml({ origin: 'https://x.example/' }, 'none');
+  assert.match(html, /id="cardApply" disabled/);
+  assert.match(html, />Applied</);
+});
+
+// ── submitApply: the request itself ─────────────────────────────────────
+
+test('Apply sends exactly { origin } to the join relay, on the cookie session', async () => {
+  const ui = boot();
+  const btn = { textContent: '', disabled: false };
+  ui.sandbox.submitApply(btn, { origin: 'https://mercury.example' });
+  await ui.settle();
+
+  assert.equal(ui.requests.length, 1);
+  const req = ui.requests[0];
+  assert.equal(req.url, '/api/bongos/my-projects/join');
+  assert.equal(req.method, 'POST');
+  assert.equal(req.credentials, 'same-origin');
+  assert.deepEqual(JSON.parse(req.body), { origin: 'https://mercury.example' });
+});
+
+test('a filed application moves the button to Applied and marks the origin', async () => {
+  const ui = boot({ answers: [{ ok: true, status: 200, body: { ok: true, status: 'requested', message: 'Requested access.' } }] });
+  const btn = { textContent: '', disabled: false };
+  ui.sandbox.submitApply(btn, { origin: 'https://mercury.example' });
+  await ui.settle();
+
+  assert.equal(btn.textContent, 'Applied');
+  assert.equal(btn.disabled, true, 'a filed application does not re-offer the click');
+  assert.equal(ui.sandbox.appliedOrigins['mercury.example'], true);
+  assert.equal(ui.msg().className, 'projMsg ok');
+  assert.equal(ui.msg().textContent, 'Requested access.');
+});
+
+test('already_member is the door\'s own answer, not a filed application', async () => {
+  const ui = boot({ answers: [{ ok: true, status: 200, body: { ok: true, status: 'already_member', message: 'You already build on this project — sign in to it to see it here.' } }] });
+  const btn = { textContent: '', disabled: false };
+  ui.sandbox.submitApply(btn, { origin: 'https://mercury.example' });
+  await ui.settle();
+
+  assert.equal(btn.textContent, 'Apply to join', 're-tryable — this was not an application');
+  assert.equal(btn.disabled, false);
+  assert.equal(ui.sandbox.appliedOrigins['mercury.example'], undefined, 'not marked applied');
+  assert.equal(ui.msg().className, 'projMsg', 'the door\'s own answer, not an error');
+  assert.match(ui.msg().textContent, /already build on this project/);
+});
+
+test('invite_only is said in the door\'s own words, and the button stays re-tryable', async () => {
+  const ui = boot({ answers: [{ ok: true, status: 200, body: { ok: true, status: 'invite_only', message: 'This project is invite-only — it doesn’t take requests.' } }] });
+  const btn = { textContent: '', disabled: false };
+  ui.sandbox.submitApply(btn, { origin: 'https://mercury.example' });
+  await ui.settle();
+
+  assert.equal(btn.disabled, false);
+  assert.match(ui.msg().textContent, /invite-only/);
+});
+
+test('a real refusal (e.g. the project is not yet on the map) is shown as an error, via apiError', async () => {
+  const ui = boot({ answers: [{ ok: false, status: 404, body: { error: { code: 'unknown_project', message: 'no such project' } } }] });
+  const btn = { textContent: '', disabled: false };
+  ui.sandbox.submitApply(btn, { origin: 'https://mercury.example' });
+  await ui.settle();
+
+  assert.equal(btn.textContent, 'Apply to join');
+  assert.equal(btn.disabled, false);
+  assert.equal(ui.msg().className, 'projMsg err');
+  assert.equal(ui.msg().textContent, 'no such project');
+});
+
+test('an expired session offers a way back in rather than a silent failure', async () => {
+  const ui = boot({ answers: [{ ok: false, status: 401, body: {} }] });
+  const btn = { textContent: '', disabled: false };
+  ui.sandbox.submitApply(btn, { origin: 'https://mercury.example' });
+  await ui.settle();
+
+  assert.equal(btn.disabled, false);
+  assert.match(ui.msg().innerHTML, /sign in again/i);
+  assert.equal(ui.msg().className, 'projMsg err');
+});
+
+test('an unreachable platform is said as a network problem, and the click is re-tryable', async () => {
+  const ui = boot({ answers: [{ reject: true }] });
+  const btn = { textContent: '', disabled: false };
+  ui.sandbox.submitApply(btn, { origin: 'https://mercury.example' });
+  await ui.settle();
+
+  assert.equal(btn.disabled, false);
+  assert.equal(ui.msg().className, 'projMsg err');
+  assert.match(ui.msg().textContent, /reach the platform/i);
+});
+
+test('the button disables and reads Applying… the instant it is pressed', () => {
+  const ui = boot({ answers: [{ ok: true, status: 200, body: { ok: true, status: 'requested', message: 'ok' } }] });
+  const btn = { textContent: '', disabled: false };
+  ui.sandbox.submitApply(btn, { origin: 'https://mercury.example' });
+  assert.equal(btn.disabled, true, 'disabled synchronously — no double-send on a fast second click');
+  assert.equal(btn.textContent, 'Applying…');
+});
+
+// ── loadMemberships: the applied echo, by host ───────────────────────────
+
+test('loadMemberships reads GET /my-projects\' applied echo into appliedOrigins, by host', () => {
+  const START2 = SCRIPT.indexOf('function loadMemberships() {');
+  const END2 = SCRIPT.indexOf('\n  }', START2) + 4;
+  assert.ok(START2 > 0 && END2 > START2, 'loadMemberships must be findable');
+  const region = SCRIPT.slice(START2, END2);
+
+  const sandbox = {
+    API: '/api/bongos',
+    mineOrigins: {},
+    appliedOrigins: {},
+    hostOf: (o) => String(o || '').replace(/^https?:\/\//, '').replace(/^www\./, '').replace(/\/.*$/, '').toLowerCase(),
+    fetch: () => Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve({
+        owned: [{ origin: 'https://owned.example' }],
+        building: [{ origin: 'https://built.example' }],
+        applied: [{ origin: 'https://applied.example/', applied_at: '2026-09-01T00:00:00Z' }],
+      }),
+    }),
+  };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(region, sandbox, { filename: 'projects.html#load-memberships' });
+
+  return sandbox.loadMemberships().then(() => {
+    // The region reassigns mineOrigins/appliedOrigins to a fresh `{}` it
+    // creates INSIDE the vm's own realm, so Object.assign re-parents a copy
+    // to this realm before comparing — a cross-realm deepStrictEqual reads
+    // an identically-shaped object as unequal over its prototype alone.
+    assert.deepEqual(Object.assign({}, sandbox.mineOrigins), { 'owned.example': 'owner', 'built.example': 'builder' });
+    assert.deepEqual(Object.assign({}, sandbox.appliedOrigins), { 'applied.example': true });
+  });
+});
+
+test('a fetch failure clears appliedOrigins too, not just mineOrigins', () => {
+  const START2 = SCRIPT.indexOf('function loadMemberships() {');
+  const END2 = SCRIPT.indexOf('\n  }', START2) + 4;
+  const region = SCRIPT.slice(START2, END2);
+  const sandbox = {
+    API: '/api/bongos',
+    mineOrigins: { stale: 'owner' },
+    appliedOrigins: { stale: true },
+    hostOf: (o) => String(o || ''),
+    fetch: () => Promise.reject(new Error('offline')),
+  };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(region, sandbox, { filename: 'projects.html#load-memberships-fail' });
+
+  return sandbox.loadMemberships().then(() => {
+    assert.deepEqual(Object.assign({}, sandbox.mineOrigins), {});
+    assert.deepEqual(Object.assign({}, sandbox.appliedOrigins), {});
+  });
+});
+
+// ── the card is actually wired to it (source pins) ───────────────────────
+
+test('openCard builds the Apply button from cardApplyHtml and wires its click to submitApply', () => {
+  assert.match(SCRIPT, /var applyBtn = cardApplyHtml\(p, rel\);/);
+  assert.match(SCRIPT, /\) \+ applyBtn \+ \(applyBtn \? '<p class="projMsg" id="cardApplyMsg"><\/p>' : ''\);/,
+    'the message line only ships when there is a button that could produce one');
+  assert.match(SCRIPT, /var applyEl = \$\('cardApply'\);/);
+  assert.match(SCRIPT, /if \(applyEl && !applyEl\.disabled\) applyEl\.addEventListener\('click', function \(\) \{ submitApply\(applyEl, p\); \}\);/,
+    'an already-Applied card (disabled) is never re-wired to send a second request');
+});