refactor(ui): extract application shortcuts and parameter controls

scripts/qa-visual-input.mjs

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+/** Browser acceptance for application shortcuts and generated parameter controls. */
+import fs from 'node:fs';
+import puppeteer from 'puppeteer';
+
+const browser = await puppeteer.launch({
+  headless: true,
+  args: ['--no-sandbox', ...(process.platform === 'darwin' ? ['--use-angle=metal', '--enable-gpu'] : ['--use-gl=angle', '--use-angle=swiftshader'])],
+});
+const page = await browser.newPage();
+const errors = [];
+page.on('pageerror', (error) => errors.push(error.message));
+let failures = 0;
+const check = (name, passed) => {
+  console.log(`[${passed ? 'PASS' : 'FAIL'}] ${name}`);
+  if (!passed) failures += 1;
+};
+try {
+  await page.setViewport({ width: 1440, height: 900 });
+  const url = new URL(process.env.QA_BASE_URL || 'http://127.0.0.1:4173');
+  url.searchParams.set('welcome', '0');
+  await page.goto(url.href, { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => window.__godsEyeView?.styleManager?._applicationShortcuts, { timeout: 60_000 });
+  await page.waitForFunction(() => {
+    const cover = document.getElementById('loading-screen');
+    return cover?.classList.contains('hidden') && Number(getComputedStyle(cover).opacity) === 0;
+  }, { timeout: 60_000 });
+  await page.evaluate(() => {
+    const manager = window.__godsEyeView.styleManager;
+    manager.setStyle('normal');
+    document.activeElement?.blur();
+  });
+  await page.keyboard.press('2');
+  check('native number shortcut selects CRT', await page.evaluate(() => window.__godsEyeView.styleManager.activeStyle === 'retro'));
+  const initial = await page.evaluate(() => {
+    const manager = window.__godsEyeView.styleManager;
+    manager.setPanelCollapsed('pp-toggles', false, { persist: false, syncShare: false });
+    manager._sliderPanel.classList.remove('collapsed');
+    const slider = manager._sliderContainer.querySelector('input');
+    window.__qaOldSlider = slider;
+    const name = 'pixelation';
+    window.__qaParameter = { name, before: manager.stages.retro.uniforms[name] };
+    slider.focus();
+    return { before: Number(slider.value), step: Number(slider.step), label: slider.getAttribute('aria-label') };
+  });
+  check('generated range has an accessible label and a numeric step', initial.label === 'Pixelation' && initial.step > 0);
+  await page.keyboard.press('ArrowRight');
+  const changed = await page.evaluate(() => {
+    const slider = window.__qaOldSlider;
+    const manager = window.__godsEyeView.styleManager;
+    return { value: Number(slider.value), readout: slider.nextElementSibling.textContent, uniform: manager.stages.retro.uniforms[window.__qaParameter.name] };
+  });
+  check('native range input changes the shader and formatted readout', changed.value > initial.before && changed.uniform === changed.value && Number(changed.readout) === changed.value);
+  await page.keyboard.press('3');
+  check('focused range retains native input instead of changing style', await page.evaluate(() => window.__godsEyeView.styleManager.activeStyle === 'retro'));
+  check('replacing a style revokes its detached slider', await page.evaluate(() => {
+    const manager = window.__godsEyeView.styleManager;
+    const before = manager.stages.retro.uniforms[window.__qaParameter.name];
+    manager.setStyle('thermal');
+    window.__qaOldSlider.value = '0';
+    window.__qaOldSlider.dispatchEvent(new Event('input', { bubbles: true }));
+    return manager.stages.retro.uniforms[window.__qaParameter.name] === before;
+  }));
+  check('normal style clears rows; reopening restores current shader values', await page.evaluate(() => {
+    const manager = window.__godsEyeView.styleManager;
+    manager.setStyle('normal');
+    const cleared = manager._sliderContainer.children.length === 0;
+    manager.setStyle('retro');
+    return cleared && Number(manager._sliderContainer.querySelector('input').value) === manager.stages.retro.uniforms[window.__qaParameter.name];
+  }));
+  const hudBefore = await page.evaluate(() => {
+    document.getElementById('hud-layout-select').focus();
+    return window.__godsEyeView.styleManager.hud.visible;
+  });
+  await page.keyboard.press('h');
+  check('HUD select keeps its native typing and selection', await page.evaluate((visible) => document.activeElement?.id === 'hud-layout-select' && window.__godsEyeView.styleManager.hud.visible === visible, hudBefore));
+  fs.mkdirSync('qa-shots/visual-input', { recursive: true });
+  await page.screenshot({ path: 'qa-shots/visual-input/desktop.png' });
+  await page.setViewport({ width: 620, height: 900 });
+  await page.waitForFunction(() => document.getElementById('left-panel-stack')?.dataset.layoutMode === 'mobile');
+  await page.screenshot({ path: 'qa-shots/visual-input/narrow.png' });
+  await page.evaluate(() => {
+    const manager = window.__godsEyeView.styleManager;
+    window.__qaCurrentSlider = manager._sliderContainer.querySelector('input');
+    manager._applicationShortcuts.destroy();
+    manager._styleParameters.destroy();
+    document.activeElement?.blur();
+  });
+  await page.keyboard.press('3');
+  check('destroyed application shortcuts cannot change the selected style', await page.evaluate(() => window.__godsEyeView.styleManager.activeStyle === 'retro'));
+  check('destroyed parameter controls cannot write through a retained element', await page.evaluate(() => {
+    const manager = window.__godsEyeView.styleManager;
+    const before = manager.stages.retro.uniforms[window.__qaParameter.name];
+    window.__qaCurrentSlider.value = '0';
+    window.__qaCurrentSlider.dispatchEvent(new Event('input', { bubbles: true }));
+    return manager._sliderContainer.children.length === 0 && manager.stages.retro.uniforms[window.__qaParameter.name] === before;
+  }));
+  check('runtime has no uncaught browser errors', errors.length === 0);
+} finally {
+  await browser.close();
+}
+console.log(`RESULT: ${failures} failures`);
+process.exitCode = failures ? 1 : 0;