@bongos/core 1.19.1080 → 1.20.1

package/tests/projects_hub_render_connect.mjs

@@ -0,0 +1,295 @@
+// tests/projects_hub_render_connect.mjs — Connect Render from an existing project's page,
+// EXECUTED (task 1004184, ADR 0345).
+//
+// A project whose app has no platform yet (made before the wizard's app step, or whose
+// owner chose "Decide later") gets Connect Render on its "Where its app runs" card. It is
+// the wizard's own flow — its markup cloned, its logic renderConnect() — so this slices the
+// page's region and the shared flow out of projects.html by their sentinels and runs them
+// in `vm` over a small fake DOM built from the wizard's real Render markup.
+//
+// The load-bearing assertions:
+//   • it is offered only on the owner's own "no platform" answer, and only for a project
+//     the server would take it for; a project that never connects is left as it was
+//   • it is the wizard's flow, not a second one: the same ids, prefixed, and the same checks
+//   • the key is sent once, in a POST body to THIS project, and forgotten at once — on a
+//     refusal too — and the card then shows the app's own progress
+//   • moving to another project forgets every answer
+//
+// Run:  node --test --test-reporter=tap tests/projects_hub_render_connect.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.join(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HUB = fs.readFileSync(path.join(ROOT, 'modules', 'public-landing', 'public', 'projects.html'), 'utf8').replace(/\r\n/g, '\n');
+
+function fence(start, end) {
+  const from = HUB.indexOf(start), to = HUB.indexOf(end, from);
+  assert.ok(from > -1 && to > from, `fenced: ${start.trim()}`);
+  return HUB.slice(from, to);
+}
+const CONNECT = fence('  /* ── connecting Render (task 1004352', '  /* end of connecting Render */');
+const PAGE = fence('  var stopAppWatch = null;', "  /* end of Connect Render from the project's page */");
+const APPEL = (HUB.match(/function appEl\(tag, cls, text\) \{[\s\S]*?\n  \}/) || [''])[0];
+assert.ok(APPEL, 'the page\'s own appEl() is lifted');
+const SETUP = (HUB.match(/<div class="renderSetup" id="renderSetup" hidden>[\s\S]*?<div class="hint" id="h-render" role="status">&nbsp;<\/div>/) || [''])[0];
+assert.ok(SETUP, 'the wizard\'s Render markup is found');
+const CARD = (HUB.match(/<div class="card mSec" id="mAppCard" hidden>[\s\S]*?\n      <\/div>\n/) || [''])[0];
+
+const KEY = 'rnd_abcdefghijklmnopqrstuvwx';
+const TEA_A = 'tea-aaaaaaaa1111';
+const LOOKUP = '/api/bongos/provisioning/render/lookup';
+const RENDER = '/api/bongos/provisioning/instances/7/render';
+const SERVICES = { services: [{ id: 'srv-aaaaaaaa1111', name: 'shop', repo: 'https://github.com/example-owner/shop', url: null }] };
+const INST = { id: 7, slug: 'shop', status: 'active', target_ref: 'example-owner/shop' };
+const flush = async () => { for (let i = 0; i < 8; i++) await new Promise((r) => setTimeout(r, 0)); };
+
+// ── a fake DOM: what the region and the flow use ──
+const escText = (x) => String(x).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+class Text { constructor(t) { this.text = String(t); } html() { return escText(this.text); } get textContent() { return this.text; } }
+class El {
+  constructor(tag, id) { this.tagName = tag; this.id = id || ''; this.children = []; this.attrs = {}; this.listeners = {};
+    this.hidden = false; this.value = ''; this.className = ''; this.checked = false; this.disabled = false; this.type = ''; this.name = ''; this.focused = false; }
+  appendChild(c) { this.children.push(c); return c; }
+  insertBefore(c, ref) { const i = this.children.indexOf(ref); if (i < 0) this.children.push(c); else this.children.splice(i, 0, c); return c; }
+  get firstChild() { return this.children[0] || null; }
+  setAttribute(k, v) { this.attrs[k] = String(v); }
+  getAttribute(k) { return k in this.attrs ? this.attrs[k] : null; }
+  set textContent(v) { this.children = v === '' || v == null ? [] : [new Text(v)]; }
+  get textContent() { return this.children.map((c) => c.textContent).join(''); }
+  addEventListener(ev, fn) { (this.listeners[ev] = this.listeners[ev] || []).push(fn); }
+  fire(ev, event) { (this.listeners[ev] || []).forEach((fn) => fn.call(this, event || { target: this })); }
+  focus() { this.focused = true; }
+  all() { return [this, ...this.children.filter((c) => c instanceof El).flatMap((c) => c.all())]; }
+  querySelectorAll(sel) {
+    const kids = this.all().slice(1);
+    if (sel === '[id]') return kids.filter((e) => e.id);
+    if (sel === '[aria-describedby]') return kids.filter((e) => e.getAttribute('aria-describedby') != null);
+    throw new Error('unexpected selector ' + sel);
+  }
+  cloneNode() {
+    const c = new El(this.tagName, this.id);
+    Object.assign(c.attrs, this.attrs); c.className = this.className; c.hidden = this.hidden; c.value = this.value; c.type = this.type;
+    this.children.forEach((k) => c.appendChild(k instanceof El ? k.cloneNode(true) : new Text(k.text)));
+    return c;
+  }
+  html() {
+    const a = [this.id ? ` id="${this.id}"` : '', this.className ? ` class="${this.className}"` : '', this.type ? ` type="${this.type}"` : '', this.name ? ` name="${this.name}"` : '',
+      ...Object.entries(this.attrs).map(([k, v]) => ` ${k}="${v}"`), this.checked ? ' checked' : '', this.disabled ? ' disabled' : ''].join('');
+    return `<${this.tagName}${a}>${this.children.map((c) => c.html()).join('')}</${this.tagName}>`;
+  }
+}
+
+// The wizard's #renderSetup, one node per id in the REAL markup (flat: the flow only ever
+// finds its elements by id), so a field added to the step is here the day it lands.
+function wizardSetup() {
+  const root = new El('div', 'renderSetup');
+  root.className = 'renderSetup'; root.hidden = true;
+  for (const m of SETUP.matchAll(/<(\w+)[^>]*\sid="([^"]+)"([^>]*)>/g)) {
+    if (m[2] === 'renderSetup') continue;
+    const e = new El(m[1], m[2]);
+    const d = (m[0].match(/aria-describedby="([^"]+)"/) || [])[1];
+    if (d) e.setAttribute('aria-describedby', d);
+    if (m[1] === 'input') e.type = (m[0].match(/type="([^"]+)"/) || [])[1] || 'text';
+    root.appendChild(e);
+  }
+  return root;
+}
+
+function load({ answers = {} } = {}) {
+  const roots = [wizardSetup()];
+  const card = new El('div', 'mAppCard'); card.hidden = true;
+  ['mApp', 'mAppConnect', 'mAppConnectOpen', 'mAppConnectForm', 'mAppConnectGo', 'mAppConnectCancel'].forEach((id) => {
+    const e = new El(id.endsWith('Open') || id.endsWith('Go') || id.endsWith('Cancel') ? 'button' : 'div', id);
+    if (id === 'mAppConnect' || id === 'mAppConnectForm') e.hidden = true;
+    card.appendChild(e);
+  });
+  roots.push(card);
+  const byId = (id) => { for (const r of roots) { const e = r.all().find((x) => x.id === id); if (e) return e; } return null; };
+  const document = { getElementById: byId, createElement: (t) => new El(t), createTextNode: (t) => new Text(t) };
+  const calls = [], watches = [];
+  const fetch = async (url, init) => {
+    const body = init && init.body ? JSON.parse(init.body) : null;
+    calls.push({ url, method: (init && init.method) || 'GET', body });
+    const k = url + (body && body.owner_id && url === LOOKUP ? '#' + body.owner_id : '');
+    const a = answers[k] !== undefined ? answers[k] : answers[url];
+    if (a === undefined) return { ok: false, status: 404, json: async () => ({ error: { message: 'not found' } }) };
+    if (a.status) return { ok: false, status: a.status, json: async () => ({ error: { message: a.message } }) };
+    return { ok: true, status: 200, json: async () => a };
+  };
+  // the status watch lives in the task-1004353 block; record it, and let a test drive its offer
+  const watchApp = (id, box, alive, everyMs, cardEl, offer) => { watches.push({ id, box, alive, everyMs, card: cardEl, offer }); return () => {}; };
+  const ctx = { document, fetch, watchApp, API: '/api/bongos', manageId: 7, JSON, String, Number, Object, encodeURIComponent };
+  ctx.$ = byId;
+  vm.createContext(ctx);
+  vm.runInContext(APPEL + '\n' + CONNECT + '\n' + PAGE + '\nthis.api = { loadAppStatus, offerAppConnect };', ctx);
+  const q = (id) => byId('m-' + id);
+  // What the watch does with an answer: show the card when the status view or the offer has something.
+  const paint = (data) => { const w = watches[watches.length - 1]; const offered = w.offer(data); card.hidden = !(data && data.app) && !offered; return offered; };
+  return { ...ctx.api, ctx, card, byId, q, calls, watches, paint, wizard: roots[0],
+    open: () => byId('mAppConnectOpen').fire('click'),
+    typeKey: (v) => { q('f-renderKey').value = v; q('f-renderKey').fire('input'); },
+    check: async () => { q('renderCheck').fire('click'); await flush(); },
+    pickWorkspace: async (i) => { q('renderWsList').fire('change', { target: { getAttribute: () => String(i) } }); await flush(); },
+    pickNew: () => q('renderSvcList').fire('change', { target: { name: 'm-renderSvc', value: 'new', disabled: false } }),
+    go: async () => { byId('mAppConnectGo').fire('click'); await flush(); },
+  };
+}
+const NONE = { ok: true, app: null, env_vars: [], values_held: false };
+const ANSWERS = { [LOOKUP]: { workspaces: [{ id: TEA_A, name: 'Mine', type: 'team' }] }, [LOOKUP + '#' + TEA_A]: SERVICES };
+
+async function readyToSend(w) {
+  w.loadAppStatus(7, INST); w.paint(NONE); w.open();
+  w.typeKey(KEY); await w.check(); await w.pickWorkspace(0); w.pickNew();
+  w.q('f-renderStart').value = 'npm start';
+  w.q('renderNew').fire('input', { target: w.q('f-renderStart') });
+}
+
+// ── the markup and the one-flow rule ────────────────────────────────────────
+
+test('the card carries Connect Render, and the page builds nodes, never an HTML string', () => {
+  assert.ok(CARD, '#mAppCard exists');
+  assert.match(CARD, /<div id="mApp"><\/div>\n\s*<div class="appConnect" id="mAppConnect" hidden>/, 'under the status, hidden until offered');
+  assert.match(CARD, /<button type="button" class="btn small" id="mAppConnectOpen">Connect Render<\/button>/);
+  assert.match(CARD, /We keep hosting this project’s Builders' hall either way/, 'it says the hall stays with us (ADR 0345 D1)');
+  for (const [name, src] of [['the page region', PAGE], ['the shared flow', CONNECT]]) {
+    assert.doesNotMatch(src, /innerHTML|insertAdjacentHTML|outerHTML|document\.write/, `${name} builds nodes`);
+  }
+});
+
+test('the wizard and the page run the same flow — renderConnect() is called from both, and defined once', () => {
+  assert.equal((HUB.match(/function renderConnect\(/g) || []).length, 1);
+  assert.match(HUB, /var rc = renderConnect\(\$, state, \{/, 'the wizard');
+  assert.match(PAGE, /appConnect = renderConnect\(appConnectQ, appConnectSt, \{/, 'the project page');
+  assert.match(PAGE, /\$\('renderSetup'\)\.cloneNode\(true\)/, 'the page borrows the wizard\'s markup, not a copy of it');
+  assert.equal((HUB.match(/function renderLookup\(|function paintWorkspaces\(\) \{\n      var list = renderWorkspaces/g) || []).length, 0, 'the wizard\'s old private copy is gone');
+});
+
+test('the added styles keep links on the link ink', () => {
+  const css = (HUB.match(/\/\* the same step on a project's page \(task 1004184\)[\s\S]*?\n(?!\.appConnect)/) || [''])[0];
+  assert.ok(css.includes('.appConnect'), 'the block is found');
+  assert.doesNotMatch(css, /--accent-deep/);
+  assert.match(HUB, /\.renderWhy a\{[^}]*color:var\(--link-ink\)/, 'the key-help link the page borrows is on --link-ink');
+});
+
+// ── when it is offered ──────────────────────────────────────────────────────
+
+test('offered on the owner\'s own "no platform" answer, for a project the server would take', () => {
+  const w = load();
+  w.loadAppStatus(7, INST);
+  assert.equal(w.watches.length, 1);
+  assert.equal(w.watches[0].card, w.byId('mAppCard'), 'the watch is handed the card');
+  assert.equal(w.paint(NONE), true);
+  assert.equal(w.byId('mAppConnect').hidden, false);
+  assert.equal(w.card.hidden, false);
+  assert.equal(w.byId('mAppConnectForm').hidden, true, 'the form waits for the owner to open it');
+  assert.equal(w.calls.length, 0, 'nothing is asked of Render until then');
+});
+
+test('not offered — and the card stays hidden — when the project could not take it or the answer is not the owner\'s', () => {
+  for (const [why, inst, data] of [
+    ['someone else\'s project: the owner-only read answered nothing', INST, null],
+    ['a project already on Render', INST, { ok: true, app: { platform: 'render', state: 'live', stage: 'live' }, env_vars: [] }],
+    ['a removed project', { ...INST, status: 'torn_down' }, NONE],
+    ['a project being removed', { ...INST, status: 'tearing_down' }, NONE],
+    ['no repository to build', { ...INST, target_ref: null }, NONE],
+  ]) {
+    const w = load();
+    w.loadAppStatus(7, inst);
+    assert.equal(w.paint(data), false, why);
+    assert.equal(w.byId('mAppConnect').hidden, true, why);
+    if (!(data && data.app)) assert.equal(w.card.hidden, true, why + ': the card hides');
+  }
+});
+
+// ── the flow ────────────────────────────────────────────────────────────────
+
+test('opening it borrows the wizard\'s step under prefixed ids, and leaves the wizard\'s own alone', () => {
+  const w = load();
+  w.loadAppStatus(7, INST); w.paint(NONE);
+  w.open();
+  const copy = w.byId('m-renderSetup');
+  assert.ok(copy, 'the step is cloned in');
+  assert.equal(w.byId('mAppConnectForm').firstChild, copy, 'above the Connect / Cancel buttons');
+  assert.equal(copy.hidden, false);
+  assert.equal(w.byId('mAppConnectForm').hidden, false);
+  assert.equal(w.byId('mAppConnectOpen').hidden, true);
+  assert.equal(w.q('f-renderKey').focused, true, 'focus lands on the key');
+  assert.equal(w.q('f-renderKey').getAttribute('aria-describedby'), 'm-h-renderKey', 'its description points at its own hint');
+  assert.ok(w.wizard.all().every((e) => !e.id.startsWith('m-')), 'the wizard keeps its ids');
+  w.byId('mAppConnectCancel').fire('click'); w.open();
+  assert.equal(w.byId('mAppConnectForm').children.filter((c) => c.id === 'm-renderSetup').length, 1, 'cloned once, however often it is opened');
+});
+
+test('the same checks as the wizard, with the page\'s own words for a missing key', async () => {
+  const w = load({ answers: ANSWERS });
+  w.loadAppStatus(7, INST); w.paint(NONE); w.open();
+  await w.go();
+  assert.match(w.q('h-render').textContent, /^Check your Render key first\.$/, 'no "Decide later" here — there is no such choice on this card');
+  w.typeKey('ghp_notrender'); await w.check();
+  assert.match(w.q('h-renderKey').textContent, /starts with “rnd_”/);
+  assert.equal(w.calls.length, 0, 'a malformed key never leaves the page');
+  w.typeKey(KEY); await w.check(); await w.pickWorkspace(0);
+  const list = w.q('renderSvcList').html();
+  assert.match(list, /name="m-renderSvc" value="new"/, 'its own radio group, so it never joins the wizard\'s');
+  assert.match(list, /Render builds it from <code>example-owner\/shop<\/code>/, 'the project\'s own repository');
+  assert.match(list, /data-i="0">[\s\S]*Link shop/, 'its own app can be linked');
+  await w.go();
+  assert.match(w.q('h-render').textContent, /new app or link/);
+  assert.equal(w.calls.filter((c) => c.url === RENDER).length, 0);
+});
+
+test('Connect sends the key once, to this project, forgets it, and the card shows the app\'s progress', async () => {
+  const w = load({ answers: { ...ANSWERS, [RENDER]: { ok: true, queued: true } } });
+  await readyToSend(w);
+  await w.go();
+  const sent = w.calls.filter((c) => c.url === RENDER);
+  assert.equal(sent.length, 1);
+  assert.equal(sent[0].method, 'POST');
+  assert.deepEqual(sent[0].body, { key: KEY, owner_id: TEA_A, mode: 'greenfield', runtime: 'node', start_command: 'npm start', web_plan: 'starter', database: false });
+  for (const c of w.calls) assert.ok(!c.url.includes(KEY), 'no URL carries the key');
+  assert.equal(w.q('f-renderKey').value, '', 'the field is emptied');
+  assert.equal(w.byId('mAppConnectForm').hidden, true, 'the form closes');
+  assert.equal(w.watches.length, 2, 'the status is read again');
+  assert.equal(String(w.watches[1].id), '7');
+  assert.equal(w.paint({ ok: true, app: { platform: 'render', state: 'provisioning', stage: 'creating', waiting: true }, env_vars: [] }), false, 'and once the app has a platform, the offer steps aside');
+  assert.equal(w.byId('mAppConnect').hidden, true);
+  assert.equal(w.card.hidden, false, 'for the progress panel');
+  await w.go();
+  assert.equal(w.calls.filter((c) => c.url === RENDER).length, 1, 'a second press has no key to send');
+});
+
+test('a refusal says so in the server\'s words, and the key is gone all the same', async () => {
+  const w = load({ answers: { ...ANSWERS, [RENDER]: { status: 409, message: 'A \'provision\' run is running for this project, so your key was not kept. Try again once it has finished.' } } });
+  await readyToSend(w);
+  await w.go();
+  assert.match(w.q('h-render').textContent, /A 'provision' run is running for this project/);
+  assert.match(w.q('h-render').className, /err/);
+  assert.equal(w.q('f-renderKey').value, '');
+  assert.equal(w.byId('mAppConnectGo').disabled, false, 'the owner can try again');
+  assert.equal(w.watches.length, 1, 'no progress to watch');
+  await w.go();
+  assert.match(w.q('h-render').textContent, /Check your Render key first/, 'a retry starts with the key');
+});
+
+test('Cancel forgets the key; a reload of the same project keeps the open form; another project forgets every answer', async () => {
+  const w = load({ answers: ANSWERS });
+  w.loadAppStatus(7, INST); w.paint(NONE); w.open();
+  w.typeKey(KEY); await w.check(); await w.pickWorkspace(0);
+  w.loadAppStatus(7, INST); w.paint(NONE);
+  assert.equal(w.byId('mAppConnectForm').hidden, false, 'the page\'s reload of this project leaves the form open');
+  assert.equal(w.q('f-renderKey').value, KEY, 'with what the owner typed');
+  w.byId('mAppConnectCancel').fire('click');
+  assert.equal(w.q('f-renderKey').value, '');
+  assert.equal(w.byId('mAppConnectForm').hidden, true);
+  assert.equal(w.byId('mAppConnectOpen').hidden, false);
+  w.ctx.manageId = 8;
+  w.loadAppStatus(8, { ...INST, id: 8, target_ref: 'example-owner/other' });
+  w.paint(NONE); w.open();
+  assert.equal(w.q('renderWs').hidden, true, 'nothing Render said about project 7 is shown for project 8');
+  assert.match(w.q('h-renderKey').textContent, /^\s*$/, 'and it is not asked to re-enter a key it never gave');
+});