diff --git a/CHANGELOG.md b/CHANGELOG.md index 78fe2fd0..95f837be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ - Added a `toast` component with plain-text or Markdown content, icons, colors, six screen placements, configurable auto-dismiss timing, optional manual dismissal, URL-fragment triggers, and automatic stacking of queued notifications. - `sqlpage.send_mail` now supports rich email bodies. Use `body_html` for a caller-provided HTML alternative, or `body_md` to render Markdown as HTML. Messages retain a plain-text alternative; `body` may be omitted when `body_md` is used, and `body_md` and `body_html` cannot be combined. - Form `options_source` URLs now preserve existing query parameters when adding the dynamic `search` parameter. + - Map coordinates that are not a pair of numbers, like a latitude with no longitude, are now reported in the browser console and skipped, instead of breaking the whole map. - Screen readers now announce the title of the modal component instead of an unnamed dialog. ## v0.45 diff --git a/sqlpage/sqlpage.js b/sqlpage/sqlpage.js index 6e158c07..6f2b0d43 100644 --- a/sqlpage/sqlpage.js +++ b/sqlpage/sqlpage.js @@ -182,12 +182,19 @@ function sqlpage_map() { onLeafletLoad(); } /** - * * @param {string|undefined} coords * @returns {[number, number] | undefined} */ function parseCoords(coords) { - return coords?.split(",", 2).map((c) => Number.parseFloat(c)); + if (!coords) return undefined; + const parsed = coords.split(",", 2).map((c) => Number.parseFloat(c)); + if (parsed.length !== 2 || !parsed.every(Number.isFinite)) { + console.error( + `Invalid map coordinates: ${JSON.stringify(coords)}. Expected a "latitude,longitude" pair of numbers.`, + ); + return undefined; + } + return [parsed[0], parsed[1]]; } function onLeafletLoad() { is_leaflet_loaded = true; @@ -230,6 +237,7 @@ function sqlpage_map() { const marker = dataset.coords ? createMarker(marker_elem, options) : createGeoJSONMarker(marker_elem, options); + if (!marker) return; marker.addTo(map); map._sqlpage_markers.push(marker); if (marker_elem.textContent.trim()) marker.bindPopup(marker_elem); @@ -241,6 +249,7 @@ function sqlpage_map() { } function createMarker(marker_elem, options) { const coords = parseCoords(marker_elem.dataset.coords); + if (!coords) return undefined; const icon_obj = marker_elem.getElementsByClassName("mapicon")[0]; if (icon_obj) { const size = diff --git a/tests/end-to-end/map-component.spec.ts b/tests/end-to-end/map-component.spec.ts new file mode 100644 index 00000000..58bb6681 --- /dev/null +++ b/tests/end-to-end/map-component.spec.ts @@ -0,0 +1,116 @@ +import { expect, type Page, test } from "@playwright/test"; + +const BASE = process.env.SQLPAGE_TEST_BASE ?? "http://localhost:8080/"; + +declare global { + function sqlpage_map(): void; +} + +type Marker = { coords?: string; title: string }; + +const PARIS = "48.85,2.35"; +const PARIS_WITHOUT_ITS_LONGITUDE = "48.85,"; +const NOT_COORDINATES = "somewhere nice"; + +async function renderMap( + page: Page, + center: string | null, + markers: Marker[] = [], +) { + return page.evaluate( + async ({ center, markers }) => { + document.getElementById("test-map")?.remove(); + const container = document.createElement("div"); + container.id = "test-map"; + container.className = "leaflet"; + container.style.height = "200px"; + container.dataset.zoom = "5"; + container.dataset.max_zoom = "18"; + if (center !== null) container.dataset.center = center; + container.innerHTML = markers + .map( + (m) => + `