@bongos/core 1.19.1081 → 1.20.2

package/tests/projects_hub_app_status.mjs

@@ -0,0 +1,249 @@
+// tests/projects_hub_app_status.mjs — the app's setup status on the page, EXECUTED
+// (task 1004353). One block serves the wizard's done panel and the project's page, so it
+// is sliced out of projects.html by its own sentinels and run in `vm` over a small fake
+// DOM — the block builds nodes, never HTML strings (modules/public-landing/CLAUDE.md,
+// "No innerHTML"), so the fake records nodes and serialises them for the assertions.
+//
+// The load-bearing assertions:
+//   • a live app shows its address and the Render link; a building one says so
+//   • a failure shows its one sentence and a Retry — and nothing retries by itself: the
+//     watch stops polling on a failure, and only the owner's click sends anything
+//   • the Retry asks for the key again, sends it once with the saved answers, and empties
+//     the field; a malformed key never leaves the page
+//   • a repaint never lands on top of a Retry the owner has opened — even from a fresh
+//     watch on the same box — and a watch never paints a page that has moved on
+//   • env var NAMES are listed with the link to Render's environment page, and a name
+//     the platform already set is not
+//   • nothing from the server becomes markup, and a link off Render's own hosts is text
+//
+// Run:  node --test --test-reporter=tap tests/projects_hub_app_status.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');
+const START = "  /* ── the app's setup on Render (task 1004353)";
+const END = "  /* end of the app's setup on Render */";
+const from = HUB.indexOf(START), to = HUB.indexOf(END);
+assert.ok(from > -1 && to > from, 'the block is fenced by its sentinels');
+const BLOCK = HUB.slice(from, to);
+
+const KEY = 'rnd_abcdefghijklmnopqrstuvwx';
+const LINKS = { service: 'https://dashboard.render.com/web/srv-aaaaaaaa1111', env: 'https://dashboard.render.com/web/srv-aaaaaaaa1111/env' };
+const LIVE = { ok: true, app: { platform: 'render', state: 'live', stage: 'live', mode: 'greenfield', url: 'https://demo.onrender.com', links: LINKS, error: null, retry: null },
+  env_vars: [{ name: 'DATABASE_URL', required: true, set_for_you: true }, { name: 'SESSION_SECRET', required: true, set_for_you: false }, { name: 'STRIPE_KEY', required: false, set_for_you: false }] };
+const BUILDING = { ok: true, app: { ...LIVE.app, state: 'deploying', stage: 'building' }, env_vars: [] };
+const FAILED = { ok: true, app: { platform: 'render', state: 'failed', stage: null, mode: 'greenfield', url: null, links: null,
+  error: 'This Render key cannot reach workspace tea-aaaaaaaa1111.',
+  retry: { owner_id: 'tea-aaaaaaaa1111', mode: 'greenfield', runtime: 'node', start_command: 'npm start', web_plan: 'starter', database: false } }, env_vars: [] };
+
+// ── a fake DOM: just what the block uses ──
+const escText = (s) => String(s).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) { this.tagName = tag; this.children = []; this.attrs = {}; this.className = ''; this.hidden = false; this.listeners = {}; this.value = ''; this.focused = false; }
+  appendChild(c) { this.children.push(c); return c; }
+  setAttribute(k, v) { this.attrs[k] = String(v); }
+  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); }
+  click() { (this.listeners.click || []).forEach((fn) => fn({ target: this })); }
+  focus() { this.focused = true; }
+  all() { return [this, ...this.children.filter((c) => c instanceof El).flatMap((c) => c.all())]; }
+  querySelector(sel) {
+    if (sel === '.appRetry:not([hidden])') return this.all().find((e) => e !== this && e.className === 'appRetry' && !e.hidden) || null;
+    throw new Error('unexpected selector ' + sel);
+  }
+  find(pred) { return this.all().find(pred) || null; }
+  html() {
+    const a = [this.className ? ` class="${this.className}"` : '', this.href ? ` href="${this.href}"` : '', this.target ? ` target="${this.target}"` : '',
+      this.rel ? ` rel="${this.rel}"` : '', this.type ? ` type="${this.type}"` : '', this.autocomplete ? ` autocomplete="${this.autocomplete}"` : '',
+      ...Object.entries(this.attrs).map(([k, v]) => ` ${k}="${v}"`), this.hidden ? ' hidden' : ''].join('');
+    return `<${this.tagName}${a}>${this.children.map((c) => c.html()).join('')}</${this.tagName}>`;
+  }
+}
+const document = { createElement: (t) => new El(t), createTextNode: (t) => new Text(t) };
+
+function load({ answers = [] } = {}) {
+  const calls = [], timers = [];
+  let i = 0;
+  const fetch = async (url, init) => {
+    const body = init && init.body ? JSON.parse(init.body) : null;
+    calls.push({ url, method: (init && init.method) || 'GET', body });
+    if (init && init.method === 'POST') return { ok: true, status: 200, json: async () => ({ ok: true }) };
+    const a = answers[Math.min(i++, answers.length - 1)];
+    return { ok: true, status: 200, json: async () => a };
+  };
+  const ctx = { API: '/api/bongos', fetch, document, JSON, String, Object, encodeURIComponent,
+    setTimeout: (fn, ms) => { timers.push({ fn, ms }); return timers.length; }, clearTimeout: () => {} };
+  vm.createContext(ctx);
+  vm.runInContext(BLOCK + '\nthis.api = { appStatusView, watchApp, appTerminal };', ctx);
+  const view = (d) => ctx.api.appStatusView(d);
+  return { ...ctx.api, view, html: (d) => { const v = view(d); return v ? v.root.html() : ''; }, calls, timers };
+}
+const flush = async () => { for (let i = 0; i < 6; i++) await new Promise((r) => setTimeout(r, 0)); };
+const byClass = (root, cls) => root.find((e) => e.className === cls);
+const byText = (root, text) => root.find((e) => e.tagName === 'button' && e.textContent === text);
+
+test('the block builds nodes, never an HTML string', () => {
+  assert.doesNotMatch(BLOCK, /innerHTML|insertAdjacentHTML|outerHTML|document\.write/);
+});
+
+test('a live app: its address, the Render link, and the env var names still to set', () => {
+  const w = load();
+  const html = w.html(LIVE);
+  assert.match(html, /<p>Your app is live at <a href="https:\/\/demo\.onrender\.com" target="_blank" rel="noopener noreferrer">demo\.onrender\.com<\/a>\.<\/p>/);
+  assert.match(html, /<a href="https:\/\/dashboard\.render\.com\/web\/srv-aaaaaaaa1111"[^>]*>Open it on Render<\/a>/);
+  assert.match(html, /<h3>Still to set on Render<\/h3>/);
+  assert.match(html, /<li><code>SESSION_SECRET<\/code><\/li>/);
+  assert.match(html, /<li><code>STRIPE_KEY<\/code> — optional<\/li>/);
+  assert.doesNotMatch(html, /DATABASE_URL/, 'a name the platform set for them is not asked of them');
+  assert.match(html, /Bongos keeps the names only/);
+  assert.match(html, /href="https:\/\/dashboard\.render\.com\/web\/srv-aaaaaaaa1111\/env"[^>]*>Open the environment page on Render/);
+  assert.match(html, /<li class="done">Creating<\/li><li class="done">Building<\/li><li class="done" aria-current="step">Live<\/li>/);
+});
+
+test('building and creating say where it is, with the stage marked', () => {
+  const w = load();
+  const b = w.html(BUILDING);
+  assert.match(b, /<li class="done">Creating<\/li><li class="now" aria-current="step">Building<\/li><li>Live<\/li>/);
+  assert.match(b, /Render is building your app/);
+  assert.match(w.html({ app: { ...BUILDING.app, stage: 'creating', waiting: true } }), /Waiting for the project to finish setting up/);
+  assert.match(w.html({ app: { ...BUILDING.app, mode: 'adopt' } }), /Linked\. Waiting for your app to answer/);
+});
+
+test('a failure: the sentence, a Retry, and no promise of a retry by itself', () => {
+  const w = load();
+  const v = w.view(FAILED);
+  const html = v.root.html();
+  assert.match(html, /<p class="err">This Render key cannot reach workspace tea-aaaaaaaa1111\.<\/p>/);
+  assert.match(html, /Nothing is retried by itself/);
+  assert.equal(v.retryBtn.textContent, 'Retry');
+  assert.equal(v.retryForm.hidden, true, 'the key field starts closed');
+  assert.equal(v.keyEl.type, 'password');
+  assert.equal(v.keyEl.autocomplete, 'off');
+  assert.doesNotMatch(html, /appStages/, 'no progress rail on a failure');
+});
+
+test('nothing from the server becomes markup, and a link off Render\'s hosts is plain text', () => {
+  const w = load();
+  const html = w.html({ app: { ...FAILED.app, error: '<img src=x onerror=alert(1)>' }, env_vars: [{ name: '<b>X</b>', required: true }] });
+  assert.doesNotMatch(html, /<img|<b>X/);
+  assert.match(html, /&lt;img src=x onerror=alert\(1\)&gt;/);
+  const bad = w.html({ app: { ...LIVE.app, url: 'javascript:alert(1)', links: { service: 'https://evil.example/x', env: 'https://dashboard.render.com.evil.io/' } }, env_vars: [{ name: 'A', required: true }] });
+  assert.doesNotMatch(bad, /href=/, 'no link is made from an address that is not Render\'s own');
+  assert.match(bad, /Open it on Render/, 'the words stay, as text');
+});
+
+test('nothing to show: no platform chosen, or disconnected', () => {
+  const w = load();
+  assert.equal(w.view({ app: null }), null);
+  assert.match(w.html({ app: { state: 'disconnected' } }), /no longer connected to Render/);
+});
+
+test('the watch polls while it is working, and STOPS on a failure — the platform never retries', async () => {
+  const w = load({ answers: [BUILDING, FAILED] });
+  const box = new El('div');
+  w.watchApp(42, box, () => true, 5000);
+  await flush();
+  assert.equal(box.hidden, false);
+  assert.match(box.html(), /Building/);
+  assert.equal(w.timers.length, 1, 'a working setup is asked again');
+  w.timers[0].fn(); await flush();
+  assert.match(box.html(), /cannot reach workspace/);
+  assert.equal(w.timers.length, 1, 'a failed one is not');
+  assert.ok(w.calls.every((c) => c.method === 'GET'), 'and nothing was sent');
+});
+
+test('the watch stops on live, hides the card when there is nothing to show, and never paints a page that moved on', async () => {
+  const w = load({ answers: [LIVE] });
+  const box = new El('div');
+  w.watchApp(42, box, () => true, 5000);
+  await flush();
+  assert.equal(w.timers.length, 0);
+  const card = new El('section'); const empty = new El('div');
+  load({ answers: [{ ok: true, app: null, env_vars: [] }] }).watchApp(43, empty, () => true, 5000, card);
+  await flush();
+  assert.equal(card.hidden, true, 'the card hides, not just its contents');
+  const gone = new El('div');
+  load({ answers: [LIVE] }).watchApp(44, gone, () => false, 5000);
+  await flush();
+  assert.equal(gone.children.length, 0);
+});
+
+test('an offer keeps the card up when there is no status to show — and is asked on every answer (task 1004184)', async () => {
+  const seen = [];
+  const card = new El('section'); const box = new El('div');
+  load({ answers: [{ ok: true, app: null, env_vars: [] }] }).watchApp(45, box, () => true, 5000, card, (d) => { seen.push(d); return true; });
+  await flush();
+  assert.equal(card.hidden, false, 'the offer holds the card open');
+  assert.equal(box.children.length, 0, 'with no status of its own');
+  assert.deepEqual(seen, [{ ok: true, app: null, env_vars: [] }], 'the offer sees the answer');
+  const c2 = new El('section');
+  load({ answers: [LIVE] }).watchApp(46, new El('div'), () => true, 5000, c2, () => false);
+  await flush();
+  assert.equal(c2.hidden, false, 'a status shows whatever the offer says');
+});
+
+test('Retry asks for the key, sends it once with the saved answers, and empties the field', async () => {
+  const w = load({ answers: [FAILED, BUILDING] });
+  const box = new El('div');
+  w.watchApp(42, box, () => true, 5000);
+  await flush();
+  byText(box, 'Retry').click();
+  const form = byClass(box, 'appRetry'), keyEl = byClass(box, 'appRetryKey');
+  assert.equal(form.hidden, false, 'the key field opens');
+  assert.equal(keyEl.focused, true);
+  assert.equal(byText(box, 'Retry').hidden, true);
+  keyEl.value = KEY;
+  byText(box, 'Retry with this key').click();
+  assert.equal(keyEl.value, '', 'the field is emptied at once');
+  await flush();
+  const posts = w.calls.filter((c) => c.method === 'POST');
+  assert.equal(posts.length, 1);
+  assert.equal(posts[0].url, '/api/bongos/provisioning/instances/42/render');
+  assert.deepEqual(posts[0].body, { ...FAILED.app.retry, key: KEY });
+  assert.match(box.html(), /Building/, 'and the status is read again');
+});
+
+test('a malformed key never leaves the page', async () => {
+  const w = load({ answers: [FAILED] });
+  const box = new El('div');
+  w.watchApp(42, box, () => true, 5000);
+  await flush();
+  byText(box, 'Retry').click();
+  byClass(box, 'appRetryKey').value = 'ghp_nope';
+  byText(box, 'Retry with this key').click();
+  await flush();
+  assert.equal(w.calls.filter((c) => c.method === 'POST').length, 0);
+  assert.match(byClass(box, 'hint appRetryHint err').textContent, /starts with “rnd_”/);
+});
+
+test('a repaint never lands on top of an open Retry — from this watch or a fresh one on the same box', async () => {
+  const w = load({ answers: [FAILED, FAILED] });
+  const box = new El('div');
+  w.watchApp(42, box, () => true, 5000);
+  await flush();
+  byText(box, 'Retry').click();
+  byClass(box, 'appRetryKey').value = 'rnd_half-typed';
+  const form = byClass(box, 'appRetry');
+  // the project page reloads and starts a new watch on the same box
+  w.watchApp(42, box, () => true, 5000);
+  await flush();
+  assert.equal(byClass(box, 'appRetry'), form, 'the open form is the same node');
+  assert.equal(byClass(box, 'appRetryKey').value, 'rnd_half-typed', 'with what the owner was typing');
+});
+
+test('both surfaces use it: the done panel and the project page', () => {
+  assert.match(HUB, /if \(box\) watchApp\(instanceId, box, function \(\) \{ return state\.step === 9; \}, 5000\);/);
+  assert.match(HUB, /<div id="doneApp" hidden><\/div>/);
+  assert.match(HUB, /<div class="card mSec" id="mAppCard" hidden>\n\s*<h2>Where its app runs<\/h2>\n\s*<div id="mApp"><\/div>/);
+  assert.match(HUB, /loadAppStatus\(inst\.id \|\| asked, inst\);/);
+  // the project page also hands in its Connect Render offer (task 1004184, tests/projects_hub_render_connect.mjs)
+  assert.match(HUB, /stopAppWatch = watchApp\(id, box, function \(\) \{ return String\(manageId\) === mine; \}, 10000, card, offerAppConnect\);/);
+});