chore: fix integration tests

umap/static/umap/js/modules/panel.js

@@ -5,7 +5,6 @@ export class Panel {
   MODE = 'condensed'
   CLASSNAME = 'left'
 
-
   constructor(parent) {
     this.parent = parent
     this.container = DomUtil.create('div', '', this.parent)
@@ -16,7 +15,6 @@ export class Panel {
   }
 
   open(e) {
-    //this.fire('panel:open')
     this.container.className = `with-transition panel ${this.CLASSNAME} ${this.MODE}`
     this.container.innerHTML = ''
     const actionsContainer = DomUtil.create('ul', 'toolbox', this.container)
@@ -36,22 +34,18 @@ export class Panel {
       }
     }
     if (e.className) DomUtil.addClass(body, e.className)
-    if (DomUtil.hasClass(this.container, 'on')) {
-      // Already open.
-      //this.fire('panel:ready')
-    } else {
-      DomEvent.once(
-        this.container,
-        'transitionend',
-        function (e) {
-          //this.fire('panel:ready')
-        },
-        this
-      )
-      DomUtil.addClass(this.container, 'on')
-    }
+    const promise = new Promise((resolve, reject) => {
+      if (DomUtil.hasClass(this.container, 'on')) {
+        // Already open.
+        resolve()
+      } else {
+        DomEvent.once(this.container, 'transitionend', resolve)
+        DomUtil.addClass(this.container, 'on')
+      }
+    })
     DomEvent.on(closeLink, 'click', this.close, this)
     DomEvent.on(resizeLink, 'click', this.resize, this)
+    return promise
   }
 
   resize() {
@@ -69,7 +63,6 @@ export class Panel {
   close() {
     if (DomUtil.hasClass(this.container, 'on')) {
       DomUtil.removeClass(this.container, 'on')
-      //this.fire('panel:closed')
     }
   }
 }

umap/static/umap/js/modules/request.js

@@ -128,7 +128,6 @@ export class ServerRequest extends Request {
       const data = await response.json()
       if (data.info) {
         this.ui.alert({ content: data.info, level: 'info' })
-        this.ui.closePanel()
       } else if (data.error) {
         this.ui.alert({ content: data.error, level: 'error' })
         return this._onError(new Error(data.error))

umap/static/umap/js/umap.controls.js

@@ -33,7 +33,7 @@ U.EditLayersAction = U.BaseAction.extend({
   options: {
     helpMenu: true,
     className: 'umap-control-browse dark',
-    tooltip: L._('See layers'),
+    tooltip: L._('Manage layers'),
   },
 
   addHooks: function () {
@@ -1252,7 +1252,7 @@ U.Search = L.PhotonSearch.extend({
 
   onSelected: function (feature) {
     this.zoomToFeature(feature)
-    this.map.ui.closePanel()
+    this.map.panel.close()
   },
 })
 

umap/static/umap/js/umap.features.js

@@ -126,13 +126,13 @@ U.FeatureMixin = {
       callback: this._redraw, // In case we have dynamic options…
     })
     container.appendChild(builder.build())
-    this.map.ui.once('panel:ready', () => {
-      builder.helpers['properties.name'].input.focus()
-    })
     this.appendEditFieldsets(container)
     const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
     this.getAdvancedEditActions(advancedActions)
-    this.map.editPanel.open({ data: { html: container } })
+    const onLoad = this.map.editPanel.open({ data: { html: container } })
+    onLoad.then(() => {
+      builder.helpers['properties.name'].input.focus()
+    })
     this.map.editedFeature = this
     if (!this.isOnScreen()) this.zoomTo(e)
   },
@@ -144,7 +144,7 @@ U.FeatureMixin = {
       L._('Delete'),
       function (e) {
         L.DomEvent.stop(e)
-        if (this.confirmDelete()) this.map.ui.closePanel()
+        if (this.confirmDelete()) this.map.editPanel.close()
       },
       this
     )
@@ -462,7 +462,7 @@ U.FeatureMixin = {
     this.parentClass.prototype.onRemove.call(this, map)
     if (this.map.editedFeature === this) {
       this.endEdit()
-      this.map.ui.closePanel()
+      this.map.editPanel.close()
     }
   },
 
@@ -754,7 +754,7 @@ U.PathMixin = {
     if (this.map.editEnabled) {
       if (this.editEnabled()) {
         this.endEdit()
-        this.map.ui.closePanel()
+        this.map.editPanel.close()
       } else {
         this.edit(e)
       }

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

@@ -1036,6 +1036,6 @@ U.FormBuilder = L.FormBuilder.extend({
   },
 
   finish: function () {
-    this.map.ui.closePanel()
+    this.map.editPanel.close()
   },
 })

umap/static/umap/js/umap.importer.js

@@ -20,7 +20,6 @@ U.Importer = L.Class.extend({
       { type: 'file', multiple: 'multiple', autofocus: true },
       this.fileBox
     )
-    this.map.ui.once('panel:closed', () => (this.fileInput.value = null))
     this.urlInput = L.DomUtil.element(
       'input',
       { type: 'text', placeholder: L._('Provide an URL here') },
@@ -121,7 +120,10 @@ U.Importer = L.Class.extend({
 
   open: function () {
     if (!this.container) this.build()
-    this.map.editPanel.open({ data: { html: this.container } })
+    const onLoad = this.map.editPanel.open({ data: { html: this.container } })
+    onLoad.then(() => {
+      this.fileInput.value = null
+    })
   },
 
   openFiles: function () {

umap/static/umap/js/umap.js

@@ -222,12 +222,13 @@ U.Map = L.Map.extend({
       if (L.Util.queryString('share')) {
         this.share.open()
       } else if (this.options.onLoadPanel === 'databrowser') {
+        this.panel.MODE = 'expanded'
         this.openBrowser()
       } else if (this.options.onLoadPanel === 'datalayers') {
-        this.ui.PANEL_MODE = 'condensed'
+        this.panel.MODE = 'condensed'
         this.openBrowser()
       } else if (this.options.onLoadPanel === 'caption') {
-        this.ui.PANEL_MODE = 'condensed'
+        this.panel.MODE = 'condensed'
         this.displayCaption()
       } else if (['facet', 'datafilters'].includes(this.options.onLoadPanel)) {
         this.openFacet()
@@ -528,8 +529,13 @@ U.Map = L.Map.extend({
         L.DomEvent.stop(e)
         this.search()
       } else if (e.keyCode === U.Keys.ESC) {
-        if (this.help.visible()) this.help.hide()
-        else this.ui.closePanel()
+        if (this.help.visible()) {
+          this.help.hide()
+        } else {
+          this.panel.close()
+          this.editPanel.close()
+          this.fullPanel.close()
+        }
       }
 
       if (!this.hasEditMode()) return
@@ -1629,8 +1635,7 @@ U.Map = L.Map.extend({
   askForReset: function (e) {
     if (!confirm(L._('Are you sure you want to cancel your changes?'))) return
     this.reset()
-    this.disableEdit(e)
-    this.ui.closePanel()
+    this.disableEdit()
   },
 
   startMarker: function () {

umap/static/umap/js/umap.layer.js

@@ -1347,7 +1347,7 @@ U.DataLayer = L.Evented.extend({
       L._('Delete'),
       function () {
         this._delete()
-        this.map.ui.closePanel()
+        this.map.editPanel.close()
       },
       this
     )

umap/static/umap/js/umap.permissions.js

@@ -137,7 +137,7 @@ U.MapPermissions = L.Class.extend({
         content: L._('Map has been attached to your account'),
         level: 'info',
       })
-      this.map.ui.closePanel()
+      this.map.editPanel.close()
     }
   },
 

umap/static/umap/test/DataLayer.js

@@ -126,7 +126,7 @@ describe('U.DataLayer', () => {
     })
 
     it('should have a new layer button', () => {
-      newLayerButton = qs('#umap-panel .add-datalayer')
+      newLayerButton = qs('.panel.right.on .add-datalayer')
       assert.ok(newLayerButton)
     })
 

umap/static/umap/test/TableEditor.js

@@ -34,9 +34,9 @@ describe('L.TableEditor', () => {
 
     it('should open table button click', () => {
       happen.click(button)
-      expect(qs('#umap-panel div.table')).to.be.ok
-      expect(qsa('#umap-panel div.table form').length).to.eql(3) // One per feature.
-      expect(qsa('#umap-panel div.table input').length).to.eql(3) // One per feature and per property.
+      expect(qs('.panel.full.on div.table')).to.be.ok
+      expect(qsa('.panel.full.on div.table form').length).to.eql(3) // One per feature.
+      expect(qsa('.panel.full.on div.table input').length).to.eql(3) // One per feature and per property.
     })
   })
   describe('#properties()', () => {
@@ -53,10 +53,10 @@ describe('L.TableEditor', () => {
       }
       var oldPrompt = window.prompt
       window.prompt = newPrompt
-      var button = qs('#umap-panel .add-property')
+      var button = qs('.panel.full.on .add-property')
       expect(button).to.be.ok
       happen.click(button)
-      expect(qsa('#umap-panel div.table input').length).to.eql(6) // One per feature and per property.
+      expect(qsa('.panel.full.on div.table input').length).to.eql(6) // One per feature and per property.
       window.prompt = oldPrompt
     })
 
@@ -74,10 +74,10 @@ describe('L.TableEditor', () => {
       }
       var oldPrompt = window.prompt
       window.prompt = newPrompt
-      var button = qs('#umap-panel div.thead div.tcell:last-of-type .umap-edit')
+      var button = qs('.panel.full.on div.thead div.tcell:last-of-type .umap-edit')
       expect(button).to.be.ok
       happen.click(button)
-      expect(qsa('#umap-panel div.table input').length).to.eql(6)
+      expect(qsa('.panel.full.on div.table input').length).to.eql(6)
       expect(feature.properties.newprop).to.be.undefined
       expect(feature.properties.newname).to.eql('the value')
       window.prompt = oldPrompt
@@ -91,12 +91,12 @@ describe('L.TableEditor', () => {
       oldConfirm = window.confirm
       window.confirm = newConfirm
       var button = qs(
-        '#umap-panel div.thead div.tcell:last-of-type .umap-delete'
+        '.panel.full.on div.thead div.tcell:last-of-type .umap-delete'
       )
       expect(button).to.be.ok
       happen.click(button)
       FEATURE = feature
-      expect(qsa('#umap-panel div.table input').length).to.eql(3)
+      expect(qsa('.panel.full.on div.table input').length).to.eql(3)
       expect(feature.properties.newname).to.be.undefined
       window.confirm = oldConfirm
     })

umap/tests/integration/test_anonymous_owned_map.py

@@ -114,12 +114,13 @@ def test_anonymous_can_add_marker_on_editable_layer(
     marker = page.locator(".leaflet-marker-icon")
     map_el = page.locator("#map")
     expect(marker).to_have_count(2)
-    expect(map_el).not_to_have_class(re.compile("umap-ui"))
+    panel = page.locator('.panel.right.on')
+    expect(panel).to_be_hidden()
     add_marker.click()
     map_el.click(position={"x": 100, "y": 100})
     expect(marker).to_have_count(3)
     # Edit panel is open
-    expect(map_el).to_have_class(re.compile("umap-ui"))
+    expect(panel).to_be_visible()
     datalayer_select = page.locator("select[name='datalayer']")
     expect(datalayer_select).to_be_visible()
     options = page.locator("select[name='datalayer'] option")
@@ -131,7 +132,7 @@ def test_anonymous_can_add_marker_on_editable_layer(
 def test_can_change_perms_after_create(tilelayer, live_server, page):
     page.goto(f"{live_server.url}/en/map/new")
     # Create a layer
-    page.get_by_title("See layers").click()
+    page.get_by_title("Manage layers").click()
     page.get_by_title("Add a layer").click()
     page.locator("input[name=name]").fill("Layer 1")
     save = page.get_by_role("button", name="Save")

umap/tests/integration/test_browser.py

@@ -159,7 +159,7 @@ def test_data_browser_bbox_filter_should_be_persistent(
     el = page.get_by_text("Current map view")
     expect(el).to_be_visible()
     el.click()
-    browser = page.locator("#umap-panel")
+    browser = page.locator(".panel.left.on")
     expect(browser.get_by_text("one point in france")).to_be_visible()
     expect(browser.get_by_text("one line in new zeland")).to_be_hidden()
     expect(browser.get_by_text("one polygon in greenland")).to_be_hidden()
@@ -184,7 +184,7 @@ def test_data_browser_bbox_filtered_is_clickable(live_server, page, bootstrap, m
     el = page.get_by_text("Current map view")
     expect(el).to_be_visible()
     el.click()
-    browser = page.locator("#umap-panel")
+    browser = page.locator(".panel.left.on")
     expect(browser.get_by_text("one point in france")).to_be_visible()
     expect(browser.get_by_text("one line in new zeland")).to_be_hidden()
     expect(browser.get_by_text("one polygon in greenland")).to_be_hidden()
@@ -236,7 +236,7 @@ def test_should_redraw_list_on_feature_delete(live_server, openmap, page, bootst
     page.goto(f"{live_server.url}{openmap.get_absolute_url()}")
     # Enable edit
     page.get_by_role("button", name="Edit").click()
-    buttons = page.locator(".umap-browser .datalayer li .feature-delete")
+    buttons = page.locator(".umap-browser .datalayer li .icon-delete")
     expect(buttons).to_have_count(3)
     page.on("dialog", lambda dialog: dialog.accept())
     buttons.nth(0).click()
@@ -282,7 +282,7 @@ def test_should_allow_to_toggle_datalayer_visibility(live_server, map, page, boo
     paths = page.locator(".leaflet-overlay-pane path")
     expect(markers).to_have_count(1)
     expect(paths).to_have_count(2)
-    toggle = page.locator("#umap-ui-container").get_by_title("Show/hide layer")
+    toggle = page.locator(".umap-browser").get_by_title("Show/hide layer")
     toggle.click()
     expect(markers).to_have_count(0)
     expect(paths).to_have_count(0)
@@ -290,7 +290,7 @@ def test_should_allow_to_toggle_datalayer_visibility(live_server, map, page, boo
 
 def test_should_have_edit_buttons_in_edit_mode(live_server, openmap, page, bootstrap):
     page.goto(f"{live_server.url}{openmap.get_absolute_url()}")
-    browser = page.locator("#umap-ui-container")
+    browser = page.locator(".umap-browser")
     edit_layer = browser.get_by_title("Edit", exact=True)
     in_table = browser.get_by_title("Edit properties in a table")
     delete_layer = browser.get_by_title("Delete layer")

umap/tests/integration/test_edit_datalayer.py

@@ -12,15 +12,13 @@ def test_should_have_fieldset_for_layer_type_properties(page, live_server, tilel
     page.goto(f"{live_server.url}/en/map/new/")
 
     # Open DataLayers list
-    button = page.get_by_title("See layers")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Manage layers").click()
 
     # Create a layer
     page.get_by_title("Add a layer").click()
     page.locator("input[name=name]").fill("Layer 1")
 
-    select = page.locator("#umap-panel .umap-field-type select")
+    select = page.locator(".panel.on .umap-field-type select")
     expect(select).to_be_visible()
 
     choropleth_header = page.get_by_text("Choropleth: settings")

umap/tests/integration/test_import.py

@@ -1,5 +1,6 @@
 import json
 import re
+from time import sleep
 from pathlib import Path
 
 import pytest
@@ -12,9 +13,7 @@ pytestmark = pytest.mark.django_db
 
 def test_umap_import_from_file(live_server, tilelayer, page):
     page.goto(f"{live_server.url}/map/new/")
-    button = page.get_by_title("Import data")
-    expect(button).to_be_visible()
-    button.click()
+    page.get_by_title("Import data").click()
     file_input = page.locator("input[type='file']")
     with page.expect_file_chooser() as fc_info:
         file_input.click()
@@ -27,6 +26,9 @@ def test_umap_import_from_file(live_server, tilelayer, page):
     assert file_input.input_value()
     # Close the import panel
     page.keyboard.press("Escape")
+    # Reopen
+    page.get_by_title("Import data").click()
+    sleep(1)  # Wait for CSS transition to happen
     assert not file_input.input_value()
     expect(page.locator(".umap-main-edit-toolbox .map-name")).to_have_text(
         "Carte sans nom"

umap/tests/integration/test_map.py

@@ -179,7 +179,7 @@ def test_remote_layer_should_not_be_used_as_datalayer_for_created_features(
     marker = page.locator(".leaflet-marker-icon")
     expect(marker).to_have_count(0)
     add_marker.click()
-    map_el.click(position={"x": 100, "y": 100})
+    map_el.click(position={"x": 500, "y": 100})
     expect(marker).to_have_count(1)
     # A new datalayer has been created to host this created feature
     # given the remote one cannot accept new features
@@ -196,9 +196,9 @@ def test_can_hide_datalayer_from_caption(openmap, live_server, datalayer, page):
     toggle.click()
     layers = page.locator(".umap-caption .datalayer-legend")
     expect(layers).to_have_count(1)
-    found = page.locator("#umap-panel").get_by_text(datalayer.name)
+    found = page.locator(".panel.left.on").get_by_text(datalayer.name)
     expect(found).to_be_visible()
-    hidden = page.locator("#umap-panel").get_by_text(other.name)
+    hidden = page.locator(".panel.left.on").get_by_text(other.name)
     expect(hidden).to_be_hidden()
 
 

umap/tests/integration/test_owned_map.py

@@ -186,7 +186,7 @@ def test_can_change_perms_after_create(tilelayer, live_server, login, user):
     page = login(user)
     page.goto(f"{live_server.url}/en/map/new")
     # Create a layer
-    page.get_by_title("See layers").click()
+    page.get_by_title("Manage layers").click()
     page.get_by_title("Add a layer").click()
     page.locator("input[name=name]").fill("Layer 1")
     save = page.get_by_role("button", name="Save")

umap/tests/integration/test_picto.py

@@ -171,7 +171,7 @@ def test_can_use_remote_url_as_picto(openmap, live_server, page, pictos):
     input_el.blur()
     expect(marker).to_have_attribute("src", "https://foo.bar/img.jpg")
     # Now close and reopen the form, it should still be the URL tab
-    close = page.locator("#umap-panel .toolbox").get_by_title("Close")
+    close = page.locator(".panel.right.on .toolbox").get_by_title("Close")
     expect(close).to_be_visible()
     close.click()
     edit_settings.click()
@@ -210,7 +210,7 @@ def test_can_use_char_as_picto(openmap, live_server, page, pictos):
     expect(marker).to_have_count(1)
     expect(marker).to_have_text("♩")
     # Now close and reopen the form, it should still be the URL tab
-    close = page.locator("#umap-panel .toolbox").get_by_title("Close")
+    close = page.locator(".panel.right.on .toolbox").get_by_title("Close")
     expect(close).to_be_visible()
     close.click()
     edit_settings.click()

umap/tests/integration/test_querystring.py

@@ -29,8 +29,9 @@ def test_datalayers_control(map, live_server, datalayer, page):
     page.goto(f"{live_server.url}{map.get_absolute_url()}?datalayersControl=false")
     expect(control).to_be_hidden()
     expect(browser).to_be_hidden()
+    # Retrocompat
     page.goto(f"{live_server.url}{map.get_absolute_url()}?datalayersControl=expanded")
-    expect(control).to_be_hidden()
+    expect(control).to_be_visible()
     expect(browser).to_be_visible()