Added tests for map-link media attribute

Maps4HTML · Dec 13, 2024 · e4fa4dc · e4fa4dc
1 parent 5b49b19
commit e4fa4dc
Show file tree

Hide file tree

Showing 2 changed files with 226 additions and 0 deletions.
diff --git a/test/e2e/elements/map-link/map-link-media.html b/test/e2e/elements/map-link/map-link-media.html
@@ -0,0 +1,125 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>map-link-media.html</title>
+    <script type="module" src="mapml.js"></script>
+     <style> 
+       html, 
+       body { 
+         height: 100%; 
+       } 
+       * { 
+         margin: 0; 
+         padding: 0; 
+       } 
+
+       /* Specifying the `:defined` selector is recommended to style the map 
+       element, such that styles don't apply when fallback content is in use 
+       (e.g. when scripting is disabled or when custom/built-in elements isn't 
+       supported in the browser). */ 
+       mapml-viewer:defined { 
+         /* Responsive map. */ 
+          max-width: 100%;  
+
+         /* Full viewport. */
+          width: 100%;  
+          height: 50%;  
+
+         /* Remove default (native-like) border. */ 
+         border: none;
+
+         vertical-align: middle;
+       } 
+
+       /* Pre-style to avoid FOUC of inline map-layer and fallback content. */ 
+       mapml-viewer:not(:defined) > * { 
+         display: none; 
+       } 
+
+       /* Pre-style to avoid Layout Shift. */
+       mapml-viewer:not(:defined) {
+         display: inline-block;
+         contain: size;
+         contain-intrinsic-size: 304px 154px;
+       }
+
+      /* Specifying the `:defined` selector is recommended to style the map
+      element, such that styles don't apply when fallback content is in use
+      (e.g. when scripting is disabled or when custom/built-in elements isn't
+      supported in the browser). */
+      map[is="web-map"]:defined {
+      /* Responsive map. */ 
+          max-width: 100%;  
+
+         /* Full viewport. */ 
+          width: 100%;  
+          height: 50%;  
+
+         /* Remove default (native-like) border. */ 
+         border: none;
+
+         vertical-align: middle;
+      }
+
+      /* Pre-style to avoid Layout Shift. */
+      map[is="web-map"]:not(:defined) {
+        display: inline-block;
+        contain: size;
+        contain-intrinsic-size: 304px 154px;
+      }
+
+      /* Pre-style to avoid FOUC of inline map-layer and fallback content. */
+      map[is="web-map"]:not(:defined) + img[usemap],
+      map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) {
+        display: none;
+      }
+
+      /* Ensure inline layer content is hidden if custom/built-in elements isn't
+      supported, or if javascript is disabled. This needs to be defined separately
+      from the above, because the `:not(:defined)` selector invalidates the entire
+      declaration in browsers that do not support it. */
+      map-layer {
+        display: none;
+      }
+     </style> 
+     <noscript> 
+       <style> 
+         /* Ensure fallback content (children of the map element) is displayed if 
+         custom/built-in elements is supported but javascript is disabled. */ 
+         mapml-viewer:not(:defined) > :not(map-layer) { 
+           display: initial; 
+         } 
+
+         /* "Reset" the properties used to pre-style (to avoid Layout Shift) if
+         custom/built-in elements is supported but javascript is disabled. */
+         mapml-viewer:not(:defined) {
+           display: initial;
+           contain: initial;
+           contain-intrinsic-size: initial;
+         }
+       </style> 
+     </noscript> 
+  </head>
+  <body>
+
+    <mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
+      <map-layer label="Restaurants" checked="">
+        <map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
+        <map-extent units="OSMTILE" checked="">
+           <map-select id="restaurants" name="cusine">
+               <map-option value="restaurants" selected="selected">All cuisines</map-option>
+               <map-option value="african">African</map-option>
+               <map-option value="asian">Asian</map-option>
+               <map-option value="cajun">Cajun</map-option>
+               <map-option value="indian">Indian</map-option>
+               <map-option value="italian">Italian</map-option>
+               <map-option value="mexican">Mexican</map-option>
+           </map-select>
+           <map-link media="(11 < map-zoom <= 18)" tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
+        </map-extent>
+      </map-layer>
+    </mapml-viewer>
+  </body>
+</html>
diff --git a/test/e2e/elements/map-link/map-link-media.test.js b/test/e2e/elements/map-link/map-link-media.test.js
@@ -0,0 +1,101 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('map-link media attribute', () => {
+    let page;
+    let context;
+    test.beforeAll(async function () {
+        context = await chromium.launchPersistentContext('');
+        page =
+            context.pages().find((page) => page.url() === 'about:blank') ||
+            (await context.newPage());
+        await page.goto('map-link-media.html');
+    });
+
+    test.afterAll(async function () {
+        await context.close();
+    });
+
+    test('map-link is disabled when media attribute does not match', async () => {
+        // const map = page.locator('mapml-viewer');
+        const layer = page.locator('map-layer');
+        const mapLink = page.locator('map-link').first();
+        await expect(layer).not.toHaveAttribute('disabled');
+        await expect(mapLink).not.toHaveAttribute('disabled');
+
+        // zoom out so that media attribute no longer matches, features should be disabled
+        await page.evaluate(() => {
+            const map = document.querySelector('mapml-viewer');
+            map.zoomTo(map.lat, map.lon, 10);
+        })
+        await expect(layer).toHaveAttribute('disabled');
+        await expect(mapLink).toHaveAttribute('disabled');
+
+        // zoom in so that media attribute matches, features should not be disabled
+        await page.evaluate(() => {
+            const map = document.querySelector('mapml-viewer');
+            map.zoomTo(map.lat, map.lon, 15);
+        })
+        await expect(layer).not.toHaveAttribute('disabled');
+        await expect(mapLink).not.toHaveAttribute('disabled');
+    });
+
+    test('remove media attribute works', async () => {
+        const layer = page.locator('map-layer');
+        const mapLink = page.locator('map-link').first();
+        await mapLink.evaluate((l) => {
+            l.removeAttribute('media');
+        })
+
+        // zooming out no longer disables features
+        await page.evaluate(() => {
+            const map = document.querySelector('mapml-viewer');
+            map.zoomTo(map.lat, map.lon, 10);
+        })
+        await expect(layer).not.toHaveAttribute('disabled');
+        await expect(mapLink).not.toHaveAttribute('disabled');
+    });
+
+    test('set media attribute works', async () => {
+        const layer = page.locator('map-layer');
+        const mapLink = page.locator('map-link').first();
+        await mapLink.evaluate((l) => {
+            l.setAttribute('media', '(11 < map-zoom <= 18)');
+        })
+
+        // zoom out so that media attribute no longer matches, features should be disabled
+        await page.evaluate(() => {
+            const map = document.querySelector('mapml-viewer');
+            map.zoomTo(map.lat, map.lon, 10);
+        })
+        await expect(layer).toHaveAttribute('disabled');
+        await expect(mapLink).toHaveAttribute('disabled');
+
+        // zoom in so that media attribute matches, features should not be disabled
+        await page.evaluate(() => {
+            const map = document.querySelector('mapml-viewer');
+            map.zoomTo(map.lat, map.lon, 15);
+        })
+        await expect(layer).not.toHaveAttribute('disabled');
+        await expect(mapLink).not.toHaveAttribute('disabled');
+    })
+
+    test('modify media attribute works', async () => {
+        const layer = page.locator('map-layer');
+        const mapLink = page.locator('map-link').first();
+        await mapLink.evaluate((l) => {
+            l.setAttribute('media', '(15 < map-zoom <= 18)');
+        })
+
+        // the media attribute no longer matches, features should be disabled
+        await expect(layer).toHaveAttribute('disabled');
+        await expect(mapLink).toHaveAttribute('disabled');
+
+        // zoom in so that media attribute matches, features should not be disabled
+        await page.evaluate(() => {
+            const map = document.querySelector('mapml-viewer');
+            map.zoomTo(map.lat, map.lon, 16);
+        })
+        await expect(layer).not.toHaveAttribute('disabled');
+        await expect(mapLink).not.toHaveAttribute('disabled');
+    })
+});