From 98f1e48df97af0a4ee09c83af5a86159e2df2af9 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Fri, 22 Mar 2024 12:01:53 +0100
Subject: [PATCH 1/5] chore: move Choropleth tests to PW

---
 umap/static/umap/test/Choropleth.js       | 245 ----------------------
 umap/static/umap/test/index.html          |   1 -
 umap/tests/integration/test_choropleth.py |  99 +++++++++
 umap/tests/integration/test_map.py        |  24 ---
 4 files changed, 99 insertions(+), 270 deletions(-)
 delete mode 100644 umap/static/umap/test/Choropleth.js
 create mode 100644 umap/tests/integration/test_choropleth.py

diff --git a/umap/static/umap/test/Choropleth.js b/umap/static/umap/test/Choropleth.js
deleted file mode 100644
index de479af3..00000000
--- a/umap/static/umap/test/Choropleth.js
+++ /dev/null
@@ -1,245 +0,0 @@
-const POLYGONS = {
-  _umap_options: defaultDatalayerData(),
-  type: 'FeatureCollection',
-  features: [
-    {
-      type: 'Feature',
-      properties: {
-        name: 'number 1',
-        value: 45,
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [
-          [
-            [0, 49],
-            [-2, 47],
-            [1, 46],
-            [3, 47],
-            [0, 49],
-          ],
-        ],
-      },
-    },
-    {
-      type: 'Feature',
-      properties: {
-        name: 'number 2',
-        value: 87,
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [
-          [
-            [0, 49],
-            [2, 50],
-            [6, 49],
-            [4, 47],
-            [0, 49],
-          ],
-        ],
-      },
-    },
-    {
-      type: 'Feature',
-      properties: {
-        name: 'number 3',
-        value: 673,
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [
-          [
-            [4, 47],
-            [6, 49],
-            [11, 47],
-            [9, 45],
-            [4, 47],
-          ],
-        ],
-      },
-    },
-    {
-      type: 'Feature',
-      properties: {
-        name: 'number 4',
-        value: 674,
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [
-          [
-            [2, 46],
-            [4, 47],
-            [8, 45],
-            [6, 43],
-            [2, 46],
-          ],
-        ],
-      },
-    },
-    {
-      type: 'Feature',
-      properties: {
-        name: 'number 5',
-        value: 839,
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [
-          [
-            [-2, 47],
-            [1, 46],
-            [0, 44],
-            [-4, 45],
-            [-2, 47],
-          ],
-        ],
-      },
-    },
-    {
-      type: 'Feature',
-      properties: {
-        name: 'number 6',
-        value: 3829,
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [
-          [
-            [1, 45],
-            [5, 43],
-            [4, 42],
-            [0, 44],
-            [1, 45],
-          ],
-        ],
-      },
-    },
-    {
-      type: 'Feature',
-      properties: {
-        name: 'number 7',
-        value: 4900,
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [
-          [
-            [9, 45],
-            [12, 47],
-            [15, 45],
-            [13, 43],
-            [9, 45],
-          ],
-        ],
-      },
-    },
-    {
-      type: 'Feature',
-      properties: {
-        name: 'number 8',
-        value: 4988,
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [
-          [
-            [7, 43],
-            [9, 45],
-            [12, 43],
-            [10, 42],
-            [7, 43],
-          ],
-        ],
-      },
-    },
-    {
-      type: 'Feature',
-      properties: {
-        name: 'number 9',
-        value: 9898,
-      },
-      geometry: {
-        type: 'Polygon',
-        coordinates: [
-          [
-            [4, 42],
-            [6, 43],
-            [9, 41],
-            [7, 40],
-            [4, 42],
-          ],
-        ],
-      },
-    },
-  ],
-}
-
-describe('U.Choropleth', () => {
-  let path = '/map/99/datalayer/edit/62/',
-    poly1,
-    poly4,
-    poly9,
-    map,
-    datalayer
-
-  before(async () => {
-    fetchMock.mock(/\/datalayer\/62\/\?.*/, JSON.stringify(POLYGONS))
-    map = initMap({ umap_id: 99 })
-    const datalayer_options = defaultDatalayerData()
-    await map.initDataLayers([datalayer_options])
-    datalayer = map.getDataLayerByUmapId(62)
-    datalayer.options.type = 'Choropleth'
-    datalayer.options.choropleth = {
-      property: 'value',
-    }
-    enableEdit()
-    datalayer.eachLayer(function (layer) {
-      if (layer.properties.name === 'number 1') {
-        poly1 = layer
-      } else if (layer.properties.name === 'number 4') {
-        poly4 = layer
-      } else if (layer.properties.name === 'number 9') {
-        poly9 = layer
-      }
-    })
-  })
-  after(() => {
-    fetchMock.restore()
-    resetMap()
-  })
-
-  describe('#init()', () => {
-    it('datalayer should have 9 features', () => {
-      assert.equal(datalayer._index.length, 9)
-    })
-  })
-  describe('#compute()', () => {
-    it('choropleth should compute default colors', () => {
-      datalayer.resetLayer(true)
-      assert.deepEqual(
-        datalayer.layer.options.breaks,
-        [45, 673, 3829, 4900, 9898, 9898]
-      )
-      assert.equal(poly1._path.attributes.fill.value, '#eff3ff')
-      assert.equal(poly4._path.attributes.fill.value, '#bdd7e7')
-      assert.equal(poly9._path.attributes.fill.value, '#3182bd')
-    })
-    it('can change brewer scheme', () => {
-      datalayer.options.choropleth.brewer = 'Reds'
-      datalayer.resetLayer(true)
-      assert.equal(poly1._path.attributes.fill.value, '#fee5d9')
-      assert.equal(poly4._path.attributes.fill.value, '#fcae91')
-      assert.equal(poly9._path.attributes.fill.value, '#de2d26')
-    })
-    it('choropleth should allow to change steps', () => {
-      datalayer.options.choropleth.brewer = 'Blues'
-      datalayer.options.choropleth.classes = 6
-      datalayer.resetLayer(true)
-      assert.equal(poly1._path.attributes.fill.value, '#eff3ff')
-      assert.equal(poly4._path.attributes.fill.value, '#c6dbef')
-      assert.equal(poly9._path.attributes.fill.value, '#3182bd')
-    })
-  })
-})
diff --git a/umap/static/umap/test/index.html b/umap/static/umap/test/index.html
index 254728ce..a4131574 100644
--- a/umap/static/umap/test/index.html
+++ b/umap/static/umap/test/index.html
@@ -96,7 +96,6 @@
     <script src="./Polygon.js" defer></script>
     <script src="./Util.js" defer></script>
     <script src="./Permissions.js" defer></script>
-    <script src="./Choropleth.js" defer></script>
     <script type="module" src="./URLs.js" defer></script>
     <style type="text/css">
         #mocha {
