Add test for <map-link rel="features" media="..."> attribute cycling

test/e2e/elements/map-layer/map-layer-media.test.js

@@ -13,23 +13,23 @@ test.describe('map-layer media attribute', () => {
     await page.waitForTimeout(1000);
     viewer = page.getByTestId('viewer');
   });
-  test('On initial load, a matching media queried layer is enabled', async ()=>{
+  test('On initial load, a matching media queried layer is enabled', async () => {
     const matchedQueryLayer = page.getByTestId('initial-mq');
     // map loads at z=2, query matches 0 <= z <= 3
     await expect(matchedQueryLayer).not.toHaveAttribute('disabled', '');
   });
   test(`A visible (enabled) map-layer with no media query should remain enabled \
-when a matching mq is added`, async ()=> {
+when a matching mq is added`, async () => {
     const noInitialQueryLayer = page.getByTestId('no-initial-mq');
-    await expect(noInitialQueryLayer).not.toHaveAttribute('disabled','');
-    await viewer.evaluate((v) => v.zoomTo(v.lat,v.lon,4));
+    await expect(noInitialQueryLayer).not.toHaveAttribute('disabled', '');
+    await viewer.evaluate((v) => v.zoomTo(v.lat, v.lon, 4));
     await page.waitForTimeout(200);
     // should still be enabled:
-    await expect(noInitialQueryLayer).not.toHaveAttribute('disabled','');
+    await expect(noInitialQueryLayer).not.toHaveAttribute('disabled', '');
   });
   test(`A visible (enabled) map-layer with no media query should be disabled \
-when a non-matching media query attribute is set`, async ()=> {
-    await expect(viewer).toHaveAttribute('zoom','4');
+when a non-matching media query attribute is set`, async () => {
+    await expect(viewer).toHaveAttribute('zoom', '4');
     const presentInLayerControl = await viewer.evaluate((v) => {
       let lc = v._layerControl;
       let layers = lc._layers.map((e) => e.layer._layerEl);
@@ -38,14 +38,19 @@ when a non-matching media query attribute is set`, async ()=> {
     });
     expect(presentInLayerControl).toBe(true);
     const noInitialQueryLayer = page.getByTestId('no-initial-mq');
-    await expect(noInitialQueryLayer).not.toHaveAttribute('disabled','');
-    await noInitialQueryLayer.evaluate((l) => l.media = '(0 <= map-zoom <=3)');
-    await expect(noInitialQueryLayer).toHaveAttribute('disabled','');
+    await expect(noInitialQueryLayer).not.toHaveAttribute('disabled', '');
+    await noInitialQueryLayer.evaluate(
+      (l) => (l.media = '(0 <= map-zoom <=3)')
+    );
+    await expect(noInitialQueryLayer).toHaveAttribute('disabled', '');
   });
-  test(`A mq-disabled layer is removed from the layer control`,async ()=>{
+  test(`A mq-disabled layer is removed from the layer control`, async () => {
     const noInitialQueryLayer = page.getByTestId('no-initial-mq');
-    await expect(noInitialQueryLayer).toHaveAttribute('media','(0 <= map-zoom <=3)');
-    await expect(noInitialQueryLayer).toHaveAttribute('disabled','');
+    await expect(noInitialQueryLayer).toHaveAttribute(
+      'media',
+      '(0 <= map-zoom <=3)'
+    );
+    await expect(noInitialQueryLayer).toHaveAttribute('disabled', '');
     const presentInLayerControl = await viewer.evaluate((v) => {
       let lc = v._layerControl;
       let layers = lc._layers.map((e) => e.layer._layerEl);
@@ -55,30 +60,31 @@ when a non-matching media query attribute is set`, async ()=> {
     expect(presentInLayerControl).toBe(false);
   });
   test(`A layer disabled due to mq would otherwise be enabled is \
-enabled and added to the layer control when mq removed`, async () =>{
+enabled and added to the layer control when mq removed`, async () => {
     const noInitialQueryLayer = page.getByTestId('no-initial-mq');
-    await expect(noInitialQueryLayer).toHaveAttribute('media','(0 <= map-zoom <=3)');
-    await expect(noInitialQueryLayer).toHaveAttribute('disabled','');
+    await expect(noInitialQueryLayer).toHaveAttribute(
+      'media',
+      '(0 <= map-zoom <=3)'
+    );
+    await expect(noInitialQueryLayer).toHaveAttribute('disabled', '');
     await noInitialQueryLayer.evaluate((l) => l.removeAttribute('media'));
-    await expect(noInitialQueryLayer).not.toHaveAttribute('disabled','');
+    await expect(noInitialQueryLayer).not.toHaveAttribute('disabled', '');
     const presentInLayerControl = await viewer.evaluate((v) => {
       let lc = v._layerControl;
       let layers = lc._layers.map((e) => e.layer._layerEl);
       let noInitialQueryLayer = v.querySelector('[data-testid=no-initial-mq]');
       return layers.some((e) => e === noInitialQueryLayer);
     });
     expect(presentInLayerControl).toBe(true);
-
   });
-  test(`An empty media query is the same as no media query`, async () =>{
+  test(`An empty media query is the same as no media query`, async () => {
     const noInitialQueryLayer = page.getByTestId('no-initial-mq');
-    await noInitialQueryLayer.evaluate((l)=> l.setAttribute('media', ' '));
-    await expect(noInitialQueryLayer).not.toHaveAttribute('disabled','');
-
+    await noInitialQueryLayer.evaluate((l) => l.setAttribute('media', ' '));
+    await expect(noInitialQueryLayer).not.toHaveAttribute('disabled', '');
   });
-  test(`An invalid media query is the same as a non-matching media query`, async () =>{
+  test(`An invalid media query is the same as a non-matching media query`, async () => {
     const noInitialQueryLayer = page.getByTestId('no-initial-mq');
-    await noInitialQueryLayer.evaluate((l)=> l.setAttribute('media', '(foo '));
-    await expect(noInitialQueryLayer).toHaveAttribute('disabled','');
+    await noInitialQueryLayer.evaluate((l) => l.setAttribute('media', '(foo '));
+    await expect(noInitialQueryLayer).toHaveAttribute('disabled', '');
   });
-});
+});

test/e2e/elements/map-link/map-link-media.html

@@ -104,7 +104,7 @@
   </head>
   <body>
 
-    <mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
+    <mapml-viewer data-testid="viewer" projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls style="height: 500px;width:500px;">
       <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="">
@@ -117,7 +117,7 @@
                <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-link data-testid="features-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>

test/e2e/elements/map-link/map-link-media.test.js

@@ -1,3 +1,7 @@
+/* to do: test that map-link rel=features is re-enabled when the media attribute
+ * is removed
+ */
+
 import { test, expect, chromium } from '@playwright/test';
 
 test.describe('map-link media attribute', () => {
@@ -98,4 +102,16 @@ test.describe('map-link media attribute', () => {
     await expect(layer).not.toHaveAttribute('disabled');
     await expect(mapLink).not.toHaveAttribute('disabled');
   });
+  test('map-link rel=features is enabled when non-matching media attribute removed', async ()=> {
+    const viewer = page.getByTestId('viewer');
+    const featuresLink = page.getByTestId('features-link');
+    await featuresLink.evaluate((l) => l.media = '(16 < map-zoom <= 18)');
+    await expect(featuresLink).toHaveAttribute('disabled');
+    await featuresLink.evaluate((l) => l.removeAttribute('media'));
+    await expect(featuresLink).not.toHaveAttribute('disabled');
+    await page.waitForTimeout(500);
+    await expect(viewer).toHaveScreenshot('default_styled_markers.png', {
+      maxDiffPixels: 100
+    });    
+  });
 });

test/e2e/elements/map-link/map-link-stylesheet-media.test.js

@@ -1,6 +1,6 @@
 import { test, expect, chromium } from '@playwright/test';
 
-test.describe('map-layer media attribute', () => {
+test.describe('map-layer rel=stylesheet media attribute', () => {
   let page;
   let context;
   let viewer;
@@ -15,7 +15,7 @@ test.describe('map-layer media attribute', () => {
     viewer = page.getByTestId('viewer');
     stylesheetLink = page.locator('map-link[rel=stylesheet][href="red.css"]');
   });
-  test(`when a map-link rel=stylesheet disables due to a media query, the styles\
+  test(`when a map-link disables due to a media query, the styles\
    should be removed`,async ()=>{
     // map starts off at 
     await expect(viewer).toHaveScreenshot('red_styled_markers.png', {
@@ -27,15 +27,15 @@ test.describe('map-layer media attribute', () => {
       maxDiffPixels: 20
     });
   });
-  test(`when a map-link rel=stylesheet enables due to a mq being removed, the \
+  test(`when a map-link enables due to a mq being removed, the \
  styles should apply`, async ()=>{
     await stylesheetLink.evaluate((l) => l.removeAttribute('media'));
     await expect(viewer).toHaveScreenshot('red_styled_markers.png', {
       maxDiffPixels: 20
     });
   });
 
-  test(`when a map-link rel=stylesheet enables due to disabled attribute removed\
+  test(`when a map-link enables due to disabled attribute removed\
    ensure styles change`, async ()=>{
     await stylesheetLink.evaluate((l) => l.disabled = true);
     await page.waitForTimeout(500);
@@ -48,7 +48,7 @@ test.describe('map-layer media attribute', () => {
       maxDiffPixels: 20
     });
   });
-  test(`when a map-link rel=stylesheet does not enable due to disabled attribute \
+  test(`when a map-link does not enable due to disabled attribute \
 removed while a non-matching media query is present, ensure that style does not \
 change`, async ()=>{
     await stylesheetLink.evaluate((l) => l.disabled = true);