hallo knut

tools/smoke_test.mjs

@@ -0,0 +1,320 @@
+/**
+ * Functional smoke test: drives the real page in headless Chrome over CDP.
+ * Assumes a server on 127.0.0.1:8765 and Chrome with --remote-debugging-port=9222.
+ */
+
+const PORT = 9222;
+const ORIGIN = '127.0.0.1:8765';
+
+const GREY = 'rgb(139, 139, 150)';
+const RED = 'rgb(255, 59, 48)';
+
+function fail(msg) {
+  console.error('FAIL: ' + msg);
+  process.exit(1);
+}
+
+async function connect() {
+  const res = await fetch(`http://127.0.0.1:${PORT}/json/list`);
+  const targets = await res.json();
+  const page = targets.find((t) => t.type === 'page' && t.url.includes(ORIGIN));
+  if (!page) fail('page target not found: ' + JSON.stringify(targets.map((t) => t.url)));
+
+  const ws = new WebSocket(page.webSocketDebuggerUrl);
+  await new Promise((resolve, reject) => {
+    ws.addEventListener('open', resolve, { once: true });
+    ws.addEventListener('error', reject, { once: true });
+  });
+
+  let nextId = 0;
+  const pending = new Map();
+  ws.addEventListener('message', (ev) => {
+    const msg = JSON.parse(ev.data);
+    const resolve = pending.get(msg.id);
+    if (resolve) {
+      pending.delete(msg.id);
+      resolve(msg);
+    }
+  });
+
+  const send = (method, params) =>
+    new Promise((resolve) => {
+      const id = ++nextId;
+      pending.set(id, resolve);
+      ws.send(JSON.stringify({ id, method, params }));
+    });
+
+  const evaluate = async (expression) => {
+    const msg = await send('Runtime.evaluate', {
+      expression,
+      returnByValue: true,
+      awaitPromise: true,
+    });
+    if (msg.result?.exceptionDetails) {
+      throw new Error('page exception: ' + JSON.stringify(msg.result.exceptionDetails));
+    }
+    return msg.result.result.value;
+  };
+
+  return { evaluate, send, close: () => ws.close() };
+}
+
+const SNAPSHOT = `(() => {
+  const clock = document.getElementById('clock');
+  const exName = document.getElementById('exerciseName');
+  return {
+    phase: document.getElementById('phaseLabel').textContent,
+    exercise: exName.textContent,
+    clock: clock.textContent,
+    progress: document.getElementById('progress').textContent,
+    next: document.getElementById('nextUp').textContent,
+    bodyClass: document.body.className,
+    exColor: getComputedStyle(exName).color,
+    clockColor: getComputedStyle(clock).color,
+  };
+})()`;
+
+const SETUP = `(() => {
+  // measure target colours, not the in-flight transition
+  const style = document.createElement('style');
+  style.textContent = '* { transition: none !important; animation: none !important; }';
+  document.head.append(style);
+
+  const setVal = (id, v) => {
+    const el = document.getElementById(id);
+    el.value = String(v);
+    el.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+  setVal('pauseInput', 2);
+  setVal('workInput', 1);
+  setVal('setsInput', 2);
+  const add = (name) => {
+    const input = document.getElementById('exerciseInput');
+    input.value = name;
+    document.getElementById('addBtn').click();
+  };
+  add('    ');        // blank input must be ignored
+  add('Push-ups');
+  add('Squats');
+  add('Plank');
+  document.getElementById('exerciseInput').value = 'Deadlift';
+  document.getElementById('addBtn').click();
+  document.querySelectorAll('#exerciseList li')[3].querySelector('button').click(); // remove Deadlift
+  return {
+    listed: Array.from(document.querySelectorAll('#exerciseList li .name')).map(n => n.textContent),
+    clockBeforeStart: document.getElementById('clock').textContent,
+    startLabel: document.getElementById('startBtn').textContent,
+  };
+})()`;
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+function expect(cond, msg) {
+  if (!cond) fail(msg);
+}
+
+/** Evaluate, tolerating the brief window where a reload has no execution context yet. */
+async function evaluateRetry(evaluate, expression, attempts = 15) {
+  for (let i = 0; i < attempts; i++) {
+    try {
+      return await evaluate(expression);
+    } catch {
+      await sleep(300);
+    }
+  }
+  return fail(`page never became responsive: ${expression}`);
+}
+
+/** "00:07" -> 7 */
+function toSecs(text) {
+  const [m, s] = text.split(':').map(Number);
+  return m * 60 + s;
+}
+
+async function main() {
+  const { evaluate, send, close } = await connect();
+
+  // the settings panel must be reachable before anything can be configured
+  await evaluate(`document.getElementById('settingsToggle').click()`);
+  const panel = await evaluate(`({
+    hidden: document.getElementById('settings').hidden,
+    expanded: document.getElementById('settingsToggle').getAttribute('aria-expanded'),
+  })`);
+  expect(!panel.hidden && panel.expanded === 'true', 'settings toggle should open the panel');
+
+  const setup = await evaluate(SETUP);
+  console.log('setup:', JSON.stringify(setup));
+
+  if (JSON.stringify(setup.listed) !== JSON.stringify(['Push-ups', 'Squats', 'Plank'])) {
+    fail('exercise list should hold exactly the three added names');
+  }
+  if (setup.startLabel !== 'Start') fail('start button should read "Start" before starting');
+
+  await evaluate(`document.getElementById('startBtn').click()`);
+
+  const seen = [];
+  const colors = { grey: 0, red: 0 };
+  const deadline = Date.now() + 30000;
+
+  while (Date.now() < deadline) {
+    const s = await evaluate(SNAPSHOT);
+    const key = `${s.phase}|${s.exercise}|${s.progress}`;
+    if (!seen.length || seen[seen.length - 1].key !== key) {
+      seen.push({ key, at: Date.now(), clockSecs: toSecs(s.clock), ...s });
+    } else {
+      const last = seen[seen.length - 1];
+      if (toSecs(s.clock) > last.clockSecs) fail(`clock went up during ${s.phase}: ${last.clock} -> ${s.clock}`);
+      last.clockSecs = toSecs(s.clock);
+    }
+    if (s.phase === 'Done') break;
+    await sleep(150);
+  }
+
+  console.log('\nobserved sequence:');
+  for (const s of seen) {
+    console.log(`  ${s.phase.padEnd(8)} | ${s.exercise.padEnd(16)} | ${s.clock} | ${s.progress} | ${s.next}`);
+    if (s.exercise === 'Workout complete') continue;
+    if (s.phase === 'Pause') {
+      if (s.exColor !== GREY || s.clockColor !== GREY) fail(`pause should be grey, got ${s.exColor}`);
+      colors.grey++;
+    } else if (s.phase === 'Training') {
+      if (s.exColor !== RED || s.clockColor !== RED) fail(`training should be red, got ${s.exColor}`);
+      colors.red++;
+    }
+  }
+
+  const expected = [
+    'Pause|Push-ups',
+    'Training|Push-ups',
+    'Pause|Squats',
+    'Training|Squats',
+    'Pause|Plank',
+    'Training|Plank',
+    'Pause|Push-ups',
+    'Training|Push-ups',
+    'Pause|Squats',
+    'Training|Squats',
+    'Pause|Plank',
+    'Training|Plank',
+    'Done|Workout complete',
+  ];
+
+  const actual = seen.map((s) => `${s.phase}|${s.exercise}`);
+  console.log('\nexpected:', expected.join(' -> '));
+  console.log('actual:  ', actual.join(' -> '));
+
+  if (actual.join('|') !== expected.join('|')) {
+    fail('phase sequence mismatch');
+  }
+
+  // each pause should last ~2s and each training block ~1s (poll lag allowed for).
+  // phases chain off their deadline, so error must not accumulate from one to the next.
+  for (let i = 0; i < seen.length - 1; i++) {
+    const expectedMs = seen[i].phase === 'Pause' ? 2000 : 1000;
+    const actualMs = seen[i + 1].at - seen[i].at;
+    console.log(`  ${seen[i].phase.padEnd(8)} ${String(actualMs).padStart(5)}ms (expected ~${expectedMs}ms)`);
+    if (Math.abs(actualMs - expectedMs) > 350) {
+      fail(`${seen[i].phase} of ${seen[i].exercise} lasted ${actualMs}ms, expected ~${expectedMs}ms`);
+    }
+  }
+
+  /* ---- restart / pause / resume / reset / persistence ---- */
+
+  await evaluate(`document.getElementById('startBtn').click()`);
+  await sleep(200);
+  let s = await evaluate(SNAPSHOT);
+  expect(s.phase === 'Pause' && s.progress.includes('Set 1 / 2'), `restart should begin a fresh session, got ${s.phase} / ${s.progress}`);
+  expect(s.exercise === 'Push-ups', `restart should show the first exercise, got ${s.exercise}`);
+
+  let ui = await evaluate(`({
+    startHidden: document.getElementById('startBtn').hidden,
+    resetHidden: document.getElementById('resetBtn').hidden,
+    inputsDisabled: document.getElementById('pauseInput').disabled && document.getElementById('addBtn').disabled,
+  })`);
+  expect(ui.startHidden && !ui.resetHidden, 'while running: Start hidden, Reset visible');
+  expect(ui.inputsDisabled, 'settings inputs should be locked while running');
+
+  await evaluate(`document.getElementById('pauseBtn').click()`);
+  await sleep(150);
+  const before = await evaluate(SNAPSHOT);
+  await sleep(700);
+  const after = await evaluate(SNAPSHOT);
+  expect(before.phase === 'Paused', `expected Paused label, got ${before.phase}`);
+  expect(before.clock === after.clock, `clock must freeze while paused: ${before.clock} -> ${after.clock}`);
+  expect(await evaluate(`document.getElementById('pauseBtn').textContent`) === 'Resume', 'pause button should offer Resume');
+
+  await evaluate(`document.getElementById('pauseBtn').click()`);
+  await sleep(150);
+  s = await evaluate(SNAPSHOT);
+  expect(s.phase === 'Pause', `resume should continue the paused phase, got ${s.phase}`);
+
+  await evaluate(`document.getElementById('resetBtn').click()`);
+  await sleep(200);
+  s = await evaluate(SNAPSHOT);
+  expect(s.phase === 'Ready' && s.clock === '00:02', `reset should return to Ready / 00:02, got ${s.phase} / ${s.clock}`);
+  ui = await evaluate(`({
+    startLabel: document.getElementById('startBtn').textContent,
+    startHidden: document.getElementById('startBtn').hidden,
+    pauseHidden: document.getElementById('pauseBtn').hidden,
+    resetHidden: document.getElementById('resetBtn').hidden,
+    inputsDisabled: document.getElementById('pauseInput').disabled,
+    listed: Array.from(document.querySelectorAll('#exerciseList li .name')).map((n) => n.textContent),
+  })`);
+  expect(ui.startLabel === 'Start' && !ui.startHidden, 'reset should restore the Start button');
+  expect(ui.pauseHidden && ui.resetHidden, 'reset should hide Pause and Reset');
+  expect(!ui.inputsDisabled, 'settings inputs should be editable again after reset');
+  expect(JSON.stringify(ui.listed) === JSON.stringify(['Push-ups', 'Squats', 'Plank']), 'exercises should survive a reset');
+
+  const stored = await evaluate(`localStorage.getItem('interval-timer/v1')`);
+  const parsed = JSON.parse(stored);
+  expect(
+    parsed.pauseSec === 2 && parsed.workSec === 1 && parsed.sets === 2 && parsed.exercises.length === 3,
+    'settings should be persisted: ' + stored
+  );
+  console.log('\nrestart/pause/resume/reset/persistence: ok');
+
+  /* ---- PWA: service worker, cached shell, offline boot ---- */
+
+  const sw = await evaluate(`(async () => {
+    if (!('serviceWorker' in navigator)) return { supported: false };
+    const reg = await navigator.serviceWorker.ready;
+    const keys = await caches.keys();
+    const cached = [];
+    for (const key of keys) {
+      for (const req of await (await caches.open(key)).keys()) {
+        cached.push(new URL(req.url).pathname);
+      }
+    }
+    return { supported: true, active: !!reg.active, scope: reg.scope, cached: cached.sort() };
+  })()`);
+  console.log('service worker:', JSON.stringify(sw));
+  expect(sw.supported, 'service workers should be supported in a secure context');
+  expect(sw.active, 'service worker should be installed and active');
+
+  for (const asset of ['/', '/index.html', '/styles.css', '/app.js', '/manifest.webmanifest',
+                       '/icons/icon-192.png', '/icons/icon-512.png', '/icons/icon-maskable-512.png']) {
+    expect(sw.cached.includes(asset), `app shell should be cached: ${asset} (have ${sw.cached.join(', ')})`);
+  }
+
+  await send('Network.enable');
+  await send('Page.enable');
+  await send('Network.emulateNetworkConditions', {
+    offline: true, latency: 0, downloadThroughput: 0, uploadThroughput: 0,
+  });
+  await send('Page.reload', {});
+
+  const offlinePhase = await evaluateRetry(evaluate, `document.getElementById('phaseLabel').textContent`);
+  const offlineEx = await evaluateRetry(evaluate, `document.getElementById('exerciseName').textContent`);
+  expect(offlinePhase === 'Ready', `app should boot from cache while offline, got "${offlinePhase}"`);
+  expect(offlineEx === 'Push-ups', `offline boot should restore saved exercises, got "${offlineEx}"`);
+  console.log('offline reload: ok (Phase="' + offlinePhase + '", Exercise="' + offlineEx + '")');
+
+  await send('Network.emulateNetworkConditions', {
+    offline: false, latency: 0, downloadThroughput: -1, uploadThroughput: -1,
+  });
+
+  close();
+  console.log(`\nPASS — pause/training sequence, grey->red colours, timing, controls, PWA offline all verified`);
+}
+
+main().catch((err) => fail(err.stack || String(err)));