diff --git a/umap/tests/integration/test_choropleth.py b/umap/tests/integration/test_choropleth.py
new file mode 100644
index 00000000..7b5cdeab
--- /dev/null
+++ b/umap/tests/integration/test_choropleth.py
@@ -0,0 +1,99 @@
+import json
+from pathlib import Path
+
+import pytest
+from playwright.sync_api import expect
+
+from umap.models import Map
+
+from ..base import DataLayerFactory
+
+pytestmark = pytest.mark.django_db
+
+
+def test_basic_choropleth_map_with_default_color(map, live_server, page):
+    path = Path(__file__).parent.parent / "fixtures/choropleth_region_chomage.geojson"
+    data = json.loads(path.read_text())
+    DataLayerFactory(data=data, map=map)
+    page.goto(f"{live_server.url}{map.get_absolute_url()}")
+    # Hauts-de-France
+    expect(page.locator("path[fill='#08519c']")).to_have_count(1)
+    # Occitanie
+    expect(page.locator("path[fill='#3182bd']")).to_have_count(1)
+    # Grand-Est, PACA
+    expect(page.locator("path[fill='#6baed6']")).to_have_count(2)
+    # Bourgogne-Franche-Comté, Centre-Val-de-Loire, IdF, Normandie, Corse, Nouvelle-Aquitaine
+    expect(page.locator("path[fill='#bdd7e7']")).to_have_count(6)
+    # Bretagne, Pays de la Loire, AURA
+    expect(page.locator("path[fill='#eff3ff']")).to_have_count(3)
+
+
+def test_basic_choropleth_map_with_custom_brewer(map, live_server, page):
+    # Faster than doing a login
+    map.edit_status = Map.ANONYMOUS
+    map.save()
+
+    path = Path(__file__).parent.parent / "fixtures/choropleth_region_chomage.geojson"
+    data = json.loads(path.read_text())
+
+    # Change brewer at load
+    data["_umap_options"]["choropleth"]["brewer"] = "Reds"
+    DataLayerFactory(data=data, map=map)
+
+    page.goto(f"{live_server.url}{map.get_absolute_url()}")
+    # Hauts-de-France
+    expect(page.locator("path[fill='#a50f15']")).to_have_count(1)
+    # Occitanie
+    expect(page.locator("path[fill='#de2d26']")).to_have_count(1)
+    # Grand-Est, PACA
+    expect(page.locator("path[fill='#fb6a4a']")).to_have_count(2)
+    # Bourgogne-Franche-Comté, Centre-Val-de-Loire, IdF, Normandie, Corse, Nouvelle-Aquitaine
+    expect(page.locator("path[fill='#fcae91']")).to_have_count(6)
+    # Bretagne, Pays de la Loire, AURA
+    expect(page.locator("path[fill='#fee5d9']")).to_have_count(3)
+
+    # Now change brewer from UI
+    page.get_by_role("button", name="Edit").click()
+    page.get_by_role("link", name="Manage layers").click()
+    page.locator("#umap-ui-container").get_by_title("Edit", exact=True).click()
+    page.get_by_role("heading", name="Choropleth: settings").click()
+    page.locator('select[name="brewer"]').select_option("Greens")
+
+    # Hauts-de-France
+    expect(page.locator("path[fill='#006d2c']")).to_have_count(1)
+    # Occitanie
+    expect(page.locator("path[fill='#31a354']")).to_have_count(1)
+    # Grand-Est, PACA
+    expect(page.locator("path[fill='#74c476']")).to_have_count(2)
+    # Bourgogne-Franche-Comté, Centre-Val-de-Loire, IdF, Normandie, Corse, Nouvelle-Aquitaine
+    expect(page.locator("path[fill='#bae4b3']")).to_have_count(6)
+    # Bretagne, Pays de la Loire, AURA
+    expect(page.locator("path[fill='#edf8e9']")).to_have_count(3)
+
+
+def test_basic_choropleth_map_with_custom_classes(map, live_server, page):
+    # Faster than doing a login
+    map.edit_status = Map.ANONYMOUS
+    map.save()
+
+    path = Path(__file__).parent.parent / "fixtures/choropleth_region_chomage.geojson"
+    data = json.loads(path.read_text())
+
+    # Change brewer at load
+    data["_umap_options"]["choropleth"]["classes"] = 6
+    DataLayerFactory(data=data, map=map)
+
+    page.goto(f"{live_server.url}{map.get_absolute_url()}")
+
+    # Hauts-de-France
+    expect(page.locator("path[fill='#08519c']")).to_have_count(1)
+    # Occitanie
+    expect(page.locator("path[fill='#3182bd']")).to_have_count(1)
+    # PACA
+    expect(page.locator("path[fill='#6baed6']")).to_have_count(1)
+    # Grand-Est
+    expect(page.locator("path[fill='#9ecae1']")).to_have_count(1)
+    # Bourgogne-Franche-Comté, Centre-Val-de-Loire, IdF, Normandie, Corse, Nouvelle-Aquitaine
+    expect(page.locator("path[fill='#c6dbef']")).to_have_count(6)
+    # Bretagne, Pays de la Loire, AURA
+    expect(page.locator("path[fill='#eff3ff']")).to_have_count(3)
diff --git a/umap/tests/integration/test_map.py b/umap/tests/integration/test_map.py
index f0624008..ef27ab72 100644
--- a/umap/tests/integration/test_map.py
+++ b/umap/tests/integration/test_map.py
@@ -1,6 +1,4 @@
-import json
 import re
-from pathlib import Path
 
 import pytest
 from playwright.sync_api import expect
@@ -199,28 +197,6 @@ def test_can_hide_datalayer_from_caption(map, live_server, datalayer, page):
     expect(hidden).to_be_hidden()
 
 
-def test_basic_choropleth_map(map, live_server, page):
-    path = Path(__file__).parent.parent / "fixtures/choropleth_region_chomage.geojson"
-    data = json.loads(path.read_text())
-    DataLayerFactory(data=data, map=map)
-    page.goto(f"{live_server.url}{map.get_absolute_url()}")
-    # Hauts-de-France
-    paths = page.locator("path[fill='#08519c']")
-    expect(paths).to_have_count(1)
-    # Occitanie
-    paths = page.locator("path[fill='#3182bd']")
-    expect(paths).to_have_count(1)
-    # Grand-Est, PACA
-    paths = page.locator("path[fill='#6baed6']")
-    expect(paths).to_have_count(2)
-    # Bourgogne-Franche-Comté, Centre-Val-de-Loire, IdF, Normandie, Corse, Nouvelle-Aquitaine
-    paths = page.locator("path[fill='#bdd7e7']")
-    expect(paths).to_have_count(6)
-    # Bretagne, Pays de la Loire, AURA
-    paths = page.locator("path[fill='#eff3ff']")
-    expect(paths).to_have_count(3)
-
-
 def test_minimap_on_load(map, live_server, datalayer, page):
     page.goto(f"{live_server.url}{map.get_absolute_url()}")
     expect(page.locator(".leaflet-control-minimap")).to_be_hidden()

From 5d8706c2614eeef96103c4ad8af8c6fa365a0677 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Fri, 22 Mar 2024 12:17:23 +0100
Subject: [PATCH 2/5] chore: remove Permissions tests from JS and update PW
 ones

---
 umap/static/umap/test/Permissions.js          | 74 -------------------
 umap/static/umap/test/index.html              |  1 -
 .../integration/test_anonymous_owned_map.py   |  3 +
 3 files changed, 3 insertions(+), 75 deletions(-)
 delete mode 100644 umap/static/umap/test/Permissions.js

diff --git a/umap/static/umap/test/Permissions.js b/umap/static/umap/test/Permissions.js
deleted file mode 100644
index 979dcd03..00000000
--- a/umap/static/umap/test/Permissions.js
+++ /dev/null
@@ -1,74 +0,0 @@
-describe('L.Permissions', function () {
-  var path = '/map/99/datalayer/edit/62/'
-
-  before(function () {
-    this.server = sinon.fakeServer.create()
-    this.server.respondWith(
-      /\/datalayer\/62\/\?.*/,
-      JSON.stringify(RESPONSES.datalayer62_GET)
-    )
-    this.map = initMap({ umap_id: 99 })
-    this.datalayer = this.map.getDataLayerByUmapId(62)
-    this.server.respond()
-    enableEdit()
-  })
-  after(function () {
-    clickCancel()
-    this.server.restore()
-    resetMap()
-  })
-
-  describe('#open()', function () {
-    var button
-
-    it('should exist update permissions link', function () {
-      button = qs('a.update-map-permissions')
-      expect(button).to.be.ok
-    })
-
-    it('should open table button click', function () {
-      happen.click(button)
-      expect(qs('.permissions-panel')).to.be.ok
-    })
-  })
-  describe('#anonymous with cookie', function () {
-    var button
-
-    it('should not allow share_status nor owner', function () {
-      this.map.permissions.options.anonymous_edit_url = 'http://anonymous.url'
-      delete this.map.options.permissions.owner
-      button = qs('a.update-map-permissions')
-      happen.click(button)
-      expect(qs('select[name="share_status"]')).not.to.be.ok
-      expect(qs('input.edit-owner')).not.to.be.ok
-    })
-  })
-
-  describe('#editor', function () {
-    var button
-
-    it('should only allow editors', function () {
-      this.map.options.permissions.owner = { id: 1, url: '/url', name: 'jojo' }
-      delete this.map.options.permissions.anonymous_edit_url
-      delete this.map.options.user
-      button = qs('a.update-map-permissions')
-      happen.click(button)
-      expect(qs('select[name="share_status"]')).not.to.be.ok
-      expect(qs('input.edit-owner')).not.to.be.ok
-      expect(qs('input.edit-editors')).to.be.ok
-    })
-  })
-
-  describe('#owner', function () {
-    var button
-
-    it('should allow everything', function () {
-      this.map.permissions.options.owner = { id: 1, url: '/url', name: 'jojo' }
-      this.map.options.user = { id: 1, url: '/url', name: 'jojo' }
-      button = qs('a.update-map-permissions')
-      happen.click(button)
-      expect(qs('input.edit-owner')).to.be.ok
-      expect(qs('input.edit-editors')).to.be.ok
-    })
-  })
-})
diff --git a/umap/static/umap/test/index.html b/umap/static/umap/test/index.html
index a4131574..8ab2c567 100644
--- a/umap/static/umap/test/index.html
+++ b/umap/static/umap/test/index.html
@@ -95,7 +95,6 @@
     <script src="./Polyline.js" defer></script>
     <script src="./Polygon.js" defer></script>
     <script src="./Util.js" defer></script>
