@bongos/core 1.25.25 → 1.25.27

package/tests/hall_dialog.mjs

@@ -290,10 +290,29 @@ test('the guard catches a browser box when one comes back, and leaves the shared
   }
 });
 
+// shell.js's tag, then hall-dialog.js's on the very next line. Either line ending: git's
+// core.autocrlf checks every page out with CRLF on Windows, and an LF-only `\n` here failed every
+// page there, so a real misordering (task 1005148's visor.js between the two) read as noise.
+// Task 1005197.
+function shellThenDialog(html) {
+  return html.match(/<script src="\/builders\/shell\.js[^"]*"( defer)?><\/script>\r?\n<script src="\/builders\/hall-dialog\.js"( defer)?><\/script>/);
+}
+
+test('the shell-then-dialog order check reads LF and CRLF pages alike, and still catches a misorder', () => {
+  const pair = ['<script src="/builders/shell.js?v=1" defer></script>', '<script src="/builders/hall-dialog.js" defer></script>'];
+  for (const eol of ['\n', '\r\n']) {
+    const m = shellThenDialog(pair.join(eol));
+    assert.ok(m, `matched with ${JSON.stringify(eol)} line endings`);
+    assert.equal(m[1], m[2]);
+    const between = [pair[0], '<script src="/builders/visor.js" defer></script>', pair[1]].join(eol);
+    assert.equal(shellThenDialog(between), null, `a script between them is caught with ${JSON.stringify(eol)}`);
+  }
+});
+
 test('every hall page loads the shared dialog right after the shell, deferred alike', () => {
   for (const f of fs.readdirSync(PUB).filter((n) => n.endsWith('.html'))) {
     const html = read(f);
-    const shell = html.match(/<script src="\/builders\/shell\.js[^"]*"( defer)?><\/script>\n<script src="\/builders\/hall-dialog\.js"( defer)?><\/script>/);
+    const shell = shellThenDialog(html);
     if (!/\/builders\/shell\.js/.test(html)) continue;
     assert.ok(shell, `${f} loads hall-dialog.js right after shell.js`);
     assert.equal(shell[1], shell[2], `${f}: deferred alike`);

package/tests/hall_visor.mjs

@@ -236,7 +236,7 @@ test('source: the minimal visor spends the Helm tokens and types in no colour, s
   assert.ok(phone, 'the phone rules sit in the shared phone block');
   assert.match(phone[0], /\.visor__hint:not\(\[data-visor-sheet\]\) \{ display: none; \}/, 'a phone keeps only Actions of the hints');
   assert.doesNotMatch(read('home-city.css'), /visor-on/, 'Home has no top-right pill to clear any more');
-  assert.match(read('city.css'), /\nhtml\.visor-on \.city-door \{ bottom: 224px; \}/, 'the city\'s door clears the centred button at every width');
+  assert.match(read('city.css'), /\nhtml\.visor-on \.city-door \{ bottom: calc\(180px - var\(--visor-drop, 0px\)\); \}/, 'the city\'s door clears the centred button at every width (task 1005266: the row dropped, except on a phone)');
 });
 
 // ---------- in a browser: the glass over a stand-in scene ----------
@@ -554,3 +554,102 @@ test('the glass is the kit\'s: the cut accent button, ice hints with no box, the
   assert.match(f.ring, /inset/, 'focus is the inset two-tone ring (--press-focus)');
   await ctx.close();
 });
+
+// ---------- task 1005266: the glass rests while you look and wakes slim when you act ----------
+test('the top arc cuts into pieces of the same curve (task 1005266)', () => {
+  const V = loadPure();
+  assert.equal(V.arcPiece(0, 1), 'M76 100Q500 -100 924 100', 'the whole of it is the arc itself');
+  const end = (d) => d.split(' ').slice(-2).join(' '), start = (d) => d.slice(1, d.indexOf('Q'));
+  assert.equal(end(V.arcPiece(0, 0.5)), start(V.arcPiece(0.5, 1)), 'two halves meet');
+  assert.equal(start(V.arcPiece(0.5, 1)), '500 0', 'at the top of the arc');
+});
+
+test('the glass rests when you leave it alone and wakes when you reach for it (task 1005266)', { skip }, async () => {
+  const { ctx, page, errors } = await open({ helm: true });
+  const look = () => page.evaluate(() => {
+    const op = (s) => getComputedStyle(document.querySelector(s)).opacity;
+    return { resting: OTBVisor.resting(), main: op('.visor__main'), hints: op('.visor__hints'), who: op('.visor__who'), place: op('.visor__top'), sprite: op('.visor__sprite'), sight: op('.visor__sight') };
+  });
+  assert.equal((await look()).resting, false, 'arriving at a place shows the whole glass');
+  await page.mouse.move(640, 300);
+  await page.waitForFunction(() => OTBVisor.resting(), null, { timeout: 8000 });
+  await page.waitForTimeout(400);
+  assert.deepEqual(await look(), { resting: true, main: '0', hints: '0', who: '0', place: '0', sprite: '1', sight: '1' }, 'at rest only the frame and your picture are drawn');
+  await page.mouse.move(640, 790);
+  await page.waitForTimeout(400);
+  assert.deepEqual(await look(), { resting: false, main: '1', hints: '1', who: '1', place: '1', sprite: '1', sight: '1' }, 'the pointer near the bottom of the view wakes it');
+  await page.mouse.move(640, 300);
+  await page.mouse.down();
+  assert.equal((await look()).resting, true, 'a press on the scene rests it at once');
+  await page.mouse.move(700, 790, { steps: 3 });
+  assert.equal((await look()).resting, true, 'a drag that passes the bottom of the view is looking, not reaching');
+  await page.mouse.up();
+  // a visor key wakes it, and the open sheet holds it awake
+  await page.mouse.move(640, 300);
+  await page.keyboard.press('a');
+  assert.deepEqual(await page.evaluate(() => [OTBVisor.isOpen(), OTBVisor.resting()]), [true, false], 'A opens the sheet on a waking glass');
+  await page.mouse.click(300, 300);
+  assert.equal((await look()).resting, false, 'the sheet holds the glass awake');
+  await page.keyboard.press('Escape');
+  assert.equal(await page.evaluate(() => document.activeElement.matches('[data-visor-sheet]')), true, 'the keyboard is back on Actions, which also holds it');
+  await page.mouse.click(300, 300);
+  assert.deepEqual(await page.evaluate(() => [OTBVisor.resting(), document.activeElement === document.body]), [true, true], 'going back to the scene rests it and hands the keyboard back');
+  // a control you cannot see is never pressed by accident: the first press only wakes
+  await page.evaluate(() => document.querySelector('[data-visor-sheet]').click());
+  assert.deepEqual(await page.evaluate(() => [OTBVisor.isOpen(), OTBVisor.resting()]), [false, false]);
+  assert.deepEqual(errors, []);
+  await ctx.close();
+});
+
+test('a key hint is its key, and pointing at it names it above the row without moving another (task 1005266)', { skip }, async () => {
+  const { ctx, page, errors } = await open({ helm: true });
+  const boxes = () => page.evaluate(() => [...document.querySelectorAll('.visor__hint')].map((h) => Math.round(h.getBoundingClientRect().left)));
+  const before = await boxes();
+  await page.hover('[data-visor-act="thinking"]');
+  assert.equal(await page.evaluate(() => document.querySelector('.visor__hints').getAttribute('data-name')), 'Your thinking');
+  assert.deepEqual(await boxes(), before, 'naming a key moves no key');
+  assert.equal(await page.textContent('[data-visor-act="thinking"]'), 'TYour thinking', 'the name is still in the page for a screen reader');
+  await page.mouse.move(640, 300);
+  assert.equal(await page.evaluate(() => document.querySelector('.visor__hints').hasAttribute('data-name')), false);
+  assert.deepEqual(errors, []);
+  await ctx.close();
+});
+
+test('the top arc is the version\'s progress while awake, and one plain arc at rest (task 1005266)', { skip }, async () => {
+  const { ctx, page, errors } = await open({ helm: true });
+  await ctx.route(ORIGIN + '/api/bongos/versions/progress', (r) => r.fulfill({ contentType: 'application/json', body: JSON.stringify({ progress: [{ version_id: 'BONGOS-V2', name: 'The ten working areas', status: 'building', percent_complete: 89 }] }) }));
+  await ctx.route(ORIGIN + '/api/bongos/versions/focus', (r) => r.fulfill({ contentType: 'application/json', body: JSON.stringify({ focus_version_id: 'BONGOS-V2' }) }));
+  await page.reload();
+  await page.waitForSelector('.visor__frame--segs');
+  const read = () => page.evaluate(() => {
+    const shown = (e) => getComputedStyle(e).display !== 'none';
+    return {
+      segs: [...document.querySelectorAll('.visor__seg:not(.visor__line--under)')].map((p) => (/visor__seg--(\w+)/.exec(p.getAttribute('class')) || [])[1]),
+      segsShown: [...document.querySelectorAll('.visor__seg')].every(shown),
+      arcShown: [...document.querySelectorAll('.visor__arc')].every(shown),
+      words: document.querySelector('.visor__progress-words [aria-hidden]').textContent,
+      said: document.querySelector('.visor__progress-words .sr-only').textContent,
+      bars: document.querySelectorAll('.visor .segs').length,
+      line: [...document.querySelectorAll('.visor__top > *')].map((e) => Math.round(e.getBoundingClientRect().top)),
+    };
+  });
+  const awake = await read();
+  assert.deepEqual(awake.segs, ['done', 'done', 'done', 'now'], 'four quarters: three built, the fourth being built');
+  assert.deepEqual([awake.segsShown, awake.arcShown], [true, false], 'awake, the pieces stand in for the plain arc');
+  assert.deepEqual([awake.words, awake.said, awake.bars], ['BONGOS-V2 · 89%', 'BONGOS-V2, The ten working areas: 89% built', 0], 'the reading is still said in words; the separate row of bars is gone');
+  assert.equal(awake.line.length, 2);
+  assert.ok(Math.abs(awake.line[0] - awake.line[1]) <= 2, 'the place and the reading share one line');
+  await page.mouse.move(640, 300);
+  await page.mouse.down(); await page.mouse.up();
+  const rest = await read();
+  assert.deepEqual([rest.segsShown, rest.arcShown], [false, true], 'at rest it is the one plain arc');
+  assert.deepEqual(errors, []);
+  await ctx.close();
+});
+
+test('a phone keeps the whole glass: there is no pointer to reach with (task 1005266)', { skip }, async () => {
+  const { ctx, page } = await open({ helm: true, width: 390, height: 844 });
+  await page.evaluate(() => OTBVisor.rest());
+  assert.deepEqual(await page.evaluate(() => [OTBVisor.resting(), document.getElementById('visor').classList.contains('visor--rest'), getComputedStyle(document.querySelector('.visor__main')).opacity]), [false, false, '1']);
+  await ctx.close();
+});