@bongos/core 1.25.26 → 1.25.28

package/tests/home_city_world.mjs

@@ -0,0 +1,119 @@
+// tests/home_city_world.mjs — game mode: Home's city is the whole view (task 1005305).
+//
+// Runs city-draw.js + home-city-draw.js + home-camera.js + home-city.js in a real page with
+// html[data-game="on"]: the page holds nothing but the city and cannot scroll, the arrow keys
+// move the world and never past its edge, the time is handed to the visor (OTBVisor.timeline)
+// and a drag on it sends the city back through the weeks, and classic mode is as it was.
+// Skips where no system Edge or Chrome is installed.
+//
+// Run:  node --test tests/home_city_world.mjs
+import assert from 'node:assert/strict';
+import { test, after } from 'node:test';
+import { createRequire } from 'node:module';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const lib = require(path.join(ROOT, 'modules', 'ui-design', 'kit', 'lib.js'));
+const pub = (f) => fs.readFileSync(path.join(ROOT, 'modules', 'hall-ui', 'public', f), 'utf8');
+const FIXTURE = fs.readFileSync(path.join(ROOT, 'scripts', 'hall-preview', 'fixtures', 'home__city.json'), 'utf8');
+
+let browser = null;
+try { browser = await lib.launchBrowser(); } catch (e) { if (!(e instanceof lib.NoBrowserError)) throw e; }
+after(() => browser && browser.close());
+const skip = !browser && 'no system Edge or Chrome';
+
+const stubs = `
+  window.__CITY = ${FIXTURE};
+  window.BongosClient = { createClient: () => ({ request: async (m, p) =>
+    (p.startsWith('/api/bongos/home/city') ? { ok: true, status: 200, data: window.__CITY } : { ok: false, status: 404, data: null }) }) };
+  window.OTBCraftMode = { iconHtml: () => '', choose: () => {}, current: () => 'artisan' };
+  document.documentElement.dataset.craft = 'artisan';
+  window.__tl = []; window.__scenes = [];
+  window.OTBVisor = { timeline: (t) => window.__tl.push(t), scene: (s) => window.__scenes.push(s), isOpen: () => false };
+  window.OTB = { contributeHallWidget(w) { window.__widget = w; } };`;
+
+async function boot({ game = true } = {}) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 }, reducedMotion: 'reduce' });
+  const page = await ctx.newPage();
+  await page.setContent(`<!doctype html><html${game ? ' data-game="on"' : ''}><head><style>[hidden]{display:none!important}${pub('home-city.css')}</style></head><body>
+    <div class="page-head--hall">Hello</div><section id="home-city" class="scroll home-city" hidden></section>
+    <div id="zone-home-main" style="height:3000px">cards</div><footer class="app-foot">foot</footer></body></html>`);
+  await page.addScriptTag({ content: stubs });
+  for (const f of ['city-draw.js', 'home-city-draw.js', 'home-camera.js', 'home-city.js']) await page.addScriptTag({ content: pub(f) });
+  await page.evaluate(() => window.__widget.mount(document.getElementById('home-city')));
+  await page.waitForFunction(() => document.querySelector('.hc-svg').childNodes.length > 0);
+  return { ctx, page };
+}
+const shown = (page, sel) => page.evaluate((s) => { const e = document.querySelector(s); return !!e && getComputedStyle(e).display !== 'none'; }, sel);
+const worldX = (page) => page.evaluate(() => Math.round(document.querySelector('.hc-svg').getBoundingClientRect().x));
+const lastTl = (page, pick) => page.evaluate(pick);
+
+test('game mode: the page is only the city, it cannot scroll, and the world is larger than the view', { skip }, async () => {
+  const { ctx, page } = await boot();
+  const s = await page.evaluate(() => {
+    const r = document.querySelector('.hc-svg').getBoundingClientRect(), h = document.documentElement;
+    window.scrollTo(0, 500);
+    return { world: h.classList.contains('hc-world'), overflow: getComputedStyle(h).overflowY, scrolled: window.scrollY, w: r.width, h: r.height, x: r.x, y: r.y };
+  });
+  const parts = {};
+  for (const sel of ['.page-head--hall', '#zone-home-main', '.app-foot', '.hc-ladder', '.hc-time', '.hc-svg']) parts[sel] = await shown(page, sel);
+  await ctx.close();
+  assert.equal(s.world, true);
+  assert.equal(s.overflow, 'hidden');
+  assert.equal(s.scrolled, 0, 'the page does not scroll');
+  assert.ok(s.w > 1280 && s.h > 800, 'the city is a world larger than the view');
+  assert.ok(s.x < 0 && s.y < 0, 'the view opens on the middle of it');
+  assert.deepEqual(parts, { '.page-head--hall': false, '#zone-home-main': false, '.app-foot': false, '.hc-ladder': false, '.hc-time': false, '.hc-svg': true });
+});
+
+test('game mode: the arrow keys move the city, and never past its edge', { skip }, async () => {
+  const { ctx, page } = await boot();
+  const start = await worldX(page);
+  await page.keyboard.down('ArrowRight');
+  await page.waitForFunction((x0) => Math.round(document.querySelector('.hc-svg').getBoundingClientRect().x) < x0 - 40, start);
+  await page.keyboard.up('ArrowRight');
+  await page.keyboard.down('ArrowLeft');
+  await page.waitForFunction(() => Math.round(document.querySelector('.hc-svg').getBoundingClientRect().x) === 0, null, { timeout: 15000 });
+  await page.waitForTimeout(200);
+  const end = await worldX(page);
+  const scrolled = await page.evaluate(() => window.scrollX + window.scrollY);
+  await page.keyboard.up('ArrowLeft');
+  await ctx.close();
+  assert.equal(end, 0, 'held against the left edge, the world stops at it');
+  assert.equal(scrolled, 0);
+});
+
+test('game mode: time is on the visor; a drag sends the city back, and Home registers its rows, keys and the cursor sight', { skip }, async () => {
+  const { ctx, page } = await boot();
+  const read = () => lastTl(page, () => { const t = window.__tl[window.__tl.length - 1]; return { live: t.live, value: t.value, label: t.label, speed: t.speed, len: document.querySelector('.hc-svg').innerHTML.length }; });
+  const before = await read();
+  await page.evaluate(() => window.__tl[window.__tl.length - 1].seek(0.3));
+  const back = await read();
+  await page.evaluate(() => window.__tl[window.__tl.length - 1].faster());
+  const sped = (await read()).speed;
+  const scene = await page.evaluate(() => { const s = window.__visorScene; return { aim: s.aim, keys: s.keys.map((k) => k.key), rows: s.actions.map((a) => a.label) }; });
+  await page.evaluate(() => window.__tl[window.__tl.length - 1].toLive());
+  const live = (await read()).live;
+  await ctx.close();
+  assert.deepEqual([before.live, before.value, before.label, before.speed], [true, 1, 'Live', '1×']);
+  assert.equal(back.live, false);
+  assert.ok(Math.abs(back.value - 0.3) < 0.01 && back.label !== 'Live', 'the city is where the drag sent it: ' + back.label);
+  assert.notEqual(back.len, before.len, 'the city is redrawn for that week');
+  assert.equal(sped, '2×');
+  assert.equal(scene.aim, true);
+  assert.deepEqual(scene.keys, ['Arrows']);
+  assert.ok(scene.rows.includes('Play the city over time') && scene.rows.includes('Back to live') && scene.rows.some((r) => r.startsWith('Speed')), scene.rows.join(' | '));
+  assert.equal(live, true);
+});
+
+test('classic mode is as it was: the ladder, the slider and the cards are on the page, and no timeline is handed over', { skip }, async () => {
+  const { ctx, page } = await boot({ game: false });
+  const s = await page.evaluate(() => ({ world: document.documentElement.classList.contains('hc-world'), tl: window.__tl.filter(Boolean).length, aim: window.__visorScene.aim, transform: document.querySelector('.hc-svg').style.transform }));
+  const parts = { ladder: await shown(page, '.hc-ladder'), time: await shown(page, '.hc-time'), cards: await shown(page, '#zone-home-main') };
+  await ctx.close();
+  assert.deepEqual(s, { world: false, tl: 0, aim: false, transform: '' });
+  assert.deepEqual(parts, { ladder: true, time: true, cards: true });
+});