Add preferred-content tests for multiple content preferences

Maps4HTML · Dec 3, 2024 · 3e7a714 · 3e7a714
1 parent 7037525
commit 3e7a714
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 1 deletion.
diff --git a/test/e2e/basics/preferred-content.html b/test/e2e/basics/preferred-content.html
@@ -5,9 +5,26 @@
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>Preferred Content Test</title>
         <script type="module" src="../../../src/dist/mapml.js"></script>
+        <script>
+      document.addEventListener('DOMContentLoaded',(e)=>{
+        let l, map = document.querySelector('mapml-viewer'),
+            prefersEverything = map.matchMedia('(prefers-map-content: image) and (prefers-map-content: tile) and (prefers-map-content: feature) and (prefers-map-content: table)').matches === 'true',
+            t = document.querySelector('template'),
+            prefersFeaturesOnly = map.matchMedia('(prefers-map-content: feature) and ( not ((prefers-map-content: image) or (prefers-map-content: tile)))').matches === 'true',
+            prefersTiles = map.matchMedia('(prefers-map-content: tile');
+        if (prefersFeaturesOnly) {
+          l = t.content.querySelector('#features').cloneNode(true);
+        } else if (prefersImages) {
+          l = t.content.querySelector('#wms').cloneNode(true);
+        } else if (prefersTiles) {
+          l = t.content.querySelector('#tiles').cloneNode(true);
+        }
+        map.appendChild(l);
+      });
+    </script>
     </head>
   <body>
-  <mapml-viewer  style="height: 500px;width:500px;" projection="CBMTILE" zoom="8" lat="46.51231982020816" lon="-63.25669692277839"  controls>
+  <mapml-viewer  data-testid="viewer" style="height: 500px;width:500px;" projection="CBMTILE" zoom="8" lat="46.51231982020816" lon="-63.25669692277839"  controls>
     <map-layer data-testid="test-layer" label="Provinces and Territories" src="../data/cbmt-cbmtile.mapml" checked></map-layer>
   </mapml-viewer>
   </body>

diff --git a/test/e2e/basics/preferred-content.test.js b/test/e2e/basics/preferred-content.test.js
@@ -34,6 +34,7 @@ test.describe("Preferred content test", () => {
     test("User prefers feature content type", async () => {
         // "page" is the extension popup, hasn't been closed so still open in a 
         // browser tab somewhere...
+        await page.bringToFront();
         await page.keyboard.press("Tab");
         await page.keyboard.press("Tab");
         await page.keyboard.press("Tab");
@@ -55,5 +56,56 @@ test.describe("Preferred content test", () => {
         const label = await layer.evaluate((l) => l._layerControlLabel.textContent);
         expect(label).toEqual('Feature content');
     });
+
+    test("Multiple preferences can be expressed by user", async () => {
+      await page.bringToFront();
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab"); 
+      // features is currently selected, so need a tricky set of key presses
+      await page.keyboard.press("ArrowUp"); 
+      await page.keyboard.press("ArrowUp"); 
+      await page.keyboard.press("Shift+ArrowDown"); 
+      await page.keyboard.press("Shift+ArrowDown"); 
+      await page.keyboard.press("Shift+ArrowDown"); 
+      let newPage = await context.newPage();
+      await newPage.goto("test/e2e/basics/preferred-content.html", { waitUntil: "domcontentloaded" });
+      await newPage.waitForTimeout(1000);
+      let map = newPage.getByTestId('viewer');
+      const matches = await map.evaluate((map)=>{
+        return map.matchMedia('(prefers-map-content: image) and (prefers-map-content: tile) and (prefers-map-content: feature) and (prefers-map-content: table)').matches;
+      });
+      expect(matches).toBe(true);
+    });
+    test("Multiple disjoint preferences can be expressed by user", async () => {
+      await page.bringToFront();
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab");
+      await page.keyboard.press("Tab"); 
+      await page.keyboard.press("ArrowUp"); 
+      await page.keyboard.press("ArrowUp"); 
+      await page.keyboard.press(" "); // select tiles option
+      await page.keyboard.press("Control+ArrowDown"); 
+      await page.keyboard.press("Control+ArrowDown"); 
+      await page.keyboard.press(" "); // select tables option
+      let newPage = await context.newPage();
+      await newPage.goto("test/e2e/basics/preferred-content.html", { waitUntil: "domcontentloaded" });
+      await newPage.waitForTimeout(1000);
+      let map = newPage.getByTestId('viewer');
+      const matches = await map.evaluate((map)=>{
+        return map.matchMedia('(not (prefers-map-content: image)) and (prefers-map-content: tile) and (not (prefers-map-content: feature)) and (prefers-map-content: table)').matches;
+      });
+      expect(matches).toBe(true);
+    });
 
 });