-    <script src="./Permissions.js" defer></script>
     <script type="module" src="./URLs.js" defer></script>
     <style type="text/css">
         #mocha {
diff --git a/umap/tests/integration/test_anonymous_owned_map.py b/umap/tests/integration/test_anonymous_owned_map.py
index 0f2ee25c..89c590d7 100644
--- a/umap/tests/integration/test_anonymous_owned_map.py
+++ b/umap/tests/integration/test_anonymous_owned_map.py
@@ -92,6 +92,9 @@ def test_owner_permissions_form(map, datalayer, live_server, owner_session):
         ".datalayer-permissions select[name='edit_status'] option:checked"
     )
     expect(option).to_have_text("Inherit")
+    # Those fields should not be present in anonymous maps
+    expect(owner_session.locator(".umap-field-share_status select")).to_be_hidden()
+    expect(owner_session.locator(".umap-field-owner")).to_be_hidden()
 
 
 def test_anonymous_can_add_marker_on_editable_layer(

From b9e27fc885f8391c30d1ab1b9b3a66478d9e3005 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Fri, 22 Mar 2024 14:43:24 +0100
Subject: [PATCH 3/5] chore: change default playwright timeout to 5000ms

---
 umap/tests/integration/conftest.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/umap/tests/integration/conftest.py b/umap/tests/integration/conftest.py
index 2b4ddca1..13a5a7c6 100644
--- a/umap/tests/integration/conftest.py
+++ b/umap/tests/integration/conftest.py
@@ -1,6 +1,11 @@
 import pytest
 
 
+@pytest.fixture(autouse=True)
+def set_timeout(context):
+    context.set_default_timeout(5000)
+
+
 @pytest.fixture
 def login(context, settings, live_server):
     def do_login(user):

From 1a2482f1e4e9209a59faffb5dcee7c84914836ee Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Fri, 22 Mar 2024 17:32:33 +0100
Subject: [PATCH 4/5] chore: move Polygon integration tests to PW

---
 umap/static/umap/test/Polygon.js       | 256 ------------------
 umap/tests/integration/test_drawing.py | 122 ---------
 umap/tests/integration/test_polygon.py | 358 +++++++++++++++++++++++++
 3 files changed, 358 insertions(+), 378 deletions(-)
 create mode 100644 umap/tests/integration/test_polygon.py

diff --git a/umap/static/umap/test/Polygon.js b/umap/static/umap/test/Polygon.js
index f0c1124c..d0860167 100644
--- a/umap/static/umap/test/Polygon.js
+++ b/umap/static/umap/test/Polygon.js
@@ -108,260 +108,4 @@ describe('U.Polygon', function () {
     })
   })
 
-  describe('#contextmenu', function () {
-    afterEach(function () {
-      // Make sure contextmenu is hidden
-      happen.once(document, { type: 'keydown', keyCode: 27 })
-    })
-
-    describe('#in edit mode', function () {
-      it('should allow to remove shape when multi', function () {
-        var latlngs = [
-            [[p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)]],
-            [[p2ll(300, 350), p2ll(350, 400), p2ll(400, 300)]],
-          ],
-          layer = new U.Polygon(map, latlngs, {
-            datalayer: datalayer,
-          }).addTo(datalayer)
-        happen.once(layer._path, { type: 'contextmenu' })
-        assert.equal(qst('Remove shape from the multi'), 1)
-      })
-
-      it('should not allow to remove shape when not multi', function () {
-        var latlngs = [[[p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)]]],
-          layer = new U.Polygon(map, latlngs, {
-            datalayer: datalayer,
-          }).addTo(datalayer)
-        happen.once(layer._path, { type: 'contextmenu' })
-        assert.notOk(qst('Remove shape from the multi'))
-      })
-
-      it('should not allow to isolate shape when not multi', function () {
-        var latlngs = [[[p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)]]],
-          layer = new U.Polygon(map, latlngs, {
-            datalayer: datalayer,
-          }).addTo(datalayer)
-        happen.once(layer._path, { type: 'contextmenu' })
-        assert.notOk(qst('Extract shape to separate feature'))
-      })
-
-      it('should allow to isolate shape when multi', function () {
-        var latlngs = [
-            [[p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)]],
-            [[p2ll(300, 350), p2ll(350, 400), p2ll(400, 300)]],
-          ],
-          layer = new U.Polygon(map, latlngs, {
-            datalayer: datalayer,
-          }).addTo(datalayer)
-        happen.once(layer._path, { type: 'contextmenu' })
-        assert.ok(qst('Extract shape to separate feature'))
-      })
-
-      it('should not allow to transform to lines when multi', function () {
-        var latlngs = [
-            [[p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)]],
-            [[p2ll(300, 350), p2ll(350, 400), p2ll(400, 300)]],
-          ],
-          layer = new U.Polygon(map, latlngs, {
-            datalayer: datalayer,
-          }).addTo(datalayer)
-        happen.once(layer._path, { type: 'contextmenu' })
-        assert.notOk(qst('Transform to lines'))
-      })
-
-      it('should not allow to transform to lines when hole', function () {
-        var latlngs = [
-            [
-              [p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)],
-              [p2ll(120, 150), p2ll(150, 180), p2ll(180, 120)],
-            ],
-          ],
-          layer = new U.Polygon(map, latlngs, {
-            datalayer: datalayer,
-          }).addTo(datalayer)
-        happen.once(layer._path, { type: 'contextmenu' })
-        assert.notOk(qst('Transform to lines'))
-      })
-
-      it('should allow to transform to lines when not multi', function () {
-        var latlngs = [[[p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)]]]
-        new U.Polygon(map, latlngs, { datalayer: datalayer }).addTo(
-          datalayer
-        )
-        happen.at('contextmenu', 150, 150)
-        assert.equal(qst('Transform to lines'), 1)
-      })
-
-      it('should not allow to transfer shape when not editedFeature', function () {
-        new U.Polygon(map, [p2ll(100, 150), p2ll(100, 200), p2ll(200, 150)], {
-          datalayer: datalayer,
-        }).addTo(datalayer)
-        happen.at('contextmenu', 110, 160)
-        assert.equal(qst('Delete this feature'), 1) // Make sure we have right clicked on the polygon.
-        assert.notOk(qst('Transfer shape to edited feature'))
-      })
-
-      it('should not allow to transfer shape when editedFeature is not a polygon', function () {
-        var layer = new U.Polygon(
-            map,
-            [p2ll(100, 150), p2ll(100, 200), p2ll(200, 150)],
-            { datalayer: datalayer }
-          ).addTo(datalayer),
-          other = new U.Polyline(map, [p2ll(200, 250), p2ll(200, 300)], {
-            datalayer: datalayer,
-          }).addTo(datalayer)
-        other.edit()
-        happen.once(layer._path, { type: 'contextmenu' })
-        assert.equal(qst('Delete this feature'), 1) // Make sure we have right clicked on the polygon.
-        assert.notOk(qst('Transfer shape to edited feature'))
-      })
-
-      it('should allow to transfer shape when another polygon is edited', function () {
-        datalayer.empty()
-        var layer = new U.Polygon(
-          map,
-          [p2ll(200, 300), p2ll(300, 200), p2ll(200, 100)],
-          { datalayer: datalayer }
-        ).addTo(datalayer)
-        layer.edit() // This moves the map to put "other" at the center.
-        var other = new U.Polygon(
-          map,
-          [p2ll(100, 150), p2ll(100, 200), p2ll(200, 150)],
-          { datalayer: datalayer }
-        ).addTo(datalayer)
-        happen.once(other._path, { type: 'contextmenu' })
-        assert.equal(qst('Transfer shape to edited feature'), 1)
-        layer.remove()
-      })
-    })
-  })
-
-  describe('#addShape', function () {
-    it('"add shape" control should not be visible by default', function () {
-      assert.notOk(qs('.umap-draw-polygon-multi'))
-    })
-
-    it('"add shape" control should be visible when editing a Polygon', function () {
-      var layer = new U.Polygon(map, [p2ll(100, 100), p2ll(100, 200)], {
-        datalayer: datalayer,
-      }).addTo(datalayer)
-      layer.edit()
-      assert.ok(qs('.umap-draw-polygon-multi'))
-    })
-
-    it('"add shape" control should extend the same multi', function () {
-      var layer = new U.Polygon(
-        map,
-        [p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)],
-        { datalayer: datalayer }
-      ).addTo(datalayer)
-      layer.edit()
-      assert.notOk(layer.isMulti())
-      happen.click(qs('.umap-draw-polygon-multi'))
-      happen.at('mousemove', 300, 300)
-      happen.at('click', 300, 300)
-      happen.at('mousemove', 350, 300)
-      happen.at('click', 350, 300)
-      happen.at('click', 350, 300)
-      assert.ok(layer.isMulti())
-      assert.equal(datalayer._index.length, 1)
-    })
-  })
-
-  describe('#transferShape', function () {
-    it('should transfer simple polygon shape to another polygon', function () {
-      var latlngs = [p2ll(100, 150), p2ll(100, 200), p2ll(200, 100)],
-        layer = new U.Polygon(map, latlngs, { datalayer: datalayer }).addTo(
-          datalayer
-        ),
-        other = new U.Polygon(
-          map,
-          [p2ll(200, 350), p2ll(200, 300), p2ll(300, 200)],
-          { datalayer: datalayer }
-        ).addTo(datalayer)
-      assert.ok(map.hasLayer(layer))
-      layer.transferShape(p2ll(150, 150), other)
-      assert.equal(other._latlngs.length, 2)
-      assert.deepEqual(other._latlngs[1][0], latlngs)
-      assert.notOk(map.hasLayer(layer))
-    })
-
-    it('should transfer multipolygon shape to another polygon', function () {
-      var latlngs = [
-          [
-            [p2ll(100, 150), p2ll(100, 200), p2ll(200, 100)],
-            [p2ll(120, 150), p2ll(150, 180), p2ll(180, 120)],
-          ],
-          [[p2ll(200, 300), p2ll(300, 200)]],
-        ],
-        layer = new U.Polygon(map, latlngs, { datalayer: datalayer }).addTo(
-          datalayer
-        ),
-        other = new U.Polygon(
-          map,
-          [p2ll(200, 350), p2ll(200, 300), p2ll(300, 200)],
-          { datalayer: datalayer }
-        ).addTo(datalayer)
-      assert.ok(map.hasLayer(layer))
-      layer.transferShape(p2ll(150, 150), other)
-      assert.equal(other._latlngs.length, 2)
-      assert.deepEqual(other._latlngs[1][0], latlngs[0][0])
-      assert.ok(map.hasLayer(layer))
-      assert.equal(layer._latlngs.length, 1)
-    })
-  })
-
-  describe('#isolateShape', function () {
-    it('should not allow to isolate simple polygon', function () {
-      var latlngs = [p2ll(100, 150), p2ll(100, 200), p2ll(200, 100)],
-        layer = new U.Polygon(map, latlngs, { datalayer: datalayer }).addTo(
-          datalayer
-        )
-      assert.equal(datalayer._index.length, 1)
-      assert.ok(map.hasLayer(layer))
-      layer.isolateShape(p2ll(150, 150))
-      assert.equal(layer._latlngs[0].length, 3)
-      assert.equal(datalayer._index.length, 1)
-    })
-
-    it('should isolate multipolygon shape', function () {
-      var latlngs = [
-          [
-            [p2ll(100, 150), p2ll(100, 200), p2ll(200, 100)],
-            [p2ll(120, 150), p2ll(150, 180), p2ll(180, 120)],
-          ],
-          [[p2ll(200, 300), p2ll(300, 200)]],
-        ],
-        layer = new U.Polygon(map, latlngs, { datalayer: datalayer }).addTo(
-          datalayer
-        )
-      assert.equal(datalayer._index.length, 1)
-      assert.ok(map.hasLayer(layer))
-      var other = layer.isolateShape(p2ll(150, 150))
-      assert.equal(datalayer._index.length, 2)
-      assert.equal(other._latlngs.length, 2)
-      assert.deepEqual(other._latlngs[0], latlngs[0][0])
-      assert.ok(map.hasLayer(layer))
-      assert.ok(map.hasLayer(other))
-      assert.equal(layer._latlngs.length, 1)
-      other.remove()
-    })
-  })
-
-  describe('#clone', function () {
-    it('should clone polygon', function () {
-      var latlngs = [p2ll(100, 150), p2ll(100, 200), p2ll(200, 100)],
-        layer = new U.Polygon(map, latlngs, { datalayer: datalayer }).addTo(
-          datalayer
-        )
-      assert.equal(datalayer._index.length, 1)
-      other = layer.clone()
-      assert.ok(map.hasLayer(other))
-      assert.equal(datalayer._index.length, 2)
-      // Must not be the same reference
-      assert.notEqual(layer._latlngs, other._latlngs)
-      assert.equal(L.Util.formatNum(layer._latlngs[0][0].lat), other._latlngs[0][0].lat)
-      assert.equal(L.Util.formatNum(layer._latlngs[0][0].lng), other._latlngs[0][0].lng)
-    })
-  })
 })
