Add option to toggle feature index overlay (#21)

* Add option to toggle feature index overlay * Add tests for feature index option
Maps4HTML · Jul 7, 2022 · 59713cc · 59713cc
1 parent f463141
commit 59713cc
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/src/popup.html b/src/popup.html
@@ -24,6 +24,11 @@ <h6 class="card-title">Accessibility Settings</h6>
         <label class="form-check-label" for="announceMovement">Announce movement for screen readers</label>
       </div>
 
+      <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" id="featureIndexOverlayOption">
+        <label class="form-check-label" for="featureIndexOverlayOption">Show feature index</label>
+      </div>
+
     </div>
   </div>
 

diff --git a/src/popup.js b/src/popup.js
@@ -62,6 +62,7 @@ function resetStorage() {
 document.addEventListener("DOMContentLoaded", () => {
   loadOptions();
   document.getElementById("announceMovement").addEventListener("change", handleCheckboxChange);
+  document.getElementById("featureIndexOverlayOption").addEventListener("change", handleCheckboxChange);
   document.getElementById("clear").addEventListener("click", resetStorage);
 });
 
diff --git a/test/e2e/basics/popup.test.js b/test/e2e/basics/popup.test.js
@@ -21,14 +21,15 @@ describe("Popup test", () => {
     });
 
     test("Turn on options", async ()=>{
-        let extension = page;
+        await page.keyboard.press("Tab");
+        await page.waitForTimeout(500);
+
         for(let i = 0; i < 2; i++){
             await page.keyboard.press("Tab");
             await page.waitForTimeout(500);
+            await page.keyboard.press("Space");
+            await page.waitForTimeout(500);
         }
-        await extension.keyboard.press("Space");
-        await extension.waitForTimeout(500);
-
         let newPage = await context.newPage();
         await newPage.waitForTimeout(1000);
         await newPage.goto(PATH + "basics/locale.html");
@@ -37,25 +38,36 @@ describe("Popup test", () => {
         await newPage.waitForTimeout(500);
         await newPage.keyboard.press("ArrowUp");
         await newPage.waitForTimeout(1000);
-        const output = await newPage.$eval(
+
+        const featureIndexOverlay = await newPage.$eval(
+            "xpath=//html/body/mapml-viewer >> css=div",
+            (div) => div.querySelector("output.mapml-feature-index")
+        );
+
+        const announceMovement = await newPage.$eval(
             "xpath=//html/body/mapml-viewer >> css=div > output",
             (output) => output.innerHTML
         );
+
         await newPage.close();
-        await expect(output).toEqual("zoom level 2 column 10 row 11");
+        await expect(featureIndexOverlay === null).toEqual(false);
+        await expect(announceMovement).toEqual("zoom level 2 column 10 row 11");
     });
 
     test("Clear storage", async ()=>{
-        for(let i = 0; i < 2; i++){
-            await page.keyboard.press("Tab");
-            await page.waitForTimeout(500);
-        }
         await page.keyboard.press("Space");
         await page.waitForTimeout(500);
+        await page.keyboard.press("Shift+Tab");
+        await page.waitForTimeout(500);
+        await page.keyboard.press("Space");
+        await page.waitForTimeout(500);
+
         await page.reload();
         await page.waitForTimeout(1000);
         let announceMoveOption = await page.locator('[id=announceMovement]').isChecked();
+        let featureIndexOverlayOption = await page.locator('[id=featureIndexOverlayOption]').isChecked();
         expect(announceMoveOption).toBe(false);
+        expect(featureIndexOverlayOption).toBe(false);
     });
 
     test("Check if options are off", async ()=>{
@@ -67,10 +79,18 @@ describe("Popup test", () => {
         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 output = await newPage.$eval(
             "xpath=//html/body/mapml-viewer >> css=div > output",
             (output) => output.innerHTML
         );
+
+        await expect(featureIndexOverlay).toEqual(null);
         await expect(output).toEqual("");
     });
 });