From 59713ccab1a67e282176442a6fc4402a7770cd7f Mon Sep 17 00:00:00 2001
From: ben-lu-uw <69722289+ben-lu-uw@users.noreply.github.com>
Date: Thu, 7 Jul 2022 16:15:56 -0400
Subject: [PATCH] Add option to toggle feature index overlay (#21)

* Add option to toggle feature index overlay

* Add tests for feature index option
---
 src/popup.html                |  5 +++++
 src/popup.js                  |  1 +
 test/e2e/basics/popup.test.js | 40 ++++++++++++++++++++++++++---------
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/popup.html b/src/popup.html
index 8fcee75..f739639 100644
--- 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
index fa2796e..9221032 100644
--- 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
index 9c3d2b8..f64ce3f 100644
--- 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("");
     });
 });
\ No newline at end of file