diff --git a/umap/tests/integration/test_drawing.py b/umap/tests/integration/test_drawing.py
index 4b04ea74..d84d9b3d 100644
--- a/umap/tests/integration/test_drawing.py
+++ b/umap/tests/integration/test_drawing.py
@@ -119,125 +119,3 @@ def test_clicking_esc_should_delete_line_if_invalid(page, live_server, tilelayer
     page.keyboard.press("Escape")
     expect(lines).to_have_count(0)
     expect(guide).to_have_count(0)
-
-
-def test_draw_polygon(page, live_server, tilelayer):
-    page.goto(f"{live_server.url}/en/map/new/")
-
-    # Click on the Draw a polygon button on a new map.
-    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
-        "Draw a polygon"
-    )
-    create_line.click()
-
-    # Check no polygon is present by default.
-    # We target with the color, because there is also the drawing line guide (dash-array)
-    # around
-    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
-    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
-
-    # Click on the map, it will create a polygon.
-    map = page.locator("#map")
-    map.click(position={"x": 200, "y": 200})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(1)
-    map.click(position={"x": 100, "y": 200})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(2)
-    map.click(position={"x": 100, "y": 100})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(2)
-    # Click again to finish
-    map.click(position={"x": 100, "y": 100})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(0)
-
-
-def test_clicking_esc_should_finish_polygon(page, live_server, tilelayer):
-    page.goto(f"{live_server.url}/en/map/new/")
-
-    # Click on the Draw a polygon button on a new map.
-    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
-        "Draw a polygon"
-    )
-    create_line.click()
-
-    # Check no polygon is present by default.
-    # We target with the color, because there is also the drawing line guide (dash-array)
-    # around
-    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
-    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
-
-    # Click on the map, it will create a polygon.
-    map = page.locator("#map")
-    map.click(position={"x": 200, "y": 200})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(1)
-    map.click(position={"x": 100, "y": 200})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(2)
-    map.click(position={"x": 100, "y": 100})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(2)
-    # Click ESC to finish
-    page.keyboard.press("Escape")
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(0)
-
-
-def test_clicking_esc_should_delete_polygon_if_empty(page, live_server, tilelayer):
-    page.goto(f"{live_server.url}/en/map/new/")
-
-    # Click on the Draw a polygon button on a new map.
-    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
-        "Draw a polygon"
-    )
-    create_line.click()
-
-    # Check no polygon is present by default.
-    # We target with the color, because there is also the drawing line guide (dash-array)
-    # around
-    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
-    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
-
-    # Click ESC to finish, no polygon should have been created
-    page.keyboard.press("Escape")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
-
-
-def test_clicking_esc_should_delete_polygon_if_invalid(page, live_server, tilelayer):
-    page.goto(f"{live_server.url}/en/map/new/")
-
-    # Click on the Draw a polygon button on a new map.
-    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
-        "Draw a polygon"
-    )
-    create_line.click()
-
-    # Check no polygon is present by default.
-    # We target with the color, because there is also the drawing line guide (dash-array)
-    # around
-    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
-    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
-
-    # Click on the map twice, it will start a polygon.
-    map = page.locator("#map")
-    map.click(position={"x": 200, "y": 200})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(1)
-    map.click(position={"x": 100, "y": 200})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(2)
-    # Click ESC to finish, the polygon is invalid, it should not be persisted
-    page.keyboard.press("Escape")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
diff --git a/umap/tests/integration/test_polygon.py b/umap/tests/integration/test_polygon.py
new file mode 100644
index 00000000..7dfbe96c
--- /dev/null
+++ b/umap/tests/integration/test_polygon.py
@@ -0,0 +1,358 @@
+import json
+import re
+from pathlib import Path
+
+import pytest
+from playwright.sync_api import expect
+
+from umap.models import DataLayer
+
+pytestmark = pytest.mark.django_db
+
+
+def save_and_get_json(page):
+    with page.expect_response(re.compile(r".*/datalayer/create/.*")):
+        page.get_by_role("button", name="Save").click()
+    datalayer = DataLayer.objects.last()
+    return json.loads(Path(datalayer.geojson.path).read_text())
+
+
+def test_draw_polygon(page, live_server, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+
+    # Click on the Draw a polygon button on a new map.
+    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
+        "Draw a polygon"
+    )
+    create_line.click()
+
+    # Check no polygon is present by default.
+    # We target with the color, because there is also the drawing line guide (dash-array)
+    # around
+    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
+    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+    # Click on the map, it will create a polygon.
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 200})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(1)
+    map.click(position={"x": 100, "y": 200})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(2)
+    map.click(position={"x": 100, "y": 100})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(2)
+    # Click again to finish
+    map.click(position={"x": 100, "y": 100})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(0)
+
+
+def test_clicking_esc_should_finish_polygon(page, live_server, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+
+    # Click on the Draw a polygon button on a new map.
+    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
+        "Draw a polygon"
+    )
+    create_line.click()
+
+    # Check no polygon is present by default.
+    # We target with the color, because there is also the drawing line guide (dash-array)
+    # around
+    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
+    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+    # Click on the map, it will create a polygon.
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 200})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(1)
+    map.click(position={"x": 100, "y": 200})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(2)
+    map.click(position={"x": 100, "y": 100})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(2)
+    # Click ESC to finish
+    page.keyboard.press("Escape")
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(0)
+
+
+def test_clicking_esc_should_delete_polygon_if_empty(page, live_server, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+
+    # Click on the Draw a polygon button on a new map.
+    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
+        "Draw a polygon"
+    )
+    create_line.click()
+
+    # Check no polygon is present by default.
+    # We target with the color, because there is also the drawing line guide (dash-array)
+    # around
+    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
+    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+    # Click ESC to finish, no polygon should have been created
+    page.keyboard.press("Escape")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+
+def test_clicking_esc_should_delete_polygon_if_invalid(page, live_server, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+
+    # Click on the Draw a polygon button on a new map.
+    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
+        "Draw a polygon"
+    )
+    create_line.click()
+
+    # Check no polygon is present by default.
+    # We target with the color, because there is also the drawing line guide (dash-array)
+    # around
+    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
+    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+    # Click on the map twice, it will start a polygon.
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 200})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(1)
+    map.click(position={"x": 100, "y": 200})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(2)
+    # Click ESC to finish, the polygon is invalid, it should not be persisted
+    page.keyboard.press("Escape")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+
+def test_can_draw_multi(live_server, page, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+    polygons = page.locator(".leaflet-overlay-pane path")
+    expect(polygons).to_have_count(0)
+    multi_button = page.get_by_title("Add a polygon to the current multi")
+    expect(multi_button).to_be_hidden()
+    page.get_by_title("Draw a polygon").click()
+    map = page.locator("#map")
+    map.click(position={"x": 150, "y": 100})
+    map.click(position={"x": 150, "y": 150})
+    map.click(position={"x": 100, "y": 150})
+    map.click(position={"x": 100, "y": 100})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 100})
+    expect(multi_button).to_be_visible()
+    expect(polygons).to_have_count(1)
+    multi_button.click()
+    map.click(position={"x": 250, "y": 200})
+    map.click(position={"x": 250, "y": 250})
+    map.click(position={"x": 200, "y": 250})
+    map.click(position={"x": 200, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 200, "y": 200})
+    expect(polygons).to_have_count(1)
+    page.keyboard.press("Escape")
+    expect(multi_button).to_be_hidden()
+    polygons.first.click(button="right", position={"x": 10, "y": 10})
+    expect(page.get_by_role("link", name="Transform to lines")).to_be_hidden()
+    expect(page.get_by_role("link", name="Remove shape from multi")).to_be_hidden()
+
+
+def test_can_draw_hole(page, live_server, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+
+    page.get_by_title("Draw a polygon").click()
+
+    polygons = page.locator(".leaflet-overlay-pane path")
+    vertices = page.locator(".leaflet-vertex-icon")
+
+    # Click on the map, it will create a polygon.
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 100})
+    map.click(position={"x": 200, "y": 200})
+    map.click(position={"x": 100, "y": 200})
+    map.click(position={"x": 100, "y": 100})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 100})
+    expect(polygons).to_have_count(1)
+    expect(vertices).to_have_count(4)
+
+    # First vertex of the hole will be created here
+    map.click(position={"x": 180, "y": 120})
+    page.get_by_role("link", name="Start a hole here").click()
+    map.click(position={"x": 180, "y": 180})
+    map.click(position={"x": 120, "y": 180})
+    map.click(position={"x": 120, "y": 120})
+    # Click again to finish
+    map.click(position={"x": 120, "y": 120})
+    expect(polygons).to_have_count(1)
+    expect(vertices).to_have_count(8)
+    # Click on the polygon but not in the hole
+    polygons.first.click(button="right", position={"x": 10, "y": 10})
+    expect(page.get_by_role("link", name="Transform to lines")).to_be_hidden()
+
+
+def test_can_transfer_shape_from_simple_polygon(live_server, page, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+    polygons = page.locator(".leaflet-overlay-pane path")
+    expect(polygons).to_have_count(0)
+    page.get_by_title("Draw a polygon").click()
+    map = page.locator("#map")
+
+    # Draw a first polygon
+    map.click(position={"x": 150, "y": 100})
+    map.click(position={"x": 150, "y": 150})
+    map.click(position={"x": 100, "y": 150})
+    map.click(position={"x": 100, "y": 100})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 100})
+    expect(polygons).to_have_count(1)
+
+    # Draw another polygon
+    page.get_by_title("Draw a polygon").click()
+    map.click(position={"x": 250, "y": 200})
+    map.click(position={"x": 250, "y": 250})
+    map.click(position={"x": 200, "y": 250})
+    map.click(position={"x": 200, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 200, "y": 200})
+    expect(polygons).to_have_count(2)
+
+    # Now that polygon 2 is selected, right click on first one
+    # and transfer shape
+    polygons.first.click(position={"x": 20, "y": 20}, button="right")
+    page.get_by_role("link", name="Transfer shape to edited feature").click()
+    expect(polygons).to_have_count(1)
+
+
+def test_can_transfer_shape(live_server, page, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+    polygons = page.locator(".leaflet-overlay-pane path")
+    expect(polygons).to_have_count(0)
+    page.get_by_title("Draw a polygon").click()
+    map = page.locator("#map")
+    map.click(position={"x": 150, "y": 100})
+    map.click(position={"x": 150, "y": 150})
+    map.click(position={"x": 100, "y": 150})
+    map.click(position={"x": 100, "y": 100})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 100})
+    expect(polygons).to_have_count(1)
+    extract_button = page.get_by_role("link", name="Extract shape to separate feature")
+    expect(extract_button).to_be_hidden()
+    page.get_by_title("Add a polygon to the current multi").click()
+    map.click(position={"x": 250, "y": 200})
+    map.click(position={"x": 250, "y": 250})
+    map.click(position={"x": 200, "y": 250})
+    map.click(position={"x": 200, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 200, "y": 200})
+    expect(polygons).to_have_count(1)
+    polygons.first.click(position={"x": 20, "y": 20}, button="right")
+    extract_button.click()
+    expect(polygons).to_have_count(2)
+
+
+def test_cannot_transfer_shape_to_line(live_server, page, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+    polygons = page.locator(".leaflet-overlay-pane path")
+    expect(polygons).to_have_count(0)
+    page.get_by_title("Draw a polygon").click()
+    map = page.locator("#map")
+    map.click(position={"x": 150, "y": 100})
+    map.click(position={"x": 150, "y": 150})
+    map.click(position={"x": 100, "y": 150})
+    map.click(position={"x": 100, "y": 100})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 100})
+    expect(polygons).to_have_count(1)
+    extract_button = page.get_by_role("link", name="Extract shape to separate feature")
+    polygons.first.click(position={"x": 20, "y": 20}, button="right")
+    expect(extract_button).to_be_hidden()
+    page.get_by_title("Draw a polyline").click()
+    map.click(position={"x": 200, "y": 250})
+    map.click(position={"x": 200, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 200, "y": 200})
+    expect(polygons).to_have_count(2)
+    polygons.first.click(position={"x": 20, "y": 20}, button="right")
+    expect(extract_button).to_be_hidden()
+
+
+def test_cannot_transfer_shape_to_marker(live_server, page, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+    polygons = page.locator(".leaflet-overlay-pane path")
+    expect(polygons).to_have_count(0)
+    page.get_by_title("Draw a polygon").click()
+    map = page.locator("#map")
+    map.click(position={"x": 150, "y": 100})
+    map.click(position={"x": 150, "y": 150})
+    map.click(position={"x": 100, "y": 150})
+    map.click(position={"x": 100, "y": 100})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 100})
+    expect(polygons).to_have_count(1)
+    extract_button = page.get_by_role("link", name="Extract shape to separate feature")
+    polygons.first.click(position={"x": 20, "y": 20}, button="right")
+    expect(extract_button).to_be_hidden()
+    page.get_by_title("Draw a marker").click()
+    map.click(position={"x": 250, "y": 200})
+    expect(polygons).to_have_count(1)
+    polygons.first.click(position={"x": 20, "y": 20}, button="right")
+    expect(extract_button).to_be_hidden()
+
+
+def test_can_clone_polygon(live_server, page, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+    polygons = page.locator(".leaflet-overlay-pane path")
+    expect(polygons).to_have_count(0)
+    page.get_by_title("Draw a polygon").click()
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 100})
+    map.click(position={"x": 200, "y": 200})
+    map.click(position={"x": 100, "y": 200})
+    map.click(position={"x": 100, "y": 100})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 100})
+    expect(polygons).to_have_count(1)
+    polygons.first.click(button="right")
+    page.get_by_role("link", name="Clone this feature").click()
+    expect(polygons).to_have_count(2)
+
+
+def test_can_transform_polygon_to_line(live_server, page, tilelayer, settings):
+    settings.UMAP_ALLOW_ANONYMOUS = True
+    page.goto(f"{live_server.url}/en/map/new/")
+    paths = page.locator(".leaflet-overlay-pane path")
+    polygons = page.locator(".leaflet-overlay-pane path[fill='DarkBlue']")
+    expect(polygons).to_have_count(0)
+    page.get_by_title("Draw a polygon").click()
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 100})
+    map.click(position={"x": 200, "y": 200})
+    map.click(position={"x": 100, "y": 200})
+    map.click(position={"x": 100, "y": 100})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 100})
+    expect(polygons).to_have_count(1)
+    expect(paths).to_have_count(1)
+    polygons.first.click(button="right")
+    page.get_by_role("link", name="Transform to lines").click()
+    # No more polygons (will fill), but one path, it must be a line
+    expect(polygons).to_have_count(0)
+    expect(paths).to_have_count(1)
+    data = save_and_get_json(page)
+    assert len(data["features"]) == 1
+    assert data["features"][0]["geometry"]["type"] == "LineString"

