Add tests for map-extent attribute api. Fix bug in same.

Maps4HTML · Nov 3, 2023 · fd68b1a · fd68b1a
1 parent 4ae8f82
commit fd68b1a
Show file tree

Hide file tree

Showing 4 changed files with 224 additions and 0 deletions.
diff --git a/src/map-extent.js b/src/map-extent.js
@@ -73,6 +73,7 @@ export class MapExtent extends HTMLElement {
           case 'checked':
             this._handleChange();
             this._calculateBounds();
+            this._layerControlCheckbox.checked = newValue !== null;
             break;
           case 'opacity':
             if (oldValue !== newValue) {

diff --git a/test/e2e/elements/map-extent/map-extent.html b/test/e2e/elements/map-extent/map-extent.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Basic Map</title>
+  <meta charset="UTF-8">
+  <script type="module" src="mapml-viewer.js"></script>
+  <style>
+    html {
+      height: 100%
+    }
+
+    body,
+    map {
+      height: inherit
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+  <template data-testid="template">
+      <map-extent data-testid="ext2" label="User-generated label - 2" units="CBMTILE" checked hidden>
+        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
+        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
+        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
+        <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
+      </map-extent>
+      <map-extent data-testid="ext3" label="User-generated label - 3" units="CBMTILE" checked hidden>
+        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
+        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
+        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
+        <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
+      </map-extent>
+  </template>
+</head>
+
+<body>
+  <mapml-viewer data-testid="firstmap" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47" lon="-92" controls>
+    <layer- id="cbmt1" data-testid="cbmt1" label="CBMT - INLINE" checked>
+      <map-extent data-testid="ext1" label="User-generated label" units="CBMTILE" checked hidden>
+        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
+        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
+        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
+        <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
+      </map-extent>
+    </layer->
+    <layer- id="cbmt2" data-testid="cbmt2" label="CBMT - INLINE - 2" checked>
+      <map-extent data-testid="ext2-1" label="User-generated label" units="CBMTILE" checked hidden>
+        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
+        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
+        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
+        <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
+      </map-extent>
+      <map-extent data-testid="ext2-2" label="User-generated label - 2" units="CBMTILE" hidden>
+        <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
+        <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
+        <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
+        <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
+      </map-extent>
+    </layer->
+  </mapml-viewer>  
+</body>
+</html>
diff --git a/test/e2e/elements/map-extent/map-extent.test.js b/test/e2e/elements/map-extent/map-extent.test.js
@@ -0,0 +1,157 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('map-extent tests', () => {
+  let page;
+  let context;
+  test.describe('attribute tests', () => {
+    test.beforeEach(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.html');
+    });
+    test('Basic hidden functionality and API', async () => {
+      const extent = await page.getByTestId('ext1');
+      let hiddenInLayerControl = await extent.evaluate((extent) => {
+        return !extent._layerControlHTML.isConnected;
+      });
+      expect(hiddenInLayerControl).toBe(true);
+
+      await extent.evaluate((extent) => {
+        extent.hidden = false;
+      });
+      hiddenInLayerControl = await extent.evaluate((extent) => {
+        return !extent._layerControlHTML.isConnected;
+      });
+      expect(hiddenInLayerControl).toBe(false);
+
+      let labelProperty = await extent.evaluate((extent) => {
+        return extent.label;
+      });
+      expect(labelProperty === 'User-generated label').toBe(true);
+
+      let labelInLayerControl = await extent.evaluate((extent) => {
+        return extent._layerControlLabel.innerText;
+      });
+      expect(labelInLayerControl === labelProperty).toBe(true);
+
+      await extent.evaluate((extent) => {
+        extent.removeAttribute('label');
+      });
+
+      await page.waitForTimeout(500);
+      const labelChangesToDefaultAndLayerNotHidden = await extent.evaluate(
+        (extent) => {
+          return (
+            extent.label === 'Sub-layer' &&
+            !extent.hidden &&
+            extent._layerControlLabel.innerText === extent.label
+          );
+        }
+      );
+      expect(labelChangesToDefaultAndLayerNotHidden).toBe(true);
+    });
+
+    test('hidden DOM order maintained when unhiding', async () => {
+      const t = await page.getByTestId('template');
+      await t.evaluate((t) => {
+        let extents = t.content.cloneNode(true);
+        let l = document.querySelector('#cbmt1');
+        l.appendChild(extents);
+      });
+      await page.waitForTimeout(500);
+      const layer = await page.getByTestId('cbmt1');
+      let unhiddenMapExtentCount = await layer.evaluate((layer) => {
+        return layer._propertiesGroupAnatomy.childElementCount;
+      });
+      // all hidden extents
+      expect(unhiddenMapExtentCount).toEqual(0);
+      await layer.evaluate((layer) => {
+        return layer.whenElemsReady();
+      });
+      await layer.evaluate((layer) => {
+        layer.querySelector('[data-testid="ext3"]').hidden = false;
+      });
+      await layer.evaluate((layer) => {
+        layer.querySelector('[data-testid="ext1"]').hidden = false;
+      });
+      await layer.evaluate((layer) => {
+        layer.querySelector('[data-testid="ext2"]').hidden = false;
+      });
+      unhiddenMapExtentCount = await layer.evaluate((layer) => {
+        return layer._propertiesGroupAnatomy.childElementCount;
+      });
+      // no hidden extents
+      expect(unhiddenMapExtentCount).toBe(3);
+
+      const orderOfDOMExtentsEqualsLayerControlOrder = await layer.evaluate(
+        (layer) => {
+          let extents = layer.querySelectorAll('map-extent');
+          let match = true;
+          for (let i = 0; i < extents.length; i++) {
+            if (
+              extents[i]._layerControlHTML !==
+              layer._propertiesGroupAnatomy.children[i]
+            ) {
+              match = false;
+              break;
+            }
+          }
+          return match;
+        }
+      );
+      expect(orderOfDOMExtentsEqualsLayerControlOrder).toBe(true);
+    });
+  });
+  test('Basic checked functionality and API', async () => {
+    // extent ext2-1 starts life checked and hidden
+    const extent = await page.getByTestId('ext2-1');
+    let checkedInLayerControl = await extent.evaluate((extent) => {
+      return extent._layerControlCheckbox.checked;
+    });
+    let visibleOnMap = await extent.evaluate((extent) => {
+      return extent._templatedLayer._container.isConnected;
+    });
+    let checkedProperty = await extent.evaluate((extent) => {
+      return extent.checked;
+    });
+    expect(checkedInLayerControl).toBe(true);
+    expect(visibleOnMap).toBe(true);
+    expect(checkedProperty).toBe(true);
+    await extent.evaluate((extent) => {
+      extent.checked = false;
+    });
+
+    await extent.evaluate((extent) => {
+      extent.hidden = false;
+    });
+    checkedInLayerControl = await extent.evaluate((extent) => {
+      return extent._layerControlCheckbox.checked;
+    });
+    visibleOnMap = await extent.evaluate((extent) => {
+      return extent._templatedLayer._container.isConnected;
+    });
+    checkedProperty = await extent.evaluate((extent) => {
+      return extent.checked;
+    });
+    expect(checkedInLayerControl).toBe(false);
+    expect(visibleOnMap).toBe(false);
+    expect(checkedProperty).toBe(false);
+
+    // extent2 is not checked when loaded
+    const extent2 = await page.getByTestId('ext2-2');
+    checkedInLayerControl = await extent2.evaluate((extent) => {
+      return extent._layerControlCheckbox.checked;
+    });
+    visibleOnMap = await extent2.evaluate((extent) => {
+      return extent._templatedLayer._container.isConnected;
+    });
+    checkedProperty = await extent2.evaluate((extent) => {
+      return extent.checked;
+    });
+    expect(checkedInLayerControl).toBe(false);
+    expect(visibleOnMap).toBe(false);
+    expect(checkedProperty).toBe(false);
+  });
+});
diff --git a/test/server.js b/test/server.js
@@ -6,6 +6,7 @@ const port = 30001;
 //then loads in the index file
 app.use(express.static(path.join(__dirname, '../dist')));
 app.use(express.static(path.join(__dirname, 'e2e/core')));
+app.use(express.static(path.join(__dirname, 'e2e/elements/map-extent')));
 app.use(express.static(path.join(__dirname, 'e2e/api')));
 app.use(express.static(path.join(__dirname, 'e2e/data')));
 app.use(express.static(path.join(__dirname, 'e2e/geojson')));