Added tests for location tracking and kbd features, finished test for fullscreen

Author: yushan-mu

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

@@ -1,11 +1,18 @@
 import { test, expect, chromium } from '@playwright/test';
 let browserLocale, enLocale, frLocale, locales;
 
+test.use({
+  geolocation: { longitude: -73.56766530667056, latitude: 45.5027789304487 },
+  permissions: ['geolocation']
+});
+
 test.describe('<mapml-viewer> localization tests', () => {
   let page;
   let context;
   test.beforeAll(async () => {
-    context = await chromium.launchPersistentContext('');
+    context = await chromium.launchPersistentContext('', {
+      headless: false
+    });
     page =
       context.pages().find((page) => page.url() === 'about:blank') ||
       (await context.newPage());
@@ -159,13 +166,6 @@ test.describe('<mapml-viewer> localization tests', () => {
   });
 
   test('Hover messages in top left control buttons matches the locale key', async () => {
-    const buttonNames = [
-      'btnZoomIn',
-      'btnZoomOut',
-      'btnFullScreen',
-      'btnExitFullScreen'
-    ];
-
     for (const [language, locale] of locales) {
       // select the current map
       const map = await page.getByTestId(language);
@@ -188,7 +188,7 @@ test.describe('<mapml-viewer> localization tests', () => {
       expect(reloadText).toBeTruthy();
       expect(reloadText).toBe(locale.cmReload);
 
-      // fullscreen
+      // fullscreen text
       const fullscreen = await map.locator(
         '.leaflet-control-fullscreen-button.leaflet-bar-part'
       );
@@ -199,16 +199,19 @@ test.describe('<mapml-viewer> localization tests', () => {
       // click fullscreen button
       await fullscreen.click();
 
-      // exit fullscreen
-      // await expect(fullscreen).toHaveAttribute('title', locale.btnExitFullScreen);
-      // await page.waitForTimeout(5000);
-      // const exitFullscreen = await map.locator(
-      //   '.leaflet-control-fullscreen-button.leaflet-bar-part'
-      // );
-      // const exitFullscreenText = await exitFullscreen.getAttribute('title');
-      // expect(exitFullscreenText).toBeTruthy();
-      // expect(exitFullscreenText).toBe(locale.btnExitFullScreen);
+      // exit fullscreen text
+      await expect(fullscreen).toHaveAttribute(
+        'title',
+        locale.btnExitFullScreen
+      );
+      const exitFullscreen = await map.locator(
+        '.leaflet-control-fullscreen-button.leaflet-bar-part'
+      );
+      const exitFullscreenText = await exitFullscreen.getAttribute('title');
+      expect(exitFullscreenText).toBeTruthy();
+      expect(exitFullscreenText).toBe(locale.btnExitFullScreen);
 
+      // exit fullscreen
       await fullscreen.click();
     }
   });
@@ -225,6 +228,34 @@ test.describe('<mapml-viewer> localization tests', () => {
     for (const [language, locale] of locales) {
       // select the current map
       const map = await page.getByTestId(language);
+
+      // hover text for turning on show location
+      const showLocation = await map.locator(
+        '.leaflet-bar-part.leaflet-bar-part-single'
+      );
+      let showLocationText = await showLocation.getAttribute('title');
+      expect(showLocationText).toBeTruthy();
+      expect(showLocationText).toBe(locale.btnLocTrackOff);
+
+      // click show location
+      await showLocation.click();
+
+      // my current location
+      const curLocation = await map.locator(
+        '.leaflet-pane.leaflet-tooltip-pane'
+      );
+      const curLocationText = await curLocation.textContent();
+      expect(curLocationText).toBe(locale.btnMyLocTrackOn);
+
+      // hover text for turning off show location
+      showLocationText = await showLocation.getAttribute('title');
+      expect(showLocationText).toBeTruthy();
+      expect(showLocationText).toBe(locale.btnLocTrackOn);
+
+      // turn off show location
+      await showLocation.click();
+
+      // when are btnLocTrackLastKnown and btnMyLastKnownLocTrackOn used?
     }
   });
 
@@ -248,31 +279,54 @@ test.describe('<mapml-viewer> localization tests', () => {
     for (const [language, locale] of locales) {
       // select the current map
       const map = await page.getByTestId(language);
+
+      // where do we access these?
     }
   });
 
   test('Keyboard feature messages matches the locale key', async () => {
     // in the attribution button, check that the keyboard feature messages
     // are translated
-    const buttonNames = [
-      'kbdShortcuts',
-      'kbdMovement',
-      'kbdFeature',
+    const dialogBolded = ['kbdShortcuts', 'kbdMovement', 'kbdFeature'];
+
+    const dialogListItems = [
       'kbdPanUp',
       'kbdPanDown',
       'kbdPanLeft',
       'kbdPanRight',
+      'btnZoomIn',
+      'btnZoomOut',
+      'kbdPanIncrement',
       'kbdPanIncrement',
       'kbdZoom',
-      'kbdFocusMap',
-      'kbdFocusControls',
       'kbdPrevFeature',
       'kbdNextFeature'
     ];
 
     for (const [language, locale] of locales) {
       // select the current map
       const map = await page.getByTestId(language);
+
+      // locate the dialog element
+      const dialog = await map.locator('dialog');
+
+      // check that the bolded texts are translated correctly
+      const bolded = await dialog.locator('b');
+      const countBolded = await bolded.count();
+      for (let i = 0; i < countBolded; i++) {
+        const text = await bolded.nth(i).textContent();
+        expect(text).toBeTruthy();
+        expect(text.startsWith(locale[dialogBolded[i]])).toBe(true);
+      }
+
+      // check that the list items are translated correctly
+      const listItems = await dialog.locator('li');
+      const countListItems = await listItems.count();
+      for (let i = 0; i < countListItems; i++) {
+        const text = await listItems.nth(i).textContent();
+        expect(text).toBeTruthy();
+        expect(text.endsWith(locale[dialogListItems[i]])).toBe(true);
+      }
     }
   });
 });