From c57469ee8bece89a91e1381572325fbfabf638c8 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Mon, 25 Mar 2024 12:32:12 +0100
Subject: [PATCH 5/5] chore: move part of Polyline.js tests to PW

---
 umap/static/umap/js/umap.features.js    |   4 +-
 umap/static/umap/js/umap.js             |   2 +
 umap/static/umap/test/Polyline.js       | 116 ---------
 umap/tests/integration/test_drawing.py  | 121 ---------
 umap/tests/integration/test_polygon.py  |  11 +-
 umap/tests/integration/test_polyline.py | 325 ++++++++++++++++++++++++
 6 files changed, 338 insertions(+), 241 deletions(-)
 delete mode 100644 umap/tests/integration/test_drawing.py
 create mode 100644 umap/tests/integration/test_polyline.py

diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index 94958370..4b2ddd76 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -888,7 +888,9 @@ U.PathMixin = {
     const other = new (this instanceof U.Polyline ? U.Polyline : U.Polygon)(
       this.map,
       shape,
-      { geojson: { properties: properties } }
+      {
+        geojson: { properties },
+      }
     )
     this.datalayer.addLayer(other)
     other.edit()
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index b4df88cf..7383f74c 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -974,6 +974,8 @@ U.Map = L.Map.extend({
     formData.append('settings', JSON.stringify(geojson))
     const uri = this.urls.get('map_save', { map_id: this.options.umap_id })
     const [data, response, error] = await this.server.post(uri, {}, formData)
+    // FIXME: login_required response will not be an error, so it will not
+    // stop code while it should
     if (!error) {
       let duration = 3000,
         alert = { content: L._('Map has been saved!'), level: 'info' }
diff --git a/umap/static/umap/test/Polyline.js b/umap/static/umap/test/Polyline.js
index 41b6e16c..06f5ee08 100644
--- a/umap/static/umap/test/Polyline.js
+++ b/umap/static/umap/test/Polyline.js
@@ -234,72 +234,6 @@ describe('U.Polyline', function () {
     })
   })
 
-  describe('#addShape', function () {
-    it('"add shape" control should not be visible by default', function () {
-      assert.notOk(qs('.umap-draw-polyline-multi'))
-    })
-
-    it('"add shape" control should be visible when editing a Polyline', function () {
-      var layer = new U.Polyline(this.map, [p2ll(100, 100), p2ll(100, 200)], {
-        datalayer: this.datalayer,
-      }).addTo(this.datalayer)
-      layer.edit()
-      assert.ok(qs('.umap-draw-polyline-multi'))
-    })
-
-    it('"add shape" control should extend the same multi', function () {
-      var layer = new U.Polyline(this.map, [p2ll(100, 100), p2ll(100, 200)], {
-        datalayer: this.datalayer,
-      }).addTo(this.datalayer)
-      layer.edit()
-      assert.notOk(layer.isMulti())
-      happen.click(qs('.umap-draw-polyline-multi'))
-      happen.at('mousemove', 300, 300)
-      happen.at('click', 300, 300)
-      happen.at('mousemove', 350, 300)
-      happen.at('click', 350, 300)
-      happen.at('click', 350, 300)
-      assert.ok(layer.isMulti())
-      assert.equal(this.datalayer._index.length, 1)
-    })
-  })
-
-  describe('#transferShape', function () {
-    it('should transfer simple line shape to another line', function () {
-      var latlngs = [p2ll(100, 150), p2ll(100, 200), p2ll(200, 100)],
-        layer = new U.Polyline(this.map, latlngs, {
-          datalayer: this.datalayer,
-        }).addTo(this.datalayer),
-        other = new U.Polyline(this.map, [p2ll(200, 300), p2ll(300, 200)], {
-          datalayer: this.datalayer,
-        }).addTo(this.datalayer)
-      assert.ok(this.map.hasLayer(layer))
-      layer.transferShape(p2ll(150, 150), other)
-      assert.equal(other._latlngs.length, 2)
-      assert.deepEqual(other._latlngs[1], latlngs)
-      assert.notOk(this.map.hasLayer(layer))
-    })
-
-    it('should transfer multi line shape to another line', function () {
-      var latlngs = [
-          [p2ll(100, 150), p2ll(100, 200), p2ll(200, 100)],
-          [p2ll(200, 300), p2ll(300, 200)],
-        ],
-        layer = new U.Polyline(this.map, latlngs, {
-          datalayer: this.datalayer,
-        }).addTo(this.datalayer),
-        other = new U.Polyline(this.map, [p2ll(250, 300), p2ll(350, 200)], {
-          datalayer: this.datalayer,
-        }).addTo(this.datalayer)
-      assert.ok(this.map.hasLayer(layer))
-      layer.transferShape(p2ll(150, 150), other)
-      assert.equal(other._latlngs.length, 2)
-      assert.deepEqual(other._latlngs[1], latlngs[0])
-      assert.ok(this.map.hasLayer(layer))
-      assert.equal(layer._latlngs.length, 1)
-    })
-  })
-
   describe('#mergeShapes', function () {
     it('should remove duplicated join point when merging', function () {
       var latlngs = [
@@ -349,54 +283,4 @@ describe('U.Polyline', function () {
     })
   })
 
-  describe('#isolateShape', function () {
-    it('should not allow to isolate simple line', function () {
-      var latlngs = [p2ll(100, 150), p2ll(100, 200), p2ll(200, 100)],
-        layer = new U.Polyline(this.map, latlngs, {
-          datalayer: this.datalayer,
-        }).addTo(this.datalayer)
-      assert.equal(this.datalayer._index.length, 1)
-      assert.ok(this.map.hasLayer(layer))
-      layer.isolateShape(p2ll(150, 150))
-      assert.equal(layer._latlngs.length, 3)
-      assert.equal(this.datalayer._index.length, 1)
-    })
-
-    it('should isolate multipolyline shape', function () {
-      var latlngs = [
-          [p2ll(100, 150), p2ll(100, 200), p2ll(200, 100)],
-          [[p2ll(200, 300), p2ll(300, 200)]],
-        ],
-        layer = new U.Polyline(this.map, latlngs, {
-          datalayer: this.datalayer,
-        }).addTo(this.datalayer)
-      assert.equal(this.datalayer._index.length, 1)
-      assert.ok(this.map.hasLayer(layer))
-      var other = layer.isolateShape(p2ll(150, 150))
-      assert.equal(this.datalayer._index.length, 2)
-      assert.equal(other._latlngs.length, 3)
-      assert.deepEqual(other._latlngs, latlngs[0])
-      assert.ok(this.map.hasLayer(layer))
-      assert.ok(this.map.hasLayer(other))
-      assert.equal(layer._latlngs.length, 1)
-      other.remove()
-    })
-  })
-
-  describe('#clone', function () {
-    it('should clone polyline', function () {
-      var latlngs = [p2ll(100, 150), p2ll(100, 200), p2ll(200, 100)],
-        layer = new U.Polyline(this.map, latlngs, {
-          datalayer: this.datalayer,
-        }).addTo(this.datalayer)
-      assert.equal(this.datalayer._index.length, 1)
-      other = layer.clone()
-      assert.ok(this.map.hasLayer(other))
-      assert.equal(this.datalayer._index.length, 2)
-      // Must not be the same reference
-      assert.notEqual(layer._latlngs, other._latlngs)
-      assert.equal(L.Util.formatNum(layer._latlngs[0].lat), other._latlngs[0].lat)
-      assert.equal(L.Util.formatNum(layer._latlngs[0].lng), other._latlngs[0].lng)
-    })
-  })
 })
diff --git a/umap/tests/integration/test_drawing.py b/umap/tests/integration/test_drawing.py
deleted file mode 100644
index d84d9b3d..00000000
--- a/umap/tests/integration/test_drawing.py
+++ /dev/null
@@ -1,121 +0,0 @@
-from playwright.sync_api import expect
-
-
-def test_draw_polyline(page, live_server, tilelayer):
-    page.goto(f"{live_server.url}/en/map/new/")
-
-    # Click on the Draw a line button on a new map.
-    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
-        "Draw a polyline"
-    )
-    create_line.click()
-
-    # Check no line is present by default.
-    # We target with the color, because there is also the drawing line guide (dash-array)
-    # around
-    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
-    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
-
-    # Click on the map, it will create a line.
-    map = page.locator("#map")
-    map.click(position={"x": 200, "y": 200})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(1)
-    map.click(position={"x": 100, "y": 200})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(1)
-    map.click(position={"x": 100, "y": 100})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(1)
-    # Click again to finish
-    map.click(position={"x": 100, "y": 100})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(0)
-
-
-def test_clicking_esc_should_finish_line(page, live_server, tilelayer):
-    page.goto(f"{live_server.url}/en/map/new/")
-
-    # Click on the Draw a line button on a new map.
-    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
-        "Draw a polyline"
-    )
-    create_line.click()
-
-    # Check no line is present by default.
-    # We target with the color, because there is also the drawing line guide (dash-array)
-    # around
-    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
-    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
-
-    # Click on the map, it will create a line.
-    map = page.locator("#map")
-    map.click(position={"x": 200, "y": 200})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(1)
-    map.click(position={"x": 100, "y": 200})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(1)
-    map.click(position={"x": 100, "y": 100})
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(1)
-    # Click ESC to finish
-    page.keyboard.press("Escape")
-    expect(lines).to_have_count(1)
-    expect(guide).to_have_count(0)
-
-
-def test_clicking_esc_should_delete_line_if_empty(page, live_server, tilelayer):
-    page.goto(f"{live_server.url}/en/map/new/")
-
-    # Click on the Draw a line button on a new map.
-    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
-        "Draw a polyline"
-    )
-    create_line.click()
-
-    # Check no line is present by default.
-    # We target with the color, because there is also the drawing line guide (dash-array)
-    # around
-    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
-    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
-
-    map = page.locator("#map")
-    map.click(position={"x": 200, "y": 200})
-    # At this stage, the line as one element, it should not be created
-    # on pressing esc, as invalid
-    # Click ESC to finish
-    page.keyboard.press("Escape")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
-
-
-def test_clicking_esc_should_delete_line_if_invalid(page, live_server, tilelayer):
-    page.goto(f"{live_server.url}/en/map/new/")
-
-    # Click on the Draw a line button on a new map.
-    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
-        "Draw a polyline"
-    )
-    create_line.click()
-
-    # Check no line is present by default.
-    # We target with the color, because there is also the drawing line guide (dash-array)
-    # around
-    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
-    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
-
-    # At this stage, the line as no element, it should not be created
-    # on pressing esc
-    # Click ESC to finish
-    page.keyboard.press("Escape")
-    expect(lines).to_have_count(0)
-    expect(guide).to_have_count(0)
diff --git a/umap/tests/integration/test_polygon.py b/umap/tests/integration/test_polygon.py
index 7dfbe96c..44cb3c7c 100644
--- a/umap/tests/integration/test_polygon.py
+++ b/umap/tests/integration/test_polygon.py
@@ -167,7 +167,7 @@ def test_can_draw_multi(live_server, page, tilelayer):
     expect(multi_button).to_be_hidden()
     polygons.first.click(button="right", position={"x": 10, "y": 10})
     expect(page.get_by_role("link", name="Transform to lines")).to_be_hidden()
