mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 18:34:02 +00:00
Bilawal Sidhu
9fc8d1966b
Supersedes #235 by @cora-fresh-labs, ported onto the current component layout with fixes from review. Verified before merge: format, package boundaries, unit suite, build, and the browser tracking suite; a browser harness for the change where one applies; adversarial review applied. Future work (not in this PR): hand-drawn marks do not persist across a reload today, and neither do spoken annotations; there is no storage layer for marks. The natural home is Scenes: a drawing that belongs to a shot and persists per shot, so a scene animation can carry its own marks. Needs an owner. Co-authored-by: Clint Borle <[email protected]>
877 lines
32 KiB
JavaScript
877 lines
32 KiB
JavaScript
#!/usr/bin/env node
|
|
/** Rendered acceptance for DISPLAY ▸ Draw: real clicks, real keys, real teardown. */
|
|
import fs from 'node:fs';
|
|
import path from 'node:path';
|
|
import puppeteer from 'puppeteer';
|
|
|
|
const BASE_URL = process.env.QA_BASE_URL || 'http://localhost:4173';
|
|
const SHOT_DIR = process.env.QA_SHOT_DIR || 'qa-shots/draw';
|
|
const SHOT_PREFIX = process.env.QA_SHOT_PREFIX || '';
|
|
const HEADFUL = process.env.QA_HEADFUL === '1';
|
|
// A dense, recognisable grid: neighbourhood blocks to enclose and a straight
|
|
// road to trace along.
|
|
const VIEW = {
|
|
lon: -122.4194,
|
|
lat: 37.7749,
|
|
height: 900,
|
|
heading: 0,
|
|
pitch: -85,
|
|
};
|
|
|
|
const browser = await puppeteer.launch({
|
|
headless: !HEADFUL,
|
|
...(HEADFUL
|
|
? {
|
|
executablePath:
|
|
'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
|
|
}
|
|
: {}),
|
|
args: [
|
|
'--no-sandbox',
|
|
'--disable-background-timer-throttling',
|
|
'--disable-renderer-backgrounding',
|
|
...(HEADFUL ? ['--window-size=1280,860'] : []),
|
|
...(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(`pageerror: ${error.message}`));
|
|
let failures = 0;
|
|
function check(name, passed, detail = '') {
|
|
console.log(
|
|
`[${passed ? 'PASS' : 'FAIL'}] ${name}${detail ? ` — ${detail}` : ''}`,
|
|
);
|
|
if (!passed) failures++;
|
|
}
|
|
fs.mkdirSync(SHOT_DIR, { recursive: true });
|
|
const shot = (name) =>
|
|
page.screenshot({
|
|
path: path.join(SHOT_DIR, `${SHOT_PREFIX}${name}.jpg`),
|
|
type: 'jpeg',
|
|
quality: 82,
|
|
});
|
|
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
|
|
/** A clip of the globe canvas, clear of the panels on every side. */
|
|
const CANVAS_CLIP = { x: 340, y: 200, width: 560, height: 380 };
|
|
|
|
/**
|
|
* How many amber pixels the clip contains. The drawn area's stroke and fill are
|
|
* the only amber in this scene, so the count going UP after a shape is finished
|
|
* is the shape actually painting — which is what CESIUM_3D_TILE-only
|
|
* classification failed to do on a keyless boot while still reporting a mark on
|
|
* the board. Decoding happens in the page because Node here has no image
|
|
* decoder.
|
|
*/
|
|
async function amberPixels() {
|
|
const shot64 = await page.screenshot({
|
|
clip: CANVAS_CLIP,
|
|
type: 'png',
|
|
encoding: 'base64',
|
|
});
|
|
return page.evaluate(async (base64) => {
|
|
const bitmap = await createImageBitmap(
|
|
await (await fetch(`data:image/png;base64,${base64}`)).blob(),
|
|
);
|
|
const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
|
|
const context = canvas.getContext('2d');
|
|
context.drawImage(bitmap, 0, 0);
|
|
const { data } = context.getImageData(0, 0, bitmap.width, bitmap.height);
|
|
let amber = 0;
|
|
for (let i = 0; i < data.length; i += 4) {
|
|
const r = data[i];
|
|
const g = data[i + 1];
|
|
const b = data[i + 2];
|
|
// Warm and saturated: the amber mark (#ffb547) blended over imagery.
|
|
if (r > 150 && g > 90 && g < 220 && b < 130 && r - b > 70 && r - g > 20)
|
|
amber += 1;
|
|
}
|
|
return amber;
|
|
}, shot64);
|
|
}
|
|
|
|
/**
|
|
* Press Enter as the person drawing does — with the map focused, not a button.
|
|
* Enter on a focused control means "press this control", so the tool ignores it
|
|
* there; the harness has to move focus the way a user would before using the
|
|
* finish key.
|
|
*/
|
|
async function pressFinish() {
|
|
await page.evaluate(() => document.activeElement?.blur?.());
|
|
await page.keyboard.press('Enter');
|
|
}
|
|
|
|
/** One click on the globe canvas, the way a person makes one. */
|
|
async function clickWorld(x, y, options = {}) {
|
|
await page.mouse.click(x, y, options);
|
|
await wait(options.settle ?? 140);
|
|
}
|
|
|
|
const drawState = () =>
|
|
page.evaluate(() => {
|
|
const tool = window.__gevDrawTool;
|
|
return {
|
|
...tool.diagnostics(),
|
|
shape: tool.shape,
|
|
vertices: tool.session?.vertices?.length ?? null,
|
|
hint: document.getElementById('draw-hint')?.textContent || '',
|
|
marks: window.__gevAnnotations.count(),
|
|
};
|
|
});
|
|
|
|
const marks = () =>
|
|
page.evaluate(() =>
|
|
window.__gevAnnotations.list().map((mark) => ({
|
|
type: mark.type,
|
|
label: mark.label,
|
|
color: mark.color,
|
|
source: mark.source ?? null,
|
|
})),
|
|
);
|
|
|
|
/** Wait until the board has settled at `expected` marks (annotate is async). */
|
|
async function waitForMarks(expected, timeout = 15_000) {
|
|
try {
|
|
await page.waitForFunction(
|
|
(want) => window.__gevAnnotations.count() === want,
|
|
{ timeout },
|
|
expected,
|
|
);
|
|
return true;
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
try {
|
|
await page.setViewport({ width: 1280, height: 860 });
|
|
await page.goto(`${BASE_URL}/?welcome=0`, { waitUntil: 'domcontentloaded' });
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__gevDrawTool &&
|
|
window.__gevAnnotations &&
|
|
document.getElementById('loading-screen')?.classList.contains('hidden'),
|
|
{ timeout: 90_000 },
|
|
);
|
|
await page.evaluate((view) => {
|
|
const viewer = window.__godsEyeView.viewer;
|
|
viewer.camera.cancelFlight?.();
|
|
viewer.scene.tweens?.removeAll?.();
|
|
viewer.camera.setView({
|
|
destination: viewer.scene.globe.ellipsoid.cartographicToCartesian({
|
|
longitude: (view.lon * Math.PI) / 180,
|
|
latitude: (view.lat * Math.PI) / 180,
|
|
height: view.height,
|
|
}),
|
|
orientation: {
|
|
heading: (view.heading * Math.PI) / 180,
|
|
pitch: (view.pitch * Math.PI) / 180,
|
|
roll: 0,
|
|
},
|
|
});
|
|
viewer.scene.requestRender();
|
|
}, VIEW);
|
|
const settled = await page
|
|
.waitForFunction(
|
|
() => {
|
|
const primitives = window.__godsEyeView.viewer.scene.primitives;
|
|
for (let index = 0; index < primitives.length; index++) {
|
|
const primitive = primitives.get(index);
|
|
if (
|
|
typeof primitive.tilesLoaded === 'boolean' &&
|
|
!primitive.tilesLoaded
|
|
)
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
{ timeout: 90_000 },
|
|
)
|
|
.then(
|
|
() => true,
|
|
() => false,
|
|
);
|
|
check('visible tile content settles before drawing', settled);
|
|
|
|
// The DISPLAY rail starts collapsed on a first run: open it the way a user does.
|
|
await page.evaluate(() => {
|
|
const rail = document.getElementById('pp-toggles');
|
|
if (rail?.classList.contains('collapsed'))
|
|
document
|
|
.querySelector('.panel-collapse-btn[data-collapse-target="pp-toggles"]')
|
|
?.click();
|
|
});
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.getElementById('draw-toggle')?.getBoundingClientRect().width > 0,
|
|
{ timeout: 10_000 },
|
|
);
|
|
check(
|
|
'the Draw control is on the DISPLAY rail and starts off',
|
|
await page.evaluate(() => {
|
|
const toggle = document.getElementById('draw-toggle');
|
|
return (
|
|
toggle?.getAttribute('aria-pressed') === 'false' &&
|
|
!document.getElementById('draw-mode-row')?.classList.contains('visible')
|
|
);
|
|
}),
|
|
);
|
|
|
|
// The viewer's OWN click actions, captured before the tool ever runs. Both
|
|
// must be absent while drawing and back — as the SAME functions — after.
|
|
await page.evaluate(() => {
|
|
const Cesium = window.__CESIUM__;
|
|
const stock = window.__godsEyeView.viewer.screenSpaceEventHandler;
|
|
window.__qaStock = {
|
|
click:
|
|
stock.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) || null,
|
|
double:
|
|
stock.getInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) ||
|
|
null,
|
|
};
|
|
});
|
|
const stockActions = () =>
|
|
page.evaluate(() => {
|
|
const Cesium = window.__CESIUM__;
|
|
const stock = window.__godsEyeView.viewer.screenSpaceEventHandler;
|
|
const live = {
|
|
click:
|
|
stock.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) || null,
|
|
double:
|
|
stock.getInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) ||
|
|
null,
|
|
};
|
|
return {
|
|
clickPresent: Boolean(live.click),
|
|
doublePresent: Boolean(live.double),
|
|
clickIsOriginal: live.click === window.__qaStock.click,
|
|
doubleIsOriginal: live.double === window.__qaStock.double,
|
|
hadClick: Boolean(window.__qaStock.click),
|
|
hadDouble: Boolean(window.__qaStock.double),
|
|
};
|
|
});
|
|
|
|
// ── enable / disable cycles leave nothing behind ────────────────────────
|
|
const before = await drawState();
|
|
for (let cycle = 0; cycle < 3; cycle += 1) {
|
|
await page.click('#draw-toggle');
|
|
await wait(120);
|
|
await page.click('#draw-toggle');
|
|
await wait(120);
|
|
}
|
|
const after = await drawState();
|
|
check(
|
|
'three enable/disable cycles add no listener, handler or preview data source',
|
|
after.domListeners === before.domListeners &&
|
|
after.previewDataSources === 1 &&
|
|
before.previewDataSources === 1 &&
|
|
after.sceneHandler === false &&
|
|
after.pointerOwner === null &&
|
|
after.stockDoubleClick === before.stockDoubleClick,
|
|
`listeners ${before.domListeners}→${after.domListeners}, previews ${after.previewDataSources}, ` +
|
|
`handler ${after.sceneHandler}, owner ${after.pointerOwner}, stock dblclick ${after.stockDoubleClick}`,
|
|
);
|
|
|
|
// ── the viewer's own click actions are borrowed, then given back ────────
|
|
await page.click('#draw-toggle');
|
|
const duringDraw = await stockActions();
|
|
check(
|
|
"Cesium's own selecting click and tracking double-click are both borrowed while drawing",
|
|
duringDraw.clickPresent === false && duringDraw.doublePresent === false,
|
|
`click present ${duringDraw.clickPresent}, double present ${duringDraw.doublePresent} ` +
|
|
`(viewer had click ${duringDraw.hadClick}, double ${duringDraw.hadDouble})`,
|
|
);
|
|
await page.click('#draw-toggle');
|
|
const afterDraw = await stockActions();
|
|
check(
|
|
'and both are restored as the SAME functions, not replacements',
|
|
afterDraw.clickPresent === duringDraw.hadClick &&
|
|
afterDraw.doublePresent === duringDraw.hadDouble &&
|
|
afterDraw.clickIsOriginal &&
|
|
afterDraw.doubleIsOriginal,
|
|
JSON.stringify(afterDraw),
|
|
);
|
|
|
|
// ── a pin, finished with Enter ──────────────────────────────────────────
|
|
await page.click('#draw-toggle');
|
|
await page.click('.pp-mode-btn[data-shape="pin"]');
|
|
await page.click('#draw-label-input');
|
|
await page.keyboard.type('Pin one');
|
|
await clickWorld(520, 330);
|
|
check(
|
|
'the pointer is claimed while a session is open',
|
|
(await drawState()).pointerOwner === 'draw',
|
|
);
|
|
await page.keyboard.press('Enter');
|
|
check(
|
|
'a pin placed by mouse and finished with Enter lands on the board',
|
|
await waitForMarks(1),
|
|
);
|
|
|
|
// ── a line along a road, with Backspace ─────────────────────────────────
|
|
await page.click('.pp-mode-btn[data-shape="line"]');
|
|
await clickWorld(360, 300);
|
|
await clickWorld(470, 380);
|
|
await clickWorld(600, 470);
|
|
const beforeBackspace = (await drawState()).vertices;
|
|
await page.keyboard.press('Backspace');
|
|
await wait(120);
|
|
const afterBackspace = (await drawState()).vertices;
|
|
check(
|
|
'Backspace removes the last vertex only',
|
|
beforeBackspace === 3 && afterBackspace === 2,
|
|
`${beforeBackspace} → ${afterBackspace}`,
|
|
);
|
|
await clickWorld(640, 500);
|
|
await page.click('#draw-label-input');
|
|
await page.keyboard.type('Market St');
|
|
await page.keyboard.press('Enter');
|
|
check(
|
|
'a line finished from the label field lands on the board',
|
|
await waitForMarks(2),
|
|
);
|
|
const lineMark = (await marks()).find((mark) =>
|
|
mark.label?.startsWith('Market St'),
|
|
);
|
|
check(
|
|
'a drawn line reports its length and never a travel time',
|
|
Boolean(lineMark) &&
|
|
/\d/.test(lineMark.label) &&
|
|
!/min|walk|drive/i.test(lineMark.label),
|
|
lineMark?.label,
|
|
);
|
|
await shot('02-line-along-a-road');
|
|
|
|
// ── an area, coloured and labelled, finished with a double-click ────────
|
|
await page.click('.pp-mode-btn[data-shape="area"]');
|
|
await page.select('#draw-color-select', 'amber');
|
|
const amberBefore = await amberPixels();
|
|
await page.click('#draw-label-input');
|
|
await page.keyboard.type('Civic Center block');
|
|
await clickWorld(400, 280);
|
|
await clickWorld(700, 290);
|
|
await clickWorld(720, 520);
|
|
await clickWorld(410, 500);
|
|
const areaVertices = (await drawState()).vertices;
|
|
check(
|
|
'four clicks on the globe are four vertices',
|
|
areaVertices === 4,
|
|
`${areaVertices} vertices`,
|
|
);
|
|
await page.mouse.click(410, 500, { count: 2 });
|
|
const areaLanded = await waitForMarks(3);
|
|
await wait(900);
|
|
const afterDoubleClick = await page.evaluate(() =>
|
|
window.__gevAnnotations.count(),
|
|
);
|
|
check('an area finished by double-click lands on the board', areaLanded);
|
|
check(
|
|
'a double-click finishes the shape exactly once',
|
|
afterDoubleClick === 3,
|
|
`${afterDoubleClick} marks`,
|
|
);
|
|
const areaMark = (await marks()).find(
|
|
(mark) => mark.label === 'Civic Center block',
|
|
);
|
|
check(
|
|
'the label and colour chosen in the panel are what is drawn',
|
|
areaMark?.color === 'amber',
|
|
JSON.stringify(areaMark),
|
|
);
|
|
await wait(1200);
|
|
const amberAfter = await amberPixels();
|
|
check(
|
|
'the finished area actually PAINTS — amber pixels appear on this surface',
|
|
amberAfter - amberBefore > 500,
|
|
`${amberBefore} → ${amberAfter} amber pixels (+${amberAfter - amberBefore})`,
|
|
);
|
|
await shot('01-area-with-label');
|
|
await shot('03-pins-and-shapes');
|
|
|
|
// ── Escape cancels the shape, a second Escape leaves draw mode ──────────
|
|
await page.evaluate(() => window.__gevDrawTool.cancel());
|
|
await clickWorld(500, 300);
|
|
await clickWorld(560, 340);
|
|
check('a new shape is in progress', (await drawState()).vertices === 2);
|
|
await page.keyboard.press('Escape');
|
|
await wait(150);
|
|
const afterFirstEscape = await drawState();
|
|
check(
|
|
'Escape cancels the shape in progress and stays in draw mode',
|
|
afterFirstEscape.vertices === 0 && afterFirstEscape.active === true,
|
|
`vertices ${afterFirstEscape.vertices}, active ${afterFirstEscape.active}`,
|
|
);
|
|
await page.keyboard.press('Escape');
|
|
await wait(150);
|
|
const afterSecondEscape = await drawState();
|
|
check(
|
|
'a second Escape leaves draw mode and gives the pointer back',
|
|
afterSecondEscape.active === false &&
|
|
afterSecondEscape.pointerOwner === null &&
|
|
afterSecondEscape.sceneHandler === false,
|
|
JSON.stringify(afterSecondEscape),
|
|
);
|
|
check(
|
|
'cancelling never removes a mark already on the board',
|
|
afterSecondEscape.marks === 3,
|
|
`${afterSecondEscape.marks} marks`,
|
|
);
|
|
|
|
// ── a click that would select something selects nothing while drawing ───
|
|
const target = await findClickableTarget();
|
|
check(
|
|
'a selectable layer entity is on screen to test click ownership against',
|
|
Boolean(target),
|
|
target
|
|
? `${target.layer} at ${target.x},${target.y}`
|
|
: 'no CCTV camera or bundled site could be reached — the ownership case cannot be proved',
|
|
);
|
|
if (target) {
|
|
await clickWorld(target.x, target.y, { settle: 900 });
|
|
const selectedNormally = await page.evaluate(() =>
|
|
Boolean(window.__godsEyeView.viewer.selectedEntity),
|
|
);
|
|
check(
|
|
`clicking a ${target.layer} selects it when nothing owns the pointer`,
|
|
selectedNormally,
|
|
);
|
|
await page.evaluate(() => {
|
|
window.__godsEyeView.viewer.selectedEntity = undefined;
|
|
});
|
|
await page.click('#draw-toggle');
|
|
await page.click('.pp-mode-btn[data-shape="area"]');
|
|
await clickWorld(target.x, target.y, { settle: 900 });
|
|
const whileDrawing = await drawState();
|
|
const selectedWhileDrawing = await page.evaluate(() =>
|
|
Boolean(window.__godsEyeView.viewer.selectedEntity),
|
|
);
|
|
check(
|
|
`clicking the same ${target.layer} while drawing adds a vertex and selects nothing`,
|
|
whileDrawing.vertices === 1 && selectedWhileDrawing === false,
|
|
`vertices ${whileDrawing.vertices}, selected ${selectedWhileDrawing}`,
|
|
);
|
|
await page.keyboard.press('Escape');
|
|
await page.keyboard.press('Escape');
|
|
await wait(150);
|
|
}
|
|
|
|
// ── what a reload actually does ─────────────────────────────────────────
|
|
const beforeReload = await page.evaluate(() =>
|
|
window.__gevAnnotations.count(),
|
|
);
|
|
await page.reload({ waitUntil: 'domcontentloaded' });
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__gevAnnotations &&
|
|
document.getElementById('loading-screen')?.classList.contains('hidden'),
|
|
{ timeout: 90_000 },
|
|
);
|
|
const afterReload = await page.evaluate(() =>
|
|
window.__gevAnnotations.count(),
|
|
);
|
|
check(
|
|
'a reload starts an empty board — marks live for the session, not across reloads',
|
|
beforeReload > 0 && afterReload === 0,
|
|
`${beforeReload} before, ${afterReload} after`,
|
|
);
|
|
|
|
// ── Clear wipes the board ───────────────────────────────────────────────
|
|
await page.evaluate(() => {
|
|
const rail = document.getElementById('pp-toggles');
|
|
if (rail?.classList.contains('collapsed'))
|
|
document
|
|
.querySelector('.panel-collapse-btn[data-collapse-target="pp-toggles"]')
|
|
?.click();
|
|
});
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.getElementById('draw-toggle')?.getBoundingClientRect().width > 0,
|
|
{ timeout: 10_000 },
|
|
);
|
|
// The reload built a new page context: re-capture the viewer's own click
|
|
// actions so the identity comparisons below still mean something.
|
|
await page.evaluate(() => {
|
|
const Cesium = window.__CESIUM__;
|
|
const stock = window.__godsEyeView.viewer.screenSpaceEventHandler;
|
|
window.__qaStock = {
|
|
click:
|
|
stock.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) || null,
|
|
double:
|
|
stock.getInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) ||
|
|
null,
|
|
};
|
|
});
|
|
await page.evaluate((view) => {
|
|
const viewer = window.__godsEyeView.viewer;
|
|
viewer.camera.cancelFlight?.();
|
|
viewer.camera.setView({
|
|
destination: viewer.scene.globe.ellipsoid.cartographicToCartesian({
|
|
longitude: (view.lon * Math.PI) / 180,
|
|
latitude: (view.lat * Math.PI) / 180,
|
|
height: view.height,
|
|
}),
|
|
orientation: { heading: 0, pitch: (view.pitch * Math.PI) / 180, roll: 0 },
|
|
});
|
|
}, VIEW);
|
|
await wait(2500);
|
|
await page.click('#draw-toggle');
|
|
await page.click('.pp-mode-btn[data-shape="area"]');
|
|
await clickWorld(420, 280);
|
|
await clickWorld(700, 300);
|
|
await clickWorld(660, 520);
|
|
await pressFinish();
|
|
const drewAgain = await waitForMarks(1);
|
|
check('a shape can be drawn again after a reload', drewAgain);
|
|
|
|
// Enter belongs to whatever the keyboard is on. With Clear focused it must
|
|
// PRESS CLEAR — the shape in progress goes, and so does the mark already on
|
|
// the board — and it must NOT quietly finish a second shape.
|
|
await clickWorld(430, 300);
|
|
await clickWorld(690, 320);
|
|
await clickWorld(670, 500);
|
|
const beforeButtonEnter = await drawState();
|
|
await page.focus('#draw-clear');
|
|
await page.keyboard.press('Enter');
|
|
await wait(600);
|
|
const afterButtonEnter = await drawState();
|
|
check(
|
|
'Enter on a keyboard-focused button activates the button, it does not finish the shape',
|
|
beforeButtonEnter.vertices === 3 &&
|
|
beforeButtonEnter.marks === 1 &&
|
|
afterButtonEnter.marks === 0 &&
|
|
afterButtonEnter.vertices === 0,
|
|
`before ${beforeButtonEnter.vertices} vertices / ${beforeButtonEnter.marks} marks, ` +
|
|
`after ${afterButtonEnter.vertices} / ${afterButtonEnter.marks} ` +
|
|
'(a finish would have made it 2 marks)',
|
|
);
|
|
|
|
// Put one back so the Clear BUTTON check below has something to remove.
|
|
await clickWorld(420, 280);
|
|
await clickWorld(700, 300);
|
|
await clickWorld(660, 520);
|
|
await pressFinish();
|
|
check(
|
|
'a shape can be drawn after the board was cleared from the keyboard',
|
|
await waitForMarks(1),
|
|
);
|
|
await page.click('#draw-clear');
|
|
await wait(400);
|
|
const cleared = await drawState();
|
|
check(
|
|
'Clear removes every mark from the board',
|
|
cleared.marks === 0,
|
|
`${cleared.marks} marks left`,
|
|
);
|
|
await shot('04-after-clear');
|
|
|
|
// ── a shape that describes nothing is refused, not placed ───────────────
|
|
const degenerateVertices = await page.evaluate(() => {
|
|
const tool = window.__gevDrawTool;
|
|
tool.cancel();
|
|
// Three points on one line, placed through the same addVertex the clicks use.
|
|
tool.addVertex(-122.42, 37.77);
|
|
tool.addVertex(-122.42, 37.771);
|
|
tool.addVertex(-122.42, 37.772);
|
|
return tool.session?.vertices?.length ?? null;
|
|
});
|
|
check(
|
|
'three collinear vertices are accepted into the session',
|
|
degenerateVertices === 3,
|
|
`${degenerateVertices} vertices`,
|
|
);
|
|
await pressFinish();
|
|
await wait(600);
|
|
const degenerate = await drawState();
|
|
check(
|
|
'three points in a line are refused with a reason, not placed',
|
|
degenerate.marks === 0 && /in a line/.test(degenerate.hint),
|
|
`${degenerate.marks} marks, hint "${degenerate.hint}"`,
|
|
);
|
|
|
|
// ── a shape drawn across the antimeridian lands where it was drawn ──────
|
|
await page.evaluate(() => {
|
|
const viewer = window.__godsEyeView.viewer;
|
|
viewer.camera.cancelFlight?.();
|
|
viewer.camera.setView({
|
|
destination: viewer.scene.globe.ellipsoid.cartographicToCartesian({
|
|
longitude: (179.9995 * Math.PI) / 180,
|
|
latitude: 0,
|
|
height: 3000,
|
|
}),
|
|
orientation: { heading: 0, pitch: (-88 * Math.PI) / 180, roll: 0 },
|
|
});
|
|
viewer.scene.requestRender();
|
|
});
|
|
await wait(2500);
|
|
await page.evaluate(() => {
|
|
const tool = window.__gevDrawTool;
|
|
tool.cancel();
|
|
tool.setShape('area');
|
|
// A ~200 m square straddling 180.
|
|
tool.addVertex(179.999, -0.001);
|
|
tool.addVertex(-179.999, -0.001);
|
|
tool.addVertex(-179.999, 0.001);
|
|
tool.addVertex(179.999, 0.001);
|
|
});
|
|
await pressFinish();
|
|
const datelineLanded = await waitForMarks(1);
|
|
const datelineAnchor = await page.evaluate(() => {
|
|
const mark = window.__gevAnnotations.list()[0];
|
|
return mark ? { lon: mark.anchor?.lon, lat: mark.anchor?.lat } : null;
|
|
});
|
|
check(
|
|
'a shape drawn across the antimeridian anchors there, not on the Greenwich meridian',
|
|
datelineLanded &&
|
|
datelineAnchor &&
|
|
Math.abs(Math.abs(datelineAnchor.lon) - 180) < 0.1 &&
|
|
Math.abs(datelineAnchor.lat) < 0.1,
|
|
JSON.stringify(datelineAnchor),
|
|
);
|
|
await page.evaluate(() => window.__gevAnnotations.clear());
|
|
|
|
await page.click('#draw-toggle');
|
|
await wait(200);
|
|
const finalState = await drawState();
|
|
check(
|
|
'leaving draw mode gives back the pointer, the handler and the double-click',
|
|
finalState.active === false &&
|
|
finalState.pointerOwner === null &&
|
|
finalState.sceneHandler === false &&
|
|
finalState.previewDataSources === 1,
|
|
JSON.stringify(finalState),
|
|
);
|
|
// ── destroy(): the shell disposing the tool leaves nothing behind ───────
|
|
const beforeDestroy = await page.evaluate(
|
|
() => window.__godsEyeView.viewer.dataSources.length,
|
|
);
|
|
await page.click('#draw-toggle'); // destroy from an ACTIVE session: the harder case
|
|
await wait(200);
|
|
const destroyed = await page.evaluate(async () => {
|
|
const tool = window.__gevDrawTool;
|
|
const wasActive = tool.active;
|
|
await tool.destroy();
|
|
await new Promise((resolve) => setTimeout(resolve, 50));
|
|
const Cesium = window.__CESIUM__;
|
|
const viewer = window.__godsEyeView.viewer;
|
|
const stock = viewer.screenSpaceEventHandler;
|
|
let previews = 0;
|
|
for (let i = 0; i < viewer.dataSources.length; i += 1)
|
|
if (viewer.dataSources.get(i)?.name === 'gev-draw-preview') previews += 1;
|
|
return {
|
|
wasActive,
|
|
diagnostics: tool.diagnostics(),
|
|
previews,
|
|
dataSources: viewer.dataSources.length,
|
|
handleGone: window.__gevDrawTool === undefined,
|
|
clickRestored:
|
|
stock.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) ===
|
|
window.__qaStock.click,
|
|
doubleRestored:
|
|
stock.getInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) ===
|
|
window.__qaStock.double,
|
|
drawingClass: document.body.classList.contains('gev-drawing'),
|
|
};
|
|
});
|
|
check(
|
|
'destroy() from an active session releases the pointer, handler and listeners',
|
|
destroyed.wasActive === true &&
|
|
destroyed.diagnostics.destroyed === true &&
|
|
destroyed.diagnostics.pointerOwner === null &&
|
|
destroyed.diagnostics.sceneHandler === false &&
|
|
destroyed.diagnostics.domListeners === 0 &&
|
|
destroyed.drawingClass === false,
|
|
JSON.stringify(destroyed.diagnostics),
|
|
);
|
|
check(
|
|
'destroy() detaches the preview data source and gives the window handle back',
|
|
destroyed.previews === 0 &&
|
|
destroyed.dataSources === beforeDestroy - 1 &&
|
|
destroyed.handleGone,
|
|
`previews ${destroyed.previews}, dataSources ${beforeDestroy} → ${destroyed.dataSources}, handle gone ${destroyed.handleGone}`,
|
|
);
|
|
check(
|
|
"destroy() returns Cesium's own click actions",
|
|
destroyed.clickRestored && destroyed.doubleRestored,
|
|
`click ${destroyed.clickRestored}, double ${destroyed.doubleRestored}`,
|
|
);
|
|
|
|
check(
|
|
'no uncaught page errors across the run',
|
|
errors.length === 0,
|
|
errors.join(' | '),
|
|
);
|
|
} finally {
|
|
await browser.close();
|
|
}
|
|
console.log(`RESULT: ${failures} failures`);
|
|
process.exitCode = failures ? 1 : 0;
|
|
|
|
/**
|
|
* Find something on screen that a layer would select on click, so the ownership
|
|
* guard can be proved against a real selection rather than a stub. Bundled
|
|
* infrastructure first (no network, works keyless); CCTV cameras if they are up.
|
|
*/
|
|
async function findClickableTarget() {
|
|
// CCTV first: it is the layer the brief names, and it goes through the shared
|
|
// tracking click gesture that flights and military use too.
|
|
const camera = await page
|
|
.evaluate(async () => {
|
|
const manager = window.__godsEyeView.dataManager;
|
|
await manager.setEnabled('cctv', true, { origin: 'user' });
|
|
const module = manager.layers.get('cctv')?.module;
|
|
if (!module?.getUIState) return null;
|
|
for (let attempt = 0; attempt < 40; attempt += 1) {
|
|
const cameras = module.getUIState()?.cameras || [];
|
|
const found = cameras.find((entry) => {
|
|
const lat = entry.lat ?? entry.latitude;
|
|
const lon = entry.lon ?? entry.longitude;
|
|
return Number.isFinite(lat) && Number.isFinite(lon);
|
|
});
|
|
if (found)
|
|
return {
|
|
id: found.id,
|
|
lat: found.lat ?? found.latitude,
|
|
lon: found.lon ?? found.longitude,
|
|
};
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
}
|
|
return null;
|
|
})
|
|
.catch(() => null);
|
|
|
|
if (camera) {
|
|
await page.evaluate((spot) => {
|
|
const viewer = window.__godsEyeView.viewer;
|
|
viewer.camera.cancelFlight?.();
|
|
viewer.camera.setView({
|
|
destination: viewer.scene.globe.ellipsoid.cartographicToCartesian({
|
|
longitude: (spot.lon * Math.PI) / 180,
|
|
latitude: (spot.lat * Math.PI) / 180,
|
|
height: 600,
|
|
}),
|
|
orientation: { heading: 0, pitch: (-80 * Math.PI) / 180, roll: 0 },
|
|
});
|
|
viewer.scene.requestRender();
|
|
}, camera);
|
|
await wait(4000);
|
|
const spot = await onScreen(
|
|
(entity) => typeof entity.id === 'string' && entity.id.startsWith('CAM-'),
|
|
);
|
|
if (spot) return { ...spot, layer: 'CCTV camera' };
|
|
}
|
|
|
|
// Bundled infrastructure as the keyless fallback: a different guarded handler,
|
|
// the same shared claim, and always present without a key.
|
|
const site = await page
|
|
.evaluate(async () => {
|
|
const viewer = window.__godsEyeView.viewer;
|
|
await window.__godsEyeView.dataManager.setEnabled(
|
|
'local-datacenters',
|
|
true,
|
|
{
|
|
origin: 'user',
|
|
},
|
|
);
|
|
const centreOf = (entity) => {
|
|
const time = viewer.clock.currentTime;
|
|
const point = entity.position?.getValue?.(time);
|
|
if (point) return point;
|
|
const hierarchy = entity.polygon?.hierarchy?.getValue?.(time);
|
|
if (hierarchy?.positions?.length) return hierarchy.positions[0];
|
|
const line = entity.polyline?.positions?.getValue?.(time);
|
|
return line?.length ? line[0] : null;
|
|
};
|
|
for (let attempt = 0; attempt < 40; attempt += 1) {
|
|
for (let i = 0; i < viewer.dataSources.length; i += 1) {
|
|
for (const entity of viewer.dataSources.get(i).entities.values) {
|
|
if (entity.__localLayerId !== 'local-datacenters') continue;
|
|
const point = centreOf(entity);
|
|
if (!point) continue;
|
|
const carto = window.Cesium
|
|
? window.Cesium.Cartographic.fromCartesian(point)
|
|
: viewer.scene.globe.ellipsoid.cartesianToCartographic(point);
|
|
if (!carto) continue;
|
|
return {
|
|
lon: (carto.longitude * 180) / Math.PI,
|
|
lat: (carto.latitude * 180) / Math.PI,
|
|
};
|
|
}
|
|
}
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
}
|
|
return null;
|
|
})
|
|
.catch(() => null);
|
|
if (!site) return null;
|
|
await page.evaluate((spot) => {
|
|
const viewer = window.__godsEyeView.viewer;
|
|
viewer.camera.cancelFlight?.();
|
|
viewer.camera.setView({
|
|
destination: viewer.scene.globe.ellipsoid.cartographicToCartesian({
|
|
longitude: (spot.lon * Math.PI) / 180,
|
|
latitude: (spot.lat * Math.PI) / 180,
|
|
height: 2500,
|
|
}),
|
|
orientation: { heading: 0, pitch: (-88 * Math.PI) / 180, roll: 0 },
|
|
});
|
|
viewer.scene.requestRender();
|
|
}, site);
|
|
await wait(4000);
|
|
const spot = await onScreen(
|
|
(entity) => entity.__localLayerId === 'local-datacenters',
|
|
);
|
|
return spot ? { ...spot, layer: 'data centre' } : null;
|
|
}
|
|
|
|
/**
|
|
* Canvas coordinates of the first entity matching `belongs` that is on screen
|
|
* and clear of the side panels. Annotation marks and the draw tool's own
|
|
* preview vertices are on screen too, so the predicate has to be specific.
|
|
*/
|
|
async function onScreen(belongs, timeout = 20_000) {
|
|
return page
|
|
.waitForFunction(
|
|
(belongsSource) => {
|
|
// eslint-disable-next-line no-new-func
|
|
const belongsTo = new Function(`return (${belongsSource})`)();
|
|
const viewer = window.__godsEyeView.viewer;
|
|
const scene = viewer.scene;
|
|
const collections = [viewer.entities];
|
|
for (let i = 0; i < viewer.dataSources.length; i += 1) {
|
|
const source = viewer.dataSources.get(i);
|
|
if (source?.name === 'gev-draw-preview') continue;
|
|
collections.push(source.entities);
|
|
}
|
|
for (const source of collections) {
|
|
for (const entity of source.values) {
|
|
if (!belongsTo(entity)) continue;
|
|
const position = entity.position?.getValue?.(
|
|
viewer.clock.currentTime,
|
|
);
|
|
if (!position) continue;
|
|
const window2d = scene.cartesianToCanvasCoordinates(position);
|
|
if (!window2d) continue;
|
|
const { x, y } = window2d;
|
|
if (!(x > 300 && x < 900 && y > 180 && y < 600)) continue;
|
|
// Projecting into the window is not the same as being clickable:
|
|
// the entity may be beyond the horizon or behind a building. Only a
|
|
// spot where the scene actually picks it proves the control case.
|
|
const hit = scene.pick({ x: Math.round(x), y: Math.round(y) });
|
|
if (!hit?.id || !belongsTo(hit.id)) continue;
|
|
return { x: Math.round(x), y: Math.round(y) };
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
{ timeout, polling: 500 },
|
|
belongs.toString(),
|
|
)
|
|
.then(
|
|
(handle) => handle.jsonValue(),
|
|
() => null,
|
|
);
|
|
}
|