@cs4alhaider/screenbook 0.1.0

package/shell/selftest.js

@@ -0,0 +1,275 @@
+/* ?selftest=1 — generic smoke (EN-17): every screen × theme × mode × dir
+   must render with a valid meta block, reach Engine.ready, and log zero
+   console errors. Results land on window.__selftestResult for the headless
+   CLI harness (engine validate). */
+
+import { store } from './store.js';
+import { url } from './net.js';
+import { injectAppRuntime } from './screenhost.js';
+
+const Kit = window.EngineKit;
+const overlay = document.getElementById('selftest-overlay');
+const READY_TIMEOUT = 8000;
+const SETTLE_MS = 120;
+const CONCURRENCY = 4;
+
+let farm = null;
+
+function combos(project) {
+  const themes = [...project.themes.keys()];
+  const list = [];
+  for (const f of project.features.values()) {
+    if (f.type === 'app') continue;   // apps run their own pass below
+    for (const s of f.manifest.screens || []) {
+      const devices = s.devices?.length ? s.devices : [s.device || 'none'];
+      for (const device of devices) {
+        for (const theme of themes) {
+          for (const mode of ['light', 'dark']) {
+            for (const dir of ['ltr', 'rtl']) {
+              list.push({ feature: f.id, screen: s.id, device, theme, mode, dir });
+            }
+          }
+        }
+      }
+    }
+  }
+  return list;
+}
+
+function runCombo(project, combo) {
+  return new Promise((resolve) => {
+    const started = performance.now();
+    const errors = [];
+    let meta = null;
+    let settled = false;
+
+    const iframe = document.createElement('iframe');
+    const dims = { ios: [393, 852], android: [412, 915], web: [1280, 760], none: [900, 640] }[combo.device] || [900, 640];
+    iframe.style.cssText = `position:fixed;left:-99999px;top:0;width:${dims[0]}px;height:${dims[1]}px;border:0;`;
+    farm.append(iframe);
+
+    const feature = project.features.get(combo.feature);
+    const scenarioList = feature?.scenarios?.list || [];
+    const scenario = scenarioList.find((x) => x.id === 'default') || null;
+    const data = Kit.applyScenario(feature?.seed || {}, scenario);
+    const theme = project.themes.get(combo.theme) || Kit.FALLBACK_THEME;
+
+    function finish(ok, failReason) {
+      if (settled) return;
+      settled = true;
+      window.removeEventListener('message', onMessage);
+      clearTimeout(timer);
+      iframe.remove();
+      resolve({
+        ...combo,
+        ok,
+        errors,
+        fail: failReason || (errors.length ? errors[0] : null),
+        ms: Math.round(performance.now() - started)
+      });
+    }
+
+    const timer = setTimeout(() => finish(false, 'timeout: Engine.ready never fired'), READY_TIMEOUT);
+
+    function onMessage(e) {
+      if (e.source !== iframe.contentWindow) return;
+      const msg = e.data;
+      if (!msg || typeof msg.type !== 'string') return;
+      if (msg.type === 'sb:hello') {
+        meta = msg.meta || null;
+        iframe.contentWindow.postMessage({
+          type: 'sb:init',
+          theme,
+          themeId: combo.theme,
+          mode: combo.mode,
+          dir: combo.dir,
+          lang: project.config.defaultLanguage || 'en',
+          device: combo.device,
+          scenario: 'default',
+          data,
+          review: { active: false, pins: [] }
+        }, '*');
+      } else if (msg.type === 'sb:console-error') {
+        errors.push(msg.message);
+      } else if (msg.type === 'sb:ready') {
+        setTimeout(() => {
+          if (!meta || typeof meta.title !== 'string' || !meta.title) {
+            finish(false, 'meta block missing or has no title');
+          } else if (errors.length) {
+            finish(false, errors[0]);
+          } else {
+            finish(true);
+          }
+        }, SETTLE_MS);
+      }
+    }
+
+    window.addEventListener('message', onMessage);
+    iframe.src = url(`features/${combo.feature}/screens/${encodeURIComponent(combo.screen)}.html`);
+  });
+}
+
+/* App-type feature (EN-20 gate, per Abdullah's panel pick): boot the app,
+   require hello + a screens list, then VISIT EVERY SCREEN once — zero
+   console errors anywhere. */
+function runAppFeature(f, report) {
+  return new Promise((resolve) => {
+    const dims = { ios: [393, 852], android: [412, 915], web: [1280, 760], none: [1000, 700] }[f.meta.device || 'none'] || [1000, 700];
+    const iframe = document.createElement('iframe');
+    iframe.style.cssText = `position:fixed;left:-99999px;top:0;width:${dims[0]}px;height:${dims[1]}px;border:0;`;
+    farm.append(iframe);
+
+    const errors = [];
+    let screens = null;
+    let helloTimer = null;
+    let currentResolve = null;
+    let visiting = false;
+
+    function row(screen, ok, fail, ms) {
+      report({ feature: f.id, screen, theme: 'app', mode: '—', dir: '—', ok, fail, errors: [...errors], ms });
+      errors.length = 0;
+    }
+
+    function finish() {
+      window.removeEventListener('message', onMessage);
+      clearTimeout(helloTimer);
+      iframe.remove();
+      resolve();
+    }
+
+    function onMessage(e) {
+      if (e.source !== iframe.contentWindow) return;
+      const msg = e.data;
+      if (!msg || typeof msg.type !== 'string') return;
+      if (msg.type === 'sba:console-error') errors.push(msg.message);
+      else if (msg.type === 'sba:screens') screens = msg.screens || [];
+      else if (msg.type === 'sba:current' && currentResolve) currentResolve(msg.id);
+      if (msg.type === 'sba:screens') visitAll();
+    }
+
+    async function visitAll() {
+      if (visiting) return;
+      visiting = true;
+      clearTimeout(helloTimer);
+      if (!screens.length) {
+        row('(app)', false, 'app registered but reported zero screens', 0);
+        return finish();
+      }
+      row('(boot)', errors.length === 0, errors[0] || null, 0);
+      for (const s of screens) {
+        const started = performance.now();
+        iframe.contentWindow.postMessage({ type: 'sba:go', id: s.id }, '*');
+        await new Promise((r) => {
+          currentResolve = r;
+          setTimeout(r, 700);
+        });
+        currentResolve = null;
+        await new Promise((r) => setTimeout(r, SETTLE_MS));
+        row(s.id, errors.length === 0, errors[0] || null, Math.round(performance.now() - started));
+      }
+      finish();
+    }
+
+    window.addEventListener('message', onMessage);
+    helloTimer = setTimeout(() => {
+      row('(boot)', false, 'app never registered (no sba:hello/screens within 20s)', 20000);
+      finish();
+    }, 20000);
+
+    iframe.addEventListener('load', () => {
+      if (f.meta.driver) {
+        injectAppRuntime(iframe, f.id, f.meta.driver, (failText) => {
+          errors.push(failText);
+        });
+      }
+    });
+    iframe.src = url(f.meta.src);
+  });
+}
+
+function esc(s) {
+  return String(s ?? '').replace(/[&<>"]/g, (c) => (
+    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]
+  ));
+}
+
+export async function runSelftest() {
+  const project = store.project;
+  const all = combos(project);
+
+  overlay.hidden = false;
+  overlay.innerHTML =
+    `<div class="st-card">
+      <div class="st-head"><h2>ScreenBook self-test</h2><span class="st-summary" id="st-summary">0 / ${all.length}</span></div>
+      <div class="st-progress"><i id="st-bar"></i></div>
+      <div class="st-rows" id="st-rows"></div>
+      <div class="st-foot">
+        <span class="st-note">screens × themes × light/dark × ltr/rtl · zero console errors · meta present</span>
+        <button class="btn-ghost" onclick="location.search=''">Close</button>
+      </div>
+    </div>`;
+  farm = document.createElement('div');
+  overlay.append(farm);
+
+  const rowsBox = document.getElementById('st-rows');
+  const summary = document.getElementById('st-summary');
+  const bar = document.getElementById('st-bar');
+  const results = [];
+  let done = 0;
+
+  function report(r) {
+    results.push(r);
+    done++;
+    summary.textContent = `${done}${done <= all.length ? ` / ${all.length}` : ' checks'}`;
+    bar.style.width = `${Math.min(100, (done / Math.max(1, all.length)) * 100)}%`;
+    if (!r.ok) {
+      const row = document.createElement('div');
+      row.className = 'st-row is-fail';
+      row.innerHTML =
+        `<span class="st-ico">✕</span><span class="st-name">${esc(r.feature)}/${esc(r.screen)}</span>` +
+        `<span class="st-combo">${esc(r.theme)} · ${esc(r.mode)} · ${esc(r.dir)}</span>` +
+        `<span class="st-err">${esc(r.fail || '')}</span>`;
+      rowsBox.append(row);
+    }
+  }
+
+  const queue = all.slice();
+  await Promise.all(Array.from({ length: CONCURRENCY }, async () => {
+    while (queue.length) {
+      const combo = queue.shift();
+      report(await runCombo(project, combo));
+    }
+  }));
+
+  /* embedded apps: boot each, then visit every screen it reports (EN-20 gate) */
+  for (const f of project.features.values()) {
+    if (f.type !== 'app') continue;
+    summary.textContent = `app: ${f.id}…`;
+    await runAppFeature(f, report);
+  }
+
+  const failed = results.filter((r) => !r.ok);
+  const passSummary = `${results.length - failed.length} / ${results.length} passed`;
+  summary.textContent = passSummary;
+  summary.classList.add(failed.length ? 'is-fail' : 'is-pass');
+  bar.style.background = failed.length ? 'var(--sb-danger)' : 'var(--sb-ok)';
+  if (!failed.length) {
+    const row = document.createElement('div');
+    row.className = 'st-row is-pass';
+    row.innerHTML = `<span class="st-ico">✓</span><span class="st-name">All screens green</span>` +
+      `<span class="st-combo">${results.length} render checks</span>`;
+    rowsBox.append(row);
+  }
+
+  const result = {
+    total: results.length,
+    passed: results.length - failed.length,
+    failed: failed.length,
+    screens: [...new Set(results.map((r) => `${r.feature}/${r.screen}`))].length,
+    rows: results
+  };
+  window.__selftestResult = result;
+  window.__selftestDone = true;
+  document.title = failed.length ? `✕ selftest — ${failed.length} failing` : '✓ selftest green';
+  return result;
+}