mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 10:24:02 +00:00
322 lines
11 KiB
JavaScript
322 lines
11 KiB
JavaScript
#!/usr/bin/env node
|
|
/** Location UI acceptance; controlled search results isolate UI races from geocoder availability. */
|
|
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', (e) => errors.push(e.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 });
|
|
await page.goto(
|
|
`${process.env.QA_BASE_URL || 'http://localhost:4173'}/?welcome=0`,
|
|
{ waitUntil: 'domcontentloaded' },
|
|
);
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__godsEyeView?.styleManager?._locationControls &&
|
|
document.getElementById('loading-screen')?.classList.contains('hidden'),
|
|
{ timeout: 60000 },
|
|
);
|
|
await page.click('#location-bar-toggle');
|
|
await page.click('[data-pin-target="location-bar"]');
|
|
const cityId = await page.$eval(
|
|
'.location-pill',
|
|
(node) => node.dataset.locationId,
|
|
);
|
|
await page.click('.location-pill');
|
|
await page.waitForFunction(() =>
|
|
document.getElementById('poi-row').classList.contains('expanded'),
|
|
);
|
|
check(
|
|
'native city selection highlights and expands its POIs',
|
|
await page.evaluate(
|
|
(id) =>
|
|
window.__godsEyeView.styleManager._activeLocationId === id &&
|
|
document.querySelector('.location-pill.active')?.dataset.locationId ===
|
|
id,
|
|
cityId,
|
|
),
|
|
);
|
|
await page.keyboard.press('w');
|
|
check(
|
|
'POI keyboard action selects the second landmark',
|
|
await page.evaluate(
|
|
() =>
|
|
window.__godsEyeView.styleManager._activePoiIndex === 1 &&
|
|
document.querySelector('.poi-pill.active')?.dataset.poiIndex === '1',
|
|
),
|
|
);
|
|
check(
|
|
'orbit controls and indicator agree',
|
|
await page.evaluate(() => {
|
|
const ui = window.__godsEyeView.styleManager;
|
|
ui.setOrbit(true);
|
|
const active =
|
|
ui.orbitController.active &&
|
|
document.getElementById('orbit-indicator').classList.contains('active');
|
|
ui.setOrbit(false);
|
|
return (
|
|
active &&
|
|
!ui.orbitController.active &&
|
|
!document.getElementById('orbit-indicator').classList.contains('active')
|
|
);
|
|
}),
|
|
);
|
|
await page.click('#search-toggle');
|
|
await page.type('#location-search', 'qwerty');
|
|
check(
|
|
'typing in search leaves POI selection unchanged',
|
|
await page.evaluate(
|
|
() => window.__godsEyeView.styleManager._activePoiIndex === 1,
|
|
),
|
|
);
|
|
const geocoderRequests = [];
|
|
const recordGeocoderRequest = (request) => {
|
|
const url = new URL(request.url());
|
|
if (
|
|
url.pathname === '/api/geocode' ||
|
|
(url.hostname === 'photon.komoot.io' && url.pathname === '/api/') ||
|
|
(url.hostname === 'maps.googleapis.com' &&
|
|
url.pathname === '/maps/api/geocode/json')
|
|
)
|
|
geocoderRequests.push(request.url());
|
|
};
|
|
page.on('request', recordGeocoderRequest);
|
|
await page.$eval('#location-search', (input) => {
|
|
input.value = 'geo:39.7392,-104.9903';
|
|
input.focus();
|
|
});
|
|
await page.keyboard.press('Enter');
|
|
await page.waitForFunction(
|
|
() => {
|
|
const state =
|
|
window.__godsEyeView.styleManager._locationLookup.getState();
|
|
return (
|
|
state.query === 'geo:39.7392,-104.9903' && state.status === 'found'
|
|
);
|
|
},
|
|
{ timeout: 30000 },
|
|
);
|
|
await page.waitForFunction(
|
|
() => !window.__godsEyeView.viewer.camera._currentFlight,
|
|
{ timeout: 10000 },
|
|
);
|
|
check(
|
|
'native geo URI search shows the decimal coordinate readout',
|
|
await page.evaluate(() => {
|
|
const ui = window.__godsEyeView.styleManager;
|
|
return (
|
|
ui._searchedLocationLabel === '39.7392° N, 104.9903° W' &&
|
|
ui._locationMiniCity.textContent.includes('39.7392° N') &&
|
|
ui._locationMiniPoi.textContent === '104.9903° W'
|
|
);
|
|
}),
|
|
);
|
|
check(
|
|
'geo URI navigation settles near the requested coordinate',
|
|
await page.evaluate(() => {
|
|
const position = window.__godsEyeView.viewer.camera.positionCartographic;
|
|
const degrees = 180 / Math.PI;
|
|
return (
|
|
Math.abs(position.latitude * degrees - 39.7392) < 0.05 &&
|
|
Math.abs(position.longitude * degrees + 104.9903) < 0.05
|
|
);
|
|
}),
|
|
);
|
|
check(
|
|
'geo URI search makes no geocoder request',
|
|
geocoderRequests.length === 0,
|
|
);
|
|
page.off('request', recordGeocoderRequest);
|
|
await page.evaluate(() => {
|
|
const lookup = window.__godsEyeView.styleManager._locationLookup;
|
|
window.__qaSearchRequests = [];
|
|
window.__qaLocationState = [];
|
|
window.__godsEyeView.styleManager.subscribeLocationSearch((notification) =>
|
|
window.__qaLocationState.push(notification),
|
|
);
|
|
lookup.search = (query, options) =>
|
|
new Promise((resolve) =>
|
|
window.__qaSearchRequests.push({ query, options, resolve }),
|
|
);
|
|
document.getElementById('location-search').value = 'First';
|
|
document.getElementById('location-search').focus();
|
|
});
|
|
await page.keyboard.press('Enter');
|
|
await page.waitForFunction(() => window.__qaSearchRequests.length === 1);
|
|
await page.evaluate(() => {
|
|
document.getElementById('location-search').value = 'Second';
|
|
document.getElementById('location-search').focus();
|
|
});
|
|
await page.keyboard.press('Enter');
|
|
await page.waitForFunction(() => window.__qaSearchRequests.length === 2);
|
|
check(
|
|
'second native submit aborts the first request and keeps current busy state',
|
|
await page.evaluate(
|
|
() =>
|
|
window.__qaSearchRequests[0].options.signal.aborted &&
|
|
document
|
|
.getElementById('location-search')
|
|
.classList.contains('searching'),
|
|
),
|
|
);
|
|
await page.evaluate(() =>
|
|
window.__qaSearchRequests[1].resolve({
|
|
label: 'Second landmark, Test city',
|
|
}),
|
|
);
|
|
await page.waitForFunction(
|
|
() =>
|
|
window.__godsEyeView.styleManager._searchedLocationLabel ===
|
|
'Second landmark, Test city',
|
|
);
|
|
await page.evaluate(() =>
|
|
window.__qaSearchRequests[0].resolve({
|
|
label: 'First landmark, Test city',
|
|
}),
|
|
);
|
|
check(
|
|
'late result cannot overwrite the current location readout or style',
|
|
await page.evaluate(() => {
|
|
const ui = window.__godsEyeView.styleManager;
|
|
return (
|
|
ui._searchedLocationLabel === 'Second landmark, Test city' &&
|
|
ui._locationMiniCity.textContent.includes('Second landmark') &&
|
|
ui._locationMiniPoi.textContent === 'Test city' &&
|
|
ui.activeStyle === 'normal' &&
|
|
!ui._locationSearch.classList.contains('searching')
|
|
);
|
|
}),
|
|
);
|
|
check(
|
|
'Location subscriptions accept only the current result and retain request identities',
|
|
await page.evaluate(() => {
|
|
const seen = window.__qaLocationState;
|
|
const started = seen.filter(({ change }) => change?.type === 'started');
|
|
const found = seen.filter(({ change }) => change?.type === 'found');
|
|
return (
|
|
seen[0].initial &&
|
|
started.length === 2 &&
|
|
found.length === 1 &&
|
|
found[0].change.requestId === started[1].change.requestId &&
|
|
found[0].state.destination.label === 'Second landmark, Test city' &&
|
|
Object.isFrozen(found[0].state.destination)
|
|
);
|
|
}),
|
|
);
|
|
check(
|
|
'cancelled POI expansion stays closed after a frame',
|
|
await page.evaluate(async (id) => {
|
|
const ui = window.__godsEyeView.styleManager;
|
|
ui._expandPOIRow(id);
|
|
ui._collapsePOIRow();
|
|
await new Promise((resolve) =>
|
|
requestAnimationFrame(() => requestAnimationFrame(resolve)),
|
|
);
|
|
return (
|
|
!ui._poiRow.classList.contains('expanded') &&
|
|
!ui._locationBarDivider.classList.contains('visible')
|
|
);
|
|
}, cityId),
|
|
);
|
|
await page.evaluate(
|
|
(id) => window.__godsEyeView.styleManager._onCityPillClick(id),
|
|
cityId,
|
|
);
|
|
await page.waitForFunction(() =>
|
|
document.getElementById('poi-row').classList.contains('expanded'),
|
|
);
|
|
// Finish the camera's existing city flight before inspecting both layouts.
|
|
await page.waitForFunction(
|
|
() => !window.__godsEyeView.viewer.camera._currentFlight,
|
|
{ timeout: 10000 },
|
|
);
|
|
await page.evaluate(
|
|
() =>
|
|
new Promise((resolve) =>
|
|
requestAnimationFrame(() => requestAnimationFrame(resolve)),
|
|
),
|
|
);
|
|
const settled = await page
|
|
.waitForFunction(
|
|
() => {
|
|
const scene = window.__godsEyeView.viewer.scene;
|
|
for (let index = 0; index < scene.primitives.length; index++) {
|
|
const primitive = scene.primitives.get(index);
|
|
if (
|
|
typeof primitive.tilesLoaded === 'boolean' &&
|
|
!primitive.tilesLoaded
|
|
)
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
{ timeout: 60000 },
|
|
)
|
|
.then(
|
|
() => true,
|
|
() => false,
|
|
);
|
|
check('visible city tiles settle before screenshots', settled);
|
|
fs.mkdirSync('qa-shots/location-controls', { recursive: true });
|
|
await page.screenshot({ path: 'qa-shots/location-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/location-controls/narrow.png' });
|
|
check(
|
|
'native reset returns through the existing camera handoff',
|
|
await page.evaluate(async () => {
|
|
const ui = window.__godsEyeView.styleManager;
|
|
ui._resetGlobeBtn.click();
|
|
const pending = ui._globeResetPromise;
|
|
if (!pending) return false;
|
|
await pending;
|
|
return (
|
|
!ui.orbitController.active && !window.__godsEyeView.viewer.trackedEntity
|
|
);
|
|
}),
|
|
);
|
|
check(
|
|
'destroyed controls cannot navigate or submit another lookup',
|
|
await page.evaluate(() => {
|
|
const ui = window.__godsEyeView.styleManager;
|
|
const count = window.__qaSearchRequests.length;
|
|
ui._locationControls.destroy();
|
|
ui._locationLookup.destroy();
|
|
const before = ui._navigationGeneration;
|
|
ui._locationPills.querySelector('button').click();
|
|
ui._resetGlobeBtn.click();
|
|
ui._locationSearch.dispatchEvent(
|
|
new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
|
|
);
|
|
return (
|
|
before === ui._navigationGeneration &&
|
|
count === window.__qaSearchRequests.length
|
|
);
|
|
}),
|
|
);
|
|
check('no uncaught browser errors', errors.length === 0);
|
|
} finally {
|
|
await browser.close();
|
|
}
|
|
console.log(`RESULT: ${failures} failures`);
|
|
process.exitCode = failures ? 1 : 0;
|