added map-change event for extents, added test cases for map-change events

yushan-mu · yushan-mu · commit 0785c2ba3e97 · 2024-10-30T13:15:19.000-04:00
diff --git a/src/map-extent.js b/src/map-extent.js
@@ -158,6 +158,7 @@ export class HTMLExtentElement extends HTMLElement {
               this._handleChange();
               this._calculateBounds();
               this._layerControlCheckbox.checked = newValue !== null;
+              this.dispatchEvent(new CustomEvent('map-change'));
             })
             .catch((error) => {
               console.log(
diff --git a/test/e2e/api/events/map-change-event.html b/test/e2e/api/events/map-change-event.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>map-projectionchange event</title>
+    <!-- the layer in this map should continue to be visible when you change
+    the viewer projection from OSMTILE to CBMTILE.  -->
+    <script type="module" src="/mapml.js"></script>
+    <style>
+        mapml-viewer {
+            width: 100%;
+            height: 100vh
+        }
+    </style>    
+</head>
+
+<body>
+    <mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls=""
+        controlslist="geolocation">
+        <map-layer data-testid="layer" label="OpenStreetMap" checked="">
+            <map-link rel="license" title="Â© OpenStreetMap contributors CC BY-SA"
+                href="https://www.openstreetmap.org/copyright"></map-link>
+            <map-extent data-testid="extent" units="OSMTILE" checked="checked">
+                <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
+                <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
+                <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
+                <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
+            </map-extent>
+        </map-layer>
+    </mapml-viewer>
+</body>
+
+</html>
diff --git a/test/e2e/api/events/map-change-event.test.js b/test/e2e/api/events/map-change-event.test.js
@@ -0,0 +1,57 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('map change event test ', () => {
+  let page;
+  let context;
+  test.beforeAll(async () => {
+    context = await chromium.launchPersistentContext('');
+    page =
+      context.pages().find((page) => page.url() === 'about:blank') ||
+      (await context.newPage());
+    await page.goto('events/map-change-event.html');
+  });
+
+  test.afterAll(async function () {
+    await context.close();
+  });
+
+  test('Map change event for layers work', async () => {
+    let layerClicked = 0;
+    page.on('console', (msg) => {
+      if (msg.text() === 'Layer clicked') {
+        layerClicked++;
+      }
+    });
+
+    await page.evaluate(() => {
+      const layer = document.querySelector('map-layer');
+      layer.addEventListener('map-change', () => {
+        console.log('Layer clicked');
+      });
+      layer.checked = false;
+      layer.checked = true;
+    });
+
+    expect(layerClicked).toBe(2);
+  });
+
+  test('Map change event for sub-layers work', async () => {
+    let extentClicked = 0;
+    page.on('console', (msg) => {
+      if (msg.text() === 'Sub-layer clicked') {
+        extentClicked++;
+      }
+    });
+
+    await page.evaluate(() => {
+      const extent = document.querySelector('map-extent');
+      extent.addEventListener('map-change', () => {
+        console.log('Sub-layer clicked');
+      });
+      extent.checked = false;
+      extent.checked = true;
+    });
+
+    expect(extentClicked).toBe(2);
+  });
+});
