Added test for map feature popups

Author: yushan-mu

test/e2e/mapml-viewer/localization.html

@@ -48,7 +48,7 @@
         <map-extent units="CBMTILE" checked>
           <map-link rel="query" tref="localization.mapml" ></map-link>
         </map-extent>
-        <map-feature>
+        <map-feature data-testid="map-feature">
           <map-properties><h6>Un lieu</h6></map-properties>
           <map-geometry cs="gcrs">
             <map-point><map-coordinates>-90 45</map-coordinates></map-point>
@@ -64,7 +64,7 @@
         <map-extent units="CBMTILE" checked>
           <map-link rel="query" tref="localization.mapml" ></map-link>
         </map-extent>
-        <map-feature>
+        <map-feature data-testid="map-feature">
           <map-properties><h6>A place - this map is not localized</h6></map-properties>
           <map-geometry cs="gcrs">
             <map-point><map-coordinates>-90 45</map-coordinates></map-point>
@@ -79,7 +79,7 @@
         <map-extent units="CBMTILE" checked>
           <map-link rel="query" tref="localization.mapml" ></map-link>
         </map-extent>
-        <map-feature>
+        <map-feature data-testid="map-feature">
           <map-properties><h6>A place</h6></map-properties>
           <map-geometry cs="gcrs">
             <map-point><map-coordinates>-90 45</map-coordinates></map-point>

test/e2e/mapml-viewer/localization.test.js

@@ -218,14 +218,6 @@ test.describe('<mapml-viewer> localization tests', () => {
   });
 
   test('Hover messages for location tracking matches the locale key', async () => {
-    const buttonNames = [
-      'btnLocTrackOn',
-      'btnMyLocTrackOn',
-      'btnLocTrackOff',
-      'btnLocTrackLastKnown',
-      'btnMyLastKnownLocTrackOn'
-    ];
-
     for (const [language, locale] of locales) {
       // select the current map
       const map = await page.getByTestId(language);
@@ -286,20 +278,37 @@ test.describe('<mapml-viewer> localization tests', () => {
   });
 
   test('Map feature options matches the locale key', async () => {
-    // hover over map feature, controls after clicking on the feature
-    const buttonNames = [];
+    const buttonNames = [
+      'kbdFocusMap',
+      'kbdPrevFeature',
+      'kbdNextFeature',
+      'kbdFocusControls'
+    ];
+
+    // click all feature buttons
+    const features = await page.getByTestId('map-feature');
+    const count = await features.count();
+    for (let i = 0; i < count; i++) {
+      await page.waitForTimeout(500);
+      await features.nth(i).evaluate((node) => node.click());
+    }
 
     for (const [language, locale] of locales) {
       // select the current map
       const map = await page.getByTestId(language);
 
-      // where do we access these?
+      // test focus buttons (for map features)
+      const focusButtons = await map.locator('.mapml-focus-buttons button');
+      const buttonsCount = await focusButtons.count();
+      for (let i = 0; i < buttonsCount; i++) {
+        const text = await focusButtons.nth(i).getAttribute('title');
+        expect(text).toBeTruthy();
+        expect(text.endsWith(locale[buttonNames[i]])).toBe(true);
+      }
     }
   });
 
-  test('Keyboard feature messages matches the locale key', async () => {
-    // in the attribution button, check that the keyboard feature messages
-    // are translated
+  test('Keyboard feature messages in the attribution button matches the locale key', async () => {
     const dialogBolded = ['kbdShortcuts', 'kbdMovement', 'kbdFeature'];
 
     const dialogListItems = [