diff --git a/package-lock.json b/package-lock.json index d348313..b28ee66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@stassi/leaf", - "version": "0.0.67", + "version": "0.0.68", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@stassi/leaf", - "version": "0.0.67", + "version": "0.0.68", "cpu": [ "arm64", "x64" diff --git a/package.json b/package.json index cd4668c..dc84453 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@stassi/leaf", - "version": "0.0.67", + "version": "0.0.68", "description": "Leaflet adapter.", "keywords": [ "cartography", diff --git a/src/test-utilities/expect-images-loaded.ts b/src/test-utilities/expect-loaded/images.ts similarity index 100% rename from src/test-utilities/expect-images-loaded.ts rename to src/test-utilities/expect-loaded/images.ts diff --git a/src/test-utilities/expect-loaded/open-street-map-tiles.ts b/src/test-utilities/expect-loaded/open-street-map-tiles.ts new file mode 100644 index 0000000..c5f1e9e --- /dev/null +++ b/src/test-utilities/expect-loaded/open-street-map-tiles.ts @@ -0,0 +1,13 @@ +export function expectOpenStreetMapTilesLoaded(): () => Promise { + return async (): Promise => { + ;( + 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\//) + }) + } +} diff --git a/src/tutorial/accessibility/decorative.test.ts b/src/tutorial/accessibility/decorative.test.ts index 3073d45..1861694 100644 --- a/src/tutorial/accessibility/decorative.test.ts +++ b/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 => { 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 => { diff --git a/src/tutorial/accessibility/interactive.test.ts b/src/tutorial/accessibility/interactive.test.ts index 1d1b096..221d22a 100644 --- a/src/tutorial/accessibility/interactive.test.ts +++ b/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 => { 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 => { let markerFocused = false diff --git a/src/tutorial/custom-icons/custom-icons.test.ts b/src/tutorial/custom-icons/custom-icons.test.ts index 11a39c0..71409fd 100644 --- a/src/tutorial/custom-icons/custom-icons.test.ts +++ b/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([ { diff --git a/src/tutorial/mobile/mobile.test.ts b/src/tutorial/mobile/mobile.test.ts index 9da9739..73600fc 100644 --- a/src/tutorial/mobile/mobile.test.ts +++ b/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 => { 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([ { diff --git a/src/tutorial/open-street-map-tiles.test.ts b/src/tutorial/open-street-map-tiles.test.ts deleted file mode 100644 index f86f38d..0000000 --- a/src/tutorial/open-street-map-tiles.test.ts +++ /dev/null @@ -1,25 +0,0 @@ -// eslint-disable-next-line jest/prefer-lowercase-title -- official case -describe('OpenStreetMap tiles', (): void => { - describe.each([ - 'accessibility/decorative', - 'accessibility/interactive', - 'dist/custom-icons', - 'dist/mobile', - 'dist/quick-start', - ])('tutorial: %s', (path: string): void => { - it('should render', async (): Promise => { - await page.goto(`http://localhost:3001/tutorial/${path}`) - ;( - 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\//) - }) - }) - }) -}) diff --git a/src/tutorial/quick-start/quick-start.test.ts b/src/tutorial/quick-start/quick-start.test.ts index 40a7972..e5c58e3 100644 --- a/src/tutorial/quick-start/quick-start.test.ts +++ b/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 => { - 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 => { - 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 => { 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 => { - await (await page.$(selector))?.click() + describe('element displays popup text on click', (): void => { + describe('map (element)', (): void => { + it('should display clicked coordinates', async (): Promise => { + 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 => { + 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) + }) + }, + ) + }) }) }) })