Add test for preferred content type

package.json

@@ -14,7 +14,7 @@
   },
   "license": "W3C",
   "devDependencies": {
-    "@playwright/test": "^1.24.2",
-    "playwright": "^1.24.2"
+    "@playwright/test": "^1.39.0",
+    "playwright": "^1.39.0"
   }
 }

test/e2e/basics/popup.test.js

@@ -37,25 +37,22 @@ test.describe("Popup test", () => {
         await newPage.keyboard.press("ArrowUp");
         await newPage.waitForTimeout(1000);
 
-        const featureIndexOverlay = await newPage.$eval(
-            "xpath=//html/body/mapml-viewer >> css=div",
-            (div) => div.querySelector("output.mapml-feature-index")
-        );
+        const featureIndexOverlayOutput = newPage.locator('.mapml-feature-index');
+        const featureIndexOverlay = await featureIndexOverlayOutput.evaluate((output) => output.textContent);
+        expect(featureIndexOverlay).not.toEqual(null);
 
-        const announceZoom = await newPage.$eval(
-            "xpath=//html/body/mapml-viewer >> css=div > output",
-            (output) => output.textContent
+        const announceZoomOutput = newPage.locator('.mapml-screen-reader-output');
+        const announceZoom = await announceZoomOutput.evaluate((output) => output.textContent
         );
-
-        const announceScale = await newPage.$eval(
-            "xpath=//html/body/mapml-viewer >> css=div >  output:nth-child(7)",
+        expect(announceZoom).toEqual("zoom level 2");
+
+        const scaleBarOutput = await newPage.locator('.mapml-screen-reader-output-scale');
+        const announceScale = await scaleBarOutput.evaluate(
             (output) => output.textContent
         );
+        expect(announceScale).toEqual("2 centimeters to 1000 kilometers");  
 
         await newPage.close();
-        expect(featureIndexOverlay).not.toEqual(null);
-        expect(announceZoom).toEqual("zoom level 2");
-        expect(announceScale).toEqual("2 centimeters to 1000 kilometers");  
     });
 
     test("Turn off options", async () => {
@@ -66,26 +63,23 @@ test.describe("Popup test", () => {
         await page.waitForTimeout(1000);
         let newPage = await context.newPage();
         await newPage.goto("test/e2e/basics/locale.html", { waitUntil: "domcontentloaded" });
+        await newPage.waitForTimeout(500);
         await newPage.keyboard.press("Tab");
         await newPage.waitForTimeout(500);
         await newPage.keyboard.press("ArrowUp");
         await newPage.waitForTimeout(1000);
 
-        const featureIndexOverlay = await newPage.$eval(
-            "xpath=//html/body/mapml-viewer >> css=div",
-            (div) => div.querySelector("output.mapml-feature-index")
-        );
+        const viewer = newPage.locator('mapml-viewer');
+
+        const featureIndexOverlayOutputExists = await viewer.evaluate((viewer) => viewer.shadowRoot.querySelector('.mapml-feature-index') !== null); 
+        expect(featureIndexOverlayOutputExists).toBe(false);
 
-        const output = await newPage.$eval(
-            "xpath=//html/body/mapml-viewer >> css=div > output",
-            (output) => output.textContent
-        );
+        const announceZoomOutput = newPage.locator('.mapml-screen-reader-output');
+        const announceZoomOutputContentExists = await announceZoomOutput.evaluate((output) => output.textContent !== "");
+        expect(announceZoomOutputContentExists).toBe(false);
 
         await newPage.goto("https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/?alt=xml", { waitUntil: "domcontentloaded" });
         const map = await page.$("xpath=//html/body/mapml-viewer");
-
-        expect(featureIndexOverlay).toEqual(null);
-        expect(output).toEqual("");
         expect(map).toEqual(null);
     });
 
@@ -136,5 +130,5 @@ test.describe("Popup test", () => {
         let text = await newPage.evaluate(() => navigator.clipboard.readText());
         let expected = `<map-meta name=\"extent\" content=\"top-left-longitude=-76.57882690429689, top-left-latitude=45.74644367422244, bottom-right-longitude=-74.82101440429689, bottom-right-latitude=45.052180659942316\"></map-meta>`;
         expect(text).toEqual(expected);
-    })
+    });
 });

test/e2e/basics/preferred-content.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>Preferred Content Test</title>
+        <script type="module" src="../../../src/dist/mapml-viewer.js"></script>
+    </head>
+  <body>
+  <mapml-viewer  style="height: 500px;width:500px;" projection="CBMTILE" zoom="8" lat="46.51231982020816" lon="-63.25669692277839"  controls>
+    <layer- data-testid="test-layer" label="Provinces and Territories" src="../data/cbmt-cbmtile.mapml" checked></layer->
+  </mapml-viewer>
+  </body>
+</html>

test/e2e/basics/preferred-content.test.js

@@ -0,0 +1,59 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe("Preferred content test", () => {
+    let page;
+    let context;
+    test.beforeAll(async () => {
+        context = await chromium.launchPersistentContext('');
+        page = context.pages().find((page) => page.url() === 'about:blank') || await context.newPage();
+
+        let [background] = context.serviceWorkers();
+        if (!background)
+            background = await context.waitForEvent("serviceworker");
+
+        const id = background.url().split("/")[2];
+        await page.goto('chrome-extension://' + id +'/popup.html');
+    });
+
+    test.afterAll(async () => {
+        await context.close();
+    });
+
+    test("Default map content type preference", async ()=>{
+        let newPage = await context.newPage();
+        await newPage.goto("test/e2e/basics/preferred-content.html", { waitUntil: "domcontentloaded" });
+        await newPage.waitForTimeout(500);
+
+        const layer = newPage.getByTestId('test-layer');
+        const label = await layer.evaluate((l) => l._layerControlLabel.textContent);
+        expect(label).toEqual('Image content');
+
+        await newPage.close();
+    });
+
+    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.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"); // tab to the content preference select
+        await page.keyboard.press("ArrowDown"); 
+        await page.keyboard.press("ArrowDown"); 
+        await page.keyboard.press("ArrowDown"); // features is third in the list
+
+        // "newPage" is the user / test page
+
+        let newPage = await context.newPage();
+        await newPage.goto("test/e2e/basics/preferred-content.html", { waitUntil: "domcontentloaded" });
+        await newPage.waitForTimeout(1000);
+
+        const layer = newPage.getByTestId('test-layer');
+        const label = await layer.evaluate((l) => l._layerControlLabel.textContent);
+        expect(label).toEqual('Feature content');
+    });
+
+});