Merge pull request #194 from digital-land/fix/NationalMapForApple

Fix/national map for apple

Makefile

@@ -58,12 +58,15 @@ docker-login:
 	aws ecr-public get-login-password --region us-east-1 | docker login --username AWS --password-stdin public.ecr.aws
 
 test-acceptance:
-	python -m playwright install chromium
-	python -m pytest --md-report --md-report-color=never -p no:warnings tests/acceptance
+	python -m playwright install --with-deps chromium firefox webkit
+	python -m pytest --browser webkit --browser firefox --browser chromium --md-report --md-report-color=never -p no:warnings tests/acceptance
 
 test-acceptance-debug:
-	python -m playwright install chromium
-	PWDEBUG=1 python3 -m pytest --md-report --md-report-color=never -p no:warnings tests/acceptance
+	python -m playwright install --with-deps chromium firefox webkit
+	PWDEBUG=1 python3 -m pytest --browser webkit --browser firefox --browser chromium --md-report --md-report-color=never -p no:warnings tests/acceptance
+
+playwright-codegen:
+	python -m playwright codegen --viewport-size=800,600 localhost:8000
 
 test: test-unit test-integration test-acceptance
 
@@ -87,7 +90,7 @@ test-integration:
 test-integration-docker:
 	docker-compose run web python -m pytest tests/integration --junitxml=.junitxml/integration.xml $(PYTEST_RUNTIME_ARGS)
 
-lint:	black-check flake8
+lint:	black flake8
 
 clean::
 	rm -rf static/

assets/javascripts/LayerControls.js