-    expect(page.get_by_role("link", name="Remove shape from multi")).to_be_hidden()
+    expect(page.get_by_role("link", name="Remove shape from the multi")).to_be_visible()
 
 
 def test_can_draw_hole(page, live_server, tilelayer):
@@ -237,7 +237,7 @@ def test_can_transfer_shape_from_simple_polygon(live_server, page, tilelayer):
     expect(polygons).to_have_count(1)
 
 
-def test_can_transfer_shape(live_server, page, tilelayer):
+def test_can_extract_shape(live_server, page, tilelayer):
     page.goto(f"{live_server.url}/en/map/new/")
     polygons = page.locator(".leaflet-overlay-pane path")
     expect(polygons).to_have_count(0)
@@ -314,7 +314,8 @@ def test_cannot_transfer_shape_to_marker(live_server, page, tilelayer):
     expect(extract_button).to_be_hidden()
 
 
-def test_can_clone_polygon(live_server, page, tilelayer):
+def test_can_clone_polygon(live_server, page, tilelayer, settings):
+    settings.UMAP_ALLOW_ANONYMOUS = True
     page.goto(f"{live_server.url}/en/map/new/")
     polygons = page.locator(".leaflet-overlay-pane path")
     expect(polygons).to_have_count(0)
@@ -330,6 +331,10 @@ def test_can_clone_polygon(live_server, page, tilelayer):
     polygons.first.click(button="right")
     page.get_by_role("link", name="Clone this feature").click()
     expect(polygons).to_have_count(2)
