gods-eye-view/scripts/qa-map-source-controls.mjs

#!/usr/bin/env node
/** Browser acceptance for Map Source control lifecycle and truthful selection. */
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, ok) => {
  console.log(`[${ok ? 'PASS' : 'FAIL'}] ${name}`);
  if (!ok) failures++;
};
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(
    () => {
      const cover = document.getElementById('loading-screen');
      return (
        window.__godsEyeView?.styleManager?._mapSourceControls &&
        cover?.classList.contains('hidden') &&
        Number(getComputedStyle(cover).opacity) === 0
      );
    },
    { timeout: 60_000 },
  );
  await page.evaluate(() => {
    const manager = window.__godsEyeView.styleManager;
    const controller = manager.mapStackController;
    const original = controller.setStack;
    window.__qaMapSelections = [];
    controller.setStack = function (id) {
      window.__qaMapSelections.push(id);
      return original.call(this, id);
    };
    manager.setPanelCollapsed('control-panel', false, {
      persist: false,
      syncShare: false,
    });
  });
  await page.click('[data-stack-id="osm"]');
  await page.waitForFunction(
    () =>
      window.__godsEyeView.styleManager.mapStackController.getActiveId() ===
      'osm',
  );
  check(
    'a native chip click requests OSM exactly once',
    await page.evaluate(
      () =>
        window.__qaMapSelections.length === 1 &&
        window.__qaMapSelections[0] === 'osm',
    ),
  );
  check(
    'active chip and status follow the displayed OSM source',
    await page.evaluate(() => {
      const manager = window.__godsEyeView.styleManager;
      return (
        manager._mapStackChips.querySelector('[aria-pressed="true"]')?.dataset
          .stackId === 'osm' &&
        manager._mapStackStatus.textContent ===
          manager.mapStackController.getState().activeStack.shortLabel
      );
    }),
  );
  check(
    'the public map action uses the same component and truthful result',
    await page.evaluate(async () => {
      const manager = window.__godsEyeView.styleManager;
      const result = await manager.setMapStack('esri-imagery');
      const active = manager.mapStackController.getActiveId();
      return (
        window.__qaMapSelections.at(-1) === 'esri-imagery' &&
        manager._mapStackChips.querySelector('[aria-pressed="true"]')?.dataset
          .stackId === active &&
        (result.ok || !!manager.mapStackController.getState().lastError)
      );
    }),
  );
  check(
    'refresh revokes retained old chips',
    await page.evaluate(() => {
      const manager = window.__godsEyeView.styleManager;
      const old = manager._mapStackChips.querySelector('[data-stack-id="osm"]');
      manager._mapSourceControls.refresh();
      const before = window.__qaMapSelections.length;
      old.click();
      return window.__qaMapSelections.length === before;
    }),
  );
  check(
    'refreshed chips still select once',
    await page.evaluate(async () => {
      const manager = window.__godsEyeView.styleManager;
      const before = window.__qaMapSelections.length;
      manager._mapStackChips.querySelector('[data-stack-id="osm"]').click();
      await Promise.resolve();
      return window.__qaMapSelections.length === before + 1;
    }),
  );
  await page.waitForFunction(
    () =>
      window.__godsEyeView.styleManager.mapStackController.getActiveId() ===
      'osm',
  );
  fs.mkdirSync('qa-shots/map-source-controls', { recursive: true });
  await page.screenshot({ path: 'qa-shots/map-source-controls/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/map-source-controls/narrow.png' });
  check(
    'destroyed controls cannot issue requests from retained chips',
    await page.evaluate(async () => {
      const manager = window.__godsEyeView.styleManager;
      const before = window.__qaMapSelections.length;
      manager._mapSourceControls.destroy();
      manager._mapStackChips.querySelector('[data-stack-id="osm"]').click();
      const result = await manager._mapSourceControls.select('esri-imagery');
      return result === null && window.__qaMapSelections.length === before;
    }),
  );
  check('no uncaught browser errors', errors.length === 0);
  if (errors.length) console.log(JSON.stringify(errors));
} finally {
  await browser.close();
}
console.log(`RESULT: ${failures} failures`);
process.exitCode = failures ? 1 : 0;