@@ -50,7 +50,7 @@ export default class LayerControls {
 
       const checkboxes = document.createElement('div');
       checkboxes.classList.add('govuk-checkboxes');
-      checkboxes.setAttribute('data-module', 'layer-controls-{{ params.mapId if params.mapId else \'map\' }}');
+      checkboxes.setAttribute('data-module', `layer-controls-${this.mapController.mapId}}`);
 
       const filterGroup = document.createElement('div');
       filterGroup.classList.add('dl-filter-group__auto-filter');
@@ -238,7 +238,7 @@ export default class LayerControls {
 
       this.enabledLayers().forEach(layer => urlParams.append(this.layerURLParamName, layer.getDatasetName()));
       let newURL = window.location.pathname
-      if(urlParams.size > 0)
+      if(this.enabledLayers().length > 0)
         newURL = newURL + '?' + urlParams.toString() + window.location.hash;
 
       // add entry to history, does not fire event so need to call toggleLayersBasedOnUrl
@@ -300,7 +300,6 @@ export class LayerOption {
   }
 
   makeLayerSymbol(layer) {
-
     let symbolHtml = '';
 
     let opacityNumber = (layer.paint_options && layer.paint_options.opacity) ? layer.paint_options.opacity : defaultPaintOptions["fill-opacity"];
@@ -351,7 +350,7 @@ export class LayerOption {
     return html;
   }
 
-  clickHandler() {
+  clickHandler(e) {
     this.layerControls.updateUrl();
   }
 

assets/javascripts/MapController.js

@@ -210,7 +210,6 @@ export default class MapController {
   }
 
   addControls() {
-
     this.map.addControl(new maplibregl.ScaleControl({
       container: document.getElementById(this.mapId)
     }), 'bottom-left');

assets/javascripts/utils.js

@@ -2,26 +2,26 @@ import MapController from './MapController.js';
 
 export const newMapController = (params = { layers: []}) => {
 
-    const datasetUrl = params.DATASETTE_TILES_URL || '';
-
-    let mapParams = {
-      ...params,
-      vectorSource: `${datasetUrl}/-/tiles/dataset_tiles/{z}/{x}/{y}.vector.pbf`,
-      datasetVectorUrl: `${datasetUrl}/-/tiles/`,
-      datasets: params.layers.map(d => d.dataset),
-      sources: params.layers.map(d => {
-        return {
-          name: d.dataset + '-source',
-          vectorSource: `${datasetUrl}/-/tiles/"${d.dataset}/{z}/{x}/{y}.vector.pbf`,
-        }
-      }),
-      mapId: params.mapId || 'map',
-    };
-    return new MapController(mapParams);
-  }
+  const datasetUrl = params.DATASETTE_TILES_URL || '';
+
+  let mapParams = {
+    ...params,
+    vectorSource: `${datasetUrl}/-/tiles/dataset_tiles/{z}/{x}/{y}.vector.pbf`,
+    datasetVectorUrl: `${datasetUrl}/-/tiles/`,
+    datasets: params.layers.map(d => d.dataset),
+    sources: params.layers.map(d => {
+      return {
+        name: d.dataset + '-source',
+        vectorSource: `${datasetUrl}/-/tiles/"${d.dataset}/{z}/{x}/{y}.vector.pbf`,
+      }
+    }),
+    mapId: params.mapId || 'map',
+  };
+  return new MapController(mapParams);
+}
 
 export const capitalizeFirstLetter = (string) => {
-    return string.charAt(0).toUpperCase() + string.slice(1);
+  return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
 export const convertNodeListToArray = (nl) => {

changeLog.md

@@ -14,6 +14,18 @@
 # ChangeLog
 <br>
 
+## 03-10-2023
+### What's new
+- Fixed the layer controls component for safari, as the checkboxes were not changing state
+### Why was this change made?
+- So the layer controls work on safari
+
+## 29-09-2023
+### What's new
+- Updated the rendering of a polygon layer to also check for point data and render a circle where appropriate
+### Why was this change made?
+- to handle the new NSIP dataset
+
 ## 29-09-2023
 ### What's new
 - decrease wales obscure opacity

tests/acceptance/test_national_map.py

@@ -0,0 +1,65 @@
+import time
+
+import pytest
+import uvicorn
+
+from multiprocessing.context import Process
+from application.settings import get_settings
+
+settings = get_settings()
+
+settings.READ_DATABASE_URL = (
+    "postgresql://postgres:postgres@localhost/digital_land_test"
+)
+settings.WRITE_DATABASE_URL = (
+    "postgresql://postgres:postgres@localhost/digital_land_test"
+)
+
+from application.app import create_app  # noqa: E402
+
+app = create_app()
+
+HOST = "0.0.0.0"
+PORT = 9000
+BASE_URL = f"http://{HOST}:{PORT}"
+
+
+def run_server():
+    uvicorn.run(app, host=HOST, port=PORT)
+
+
+@pytest.fixture(scope="session")
+def server_process():
+    proc = Process(target=run_server, args=(), daemon=True)
+    proc.start()
+    time.sleep(10)
+    yield proc
+    proc.kill()
+
+
+def wait_for_map_layer(page, layer, attempts=10, check_interval=10):
+    for i in range(attempts):
+        isHidden = page.evaluate(
+            f'() => mapControllers.map.map.getLayer("{layer}").isHidden()'
+        )
+        if isHidden is False:
+            return True
+        page.wait_for_timeout(check_interval)
+    assert False, f"Layer {layer} did not appear on the map"
+
+
+def test_toggle_layers_on_the_national_map_correctly_shows_entity(
+    server_process,
+    page,
+    context,
+    add_base_entities_to_database_yield_reset,
+    skip_if_not_supportsGL,
+):
+    # as the map xy coords are dependent on the viewport size, we need to set it to make sure the tests are consistent
+    page.set_viewport_size({"width": 800, "height": 600})
+
+    page.goto(
+        BASE_URL + "/map/#50.88865897214836,-2.260771340418273,11.711391365982688z"
+    )
+    page.get_by_label("Conservation area").check()
+    wait_for_map_layer(page, "conservation-area-source-fill-extrusion")

tests/conftest.py

@@ -199,3 +199,18 @@ def add_base_entities_to_database_yield_reset():
     add_base_typology_to_database()
     yield
     reset_database()
+
+
+@pytest.fixture()
+def skip_if_not_supportsGL(page):
+    supportsGL = page.evaluate(
+        """
+        () => {
+            const canvas = document.createElement("canvas");
+            const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+            return gl instanceof WebGLRenderingContext;
+        }
+    """
+    )
+    if not supportsGL:
+        pytest.skip("Test requires WebGL support")

tests/unit/javascript/LayerControl.test.js

@@ -133,7 +133,7 @@ describe('Layer Controls', () => {
         expect(urlAppendMock).toHaveBeenCalledWith('dataset','testLayer1');
         expect(urlAppendMock).toHaveBeenCalledWith('dataset','testLayer2');
         expect(window.history.pushState).toHaveBeenCalled();
-        expect(window.history.pushState).toHaveBeenCalledWith({}, '', 'http://localhost:3000');
+        expect(window.history.pushState).toHaveBeenCalledWith({}, '', 'http://localhost:3000?dataset=testLayer1&dataset=testLayer2');
         expect(layerControls.toggleLayersBasedOnUrl).toHaveBeenCalled();
     })