+    data = save_and_get_json(page)
+    assert len(data["features"]) == 2
+    assert data["features"][0]["geometry"]["type"] == "Polygon"
+    assert data["features"][0]["geometry"] == data["features"][1]["geometry"]
 
 
 def test_can_transform_polygon_to_line(live_server, page, tilelayer, settings):
diff --git a/umap/tests/integration/test_polyline.py b/umap/tests/integration/test_polyline.py
new file mode 100644
index 00000000..fe76d4b8
--- /dev/null
+++ b/umap/tests/integration/test_polyline.py
@@ -0,0 +1,325 @@
+import json
+import re
+from pathlib import Path
+
+import pytest
+from playwright.sync_api import expect
+
+from umap.models import DataLayer
+
+pytestmark = pytest.mark.django_db
+
+
+def save_and_get_json(page):
+    with page.expect_response(re.compile(r".*/datalayer/create/.*")):
+        page.get_by_role("button", name="Save").click()
+    datalayer = DataLayer.objects.last()
+    return json.loads(Path(datalayer.geojson.path).read_text())
+
+
+def test_draw_polyline(page, live_server, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+
+    # Click on the Draw a line button on a new map.
+    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
+        "Draw a polyline"
+    )
+    create_line.click()
+
+    # Check no line is present by default.
+    # We target with the color, because there is also the drawing line guide (dash-array)
+    # around
+    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
+    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+    # Click on the map, it will create a line.
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 200})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(1)
+    map.click(position={"x": 100, "y": 200})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(1)
+    map.click(position={"x": 100, "y": 100})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(1)
+    # Click again to finish
+    map.click(position={"x": 100, "y": 100})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(0)
+
+
+def test_clicking_esc_should_finish_line(page, live_server, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+
+    # Click on the Draw a line button on a new map.
+    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
+        "Draw a polyline"
+    )
+    create_line.click()
+
+    # Check no line is present by default.
+    # We target with the color, because there is also the drawing line guide (dash-array)
+    # around
+    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
+    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+    # Click on the map, it will create a line.
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 200})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(1)
+    map.click(position={"x": 100, "y": 200})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(1)
+    map.click(position={"x": 100, "y": 100})
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(1)
+    # Click ESC to finish
+    page.keyboard.press("Escape")
+    expect(lines).to_have_count(1)
+    expect(guide).to_have_count(0)
+
+
+def test_clicking_esc_should_delete_line_if_empty(page, live_server, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+
+    # Click on the Draw a line button on a new map.
+    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
+        "Draw a polyline"
+    )
+    create_line.click()
+
+    # Check no line is present by default.
+    # We target with the color, because there is also the drawing line guide (dash-array)
+    # around
+    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
+    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 200})
+    # At this stage, the line as one element, it should not be created
+    # on pressing esc, as invalid
+    # Click ESC to finish
+    page.keyboard.press("Escape")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+
+def test_clicking_esc_should_delete_line_if_invalid(page, live_server, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+
+    # Click on the Draw a line button on a new map.
+    create_line = page.locator(".leaflet-control-toolbar ").get_by_title(
+        "Draw a polyline"
+    )
+    create_line.click()
+
+    # Check no line is present by default.
+    # We target with the color, because there is also the drawing line guide (dash-array)
+    # around
+    lines = page.locator(".leaflet-overlay-pane path[stroke='DarkBlue']")
+    guide = page.locator(".leaflet-overlay-pane > svg > g > path")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+    # At this stage, the line as no element, it should not be created
+    # on pressing esc
+    # Click ESC to finish
+    page.keyboard.press("Escape")
+    expect(lines).to_have_count(0)
+    expect(guide).to_have_count(0)
+
+
+def test_can_draw_multi(live_server, page, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+    lines = page.locator(".leaflet-overlay-pane path")
+    expect(lines).to_have_count(0)
+    add_shape = page.get_by_title("Add a line to the current multi")
+    expect(add_shape).to_be_hidden()
+    page.get_by_title("Draw a polyline").click()
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 100})
+    map.click(position={"x": 100, "y": 100})
+    map.click(position={"x": 100, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 200})
+    expect(add_shape).to_be_visible()
+    expect(lines).to_have_count(1)
+    add_shape.click()
+    map.click(position={"x": 250, "y": 250})
+    map.click(position={"x": 200, "y": 250})
+    map.click(position={"x": 200, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 200, "y": 200})
+    expect(lines).to_have_count(1)
+    page.keyboard.press("Escape")
+    expect(add_shape).to_be_hidden()
+    lines.first.click(button="right", position={"x": 10, "y": 1})
+    expect(page.get_by_role("link", name="Transform to polygon")).to_be_hidden()
+    expect(page.get_by_role("link", name="Remove shape from the multi")).to_be_visible()
+
+
+def test_can_transfer_shape_from_simple_polyline(live_server, page, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+    lines = page.locator(".leaflet-overlay-pane path")
+    expect(lines).to_have_count(0)
+    page.get_by_title("Draw a polyline").click()
+    map = page.locator("#map")
+
+    # Draw a first line
+    map.click(position={"x": 200, "y": 100})
+    map.click(position={"x": 100, "y": 100})
+    map.click(position={"x": 100, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 200})
+    expect(lines).to_have_count(1)
+
+    # Draw another polygon
+    page.get_by_title("Draw a polyline").click()
+    map.click(position={"x": 250, "y": 250})
+    map.click(position={"x": 200, "y": 250})
+    map.click(position={"x": 200, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 200, "y": 200})
+    expect(lines).to_have_count(2)
+
+    # Now that polygon 2 is selected, right click on first one
+    # and transfer shape
+    lines.first.click(position={"x": 10, "y": 1}, button="right")
+    page.get_by_role("link", name="Transfer shape to edited feature").click()
+    expect(lines).to_have_count(1)
+
+
+def test_can_transfer_shape_from_multi(live_server, page, tilelayer, settings):
+    settings.UMAP_ALLOW_ANONYMOUS = True
+    page.goto(f"{live_server.url}/en/map/new/")
+    lines = page.locator(".leaflet-overlay-pane path")
+    expect(lines).to_have_count(0)
+    page.get_by_title("Draw a polyline").click()
+    map = page.locator("#map")
+
+    # Draw a multi line
+    map.click(position={"x": 200, "y": 100})
+    map.click(position={"x": 100, "y": 100})
+    map.click(position={"x": 100, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 200})
+    expect(lines).to_have_count(1)
+    page.get_by_title("Add a line to the current multi").click()
+    map.click(position={"x": 250, "y": 250})
+    map.click(position={"x": 200, "y": 250})
+    map.click(position={"x": 200, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 200, "y": 200})
+    expect(lines).to_have_count(1)
+
+    # Draw another line
+    page.get_by_title("Draw a polyline").click()
+    map.click(position={"x": 350, "y": 350})
+    map.click(position={"x": 300, "y": 350})
+    map.click(position={"x": 300, "y": 300})
+    # Click again to finish
+    map.click(position={"x": 300, "y": 300})
+    expect(lines).to_have_count(2)
+
+    # Now that polygon 2 is selected, right click on first one
+    # and transfer shape
+    lines.first.click(position={"x": 10, "y": 1}, button="right")
+    page.get_by_role("link", name="Transfer shape to edited feature").click()
+    expect(lines).to_have_count(2)
+    data = save_and_get_json(page)
+    # FIXME this should be a LineString, not MultiLineString
+    assert data["features"][0]["geometry"] == {
+        "coordinates": [
+            [[-6.569824, 52.49616], [-7.668457, 52.49616], [-7.668457, 53.159947]]
+        ],
+        "type": "MultiLineString",
+    }
+    assert data["features"][1]["geometry"] == {
+        "coordinates": [
+            [[-4.372559, 51.138001], [-5.471191, 51.138001], [-5.471191, 51.822198]],
+            [[-7.668457, 54.457267], [-9.865723, 54.457267], [-9.865723, 53.159947]],
+        ],
+        "type": "MultiLineString",
+    }
+
+
+def test_can_extract_shape(live_server, page, tilelayer):
+    page.goto(f"{live_server.url}/en/map/new/")
+    lines = page.locator(".leaflet-overlay-pane path")
+    expect(lines).to_have_count(0)
+    page.get_by_title("Draw a polylin").click()
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 100})
+    map.click(position={"x": 100, "y": 100})
+    map.click(position={"x": 100, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 200})
+    expect(lines).to_have_count(1)
+    extract_button = page.get_by_role("link", name="Extract shape to separate feature")
+    expect(extract_button).to_be_hidden()
+    page.get_by_title("Add a line to the current multi").click()
+    map.click(position={"x": 250, "y": 250})
+    map.click(position={"x": 200, "y": 250})
+    map.click(position={"x": 200, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 200, "y": 200})
+    expect(lines).to_have_count(1)
+    lines.first.click(position={"x": 10, "y": 1}, button="right")
+    extract_button.click()
+    expect(lines).to_have_count(2)
+
+
+def test_can_clone_polyline(live_server, page, tilelayer, settings):
+    settings.UMAP_ALLOW_ANONYMOUS = True
+    page.goto(f"{live_server.url}/en/map/new/")
+    lines = page.locator(".leaflet-overlay-pane path")
+    expect(lines).to_have_count(0)
+    page.get_by_title("Draw a polyline").click()
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 100})
+    map.click(position={"x": 100, "y": 100})
+    map.click(position={"x": 100, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 200})
+    expect(lines).to_have_count(1)
+    lines.first.click(position={"x": 10, "y": 1}, button="right")
+    page.get_by_role("link", name="Clone this feature").click()
+    expect(lines).to_have_count(2)
+    data = save_and_get_json(page)
+    assert len(data["features"]) == 2
+    assert data["features"][0]["geometry"]["type"] == "LineString"
+    assert data["features"][0]["geometry"] == data["features"][1]["geometry"]
+    assert data["features"][0]["properties"] == data["features"][1]["properties"]
+
+
+def test_can_transform_polyline_to_polygon(live_server, page, tilelayer, settings):
+    settings.UMAP_ALLOW_ANONYMOUS = True
+    page.goto(f"{live_server.url}/en/map/new/")
+    paths = page.locator(".leaflet-overlay-pane path")
+    # Paths with fill
+    polygons = page.locator(".leaflet-overlay-pane path[fill='DarkBlue']")
+    expect(paths).to_have_count(0)
+    page.get_by_title("Draw a polyline").click()
+    map = page.locator("#map")
+    map.click(position={"x": 200, "y": 100})
+    map.click(position={"x": 100, "y": 100})
+    map.click(position={"x": 100, "y": 200})
+    # Click again to finish
+    map.click(position={"x": 100, "y": 200})
+    expect(paths).to_have_count(1)
+    expect(polygons).to_have_count(0)
+    paths.first.click(position={"x": 10, "y": 1}, button="right")
+    page.get_by_role("link", name="Transform to polygon").click()
+    expect(polygons).to_have_count(1)
+    expect(paths).to_have_count(1)
+    data = save_and_get_json(page)
+    assert len(data["features"]) == 1
+    assert data["features"][0]["geometry"]["type"] == "Polygon"