chore: add very minimal test for OSM popup template

umap/static/umap/js/modules/rendering/template.js

@@ -150,7 +150,18 @@ class GeoRSSLink extends PopupTemplate {
 }
 
 class OSM extends TitleMixin(PopupTemplate) {
-  renderTitle(feature) {}
+  renderTitle(feature) {
+    const title = DomUtil.add('h3', 'popup-title')
+    const color = feature.getPreviewColor()
+    title.style.backgroundColor = color
+    const iconUrl = feature.getDynamicOption('iconUrl')
+    const icon = Icon.makeElement(iconUrl, title)
+    DomUtil.addClass(icon, 'icon')
+    Icon.setContrast(icon, title, iconUrl, color)
+    if (DomUtil.contrastedColor(title, color)) title.style.color = 'white'
+    DomUtil.add('span', '', title, this.getName(feature))
+    return title
+  }
 
   getName(feature) {
     const props = feature.properties
@@ -162,15 +173,6 @@ class OSM extends TitleMixin(PopupTemplate) {
   renderBody(feature) {
     const props = feature.properties
     const body = document.createElement('div')
-    const title = DomUtil.add('h3', 'popup-title', body)
-    const color = feature.getPreviewColor()
-    title.style.backgroundColor = color
-    const iconUrl = feature.getDynamicOption('iconUrl')
-    const icon = Icon.makeElement(iconUrl, title)
-    DomUtil.addClass(icon, 'icon')
-    Icon.setContrast(icon, title, iconUrl, color)
-    if (DomUtil.contrastedColor(title, color)) title.style.color = 'white'
-    DomUtil.add('span', '', title, this.getName(feature))
     const street = props['addr:street']
     if (street) {
       const row = DomUtil.add('address', 'address', body)

umap/tests/integration/test_popup.py

@@ -0,0 +1,44 @@
+import pytest
+from playwright.sync_api import expect
+
+from ..base import DataLayerFactory
+
+pytestmark = pytest.mark.django_db
+
+OSM_DATA = {
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "geometry": {"type": "Point", "coordinates": [2.49, 48.79]},
+            "properties": {
+                "amenity": "restaurant",
+                "cuisine": "italian",
+                "name": "A Casa di Nonna",
+                "panoramax": "d811b398-d930-4cf8-95a2-0c29c34d9fca",
+                "phone": "+33 1 48 89 54 12",
+                "takeaway:covid19": "yes",
+                "wheelchair": "no",
+                "id": "node/1130849864",
+            },
+            "id": "AzMjk",
+        },
+    ],
+    "_umap_options": {
+        "popupTemplate": "OSM",
+    },
+}
+
+
+def test_openstreetmap_popup(live_server, map, page):
+    DataLayerFactory(map=map, data=OSM_DATA)
+    page.goto(f"{live_server.url}{map.get_absolute_url()}#18/48.79/2.49")
+    expect(page.locator(".umap-icon-active")).to_be_hidden()
+    page.locator(".leaflet-marker-icon").click()
+    expect(page.get_by_role("heading", name="A Casa di Nonna")).to_be_visible()
+    expect(page.get_by_text("+33 1 48 89 54 12")).to_be_visible()
+    img = page.locator(".umap-popup-content img")
+    expect(img).to_have_attribute(
+        "src",
+        "https://api.panoramax.xyz/api/pictures/d811b398-d930-4cf8-95a2-0c29c34d9fca/sd.jpg",
+    )