feature/osm-tiles-assertions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stassi/leaf",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "description": "Leaflet adapter.",
   "keywords": [
     "cartography",

src/test-utilities/expect-loaded/open-street-map-tiles.ts

@@ -0,0 +1,13 @@
+export function expectOpenStreetMapTilesLoaded(): () => Promise<void> {
+  return 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\//)
+    })
+  }
+}

src/tutorial/accessibility/decorative.test.ts

@@ -1,9 +1,18 @@
+import { expectOpenStreetMapTilesLoaded } from 'test-utilities/expect-loaded/open-street-map-tiles.js'
+
 describe('decorative accessibility tutorial', (): void => {
   beforeAll(async (): Promise<void> => {
     await page.goto('http://localhost:3001/tutorial/accessibility/decorative')
   })
 
   describe('map', (): void => {
+    // eslint-disable-next-line jest/prefer-lowercase-title -- official case
+    describe('OpenStreetMap tiles', (): void => {
+      /* eslint-disable-next-line jest/expect-expect --
+         `expectOpenStreetMapTilesLoaded` returns assertions */
+      it('should load', expectOpenStreetMapTilesLoaded())
+    })
+
     describe('marker', (): void => {
       describe('when repeatedly pressing Tab', (): void => {
         it('should not obtain focus', async (): Promise<void> => {

src/tutorial/accessibility/interactive.test.ts

@@ -1,9 +1,18 @@
+import { expectOpenStreetMapTilesLoaded } from 'test-utilities/expect-loaded/open-street-map-tiles.js'
+
 describe('interactive accessibility tutorial', (): void => {
   beforeAll(async (): Promise<void> => {
     await page.goto('http://localhost:3001/tutorial/accessibility/interactive')
   })
 
   describe('map', (): void => {
+    // eslint-disable-next-line jest/prefer-lowercase-title -- official case
+    describe('OpenStreetMap tiles', (): void => {
+      /* eslint-disable-next-line jest/expect-expect --
+         `expectOpenStreetMapTilesLoaded` returns assertions */
+      it('should load', expectOpenStreetMapTilesLoaded())
+    })
+
     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

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

@@ -1,4 +1,5 @@
-import { expectImagesLoaded } from 'test-utilities/expect-images-loaded.js'
+import { expectImagesLoaded } from 'test-utilities/expect-loaded/images.js'
+import { expectOpenStreetMapTilesLoaded } from 'test-utilities/expect-loaded/open-street-map-tiles.js'
 
 describe('custom icons tutorial', (): void => {
   describe.each([1, 2])(
@@ -10,6 +11,13 @@ describe('custom icons tutorial', (): void => {
       })
 
       describe('map', (): void => {
+        // eslint-disable-next-line jest/prefer-lowercase-title -- official case
+        describe('OpenStreetMap tiles', (): void => {
+          /* eslint-disable-next-line jest/expect-expect --
+             `expectOpenStreetMapTilesLoaded` returns assertions */
+          it('should load', expectOpenStreetMapTilesLoaded())
+        })
+
         describe('markers with custom icons', (): void => {
           describe.each([
             {

src/tutorial/mobile/mobile.test.ts

@@ -1,3 +1,5 @@
+import { expectOpenStreetMapTilesLoaded } from 'test-utilities/expect-loaded/open-street-map-tiles.js'
+
 describe('mobile tutorial', (): void => {
   beforeAll(async (): Promise<void> => {
     await browser
@@ -14,6 +16,13 @@ describe('mobile tutorial', (): void => {
   })
 
   describe('map', (): void => {
+    // eslint-disable-next-line jest/prefer-lowercase-title -- official case
+    describe('OpenStreetMap tiles', (): void => {
+      /* eslint-disable-next-line jest/expect-expect --
+         `expectOpenStreetMapTilesLoaded` returns assertions */
+      it('should load', expectOpenStreetMapTilesLoaded())
+    })
+
     describe('layer', (): void => {
       describe.each([
         {

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

@@ -1,6 +1,7 @@
 import { type BoundingBox } from 'puppeteer'
 
-import { expectImagesLoaded } from 'test-utilities/expect-images-loaded.js'
+import { expectImagesLoaded } from 'test-utilities/expect-loaded/images.js'
+import { expectOpenStreetMapTilesLoaded } from 'test-utilities/expect-loaded/open-street-map-tiles.js'
 
 describe('quick start tutorial', (): void => {
   describe.each([1, 2])(
@@ -13,15 +14,11 @@ describe('quick start tutorial', (): void => {
 
       describe('map', (): void => {
         describe('on initial page load', (): void => {
-          describe('standalone popup', (): void => {
-            it('should display text "I am a standalone popup."', async (): Promise<void> => {
-              expect(
-                await page.$eval(
-                  '.leaflet-popup-content',
-                  ({ textContent }: Element): string | null => textContent,
-                ),
-              ).toBe('I am a standalone popup.')
-            })
+          // eslint-disable-next-line jest/prefer-lowercase-title -- official case
+          describe('OpenStreetMap tiles', (): void => {
+            /* eslint-disable-next-line jest/expect-expect --
+               `expectOpenStreetMapTilesLoaded` returns assertions */
+            it('should load', expectOpenStreetMapTilesLoaded())
           })
 
           describe('marker images', (): void => {
@@ -30,92 +27,104 @@ describe('quick start tutorial', (): void => {
               '../../../leaflet/images/marker-shadow.png',
             ])('src="%s"', (src: string): void => {
               /* eslint-disable-next-line jest/expect-expect --
-             `expectImagesLoaded` returns assertions */
+           `expectImagesLoaded` returns assertions */
               it('should load', expectImagesLoaded(src))
             })
           })
-        })
-
-        describe('element displays popup text on click', (): void => {
-          describe('map (element)', (): void => {
-            it('should display clicked coordinates', async (): Promise<void> => {
-              const boundingBox: BoundingBox | null | undefined = await (
-                await page.$('#map')
-              )?.boundingBox()
-              if (!boundingBox)
-                throw new Error('Element bounding box not found.')
-
-              const { height, width, x, y }: BoundingBox = boundingBox
-              await page.mouse.click(x + width / 2, y + height / 2)
-
-              await page.waitForFunction(
-                (): RegExpMatchArray | null | undefined =>
-                  document
-                    .querySelector('.leaflet-popup-content')
-                    ?.textContent?.match(
-                      /^You clicked the map at LatLng\(.+\)$/,
-                    ),
-              )
 
+          describe('standalone popup', (): void => {
+            it('should display text "I am a standalone popup."', async (): Promise<void> => {
               expect(
                 await page.$eval(
                   '.leaflet-popup-content',
                   ({ textContent }: Element): string | null => textContent,
                 ),
-              ).toMatch(/^You clicked the map at LatLng\(.+\)$/)
+              ).toBe('I am a standalone popup.')
             })
           })
 
-          describe('layer', (): void => {
-            describe.each([
-              {
-                category: 'ui',
-                description: 'marker in the Borough of Southwark, London',
-                popupText: 'Hello world!I am a popup.',
-                selector: '.leaflet-marker-icon',
-              },
-              {
-                category: 'vector',
-                description:
-                  'red circle over South Bank district, Lambeth, London',
-                popupText: 'I am a circle.',
-                selector: 'path.leaflet-interactive[stroke="red"]',
-              },
-              {
-                category: 'vector',
-                description: 'blue polygon over Wapping neighborhood, London',
-                popupText: 'I am a polygon.',
-                selector: 'path.leaflet-interactive[stroke="#3388ff"]',
-              },
-            ])(
-              '[$category] $description',
-              ({
-                popupText,
-                selector,
-              }: Record<
-                'category' | 'description' | 'popupText' | 'selector',
-                string
-              >): void => {
-                it(`should display popup text "${popupText}"`, async (): Promise<void> => {
-                  await (await page.$(selector))?.click()
+          describe('element displays popup text on click', (): void => {
+            describe('map (element)', (): void => {
+              it('should display clicked coordinates', async (): Promise<void> => {
+                const boundingBox: BoundingBox | null | undefined = await (
+                  await page.$('#map')
+                )?.boundingBox()
+                if (!boundingBox)
+                  throw new Error('Element bounding box not found.')
+
+                const { height, width, x, y }: BoundingBox = boundingBox
+                await page.mouse.click(x + width / 2, y + height / 2)
 
-                  await page.waitForFunction(
-                    (textContent: string): boolean =>
-                      document.querySelector('.leaflet-popup-content')
-                        ?.textContent === textContent,
-                    undefined,
-                    popupText,
-                  )
+                await page.waitForFunction(
+                  (): RegExpMatchArray | null | undefined =>
+                    document
+                      .querySelector('.leaflet-popup-content')
+                      ?.textContent?.match(
+                        /^You clicked the map at LatLng\(.+\)$/,
+                      ),
+                )
 
-                  expect(
-                    await page.$eval(
-                      '.leaflet-popup-content',
-                      ({ textContent }: Element): string | null => textContent,
-                    ),
-                  ).toBe(popupText)
-                })
-              },
-            )
+                expect(
+                  await page.$eval(
+                    '.leaflet-popup-content',
+                    ({ textContent }: Element): string | null => textContent,
+                  ),
+                ).toMatch(/^You clicked the map at LatLng\(.+\)$/)
+              })
+            })
+
+            describe('layer', (): void => {
+              describe.each([
+                {
+                  category: 'ui',
+                  description: 'marker in the Borough of Southwark, London',
+                  popupText: 'Hello world!I am a popup.',
+                  selector: '.leaflet-marker-icon',
+                },
+                {
+                  category: 'vector',
+                  description:
+                    'red circle over South Bank district, Lambeth, London',
+                  popupText: 'I am a circle.',
+                  selector: 'path.leaflet-interactive[stroke="red"]',
+                },
+                {
+                  category: 'vector',
+                  description: 'blue polygon over Wapping neighborhood, London',
+                  popupText: 'I am a polygon.',
+                  selector: 'path.leaflet-interactive[stroke="#3388ff"]',
+                },
+              ])(
+                '[$category] $description',
+                ({
+                  popupText,
+                  selector,
+                }: Record<
+                  'category' | 'description' | 'popupText' | 'selector',
+                  string
+                >): void => {
+                  it(`should display popup text "${popupText}"`, async (): Promise<void> => {
+                    await (await page.$(selector))?.click()
+
+                    await page.waitForFunction(
+                      (textContent: string): boolean =>
+                        document.querySelector('.leaflet-popup-content')
+                          ?.textContent === textContent,
+                      undefined,
+                      popupText,
+                    )
+
+                    expect(
+                      await page.$eval(
+                        '.leaflet-popup-content',
+                        ({ textContent }: Element): string | null =>
+                          textContent,
+                      ),
+                    ).toBe(popupText)
+                  })
+                },
+              )
+            })
           })
         })
       })