feat: v0.22.0 — ISS-022 target airport distinct-color ring on job-list / relocation hover

e2e/hover.spec.ts

@@ -8,7 +8,8 @@ import { test, expect, type Page } from '@playwright/test';
 // queryRenderedFeatures, same pattern as e2e/map.spec.ts and e2e/map-interactions.spec.ts.
 // ISS-022/025/027 (v0.22.0): any hover carrying two endpoints ALSO draws the full great-circle
 // trace between them in a fourth top-most layer (`hover-route`, dashed) — job-list rows, on-board
-// cargo rows and the Relocate section; the relocate preview rings only its TARGET airport.
+// cargo rows and the Relocate section; the relocate preview rings only its TARGET airport, which
+// additionally gets a distinct green ring in `airports-target-highlight` (ISS-022).
 
 const SCALE = 1000; // fastest sim speed (v0.14.0 ladder top) — keeps flights to seconds of real time
 const HUB = 'EDDF'; // must match HUB_ICAO in lib/game/seed.ts
@@ -262,6 +263,7 @@ test('hovering an open package highlights its endpoint airports', async ({ page
   await fitToAirports(page, [HUB, DEST]);
 
   expect(await renderedFeatures(page, ['airports-highlight'])).toHaveLength(0);
+  expect(await renderedFeatures(page, ['airports-target-highlight'])).toHaveLength(0);
 
   await row.hover();
   await expect.poll(async () => {
@@ -274,6 +276,13 @@ test('hovering an open package highlights its endpoint airports', async ({ page
   // not just the endpoint rings.
   await expectHoverRoute(page, HUB, DEST);
 
+  // And the TARGET airport gets its own distinct-colored ring — only the destination, never the origin.
+  await expect.poll(async () => {
+    const feats = (await renderedFeatures(page, ['airports-target-highlight'])) as Array<{ properties: Record<string, unknown> }>;
+    return JSON.stringify(feats.map((f) => f.properties.icao).sort());
+  }, { timeout: 15_000, message: 'waiting for the airports-target-highlight layer to ring only the destination' })
+    .toBe(JSON.stringify([DEST]));
+
   await unhover(page);
   await expect.poll(async () => (await renderedFeatures(page, ['airports-highlight'])).length, {
     timeout: 15_000,
@@ -283,6 +292,10 @@ test('hovering an open package highlights its endpoint airports', async ({ page
     timeout: 15_000,
     message: 'waiting for the hover route trace to clear after mouseleave',
   }).toBe(0);
+  await expect.poll(async () => (await renderedFeatures(page, ['airports-target-highlight'])).length, {
+    timeout: 15_000,
+    message: 'waiting for the target ring to clear after mouseleave',
+  }).toBe(0);
 });
 
 test('hovering an on-board cargo row draws its trace and keeps the plane halo', async ({ page }) => {
@@ -350,6 +363,7 @@ test('hovering the Relocate section previews the planned route and target airpor
 
   expect(await renderedFeatures(page, ['hover-route'])).toHaveLength(0);
   expect(await renderedFeatures(page, ['airports-highlight'])).toHaveLength(0);
+  expect(await renderedFeatures(page, ['airports-target-highlight'])).toHaveLength(0);
 
   // ISS-027 (v0.22.0): hovering the panel with a plane + destination selected previews the flight —
   // dashed trace from the plane's airport to the destination…
@@ -361,6 +375,12 @@ test('hovering the Relocate section previews the planned route and target airpor
     return JSON.stringify(feats.map((f) => f.properties.icao).sort());
   }, { timeout: 15_000, message: 'waiting for the airports-highlight layer to ring only the target' })
     .toBe(JSON.stringify([DEST]));
+  // …plus the destination's own distinct-colored ring (ISS-022) — same single icao.
+  await expect.poll(async () => {
+    const feats = (await renderedFeatures(page, ['airports-target-highlight'])) as Array<{ properties: Record<string, unknown> }>;
+    return JSON.stringify(feats.map((f) => f.properties.icao).sort());
+  }, { timeout: 15_000, message: 'waiting for the airports-target-highlight layer to ring only the target' })
+    .toBe(JSON.stringify([DEST]));
 
   await unhover(page);
   await expect.poll(async () => (await renderedFeatures(page, ['hover-route'])).length, {
@@ -371,6 +391,10 @@ test('hovering the Relocate section previews the planned route and target airpor
     timeout: 15_000,
     message: 'waiting for the highlight to clear after mouseleave',
   }).toBe(0);
+  await expect.poll(async () => (await renderedFeatures(page, ['airports-target-highlight'])).length, {
+    timeout: 15_000,
+    message: 'waiting for the target ring to clear after mouseleave',
+  }).toBe(0);
 });
 
 test('hovering an on-board block of a flying plane highlights its route', async ({ page }) => {