@bongos/core 1.24.61 → 1.24.63

package/tests/landing_shared_controls.mjs

@@ -0,0 +1,157 @@
+// tests/landing_shared_controls.mjs — the landing, the hub and the raise page ask in the shared
+// dialog and draw their buttons and dialog frame on the shared scales (task 1005136, goal 1000138).
+//
+// The UI check found the hub's one question (start another project while one builds) and the raise
+// editor's "discard your changes?" still in the browser's confirm box, the hub's project card and
+// both pages' buttons on typed-in corners, sizes and durations, and the signed-in landing bar at
+// 320 overflowing (331px) with the mark under the "projects" label. This pins:
+//   1. both pages load the shared dialog (hall-dialog.js, after the shared escaper) and ask in it;
+//   2. the dialog the shared component builds has a frame on each page, on the shared scales;
+//   3. the buttons and the project card spend the shared corner, line, layer, size and duration;
+//   4. the signed-in bar folds the second-account door into the profile band below 900, keeping
+//      the same door there;
+//   5. in a real browser (skips without a system Edge or Chrome): the hub's confirm opens in the
+//      shared component wearing the landing's frame and buttons, and the signed-in landing bar,
+//      built from index.html's own sheet and markup, holds one row at 320 with the mark clear of
+//      the "projects" trigger. The full page is the kit's: render.js --page / (0 problems).
+import { test, after } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+const kit = require('../modules/ui-design/kit/lib.js');
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const read = (rel) => fs.readFileSync(path.join(ROOT, rel), 'utf8');
+const LANDING = 'modules/public-landing/public/';
+const COSMOS = read(`${LANDING}assets/cosmos.css`);
+const RAISE_CSS = read('modules/raise/public/raise.css');
+
+// The declarations of the first rule whose selector list is exactly `sel` (compact or spaced).
+function rule(css, sel) {
+  const esc = sel.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const m = css.match(new RegExp(`(?:^|\\n|\\})\\s*${esc}\\s*\\{([^}]*)\\}`));
+  assert.ok(m, `a rule for ${sel}`);
+  return m[1];
+}
+
+test('the hub and the raise editor load the shared dialog after the shared escaper, and ask in it', () => {
+  const hub = read(`${LANDING}projects.html`);
+  assert.match(hub, /<script src="\/modules\/hall-ui\/public\/dom-utils\.js"><\/script>\n(?:<!--[^\n]*-->\n)?<script src="\/modules\/hall-ui\/public\/hall-dialog\.js"><\/script>/);
+  assert.match(hub, /window\.OTBDialog\.confirm\(\{ title: 'Start a new one\?'/, 'the hub asks in the shared confirm');
+  const page = read('modules/raise/page.js');
+  assert.match(page, /dom-utils\.js" defer><\/script><script src="\/modules\/hall-ui\/public\/hall-dialog\.js" defer><\/script><script src="\$\{BASE\}\/assets\/edit\.js/,
+    'the editor gets the escaper, then the dialog, then itself');
+  assert.match(read('modules/raise/public/edit.js'), /window\.OTBDialog\.confirm\(\{ title: 'Discard your unsaved changes\?'/);
+});
+
+test('the shared dialog has a frame on each page, on the shared scales', () => {
+  for (const [name, css] of [['cosmos.css', COSMOS], ['raise.css', RAISE_CSS]]) {
+    const frame = rule(css, '.hall-dialog');
+    for (const want of [/z-index:\s*var\(--ds-z-modal\)/, /border-radius:\s*var\(--ds-radius-panel\)/, /border:\s*var\(--ds-line\) solid var\(--rule\)/]) {
+      assert.match(frame, want, `${name} .hall-dialog: ${want}`);
+    }
+    // the raise page floats it on the shared shadow; the apex world spends no shadow on UI
+    assert.match(frame, name === 'raise.css' ? /box-shadow:\s*var\(--ds-shadow-pop\)/ : /box-shadow:none/, `${name}: the shadow its world allows`);
+    assert.match(rule(css, '.hall-dialog::backdrop'), /background:\s*rgba\(0,\s*0,\s*0,\s*\.55\)/, `${name}: a black scrim, the one legal literal`);
+    for (const part of ['.hall-dialog__head', '.hall-dialog__title', '.hall-dialog__x', '.hall-dialog__actions']) rule(css, part);
+  }
+  // the buttons the component builds (btn btn--ghost / btn btn--danger) answer on the landing
+  assert.match(COSMOS, /\.btn\.ghost,\.btn\.btn--ghost\{/);
+  assert.match(COSMOS, /\.btn\.danger,\.btn\.btn--danger\{/);
+  assert.match(RAISE_CSS, /\.btn--ghost \{/);
+});
+
+test('the buttons and the project card spend the shared scales, not typed-in values', () => {
+  const btn = rule(COSMOS, '.btn');
+  assert.match(btn, /border-radius:var\(--ds-radius-pill\)/);
+  assert.match(btn, /font-size:var\(--ds-text-lg\)/);
+  assert.doesNotMatch(btn, /\.15s|999px|font-size:\d/, 'no typed-in duration, corner or size');
+  const rbtn = rule(RAISE_CSS, '.btn');
+  assert.match(rbtn, /border-radius: var\(--ds-radius-pill\)/);
+  assert.match(rbtn, /var\(--ds-text-xl\)/);
+  assert.doesNotMatch(rbtn, /\.12s|999px/, 'no typed-in duration or corner');
+  const scrim = rule(COSMOS, '.cardScrim');
+  assert.match(scrim, /z-index:var\(--ds-z-modal\)/, 'the card sits on the shared modal layer');
+  const card = rule(COSMOS, '.projCard');
+  assert.match(card, /border:var\(--ds-line\) solid var\(--rule\)/);
+  assert.match(card, /border-radius:var\(--ds-radius-panel\)/);
+});
+
+test('signed in, the narrow landing bar folds the second-account door into the profile band', () => {
+  const html = read(`${LANDING}index.html`);
+  const narrow = html.slice(html.indexOf('@media (max-width:900px){'));
+  assert.match(narrow.slice(0, narrow.indexOf('\n}\n')), /\.barRight:has\(\.who\) \.newacct\{display:none\}/, 'the pill leaves the bar once the chip is in it');
+  const pill = html.match(/<a class="pill newacct" href="([^"]+)"/);
+  assert.ok(pill, 'the bar still carries the door');
+  const band = html.slice(html.indexOf('id="menuProfile"'));
+  const fold = band.match(/<li class="bandCell bandFold"><a class="bandT" href="([^"]+)"[^>]*>New account<\/a><\/li>/);
+  assert.ok(fold, 'the profile band carries its folded twin');
+  assert.equal(fold[1], pill[1], 'the same door, to the same place');
+});
+
+// ── in a real browser ───────────────────────────────────────────────────────
+
+let browser = null;
+try { browser = await kit.launchBrowser(); } catch (e) { if (!(e instanceof kit.NoBrowserError)) throw e; }
+after(() => browser && browser.close());
+const skip = !browser && 'no system Edge or Chrome';
+const TOKENS = read('modules/ui-design/public/tokens.css');
+
+test('the hub\'s confirm opens in the shared dialog, in the landing\'s frame and buttons', { skip }, async () => {
+  const ctx = await browser.newContext({ viewport: { width: 390, height: 700 } });
+  const page = await ctx.newPage();
+  await page.setContent('<!doctype html><html data-mode="dark"><head><meta charset="utf-8"></head><body><button id="go">Start another project</button></body></html>');
+  await page.addStyleTag({ content: TOKENS + COSMOS });
+  await page.addScriptTag({ content: read('modules/hall-ui/public/dom-utils.js') });
+  await page.addScriptTag({ content: read('modules/hall-ui/public/hall-dialog.js') });
+  await page.focus('#go');
+  await page.evaluate(() => { window.__r = window.OTBDialog.confirm({ title: 'Start a new one?', body: 'Acme keeps building.', confirmLabel: 'Start a new one' }); });
+  const s = await page.evaluate(() => {
+    const d = document.querySelector('dialog.hall-dialog');
+    const cs = getComputedStyle(d);
+    const ghost = getComputedStyle(d.querySelector('.btn.btn--ghost'));
+    const ok = d.querySelector('.hall-dialog__actions .btn:not(.btn--ghost)');
+    return { modal: d.matches(':modal'), radius: cs.borderTopLeftRadius, line: cs.borderTopWidth, shadow: cs.boxShadow, z: cs.zIndex,
+      ghostBg: ghost.backgroundColor, ghostEdge: ghost.borderTopWidth, okH: ok.getBoundingClientRect().height, okR: getComputedStyle(ok).borderTopLeftRadius };
+  });
+  assert.equal(s.modal, true, 'the shared component, opened modal');
+  assert.equal(s.radius, '16px', 'the panel corner');
+  assert.equal(s.line, '1px', 'one hairline');
+  assert.equal(s.shadow, 'none', 'the apex world spends no shadow on UI');
+  assert.equal(s.z, '160', 'the shared modal layer');
+  assert.equal(s.ghostBg, 'rgba(0, 0, 0, 0)', 'Cancel takes the landing\'s ghost button through the shared name');
+  assert.equal(s.ghostEdge, '2px');
+  assert.ok(s.okH >= 24, 'the confirm clears the tap floor');
+  assert.equal(s.okR, '999px', 'the pill corner');
+  await page.click('.hall-dialog__actions .btn:not(.btn--ghost)');
+  assert.equal(await page.evaluate(() => window.__r), true);
+  await ctx.close();
+});
+
+test('signed in, the landing bar holds one row at 320 with the mark clear of the triggers', { skip }, async () => {
+  const html = read(`${LANDING}index.html`);
+  const styles = [...html.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)].map((m) => m[1]).join('\n');
+  const bar = html.slice(html.indexOf('<header class="topbar bar">'), html.indexOf('</header>') + 9)
+    .replace(/<!--apex-only:(start|end)-->/g, '')
+    .replace(/<span class="whoSlot" id="who">[\s\S]*?<\/span>/, '<span class="whoSlot" id="who"><button type="button" class="trig who"><img width="26" height="26" alt=""><span class="who-name">builder</span></button></span>');
+  // the artist-review door the signed-in bar also carries (page-notes.css draws it 36px wide here)
+  const withReview = bar.replace('<span class="whoSlot"', '<button type="button" class="arv-btn" style="width:36px;min-height:36px">R</button><span class="whoSlot"');
+  const ctx = await browser.newContext({ viewport: { width: 320, height: 640 } });
+  const page = await ctx.newPage();
+  for (const [name, markup, signedIn] of [['signed in', withReview, true], ['signed out', bar.replace(/<span class="whoSlot" id="who">[\s\S]*?<\/span>/, '<span class="whoSlot" id="who"><a class="pill signin" href="#">Sign in</a></span>'), false]]) {
+    await page.setContent(`<!doctype html><html data-mode="dark"><head><meta charset="utf-8"></head><body>${markup}</body></html>`);
+    await page.addStyleTag({ content: TOKENS + styles });
+    const r = await page.evaluate(() => {
+      const box = (s) => { const e = document.querySelector(s); const b = e && e.getBoundingClientRect(); return b && b.width ? { l: b.left, r: b.right } : null; };
+      return { sw: document.documentElement.scrollWidth, mark: box('.barMark'), proj: box('#projTrig'), newacct: box('.newacct') };
+    });
+    assert.ok(r.sw <= 320, `${name}: no sideways scroll at 320 (scrollWidth ${r.sw})`);
+    assert.ok(r.mark.r <= r.proj.l, `${name}: the mark ends before the projects trigger starts (${r.mark.r} vs ${r.proj.l})`);
+    assert.equal(!!r.newacct, !signedIn, signedIn ? 'the second-account door has folded into the profile band' : 'signed out, the door stays in the bar');
+  }
+  await ctx.close();
+});

package/tests/npm_release_release.mjs

@@ -227,5 +227,5 @@ test('the page renders the Release section and posts to the route', () => {
   const src = fs.readFileSync(new URL('../modules/npm-release/public/work.js', import.meta.url), 'utf8');
   assert.match(src, /\$\{releaseHtml\(data\)\}/);
   assert.match(src, /client\.request\('POST', `\$\{API\}\/npm-release\/release`, \{ body: \{ version \} \}\)/);
-  assert.match(src, /window\.confirm\(/, 'a release is confirmed before it is sent');
+  assert.match(src, /await window\.OTBDialog\.confirm\(\{/, 'a release is confirmed in the hall\'s own dialog before it is sent (task 1005136)');
 });

package/tests/projects_hub.mjs

@@ -607,7 +607,7 @@ test('the platform answers its own figures by the same rule: faces from its lead
 test('the poster is in the world: 560 wide, one hairline, no shadow, the disc surviving over the art, the facts a ledger', () => {
   const block = (COSMOS.match(/\.projCard\{[^}]*\}/) || [''])[0];
   assert.match(block, /width:min\(560px,100%\)/);
-  assert.match(block, /border:1px solid var\(--rule\)/);
+  assert.match(block, /border:var\(--ds-line\) solid var\(--rule\)/, 'one hairline, on the shared line (task 1005136)');
   assert.match(block, /box-shadow:none/);
   assert.match(block, /container-type:inline-size/, 'the disc and the callouts measure the card, not the viewport');
   assert.match(COSMOS, /\.projCard \.cardArt\{[^}]*aspect-ratio:5\/2;object-fit:cover/, 'a fixed 5:2 crop');

package/tests/projects_hub_pre_uat.mjs

@@ -225,7 +225,9 @@ test('the manifest step acknowledges code_received, offers a restart after a sta
 });
 
 test('"Start another project" asks before abandoning a standup still being watched', () => {
-  assert.match(SCRIPT, /if \(instanceId && pollTimer && !confirm\(/);
+  // asked in the shared dialog since task 1005136, never the browser's box
+  assert.match(SCRIPT, /var asked = instanceId && pollTimer\n\s*\? window\.OTBDialog\.confirm\(\{/);
+  assert.match(SCRIPT, /asked\.then\(function \(yes\) \{ if \(yes\) startAnother\(\); \}\);/, 'it starts over only on yes');
 });
 
 /* ── every recovery sign-in from the wizard keeps the repo scope ── */

package/tests/roster_government_columns.mjs

@@ -139,7 +139,9 @@ async function boot(opts = {}) {
     OTBBranding: { currencyLabel: () => 'Credits' },
     BongosClient: { createClient: () => api },
     location: locationObj,
-    prompt: (msg) => { prompts.push(msg); return 'left for a new job'; },
+    // the reason is asked in the hall's own dialog (task 1005136); the browser box must not run
+    OTBDialog: { prompt: async (o) => { prompts.push(o.title); return 'left for a new job'; } },
+    prompt: () => { throw new Error('window.prompt was called'); },
     addEventListener() {},
   };
   // The shell's own /me read, shared on window.__hallReads (shell.js probeMe).