diff --git a/package-lock.json b/package-lock.json index 33cdb51..bb72be2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@stassi/leaf", - "version": "0.0.71", + "version": "0.0.72", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@stassi/leaf", - "version": "0.0.71", + "version": "0.0.72", "cpu": [ "arm64", "x64" @@ -54,7 +54,7 @@ "jest-environment-puppeteer": "^10.1.4", "jest-puppeteer": "^10.1.4", "prettier": "3.3.3", - "puppeteer": "^23.6.0", + "puppeteer": "^23.6.1", "rollup": "^4.24.2", "rollup-plugin-modify": "^3.0.0", "rollup-plugin-styles": "^4.0.0", @@ -2346,9 +2346,9 @@ } }, "node_modules/@types/node": { - "version": "22.8.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.1.tgz", - "integrity": "sha512-k6Gi8Yyo8EtrNtkHXutUu2corfDf9su95VYVP10aGYMMROM6SAItZi0w1XszA6RtWTHSVp5OeFof37w0IEqCQg==", + "version": "22.8.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.2.tgz", + "integrity": "sha512-NzaRNFV+FZkvK/KLCsNdTvID0SThyrs5SHB6tsD/lajr22FGC73N2QeDPM2wHtVde8mgcXuSsHQkH5cX1pbPLw==", "dev": true, "license": "MIT", "dependencies": { @@ -4782,9 +4782,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.47", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.47.tgz", - "integrity": "sha512-zS5Yer0MOYw4rtK2iq43cJagHZ8sXN0jDHDKzB+86gSBSAI4v07S97mcq+Gs2vclAxSh1j7vOAHxSVgduiiuVQ==", + "version": "1.5.49", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.49.tgz", + "integrity": "sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==", "dev": true, "license": "ISC" }, @@ -11230,9 +11230,9 @@ } }, "node_modules/puppeteer": { - "version": "23.6.0", - "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-23.6.0.tgz", - "integrity": "sha512-l+Fgo8SVFSd51STtq2crz8t1Y3VXowsuR4zfR64qDOn6oggz7YIZauWiNR4IJjczQ6nvFs3S4cgng55/nesxTQ==", + "version": "23.6.1", + "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-23.6.1.tgz", + "integrity": "sha512-8+ALGQgwXd3P/tGcuSsxTPGDaOQIjcDIm04I5hpWZv/PiN5q8bQNHRUyfYrifT+flnM9aTWCP7tLEzuB6SlIgA==", "dev": true, "hasInstallScript": true, "license": "Apache-2.0", @@ -11241,7 +11241,7 @@ "chromium-bidi": "0.8.0", "cosmiconfig": "^9.0.0", "devtools-protocol": "0.0.1354347", - "puppeteer-core": "23.6.0", + "puppeteer-core": "23.6.1", "typed-query-selector": "^2.12.0" }, "bin": { @@ -11252,9 +11252,9 @@ } }, "node_modules/puppeteer-core": { - "version": "23.6.0", - "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-23.6.0.tgz", - "integrity": "sha512-se1bhgUpR9C529SgHGr/eyT92mYyQPAhA2S9pGtGrVG2xob9qE6Pbp7TlqiSPlnnY1lINqhn6/67EwkdzOmKqQ==", + "version": "23.6.1", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-23.6.1.tgz", + "integrity": "sha512-DoNLAzQfGklPauEn33N4h9cM9GubJSINEn+AUMwAXwW159Y9JLk5y34Jsbv4c7kG8P0puOYWV9leu2siMZ/QpQ==", "dev": true, "license": "Apache-2.0", "dependencies": { diff --git a/package.json b/package.json index 021c8fd..0ceeaa1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@stassi/leaf", - "version": "0.0.71", + "version": "0.0.72", "description": "Leaflet adapter.", "keywords": [ "cartography", @@ -93,7 +93,7 @@ "jest-environment-puppeteer": "^10.1.4", "jest-puppeteer": "^10.1.4", "prettier": "3.3.3", - "puppeteer": "^23.6.0", + "puppeteer": "^23.6.1", "rollup": "^4.24.2", "rollup-plugin-modify": "^3.0.0", "rollup-plugin-styles": "^4.0.0", diff --git a/public/index.html b/public/index.html index 71b3207..393190c 100644 --- a/public/index.html +++ b/public/index.html @@ -27,7 +27,7 @@

Leaflet

(tutorial)
  1. - Interactive + Interactive
  2. Decorative diff --git a/public/tutorial/accessibility/interactive.html b/public/tutorial/accessibility/interactive.html deleted file mode 100644 index 643e2ce..0000000 --- a/public/tutorial/accessibility/interactive.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - Accessible maps: Interactive - - - - - - - -
    - - - diff --git a/public/tutorial/accessibility/script/interactive.js b/public/tutorial/accessibility/script/interactive.js deleted file mode 100644 index 66c1731..0000000 --- a/public/tutorial/accessibility/script/interactive.js +++ /dev/null @@ -1,25 +0,0 @@ -import { map as leafletMap } from '../../../leaflet-adapter/map/map.js' -import { marker } from '../../../leaflet-adapter/marker.js' -import { tileLayer } from '../../../leaflet-adapter/tile-layer/tile-layer.js' -import { attributionOsm, urlTemplateOsm } from '../../../script/base-layers.js' - -const altText = 'Kyiv', - map = leafletMap({ - center: [50.4501, 30.5234], - id: 'map', - zoom: 4, - }) - -marker({ - altText, - latitudeLongitude: [50.4501, 30.5234], - map, - popupContent: `${altText}, Ukraine is the birthplace of Leaflet!`, -}) - -tileLayer({ - attribution: attributionOsm, - map, - urlTemplate: urlTemplateOsm, - zoomMax: 19, -}) diff --git a/rollup.config.ts b/rollup.config.ts index d950106..4de497e 100644 --- a/rollup.config.ts +++ b/rollup.config.ts @@ -88,6 +88,11 @@ const aliasOptions: RollupAliasOptions = { input: 'src/tutorial/custom-icons/custom-icons.ts', title: 'Markers With Custom Icons', }, + { + fileName: 'accessibility-interactive.html', + input: 'src/tutorial/accessibility/interactive.ts', + title: 'Accessible maps: Interactive', + }, ].map( ({ fileName, diff --git a/src/tutorial/accessibility/interactive.test.ts b/src/tutorial/accessibility/interactive.test.ts index 7c2659e..c20ef88 100644 --- a/src/tutorial/accessibility/interactive.test.ts +++ b/src/tutorial/accessibility/interactive.test.ts @@ -1,50 +1,72 @@ import { activeElementClassName, + expectImagesLoaded, expectOpenStreetMapTilesLoaded, pressEnter, pressTab, + setBrowserConfiguration, } from 'test-utilities' 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 -- + describe.each([1, 2])( + 'device scale factor: %d', + (deviceScaleFactor: number): void => { + beforeAll( + setBrowserConfiguration({ + deviceScaleFactor, + url: 'http://localhost:3001/tutorial/dist/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('marker', (): void => { - describe('on focus', (): void => { - describe('on `Enter`-press', (): void => { - it('should display popup text "Kyiv, Ukraine is the birthplace of Leaflet!"', async (): Promise => { - let markerFocused = false - - while (!markerFocused) { - await pressTab() - - if ( - (await activeElementClassName()).includes('leaflet-marker-icon') - ) { - markerFocused = true - } - } - - await pressEnter() - - expect( - await page.$eval( - '.leaflet-popup-content', - ({ textContent }: Element): string | null => textContent, - ), - ).toBe('Kyiv, Ukraine is the birthplace of Leaflet!') + it('should load', expectOpenStreetMapTilesLoaded()) + }) + + describe('marker', (): void => { + describe('images', (): void => { + describe.each([ + `../../../leaflet/images/marker-icon${deviceScaleFactor === 2 ? '-2x' : ''}.png`, + '../../../leaflet/images/marker-shadow.png', + ])('src="%s"', (src: string): void => { + /* eslint-disable-next-line jest/expect-expect -- + `expectImagesLoaded` returns assertions */ + it('should load', expectImagesLoaded(src)) + }) + }) + + describe('on focus', (): void => { + describe('on `Enter`-press', (): void => { + it('should display popup text "Kyiv, Ukraine is the birthplace of Leaflet!"', async (): Promise => { + let markerFocused = false + + while (!markerFocused) { + await pressTab() + + if ( + (await activeElementClassName()).includes( + 'leaflet-marker-icon', + ) + ) + markerFocused = true + } + + await pressEnter() + + expect( + await page.$eval( + '.leaflet-popup-content', + ({ textContent }: Element): string | null => textContent, + ), + ).toBe('Kyiv, Ukraine is the birthplace of Leaflet!') + }) + }) }) }) }) - }) - }) + }, + ) }) diff --git a/src/tutorial/accessibility/interactive.ts b/src/tutorial/accessibility/interactive.ts new file mode 100644 index 0000000..536405c --- /dev/null +++ b/src/tutorial/accessibility/interactive.ts @@ -0,0 +1,35 @@ +import 'leaflet/dist/leaflet.css' +import '../style/theme.css' +import '../style/medium.css' + +import { type Map } from '@stassi/leaf' + +const altText = 'Kyiv', + map: Map = await ( + await import('../../leaf/map/map.js') + ).map({ + center: [50.4501, 30.5234], + id: 'map', + zoom: 4, + }) + +await ( + await import('../../leaf/marker.js') +).marker({ + altText, + iconOptions: { + iconUrl: '../../../leaflet/images/marker-icon.png', + iconUrlRetina: '../../../leaflet/images/marker-icon-2x.png', + shadowUrl: '../../../leaflet/images/marker-shadow.png', + }, + latitudeLongitude: [50.4501, 30.5234], + map, + popupContent: `${altText}, Ukraine is the birthplace of Leaflet!`, +}) + +await ( + await import('../../leaf/tile-layer/tile-layer-osm.js') +).tileLayerOsm({ + map, + zoomMax: 19, +})