Add first test for pictogram selection

umap/static/umap/base.css

@@ -566,6 +566,10 @@ i.info {
     background-color: #999;
     text-align: center;
     margin-bottom: 5px;
+    display: none;
+}
+.umap-pictogram-choice.visible {
+    display: block;
 }
 .umap-pictogram-choice img {
     vertical-align: middle;

umap/static/umap/js/umap.forms.js

@@ -586,7 +586,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
         const img = L.DomUtil.create(
           'img',
           '',
-          L.DomUtil.create('div', 'umap-pictogram-choice', this.buttonsContainer)
+          L.DomUtil.create('div', 'umap-pictogram-choice visible', this.buttonsContainer)
         )
         img.src = this.value()
         L.DomEvent.on(img, 'click', this.showSymbols, this)
@@ -594,7 +594,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
         const el = L.DomUtil.create(
           'span',
           '',
-          L.DomUtil.create('div', 'umap-pictogram-choice', this.buttonsContainer)
+          L.DomUtil.create('div', 'umap-pictogram-choice visible', this.buttonsContainer)
         )
         el.textContent = this.value()
         L.DomEvent.on(el, 'click', this.showSymbols, this)
@@ -610,7 +610,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
   },
 
   addIconPreview: function (pictogram, parent) {
-    const baseClass = 'umap-pictogram-choice',
+    const baseClass = 'umap-pictogram-choice visible',
       value = pictogram.src,
       className = value === this.value() ? `${baseClass} selected` : baseClass,
       container = L.DomUtil.create('div', className, parent),
@@ -618,6 +618,8 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     img.src = value
     if (pictogram.name && pictogram.attribution) {
       container.title = `${pictogram.name} — © ${pictogram.attribution}`
+    } else if (pictogram.name) {
+      container.title = pictogram.name
     }
     L.DomEvent.on(
       container,
@@ -644,8 +646,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     const icons = [...this.parentNode.querySelectorAll('.umap-pictogram-choice')],
       search = this.searchInput.value.toLowerCase()
     icons.forEach((el) => {
-      if (el.title.toLowerCase().indexOf(search) != -1) el.style.display = 'block'
+      L.DomUtil.classIf(el, 'visible', el.title.toLowerCase().indexOf(search) !== -1)
-      else el.style.display = 'none'
     })
   },
 

umap/tests/fixtures/circle.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+  <path d="M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z"/>
+</svg>

umap/tests/fixtures/star.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" id="star" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+  <path id="path4749-2-8-2" d="M7.5,0l-2,5h-5l4,3.5l-2,6l5-3.5&#xA;&#x9;l5,3.5l-2-6l4-3.5h-5L7.5,0z"/>
+</svg>

umap/tests/integration/test_picto.py

@@ -0,0 +1,68 @@
+from pathlib import Path
+
+import pytest
+from playwright.sync_api import expect
+from django.core.files.base import ContentFile
+
+from umap.models import Map, Pictogram
+
+from ..base import DataLayerFactory
+
+pytestmark = pytest.mark.django_db
+
+
+DATALAYER_DATA = {
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "geometry": {
+                "type": "Point",
+                "coordinates": [13.68896484375, 48.55297816440071],
+            },
+            "properties": {"_umap_options": {"color": "DarkCyan"}, "name": "Here"},
+        }
+    ],
+    "_umap_options": {"displayOnLoad": True, "name": "FooBarFoo"},
+}
+FIXTURES = Path(__file__).parent.parent / "fixtures"
+
+
+@pytest.fixture
+def pictos():
+    path = FIXTURES / "star.svg"
+    Pictogram(name="star", pictogram=ContentFile(path.read_text(), path.name)).save()
+    path = FIXTURES / "circle.svg"
+    Pictogram(name="circle", pictogram=ContentFile(path.read_text(), path.name)).save()
+
+
+def test_can_change_picto_at_map_level(map, live_server, page, pictos):
+    # Faster than doing a login
+    map.edit_status = Map.ANONYMOUS
+    map.save()
+    DataLayerFactory(map=map, data=DATALAYER_DATA)
+    page.goto(f"{live_server.url}{map.get_absolute_url()}?edit")
+    marker = page.locator(".umap-div-icon img")
+    expect(marker).to_have_count(1)
+    # Should have default img
+    expect(marker).to_have_attribute("src", "/static/umap/img/marker.png")
+    edit_settings = page.get_by_title("Edit map settings")
+    expect(edit_settings).to_be_visible()
+    edit_settings.click()
+    shape_settings = page.get_by_text("Default shape properties")
+    expect(shape_settings).to_be_visible()
+    shape_settings.click()
+    define = page.locator(".umap-field-iconUrl .define")
+    undefine = page.locator(".umap-field-iconUrl .undefine")
+    expect(define).to_be_visible()
+    expect(undefine).to_be_hidden()
+    define.click()
+    symbols = page.locator(".umap-pictogram-choice.visible")
+    expect(symbols).to_have_count(2)
+    search = page.locator(".umap-pictogram-list input")
+    search.type("star")
+    expect(symbols).to_have_count(1)
+    symbols.click()
+    expect(marker).to_have_attribute("src", "/uploads/pictogram/star.svg")
+    undefine.click()
+    expect(marker).to_have_attribute("src", "/static/umap/img/marker.png")