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()