@bongos/core 1.21.4 → 1.21.6

package/tests/wizard_six_screens.mjs

@@ -0,0 +1,126 @@
+// tests/wizard_six_screens.mjs — the blended create wizard (task 1004504, BV2.PS16; goal 1000121).
+//
+// The design of record is docs/design/mocks/combined-onboarding/index.html (the owner approved it
+// as drawn, 2026-10-01): six screens and the done panel, in this order — sign in, demo or real
+// (the terms as its one tick), what are you making, a few quick checks, check what we set up,
+// give it a look → Create, done — with the mockup's own words, no progress rail, and a review
+// that cannot be skipped: every prefilled answer is a row the founder confirms or changes, and
+// Continue stays locked until all of them are confirmed.
+//
+// This file pins the shape and the words statically. The rows' behaviour is executed by
+// tests/wizard_physics_more.mjs (the controller under a DOM stub) and walked end to end by the
+// kit probes in projects.probes.json; the night room's tokens and motion by tests/projects_hub.mjs.
+//
+// Run:  node --test tests/wizard_six_screens.mjs
+
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(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 SCRIPT = HUB.slice(HUB.lastIndexOf('<script>'), HUB.lastIndexOf('</script>'));
+const VIEW = (HUB.match(/<section id="view-new" hidden>[\s\S]*?\n<\/section>/) || [''])[0];
+const MOCK = fs.readFileSync(path.join(ROOT, 'docs', 'design', 'mocks', 'combined-onboarding', 'index.html'), 'utf8').replace(/\r\n/g, '\n');
+const panel = (id) => (VIEW.match(new RegExp(`<section class="panel[^"]*" id="${id}"[\\s\\S]*?\\n {10}</section>`)) || [''])[0];
+
+const ORDER = ['panel-gate', 'panel-fork', 'panel-what', 'panel-checks', 'panel-review', 'panel-look', 'panel-done'];
+
+test('six screens and the done panel, in the design of record\'s order, in the markup and in the controller\'s map', () => {
+  assert.ok(VIEW, 'the ?view=new section is found');
+  const inMarkup = [...VIEW.matchAll(/<section class="panel[^"]*" id="(panel-[a-z]+)"/g)].map((m) => m[1]);
+  assert.deepEqual(inMarkup, ORDER, 'the panels appear in this order and there are no others');
+  const map = (SCRIPT.match(/var panels = \{([^}]*)\}/) || [, ''])[1];
+  const fromMap = [...map.matchAll(/(\d+):\s*'(panel-[a-z]+)'/g)].map((m) => [Number(m[1]), m[2]]);
+  assert.deepEqual(fromMap, ORDER.map((id, i) => [i, id]), 'the controller numbers them 0–6 in the same order');
+  assert.match(SCRIPT, /var DRAFT_KEY = 'cb-create-draft-v9';/, 'a renumbering bumps the draft key, so an older draft is ignored rather than replayed onto the wrong screen');
+});
+
+test('the old screens and the progress rails are gone', () => {
+  for (const id of ['panel-terms', 'panel-physics', 'panel-name', 'panel-type', 'panel-detail', 'panel-modules', 'panel-home', 'panel-address', 'panel-app']) {
+    assert.doesNotMatch(HUB, new RegExp(`id="${id}"`), `${id} folded into the six screens`);
+  }
+  assert.doesNotMatch(VIEW, /class="steps"|id="physRail"|data-step=/, 'no progress rail, outer or inner');
+  assert.doesNotMatch(SCRIPT, /function paintRail\(|function physNextQ\(|function physPaintStage\(/, 'nor the code that painted them');
+  assert.doesNotMatch(VIEW, /id="physStage"|id="forkStage"|class="bongoCell"|class="bongos"/, 'the forming planet, the plate and the drums give way to the night room');
+  assert.match(VIEW, /<div class="wizTop">\s*<span class="wizEyebrow" id="wizEyebrow">New project<\/span>\s*<button type="button" class="wizBack" id="wizBack" hidden>← Back<\/button>/,
+    'one eyebrow names the screen and one Back walks backwards');
+});
+
+test('each screen opens with the mockup\'s own words', () => {
+  const pairs = [
+    ['panel-gate', 'Make something.', 'Sign in with GitHub to start your project.'],
+    ['panel-fork', 'You’re about to start a digital planet.', 'Try a small demo first, or start your real project.'],
+    ['panel-what', 'What are you making?', null],
+    ['panel-checks', 'A few quick checks.', 'These decide which legal and payout options we can offer.'],
+    ['panel-review', 'Check what we set up.', 'We filled these in from your answers. Confirm each one, or change it.'],
+    ['panel-look', 'Give it a look.', 'So builders always know which project they’re in.'],
+  ];
+  for (const [id, h, lede] of pairs) {
+    const p = panel(id);
+    assert.ok(p, `${id} is found`);
+    const mockLine = h.replace(/’/g, '(’|\'|&rsquo;)');
+    assert.match(MOCK, new RegExp(mockLine.replace(/[.?]/g, '\\$&')), `"${h}" is the mockup's own headline`);
+    assert.match(p, new RegExp(`<h1 id="[a-z-]+h[0-9]?"?[^>]*>${h.replace(/[.?]/g, '\\$&')}`), `${id} opens "${h}"`);
+    if (lede) assert.match(p, new RegExp(`<p class="lede">${lede.replace(/[.?]/g, '\\$&')}</p>`), `${id}'s one line`);
+  }
+  assert.match(panel('panel-gate'), /Continue with GitHub/, 'the gate\'s door');
+  assert.match(panel('panel-fork'), /<button type="submit" class="btn big" id="wizStart" disabled>Start my project<\/button>/);
+  assert.match(panel('panel-fork'), /id="wizDemo"[^>]*disabled>Try the demo<\/button>/, 'both doors wait for the terms tick');
+  assert.match(panel('panel-fork'), /I can sign for this project, and I accept the <a class="termsRead" href="\/terms"/, 'the terms are one tick on the fork, with the terms one click away');
+  assert.match(panel('panel-what'), /<span>Name<\/span>[\s\S]*<span id="typeLbl">Kind<\/span>[\s\S]*In a sentence <small>\(optional — puts it on the public map\)<\/small>/, 'name, kind, one optional sentence');
+});
+
+test('planet words survive only as the light touch: the fork and the alive moment', () => {
+  const words = VIEW.replace(/<!--[\s\S]*?-->/g, '').replace(/<[^>]+>/g, ' ');
+  const planets = words.match(/planet/gi) || [];
+  assert.equal(planets.length, 1, 'one planet in the whole view: the fork\'s headline');
+  assert.match(SCRIPT, /\(state\.name \|\| state\.slug \|\| 'Your project'\) \+ ' is alive\.'/, 'the alive moment');
+  assert.match(SCRIPT, /if \(inst\.last_verified_up\) \{\n\s*\/\*[^*]*\*\/\n\s*\$\('done-h'\)\.textContent =/, 'said only once the project has answered (Live is a verified claim)');
+});
+
+test('the review cannot be skipped: seven rows, each confirmed or changed, and a locked Continue', () => {
+  const p = panel('panel-review');
+  const rows = [...p.matchAll(/<div class="setRow" data-row="([a-z]+)">/g)].map((m) => m[1]);
+  assert.deepEqual(rows, ['code', 'address', 'app', 'extras', 'team', 'rewards', 'run']);
+  for (const key of rows) {
+    const r = (p.match(new RegExp(`<div class="setRow" data-row="${key}">[\\s\\S]*?<span class="acts">[^\\n]*\\n`)) || [''])[0];
+    assert.match(r, /<button type="button" class="rowOk" data-row-ok>Looks right<\/button><button type="button" class="rowChg" data-row-chg aria-expanded="false">Change<\/button>/, `${key}: Looks right and Change`);
+    assert.match(r, /<div class="opts" hidden>[\s\S]*<button type="button" class="btn small rowUse" data-row-use>Use this<\/button>/, `${key}: Change opens the row's own controls with Use this`);
+  }
+  assert.match(p, /<button type="submit" class="btn" id="reviewGo" disabled>Confirm 7 more<\/button>/, 'Continue is baked locked');
+  assert.match(SCRIPT, /go\.textContent = left \? 'Confirm ' \+ left \+ ' more' : 'Continue';/, 'and says how many rows are left');
+  assert.match(SCRIPT, /if \(step === 4\) \{\n\s*var open = unconfirmedRows\(\);\n\s*if \(open\.length\) \{ openRow\(open\[0\]\); return false; \}/, 'Continue with a row left opens that row');
+  assert.match(SCRIPT, /if \(unconfirmedRows\(\)\.length\) \{ show\(4, true\); validateStep\(4\); return; \}/, 'and Create refuses until every row is confirmed');
+});
+
+test('nothing the old steps could do is lost: their controls are moved whole into the rows', () => {
+  const p = panel('panel-review');
+  const has = (row, ids) => {
+    const r = (p.match(new RegExp(`<div class="setRow" data-row="${row}">[\\s\\S]*?\\n {16}</div>\\n`)) || [''])[0];
+    for (const id of ids) assert.match(r, new RegExp(`id="${id}"`), `${row} row hosts #${id}`);
+  };
+  has('code', ['physExisting', 'c-green', 'c-adopt', 'adoptNote', 'ghConnect', 'ghAdopt', 'ghFresh', 'manualHome', 'h-home']);
+  has('address', ['f-slug', 'addrConfirm', 'addrCustom', 'f-domain', 'f-noaddr']);
+  has('app', ['appOpts', 'renderLater', 'renderSetup', 'f-renderKey', 'renderWs', 'renderSvc', 'renderNew']);
+  has('extras', ['modQ', 'modCards', 'modWhy', 'modCoreNote']);
+  has('team', ['physTeam', 'physStartN', 'physExpected', 'teamCards']);
+  has('run', ['physSuite']);
+  for (const id of ['physCountry', 'physRegion', 'physAges', 'physIntent', 'physForms', 'physHaveEntity', 'checksStop', 'physStopMsg', 'physFromAccount']) {
+    assert.match(panel('panel-checks'), new RegExp(`id="${id}"`), `the quick checks host #${id}`);
+  }
+  for (const id of ['demoSetup', 'demoIdea', 'demoInvites', 'demoStart', 'wizResume']) {
+    assert.match(panel('panel-fork'), new RegExp(`id="${id}"`), `the fork hosts #${id}`);
+  }
+  for (const id of ['wizLook', 'wizRecap', 'createAlert', 'doCreate']) {
+    assert.match(panel('panel-look'), new RegExp(`id="${id}"`), `the look screen hosts #${id}`);
+  }
+  /* two answers moved across screens, so two old guarantees are re-pinned where they live now */
+  assert.match(SCRIPT, /function renderNow\(\) \{ return !appSkipped\(\) && /, 'a framing on the founder\'s own machines rules Render out at Create, whatever was picked before');
+  assert.match(SCRIPT, /function renderLater\(\) \{ return !appSkipped\(\) && /);
+  assert.match(SCRIPT, /if \(key === 'extras' && starterBundles\) state\.modules = pickedModules\(\);/, 'confirming the extras before the catalog lands files no answer, never an empty list');
+  const ids = [...VIEW.matchAll(/\sid="([^"]+)"/g)].map((m) => m[1]);
+  assert.deepEqual(ids.filter((id, i) => ids.indexOf(id) !== i), [], 'moved, never copied: every id in the view is unique');
+});