From 7bb5ff9a7fec5e7444f3e987bf4fbc2ce6590d85 Mon Sep 17 00:00:00 2001
From: Kpa-clawbot <kpaclawbot@outlook.com>
Date: Fri, 1 May 2026 02:00:49 -0700
Subject: [PATCH] fix(e2e): tag flying-packet polyline so test selector doesn't
 pick up geofilter polygons (#953)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Bug

Master CI failing on `Map trace polyline uses hash-derived color when
toggle ON`. The test selector `path.leaflet-interactive` was too broad —
it matched **geofilter region polygons** (`L.polygon` calls in
`live.js:1052`/`map.js:327`), which are styled with theme variables, not
`hsl()`. None of those polygons have an `hsl(` stroke, so the assertion
failed even though the actual flying-packet polylines DO use hash colors
correctly.

## Fix

1. Tag flying-packet polylines with a dedicated class
`live-packet-trace` (`public/live.js:2728`).
2. Update the test selector to target that class specifically.
3. Treat "no flying-packet polylines drawn in the test window" as SKIP
(not fail) — animation may not trigger in 3s.

## Verification (rule 18)

- Read implementation at `live.js:2724-2729`: polyline color IS set from
`hashFill` when toggle is ON. The implementation is correct.
- Read polygon callers at `live.js:1052` (geofilter regions) — confirmed
they share the same `path.leaflet-interactive` class.
- The test was selecting wrong DOM nodes; fix narrows to dedicated
class.

No code logic changed — only DOM tagging + test selector.

Co-authored-by: Kpa-clawbot <bot@example.invalid>
---
 public/live.js         |  3 ++-
 test-e2e-playwright.js | 17 +++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/public/live.js b/public/live.js
index a59c2353..a3111d13 100644
--- a/public/live.js
+++ b/public/live.js
@@ -2724,7 +2724,8 @@
     const line = L.polyline([from], {
       color: (colorByHash && hash && !isDashed && window.HashColor) ? hashFill : color,
       weight: isDashed ? 1.5 : 2, opacity: mainOpacity, lineCap: 'round',
-      dashArray: isDashed ? '4 6' : null
+      dashArray: isDashed ? '4 6' : null,
+      className: 'live-packet-trace'
     }).addTo(pathsLayer);
 
     const dot = L.circleMarker(from, {
diff --git a/test-e2e-playwright.js b/test-e2e-playwright.js
index f7057e8b..aba475ef 100644
--- a/test-e2e-playwright.js
+++ b/test-e2e-playwright.js
@@ -2237,21 +2237,22 @@ async function run() {
     await page.evaluate(() => localStorage.setItem('meshcore-color-packets-by-hash', 'true'));
     await page.goto(BASE + '/#/live');
     await page.waitForTimeout(3000);
-    // Check if any polyline SVG path has an hsl stroke
+    // Use the dedicated .live-packet-trace class so we don't pick up
+    // unrelated leaflet paths (geofilter polygons, region overlays, etc).
+    const pathCount = await page.evaluate(() => document.querySelectorAll('path.live-packet-trace').length);
+    if (pathCount === 0) {
+      console.log('    (skipped — no live-packet-trace polylines drawn in 3s window)');
+      return;
+    }
     const hasHslPolyline = await page.evaluate(() => {
-      const paths = document.querySelectorAll('path.leaflet-interactive');
+      const paths = document.querySelectorAll('path.live-packet-trace');
       for (const p of paths) {
         const stroke = p.getAttribute('stroke') || '';
         if (stroke.startsWith('hsl(')) return true;
       }
       return false;
     });
-    const pathCount = await page.evaluate(() => document.querySelectorAll('path.leaflet-interactive').length);
-    if (pathCount === 0) {
-      console.log('    (skipped — no polyline paths on map in fixture)');
-      return;
-    }
-    assert(hasHslPolyline, 'At least one map polyline should have hsl() stroke color from hash');
+    assert(hasHslPolyline, 'At least one live-packet-trace polyline should have hsl() stroke color from hash');
   });
 
   await browser.close();