Add test / test data for map-extent issue. Closes #935

Maps4HTML · Apr 5, 2024 · 1fcd6f2 · 1fcd6f2
1 parent 9fdfb83
commit 1fcd6f2
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 0 deletions.
diff --git a/test/e2e/elements/map-extent/Img_Sample.png b/test/e2e/elements/map-extent/Img_Sample.png
diff --git a/test/e2e/elements/map-extent/map-extent-checked-ordering.test.js b/test/e2e/elements/map-extent/map-extent-checked-ordering.test.js
@@ -0,0 +1,92 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('map-extent checked order tests', () => {
+  let page;
+  let context;
+  test.beforeAll(async function () {
+    context = await chromium.launchPersistentContext('', { slowMo: 500 });
+    page =
+      context.pages().find((page) => page.url() === 'about:blank') ||
+      (await context.newPage());
+    await page.goto('map-extent-checked.html');
+  });
+  test('map-extent layer control order correct when cycling checked state', async () => {
+    // Fixed #935 https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/935
+    /* 
+Go to this map map-extent-checked.html
+
+Open the layer control for the layer settings.
+
+Un-check the imagery layer <map-extent>
+Check the imagery layer <map-extent>
+
+What should happen:
+The imagery layer <map-extent> should draw underneath the states layer.
+
+What actually happens:
+The imagery layer <map-extent> draws on top of the states layer.
+     * */
+    const layerControl = page.locator('.leaflet-top.leaflet-right');
+    await layerControl.hover();
+    const layerSettings = layerControl.getByTitle('Layer Settings');
+    await layerSettings.click();
+    const imageryExtentCheckbox = layerControl.getByRole('checkbox', {
+      name: 'Extent One'
+    });
+    await imageryExtentCheckbox.click(); // turn it off
+    await imageryExtentCheckbox.click(); // turn it on
+    const ext1 = page.getByTestId('ext1');
+    let imageryZIndex = await ext1.evaluate((e) => {
+      return +e._extentLayer._container.style.zIndex;
+    });
+    expect(imageryZIndex).toEqual(0);
+    const ext2 = page.getByTestId('ext2');
+    let statesZIndex = await ext2.evaluate((e) => {
+      return +e._extentLayer._container.style.zIndex;
+    });
+    expect(statesZIndex).toEqual(1);
+    // re-order them via the layer control
+    const imageryFieldset = layerControl.getByRole('group', {
+      name: 'Extent One'
+    });
+    let controlBBox = await imageryFieldset.boundingBox();
+    let from = {
+        x: controlBBox.x + controlBBox.width / 2,
+        y: controlBBox.y + controlBBox.height / 2
+      },
+      to = { x: from.x, y: from.y + controlBBox.height * 1.1 };
+
+    await page.mouse.move(from.x, from.y);
+    await page.mouse.down();
+    await page.mouse.move(to.x, to.y);
+    await page.mouse.up();
+    imageryZIndex = await ext1.evaluate((e) => {
+      return +e._extentLayer._container.style.zIndex;
+    });
+    expect(imageryZIndex).toEqual(1);
+    statesZIndex = await ext2.evaluate((e) => {
+      return +e._extentLayer._container.style.zIndex;
+    });
+    expect(statesZIndex).toEqual(0);
+
+    await page.mouse.move(from.x, from.y);
+    await page.mouse.down();
+    await page.mouse.move(to.x, to.y);
+    await page.mouse.up();
+    await imageryExtentCheckbox.click(); // turn it off
+    await imageryExtentCheckbox.click(); // turn it on
+    imageryZIndex = await ext1.evaluate((e) => {
+      return +e._extentLayer._container.style.zIndex;
+    });
+    expect(imageryZIndex).toEqual(0);
+    statesZIndex = await ext2.evaluate((e) => {
+      return +e._extentLayer._container.style.zIndex;
+    });
+    expect(statesZIndex).toEqual(1);
+    // TO DO re-order them via the DOM (insertAdjacentHTML), 
+    // ensure that 
+    // a) render order/z-index is correct
+    // b) render order is reflected in layer control order as well
+    // see https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/956
+  });
+});
diff --git a/test/e2e/elements/map-extent/map-extent-checked.html b/test/e2e/elements/map-extent/map-extent-checked.html
@@ -0,0 +1,43 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>North America sample imagery,USA Population</title>
+    <meta charset='utf-8'>
+    <script type="module"  src="mapml-viewer.js"></script>
+    <style>
+      html, body {
+        height: 100%;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      mapml-viewer:defined {
+        max-width: 100%;
+        width: 100%;
+        height: 100%;
+        border: none;
+        vertical-align: middle
+      }
+      mapml-viewer:not(:defined) > * {
+        display: none;
+      }
+      nlayer- {
+        display: none;
+      }
+    </style>
+    <noscript>
+    <style>
+      mapml-viewer:not(:defined) > :not(layer-) {
+        display: initial;
+      }
+    </style>
+    </noscript>
+  </head>
+  <body>
+  <mapml-viewer projection="OSMTILE" zoom="4" lat="37.163851" lon="-95.8506355" controls controlslist="geolocation">
+    <layer- label="North America sample imagery,USA Population" src="map-extent-checked.mapml" checked></layer->
+  </mapml-viewer>
+</body>
+</html>
diff --git a/test/e2e/elements/map-extent/map-extent-checked.mapml b/test/e2e/elements/map-extent/map-extent-checked.mapml
@@ -0,0 +1,40 @@
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
+  <map-head>
+    <map-title>North America sample imagery,USA Population</map-title>
+    <map-meta charset="utf-8" />
+  </map-head>
+  <map-body>
+    <map-extent data-testid="ext1" units="OSMTILE" label="Extent One" checked="checked">
+      <map-input name="z" type="zoom" min="0" max="18" />
+      <map-input name="xmin" type="location" rel="map" position="top-left" axis="easting"
+        units="pcrs" min="-1.4566342387044378E7" max="-6902409.554433245" />
+      <map-input name="ymin" type="location" rel="map" position="bottom-left" axis="northing"
+        units="pcrs" min="2356761.351015427" max="7191795.151634117" />
+      <map-input name="xmax" type="location" rel="map" position="top-right" axis="easting"
+        units="pcrs" min="-1.4566342387044378E7" max="-6902409.554433245" />
+      <map-input name="ymax" type="location" rel="map" position="top-left" axis="northing"
+        units="pcrs" min="2356761.351015427" max="7191795.151634117" />
+      <map-input name="w" type="width" min="1" max="10000" />
+      <map-input name="h" type="height" min="1" max="10000" />
+      <map-link
+        tref="Img_Sample.png?request=GetMap&amp;crs=MapML:OSMTILE&amp;service=WMS&amp;bbox={xmin},{ymin},{xmax},{ymax}&amp;layers=Img_Sample&amp;format=image/png&amp;width={w}&amp;styles=raster&amp;language=en&amp;version=1.3.0&amp;transparent=true&amp;height={h}"
+        rel="image" />
+    </map-extent>
+    <map-extent data-testid="ext2" units="OSMTILE" label="Extent Two" checked="checked">
+      <map-input name="z" type="zoom" min="0" max="18" />
+      <map-input name="xmin" type="location" rel="map" position="top-left" axis="easting"
+        units="pcrs" min="-1.5446983430845503E7" max="-5893028.983427708" />
+      <map-input name="ymin" type="location" rel="map" position="bottom-left" axis="northing"
+        units="pcrs" min="2212675.7181225144" max="7142003.512445944" />
+      <map-input name="xmax" type="location" rel="map" position="top-right" axis="easting"
+        units="pcrs" min="-1.5446983430845503E7" max="-5893028.983427708" />
+      <map-input name="ymax" type="location" rel="map" position="top-left" axis="northing"
+        units="pcrs" min="2212675.7181225144" max="7142003.512445944" />
+      <map-input name="w" type="width" min="1" max="10000" />
+      <map-input name="h" type="height" min="1" max="10000" />
+      <map-link
+        tref="states.png?request=GetMap&amp;crs=MapML:OSMTILE&amp;service=WMS&amp;bbox={xmin},{ymin},{xmax},{ymax}&amp;layers=states&amp;format=image/png&amp;width={w}&amp;styles=population&amp;language=en&amp;version=1.3.0&amp;transparent=true&amp;height={h}"
+        rel="image" />
+    </map-extent>
+  </map-body>
+</mapml->
diff --git a/test/e2e/elements/map-extent/states.png b/test/e2e/elements/map-extent/states.png