v0.70.0: default map view — world at [0,0] zoom 2, minZoom 0

e2e/map.spec.ts

@@ -8,9 +8,32 @@ const APP_URL = '/';
 const pkg = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf8')) as { version: string };
 
 // Must match MIN_ZOOM / MAX_ZOOM exported from components/Map.tsx.
-const MIN_ZOOM = 3;
+const MIN_ZOOM = 0; // v0.70.0: lowered 3 → 0 so the whole earth is visible when fully zoomed out
 const MAX_ZOOM = 11;
 
+// LFRS Nantes Atlantique — the marker-click target of this file (and e2e/map-interactions.spec.ts,
+// e2e/relocation.spec.ts). The v0.70.0 default view ([0,0] z2) shows both Africa + Europe with
+// overlapping markers (nearest neighbour LFRB Brest is only ~13–19 px away at z2), so every click
+// test first frames LFRS at z5 — its nearest marker is then ~104 px away and the projected center
+// cannot hit a neighbouring circle.
+const LFRS: [number, number] = [-1.61073, 47.153198];
+
+async function frameLfrs(page: Page): Promise<void> {
+  await page.evaluate((c) => (window as any).__flightMap.jumpTo({ center: c, zoom: 5 }), LFRS);
+  // Wait until LFRS's marker is actually rendered at the new camera before clicking it. The
+  // coordinate is passed AS AN ARGUMENT — evaluate callbacks run in the browser, where Node-scope
+  // values don't exist (same trap as e2e/relocation.spec.ts).
+  await expect.poll(async () =>
+    page.evaluate((c) => {
+      const map = (window as any).__flightMap;
+      const p = map.project(c);
+      return (map.queryRenderedFeatures([p.x, p.y], { layers: ['airports-circles'] }) as Array<{ properties?: Record<string, unknown> }>)
+        .some((f) => f.properties?.icao === 'LFRS');
+    }, LFRS),
+    { timeout: 15_000 },
+  ).toBe(true);
+}
+
 async function waitForAirportCount(page: Page): Promise<number> {
   const countEl = page.getByTestId('airport-count');
   await expect.poll(async () => {
@@ -27,6 +50,16 @@ test('page loads with the map and world airport count', async ({ page }) => {
   await expect(page.getByTestId('map')).toBeVisible();
   const count = await waitForAirportCount(page);
   expect(count).toBeGreaterThan(0);
+
+  // v0.70.0 default view: null island [0,0] at zoom 2 (Africa + Europe both visible). The map
+  // instance exists by the time the airport count renders — it is created before airports load.
+  const view = await page.evaluate(() => {
+    const m = (window as any).__flightMap;
+    return { lng: m.getCenter().lng, lat: m.getCenter().lat, z: m.getZoom() };
+  });
+  expect(view.z).toBeCloseTo(2);
+  expect(view.lng).toBeCloseTo(0);
+  expect(view.lat).toBeCloseTo(0);
 });
 
 test('header shows the app version sourced from package.json', async ({ page }) => {
@@ -56,18 +89,15 @@ test('clicking an airport marker opens a popup with name and ICAO', async ({ pag
     { timeout: 15_000 },
   ).toBeGreaterThan(0);
 
-  // Project LFRS (Nantes Atlantique) to screen space via the dev hook, then click it.
-  // Nantes is used because the v0.9.0 three-pane layout narrows the map column (~560 px at the
-  // default 1280×720 viewport), which puts most of the world outside the initial view; LFRS stays
-  // isolated in it even with the v0.44.0 world dataset — its nearest markers are LFRB Brest and
-  // LFBD Bordeaux, ~39 px away at the initial zoom [10,52] z4 (verified against data/airports_world.csv),
-  // so its marker cannot be overlapped by a neighbouring circle.
-  const pt = await page.evaluate(() => {
+  // Frame LFRS (Nantes Atlantique) so its marker is isolated again — see frameLfrs above for why
+  // the v0.70.0 default view needs this — then project it to screen space via the dev hook and click.
+  await frameLfrs(page);
+  const pt = await page.evaluate((c) => {
     const map = (window as any).__flightMap;
-    const p = map.project([-1.61073, 47.153198]); // LFRS Nantes Atlantique — see the marker-click test above for why
+    const p = map.project(c); // LFRS Nantes Atlantique — see frameLfrs above for why it's framed at z5
     const rect = map.getContainer().getBoundingClientRect();
     return { x: rect.left + p.x, y: rect.top + p.y };
-  });
+  }, LFRS);
   await page.mouse.click(pt.x, pt.y);
 
   const popup = page.getByTestId('airport-popup');
@@ -189,6 +219,9 @@ test('style switcher defaults to Fiord, switches styles, and keeps the airports
   await expect(page.getByTestId('airport-count')).toContainText(/world airports/);
   await expect.poll(renderedCircles, { timeout: 15_000 }).toBeGreaterThan(0);
 
+  // Frame LFRS at z5 first — see frameLfrs above for why the v0.70.0 default view needs this.
+  await frameLfrs(page);
+
   // Clicking a marker after the switch opens exactly one popup (the click handler is
   // re-wired idempotently — no duplicate listeners). MapLibre's diff-based setStyle removes our
   // custom source/layer before ensureAirportsLayer re-adds it on the next styledata event, so
@@ -258,12 +291,14 @@ test('falls back to remote OFM styles when the local asset pack is absent', asyn
     { timeout: 15_000 },
   ).toBeGreaterThan(0);
 
-  const pt = await page.evaluate(() => {
+  // Frame LFRS at z5 first — see frameLfrs above for why the v0.70.0 default view needs this.
+  await frameLfrs(page);
+  const pt = await page.evaluate((c) => {
     const map = (window as any).__flightMap;
-    const p = map.project([-1.61073, 47.153198]); // LFRS Nantes Atlantique — see the marker-click test above for why
+    const p = map.project(c); // LFRS Nantes Atlantique — see frameLfrs above for why it's framed at z5
     const rect = map.getContainer().getBoundingClientRect();
     return { x: rect.left + p.x, y: rect.top + p.y };
-  });
+  }, LFRS);
   await page.mouse.click(pt.x, pt.y);
 
   const popup = page.getByTestId('airport-popup');