fix(e2e): tag flying-packet polyline so test selector doesn't pick up geofilter polygons (#953)

## 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>
This commit is contained in:
Kpa-clawbot
2026-05-01 02:00:49 -07:00
committed by GitHub
parent b9758111b0
commit 7bb5ff9a7f
2 changed files with 11 additions and 9 deletions
+2 -1
View File
@@ -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, {
+9 -8
View File
@@ -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();