feature/accessible-interactive-tutorial-test

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stassi/leaf",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "description": "Leaflet adapter.",
   "keywords": [
     "cartography",
@@ -61,7 +61,7 @@
     "serve": "^14.2.3"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.25.7",
+    "@babel/eslint-parser": "^7.25.8",
     "@babel/plugin-syntax-import-attributes": "^7.25.7",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-inject": "^5.0.5",
@@ -83,12 +83,12 @@
     "eslint-plugin-jsonc": "^2.16.0",
     "eslint-plugin-no-unsanitized": "^4.1.2",
     "eslint-plugin-prettier": "^5.2.1",
-    "expect-puppeteer": "^10.1.1",
+    "expect-puppeteer": "^10.1.2",
     "jest": "^29.7.0",
-    "jest-environment-puppeteer": "^10.1.1",
-    "jest-puppeteer": "^10.1.1",
+    "jest-environment-puppeteer": "^10.1.2",
+    "jest-puppeteer": "^10.1.2",
     "prettier": "3.3.3",
-    "puppeteer": "^23.5.1",
+    "puppeteer": "^23.5.2",
     "rollup": "^4.24.0",
     "rollup-plugin-modify": "^3.0.0",
     "shx": "^0.3.4",

src/tutorial/accessible/interactive.test.ts

@@ -0,0 +1,55 @@
+describe('accessible interactive tutorial', (): void => {
+  beforeAll(async (): Promise<void> => {
+    await page.goto('http://localhost:3001/tutorial/accessible/interactive')
+  })
+
+  describe('map', (): void => {
+    describe('on initial page load', (): void => {
+      // eslint-disable-next-line jest/prefer-lowercase-title -- official case
+      describe('OpenStreetMap tiles', (): void => {
+        it('should render', async (): Promise<void> => {
+          ;(
+            await page.$$eval(
+              '.leaflet-tile-loaded',
+              (tiles: Element[]): (string | null)[] =>
+                tiles.map((tile: Element): string | null =>
+                  tile.getAttribute('src'),
+                ),
+            )
+          ).forEach((source: string | null): void => {
+            expect(source).toMatch(/^https:\/\/tile\.openstreetmap\.org\//)
+          })
+        })
+      })
+    })
+
+    describe('"Tab"-focused marker when "Enter" is pressed', (): void => {
+      it('should display popup text "Kyiv, Ukraine is the birthplace of Leaflet!"', async (): Promise<void> => {
+        let markerFocused = false
+
+        while (!markerFocused) {
+          await page.keyboard.press('Tab')
+
+          if (
+            (
+              await page.evaluate(
+                (): string => document.activeElement?.className ?? '',
+              )
+            ).includes('leaflet-marker-icon')
+          ) {
+            markerFocused = true
+          }
+        }
+
+        await page.keyboard.press('Enter')
+
+        expect(
+          await page.$eval(
+            '.leaflet-popup-content',
+            ({ textContent }: Element): string | null => textContent,
+          ),
+        ).toBe('Kyiv, Ukraine is the birthplace of Leaflet!')
+      })
+    })
+  })
+})

src/tutorial/custom-marker-icons/custom-marker-icons.test.ts

@@ -1,5 +1,3 @@
-type SourceCustomMarkerIcons = string | null
-
 describe('custom-marker-icons tutorial', (): void => {
   beforeAll(async (): Promise<void> => {
     await page.goto(
@@ -15,13 +13,12 @@ describe('custom-marker-icons tutorial', (): void => {
           ;(
             await page.$$eval(
               '.leaflet-tile-loaded',
-              (tiles: Element[]): SourceCustomMarkerIcons[] =>
-                tiles.map(
-                  (tile: Element): SourceCustomMarkerIcons =>
-                    tile.getAttribute('src'),
+              (tiles: Element[]): (string | null)[] =>
+                tiles.map((tile: Element): string | null =>
+                  tile.getAttribute('src'),
                 ),
             )
-          ).forEach((source: SourceCustomMarkerIcons): void => {
+          ).forEach((source: string | null): void => {
             expect(source).toMatch(/^https:\/\/tile\.openstreetmap\.org\//)
           })
         })
@@ -45,7 +42,7 @@ describe('custom-marker-icons tutorial', (): void => {
           },
         ])(
           'src="$src"',
-          ({ popupText, src }: { popupText: string; src: string }): void => {
+          ({ popupText, src }: Record<'popupText' | 'src', string>): void => {
             it(`should display popup text "${popupText}"`, async (): Promise<void> => {
               await (await page.$(`img[src="${src}"]`))?.click()
 
@@ -60,8 +57,7 @@ describe('custom-marker-icons tutorial', (): void => {
               expect(
                 await page.$eval(
                   '.leaflet-popup-content',
-                  ({ textContent }: Element): SourceCustomMarkerIcons =>
-                    textContent,
+                  ({ textContent }: Element): string | null => textContent,
                 ),
               ).toBe(popupText)
             })

src/tutorial/mobile/mobile.test.ts

@@ -1,5 +1,3 @@
-type SourceMobile = string | null
-
 describe('mobile tutorial', (): void => {
   beforeAll(async (): Promise<void> => {
     await browser
@@ -22,12 +20,12 @@ describe('mobile tutorial', (): void => {
         ;(
           await page.$$eval(
             '.leaflet-tile-loaded',
-            (tiles: Element[]): SourceMobile[] =>
-              tiles.map(
-                (tile: Element): SourceMobile => tile.getAttribute('src'),
+            (tiles: Element[]): (string | null)[] =>
+              tiles.map((tile: Element): string | null =>
+                tile.getAttribute('src'),
               ),
           )
-        ).forEach((source: SourceMobile): void => {
+        ).forEach((source: string | null): void => {
           expect(source).toMatch(/^https:\/\/tile\.openstreetmap\.org\//)
         })
       })
@@ -51,7 +49,7 @@ describe('mobile tutorial', (): void => {
           expect(
             await page.$eval(
               '.leaflet-popup-content',
-              ({ textContent }: Element): SourceMobile => textContent,
+              ({ textContent }: Element): string | null => textContent,
             ),
           ).toBe('You are within 10 meters from this point.')
         })

src/tutorial/quick-start/quick-start.test.ts

@@ -1,7 +1,5 @@
 import { type BoundingBox } from 'puppeteer'
 
-type SourceQuickstart = string | null
-
 describe('quick-start tutorial', (): void => {
   beforeAll(async (): Promise<void> => {
     await page.goto('http://localhost:3001/tutorial/quick-start/quick-start')
@@ -15,12 +13,12 @@ describe('quick-start tutorial', (): void => {
           ;(
             await page.$$eval(
               '.leaflet-tile-loaded',
-              (tiles: Element[]): SourceQuickstart[] =>
-                tiles.map(
-                  (tile: Element): SourceQuickstart => tile.getAttribute('src'),
+              (tiles: Element[]): (string | null)[] =>
+                tiles.map((tile: Element): string | null =>
+                  tile.getAttribute('src'),
                 ),
             )
-          ).forEach((source: SourceQuickstart): void => {
+          ).forEach((source: string | null): void => {
             expect(source).toMatch(/^https:\/\/tile\.openstreetmap\.org\//)
           })
         })
@@ -31,7 +29,7 @@ describe('quick-start tutorial', (): void => {
           expect(
             await page.$eval(
               '.leaflet-popup-content',
-              ({ textContent }: Element): SourceQuickstart => textContent,
+              ({ textContent }: Element): string | null => textContent,
             ),
           ).toBe('I am a standalone popup.')
         })
@@ -58,7 +56,7 @@ describe('quick-start tutorial', (): void => {
           expect(
             await page.$eval(
               '.leaflet-popup-content',
-              ({ textContent }: Element): SourceQuickstart => textContent,
+              ({ textContent }: Element): string | null => textContent,
             ),
           ).toMatch(/^You clicked the map at LatLng\(.+\)$/)
         })
@@ -107,7 +105,7 @@ describe('quick-start tutorial', (): void => {
               expect(
                 await page.$eval(
                   '.leaflet-popup-content',
-                  ({ textContent }: Element): SourceQuickstart => textContent,
+                  ({ textContent }: Element): string | null => textContent,
                 ),
               ).toBe(popupText)
             })