gods-eye-view/scripts/qa-layer-handoff.mjs

import assert from 'node:assert/strict';
import { createStrict, localPreview } from './qa-strict-harness.mjs';

const url = localPreview(process.argv[2]);
const military = process.argv.includes('--military');
const layerId = military ? 'military' : 'flights';
const aircraftId = military ? 'aaa052' : '71be26';
url.search = '?engine=navara&welcome=0';
url.hash =
  'v=2&lat=40.2539&lon=-125.5779&alt=21130&heading=360&pitch=-35&map=sentinel2' +
  (military ? '&l=m&lo=f.e.1_f.u.aaa052' : '&l=f&lo=f.e.1_f.t.71be26');
// The Command Dock, and the Globe Engine picker in it, is hidden in cockpit
// mode: no person can pick an engine there, so the cockpit switches below go
// through the select element; the real picker is used once the cockpit is
// left.
const HIDDEN_PICKER = 'the Globe Engine picker is hidden in cockpit mode';
const strict = createStrict({ origin: url.origin, layers: [layerId] });
await strict.run(
  { args: ['--use-angle=metal', '--enable-gpu'] },
  async (browser) => {
    const page = await browser.newPage();
    const errors = [];
    page.on('pageerror', (e) => errors.push(e.message));
    await page.setViewport({ width: 1280, height: 720 });
    await page.evaluateOnNewDocument(
      (layerId, aircraftId) => {
        window.__qaAircraft = { layerId, aircraftId };
        const fetch = window.fetch.bind(window);
        window.__flightPolls = 0;
        const interval = window.setInterval.bind(window);
        window.setInterval = function (callback, delay, ...args) {
          if (typeof callback !== 'function')
            return interval(callback, delay, ...args);
          const id = interval(
            function (...values) {
              if (window.__handoff?.timer === id) window.__handoff.ticks++;
              return callback.apply(this, values);
            },
            delay,
            ...args,
          );
          return id;
        };
        window.fetch = (input, options) => {
          const path = new URL(input.url ?? input, document.baseURI).pathname;
          const now = Math.floor(Date.now() / 1000);
          if (path === '/api/flights') {
            if (layerId === 'flights') window.__flightPolls++;
            return Promise.resolve(
              Response.json({
                time: now,
                states: [
                  [
                    '71be26',
                    'GEV123',
                    'QA',
                    now,
                    now,
                    -125.5779,
                    40.2539,
                    9700,
                    false,
                    200,
                    45,
                    0,
                    null,
                    9700,
                    null,
                    false,
                    0,
                  ],
                ],
              }),
            );
          }
          if (path === '/api/military') {
            if (layerId === 'military') window.__flightPolls++;
            return Promise.resolve(
              Response.json({
                now: Date.now(),
                ac: [
                  {
                    hex: 'aaa052',
                    flight: 'GEVMIL',
                    lon: -125.5779,
                    lat: 40.2539,
                    alt_geom: 31825,
                    alt_baro: 31825,
                    gs: 389,
                    track: 45,
                    seen: 0,
                    seen_pos: 0,
                    dbFlags: 1,
                    type: 'adsb_icao',
                  },
                ],
              }),
            );
          }
          if (path === '/api/flights/track')
            return Promise.resolve(Response.json({ path: [] }));
          if (path.startsWith('/api/flights/'))
            return Promise.resolve(Response.json({}));
          return fetch(input, options);
        };
      },
      layerId,
      aircraftId,
    );
    await page.goto(url.href, { waitUntil: 'domcontentloaded' });
    const ready = (kind) =>
      page.waitForFunction(
        (engine) =>
          window.__godsEyeView?.engine?.kind === engine &&
          !document.querySelector('#globe-engine')?.disabled &&
          document.querySelector('#loading-screen.hidden') &&
          !document.querySelector('.engine-switch-frame'),
        { timeout: 90000 },
        kind,
      );
    await ready('navara');
    await page.evaluate(
      () => window.__godsEyeView.styleManager.initialRestorePromise,
    );
    await page.waitForSelector('#cockpit-entry', { visible: true });
    await page.click('#cockpit-entry');
    await page.waitForFunction(
      () => window.__godsEyeView.styleManager.getCockpitState().active,
    );
    await page.evaluate(() => {
      const { dataManager, styleManager, tileset } = window.__godsEyeView;
      if (window.__GOOGLE_MAPS_API_KEY__ || tileset)
        throw Error('Keyless preview required');
      styleManager.cockpitView.setVisionMode('thermal');
      const entry = dataManager.layers.get(window.__qaAircraft.layerId);
      window.__handoff = {
        dataManager,
        entry,
        row: document.querySelector(
          `[data-layer-id="${window.__qaAircraft.layerId}"] .data-toggle-btn`,
        ),
        timer: entry.intervalId,
        ticks: 0,
        model: entry.module,
        pollCount: window.__flightPolls,
        timestamp: entry.module.getStats().lastUpdate,
      };
    });
    // Refuse the first Cesium canvas. The application must roll back with the
    // original aircraft still in the cockpit, then allow an ordinary retry.
    await page.evaluate(() => {
      const original = HTMLCanvasElement.prototype.getContext;
      HTMLCanvasElement.prototype.getContext = function (type, ...args) {
        if (String(type).includes('webgl')) {
          window.__refusedContext = true;
          throw new Error('QA renderer startup failure');
        }
        return original.call(this, type, ...args);
      };
      window.__restoreContext = () => {
        HTMLCanvasElement.prototype.getContext = original;
      };
    });
    const historyLength = await page.evaluate(() => history.length);
    await strict.selectEngine(page, 'cesium', HIDDEN_PICKER);
    await page.waitForFunction(() => window.__refusedContext === true);
    await ready('navara');
    // A failed switch leaves the session usable on the engine that worked and
    // adds no history entry.
    const survived = (kind) =>
      page.evaluate(
        (kind, length) => {
          const { dataManager, engine, styleManager } = window.__godsEyeView;
          return (
            engine.kind === kind &&
            new URL(location.href).searchParams.get('engine') === kind &&
            history.length === length &&
            dataManager === window.__handoff.dataManager &&
            dataManager.layers.get(window.__qaAircraft.layerId) ===
              window.__handoff.entry &&
            styleManager.getCockpitState().active &&
            styleManager.getCockpitState().visionMode === 'thermal' &&
            styleManager.getAircraftTrackingTarget()?.id ===
              window.__qaAircraft.aircraftId
          );
        },
        kind,
        historyLength,
      );
    await page.evaluate(() => window.__restoreContext());
    await strict.check(
      page,
      layerId,
      'cold Cesium failure rolls back to Navara: same session, cockpit, aircraft, no history entry',
      await survived('navara'),
    );
    console.log(
      'PASS cold Cesium failure rolled back to Navara with the same flight, cockpit and history',
    );

    for (const kind of ['cesium', 'navara']) {
      await strict.selectEngine(page, kind, HIDDEN_PICKER);
      await ready(kind);
      const result = await page.evaluate(() => {
        const { dataManager, engine, styleManager } = window.__godsEyeView;
        const before = window.__handoff;
        const entry = dataManager.layers.get(window.__qaAircraft.layerId);
        const cockpit = styleManager.getCockpitState();
        return {
          sameOwner:
            before.dataManager === dataManager &&
            before.entry === entry &&
            before.model === entry.module,
          sameRow:
            Boolean(before.row) &&
            before.row ===
              document.querySelector(
                `[data-layer-id="${window.__qaAircraft.layerId}"] .data-toggle-btn`,
              ),
          sameTimer:
            before.timer === entry.intervalId && entry.intervalId != null,
          sourcePolls: window.__flightPolls - before.pollCount,
          timerTicks: before.ticks,
          stamp: entry.module.getStats().lastUpdate,
          initialStamp: before.timestamp,
          id: cockpit.subject?.id,
          active: cockpit.active,
          mode: cockpit.visionMode,
          hud: !document.querySelector('#cockpit-hud').hidden,
          drawn: entry.module
            .qaDrawn()
            .some((row) => row.id === window.__qaAircraft.aircraftId),
          height: engine.camera.height(),
        };
      });
      assert.ok(
        result.sameOwner &&
          result.sameTimer &&
          result.sameRow &&
          result.active &&
          result.hud &&
          result.drawn,
        JSON.stringify(result),
      );
      assert.equal(result.id, aircraftId);
      assert.equal(result.mode, 'thermal');
      assert.ok(
        result.sourcePolls <= result.timerTicks,
        'switch must not add a source request',
      );
      if (result.timerTicks === 0) {
        assert.equal(result.stamp, result.initialStamp);
      }
      await strict.passed(
        page,
        layerId,
        'same manager entry, model, row, poll timer, cockpit, thermal mode, HUD and drawn aircraft',
        result,
      );
      // Polling goes on after the switch: the same timer ticks and each tick
      // reads the source once (no tick may be skipped, none added).
      const polls = await page.evaluate(async (layerId) => {
        const entry = window.__godsEyeView.dataManager.layers.get(layerId);
        const every =
          Number(entry.module.refreshInterval) ||
          Number(entry.module.updateInterval);
        const start = {
          polls: window.__flightPolls,
          ticks: window.__handoff.ticks,
          stamp: entry.module.getStats().lastUpdate,
        };
        const deadline = Date.now() + 2.5 * every + 5000;
        while (
          window.__handoff.ticks - start.ticks < 2 &&
          Date.now() < deadline
        )
          await new Promise((resolve) => setTimeout(resolve, 250));
        // Let the last tick's request land.
        await new Promise((resolve) => setTimeout(resolve, 1500));
        return {
          every,
          ticks: window.__handoff.ticks - start.ticks,
          polls: window.__flightPolls - start.polls,
          updated: entry.module.getStats().lastUpdate !== start.stamp,
          sameTimer: entry.intervalId === window.__handoff.timer,
        };
      }, layerId);
      await strict.check(
        page,
        layerId,
        'polling continues after the switch: two timer ticks, one source read each, fresh data',
        polls.every > 0 &&
          polls.ticks >= 2 &&
          polls.polls === polls.ticks &&
          polls.updated &&
          polls.sameTimer,
        polls,
      );
      await page.waitForFunction(
        () =>
          Math.abs(window.__godsEyeView.engine.camera.height() - 9700) < 1000,
      );
      console.log(
        `PASS ${kind} cockpit, aircraft, HUD, manager and timer (${result.sourcePolls} polls since entry)`,
      );
    }
    // The other direction, warm: the parked Navara renderer fails to resume on
    // the way back from Cesium. The session rolls back to Cesium, then an
    // ordinary retry starts Navara cold.
    await page.evaluate(() => {
      window.__parkedNavara = window.__godsEyeView.engine;
    });
    await strict.selectEngine(page, 'cesium', HIDDEN_PICKER);
    await ready('cesium');
    const lengthOnCesium = await page.evaluate(() => {
      const request = window.__parkedNavara.render.request;
      window.__parkedNavara.render.request = function (...args) {
        window.__parkedNavara.render.request = request;
        window.__refusedResume = true;
        throw new Error('QA parked renderer failure');
      };
      return history.length;
    });
    await strict.selectEngine(page, 'navara', HIDDEN_PICKER);
    await page.waitForFunction(() => window.__refusedResume === true);
    await ready('cesium');
    assert.ok(
      (await page.evaluate(
        (length) => history.length === length,
        lengthOnCesium,
      )) &&
        (await page.evaluate(() => {
          const { styleManager } = window.__godsEyeView;
          return (
            styleManager.getCockpitState().active &&
            styleManager.getAircraftTrackingTarget()?.id ===
              window.__qaAircraft.aircraftId &&
            new URL(location.href).searchParams.get('engine') === 'cesium'
          );
        })),
      'a failed warm Navara resume must leave Cesium usable without a history entry',
    );
    await strict.passed(
      page,
      layerId,
      'warm Navara failure rolls back to Cesium: same aircraft and cockpit, no history entry',
    );
    console.log(
      'PASS warm Navara failure rolled back to Cesium with the same flight and cockpit',
    );
    await page.evaluate(() => {
      window.__parkedCesium = window.__godsEyeView.engine;
    });
    await strict.selectEngine(page, 'navara', HIDDEN_PICKER);
    await ready('navara');
    assert.ok(
      await page.evaluate(() => {
        const { engine, styleManager } = window.__godsEyeView;
        return (
          engine !== window.__parkedNavara &&
          styleManager.getCockpitState().active &&
          styleManager.getAircraftTrackingTarget()?.id ===
            window.__qaAircraft.aircraftId
        );
      }),
      'the retry starts a new Navara renderer on the same session',
    );
    console.log('PASS retry after the warm failure started Navara cold');

    // Both engines fail: the warm Cesium resume and the warm Navara recovery.
    // No engine runs, but the error screen offers the engine picker, and a
    // retry starts Cesium cold on the same session without a reload.
    const lengthBeforeDoubleFailure = await page.evaluate(() => {
      window.__failResume = true;
      for (const engine of [
        window.__godsEyeView.engine,
        window.__parkedCesium,
      ]) {
        const request = engine.render.request;
        engine.render.request = function (reason, ...args) {
          if (reason === 'engine-resume' && window.__failResume) {
            window.__refusedResumes = (window.__refusedResumes ?? 0) + 1;
            throw new Error('QA parked renderer failure');
          }
          return request.call(this, reason, ...args);
        };
      }
      window.__startDocument = document;
      return history.length;
    });
    await strict.selectEngine(page, 'cesium', HIDDEN_PICKER);
    await page
      .waitForSelector('#loading-screen .engine-switch-retry button', {
        visible: true,
        timeout: 90000,
      })
      .catch(async (error) => {
        console.log(
          'no retry picker',
          JSON.stringify(
            await page.evaluate(() => ({
              refused: window.__refusedResumes,
              engine: window.__godsEyeView?.engine?.kind ?? null,
              retry: !!document.querySelector('.engine-switch-retry'),
              loading: document.querySelector('#loading-screen')?.className,
              status: document.querySelector('#loading-screen .loader-status')
                ?.textContent,
              address: location.search,
            })),
          ),
        );
        throw error;
      });
    assert.ok(
      await page.evaluate(
        (length) =>
          window.__refusedResumes === 2 &&
          // No globe runs (the page's debug object may stay, without one).
          !window.__godsEyeView?.engine &&
          history.length === length &&
          !document
            .querySelector('#loading-screen')
            .classList.contains('hidden') &&
          /QA parked renderer failure/.test(
            document.querySelector('#loading-screen .loader-status')
              .textContent,
          ),
        lengthBeforeDoubleFailure,
      ),
      'a failed recovery shows its error and the engine picker ' +
        JSON.stringify(
          await page.evaluate(() => ({
            refused: window.__refusedResumes,
            app: !!window.__godsEyeView,
            engine: window.__godsEyeView?.engine?.kind ?? null,
            history: history.length,
            loading: document.querySelector('#loading-screen')?.className,
            status: document.querySelector('#loading-screen .loader-status')
              ?.textContent,
          })),
        ),
    );
    await page.evaluate(() => {
      window.__failResume = false;
    });
    await page.click(
      '#loading-screen .engine-switch-retry [data-engine="cesium"]',
    );
    await ready('cesium');
    assert.ok(
      await page.evaluate(() => {
        const { dataManager, styleManager } = window.__godsEyeView;
        return (
          window.__startDocument === document &&
          !document.querySelector('.engine-switch-retry') &&
          dataManager === window.__handoff.dataManager &&
          dataManager.layers.get(window.__qaAircraft.layerId) ===
            window.__handoff.entry &&
          styleManager.getCockpitState().active &&
          styleManager.getAircraftTrackingTarget()?.id ===
            window.__qaAircraft.aircraftId &&
          new URL(location.href).searchParams.get('engine') === 'cesium'
        );
      }),
      'the retry restores the same session on Cesium',
    );
    await strict.passed(
      page,
      layerId,
      'after both engines fail, the retry restores the same session',
    );
    console.log(
      'PASS failed recovery offered the picker; the retry restored the session on Cesium',
    );
    await page.evaluate(() =>
      window.__godsEyeView.styleManager.controlCockpit('exit'),
    );
    await page.waitForFunction(
      () => !window.__godsEyeView.styleManager.getCockpitState().active,
    );
    // Out of the cockpit the dock shows the picker again: a switch with
    // real input keeps the same entry and timer, the aircraft drawn, and the
    // source polled on its timer.
    await page.evaluate(() => {
      window.__handoff.ticks = 0;
      window.__handoff.pollCount = window.__flightPolls;
      window.__handoff.timer = window.__godsEyeView.dataManager.layers.get(
        window.__qaAircraft.layerId,
      ).intervalId;
    });
    await strict.pick(page, 'navara');
    await ready('navara');
    const after = await page.evaluate(async () => {
      const { dataManager } = window.__godsEyeView;
      const entry = dataManager.layers.get(window.__qaAircraft.layerId);
      const every =
        Number(entry.module.refreshInterval) ||
        Number(entry.module.updateInterval);
      const deadline = Date.now() + 2.5 * every + 5000;
      while (window.__handoff.ticks < 1 && Date.now() < deadline)
        await new Promise((resolve) => setTimeout(resolve, 250));
      await new Promise((resolve) => setTimeout(resolve, 1500));
      return {
        same:
          dataManager === window.__handoff.dataManager &&
          entry === window.__handoff.entry,
        timer: entry.intervalId === window.__handoff.timer,
        drawn: entry.module
          .qaDrawn()
          .some((row) => row.id === window.__qaAircraft.aircraftId),
        ticks: window.__handoff.ticks,
        polls: window.__flightPolls - window.__handoff.pollCount,
      };
    });
    await strict.check(
      page,
      layerId,
      'picker switch keeps the entry, timer and drawn aircraft; polling continues',
      after.same &&
        after.timer &&
        after.drawn &&
        after.ticks >= 1 &&
        after.polls === after.ticks,
      after,
    );
    assert.deepEqual(errors, []);
  },
);