jon.recoil.org
this repo has no description
widget-leaflet: add Playwright adapter test
Tests addMarker, clearMarkers, addImageOverlay, removeImageOverlay
commands in a standalone HTML page.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+89
js_top_worker/widget-leaflet/test/test_adapter.html
+89
js_top_worker/widget-leaflet/test/test_adapter.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<title>widget-leaflet adapter test</title>
5
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
6
+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
7
+
<style>#map { width: 600px; height: 400px; }</style>
8
+
</head>
9
+
<body>
10
+
<h1>Widget-Leaflet Adapter Test</h1>
11
+
<div id="map"></div>
12
+
<p>Status: <span id="status">initializing...</span></p>
13
+
<script>
14
+
var container = document.getElementById('map');
15
+
var div = document.createElement("div");
16
+
div.style.cssText = "width:100%;height:100%";
17
+
container.appendChild(div);
18
+
var map = L.map(div).setView([51.505, -0.09], 13);
19
+
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
20
+
maxZoom: 19, attribution: "© OpenStreetMap"
21
+
}).addTo(map);
22
+
23
+
var state = {
24
+
map: map, geojsonLayer: null, bboxRect: null,
25
+
bboxDrawing: false, imageOverlay: null, markers: [],
26
+
_send: function(type, data) {}
27
+
};
28
+
29
+
function command(cmd, data) {
30
+
if (!state.map) return;
31
+
var d = data ? JSON.parse(data) : {};
32
+
if (cmd === "addMarker") {
33
+
var marker = L.circleMarker(L.latLng(d.lat, d.lng), {
34
+
radius: 6, color: d.color || "#ff0000", fillColor: d.color || "#ff0000",
35
+
fillOpacity: 0.8, weight: 2
36
+
}).addTo(state.map);
37
+
if (d.label) marker.bindTooltip(d.label, {permanent: true, direction: "right", offset: [8, 0]});
38
+
state.markers.push(marker);
39
+
}
40
+
else if (cmd === "clearMarkers") {
41
+
state.markers.forEach(function(m) { state.map.removeLayer(m); });
42
+
state.markers = [];
43
+
}
44
+
else if (cmd === "addImageOverlay") {
45
+
if (state.imageOverlay) state.map.removeLayer(state.imageOverlay);
46
+
state.imageOverlay = L.imageOverlay(d.url, d.bounds, {
47
+
opacity: d.opacity || 0.7
48
+
}).addTo(state.map);
49
+
}
50
+
else if (cmd === "removeImageOverlay") {
51
+
if (state.imageOverlay) { state.map.removeLayer(state.imageOverlay); state.imageOverlay = null; }
52
+
}
53
+
}
54
+
55
+
var results = [];
56
+
try {
57
+
// Test 1: Add markers
58
+
command("addMarker", JSON.stringify({lat: 51.505, lng: -0.09, color: "blue", label: "Point A"}));
59
+
command("addMarker", JSON.stringify({lat: 51.51, lng: -0.08, color: "red", label: "Point B"}));
60
+
results.push("markers=" + state.markers.length);
61
+
62
+
// Test 2: Add image overlay
63
+
var tinyPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==";
64
+
command("addImageOverlay", JSON.stringify({
65
+
url: tinyPng,
66
+
bounds: [[51.5, -0.1], [51.51, -0.08]],
67
+
opacity: 0.5
68
+
}));
69
+
results.push("hasOverlay=" + (state.imageOverlay !== null));
70
+
71
+
// Test 3: Clear markers
72
+
command("clearMarkers", "");
73
+
results.push("markersAfterClear=" + state.markers.length);
74
+
75
+
// Test 4: Remove overlay
76
+
command("removeImageOverlay", "");
77
+
results.push("overlayAfterRemove=" + (state.imageOverlay === null ? "null" : "exists"));
78
+
79
+
// Test 5: Re-add markers to verify state reset
80
+
command("addMarker", JSON.stringify({lat: 51.505, lng: -0.09}));
81
+
results.push("markersAfterReadd=" + state.markers.length);
82
+
83
+
document.getElementById('status').textContent = results.join(" ") + " ALL_PASSED";
84
+
} catch(e) {
85
+
document.getElementById('status').textContent = "FAILED: " + e.message;
86
+
}
87
+
</script>
88
+
</body>
89
+
</html>