Merge branch 'main' into feature/packaging

.eslintignore

@@ -6,4 +6,5 @@
 **/docs
 **/node_modules
 **/tests_output
-*.d.ts
+*.d.ts
+/.nx/

.eslintrc.json

@@ -37,8 +37,8 @@
     "no-implied-eval": "error",
     "complexity": "warn",
     "max-depth": "warn",
-    "max-lines": "warn",
-    "max-lines-per-function": "warn"
+    "max-lines": "error",
+    "max-lines-per-function": "error"
   },
   "ignorePatterns": ["**/node_modules/**/*", "**/dist/**/*"],
   "settings": {

.github/workflows/publish-packages.yml

@@ -12,12 +12,12 @@ jobs:
     outputs:
       matrix: ${{ steps.matrix.outputs.TAGS }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           ssh-key: ${{ secrets.MAIN_BOT_KEY_PRIVATE }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18.13.0
+          node-version: 20.16.0
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - run: |

.github/workflows/publish-pages.yml

@@ -9,10 +9,10 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18.13.0
+          node-version: 20.16.0
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - run: npm run pages:build

.github/workflows/run-tests.yml

@@ -1,17 +1,60 @@
-name: Run linter and tests
+name: Run linter, tests and type check
 
 on: push
 
 jobs:
-  lint-test:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.16.0
+          registry-url: https://registry.npmjs.org/
+      - run: |
+          npm ci
+          npm run lint:ci
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.13.0
+          node-version: 20.16.0
           registry-url: https://registry.npmjs.org/
       - run: |
           npm ci
-          npm run lint:ci
           npm run test
+  teste2e:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20.16.0
+    - name: Install dependencies
+      run: npm ci
+    - name: Build snowbox (started by playwright by itself)
+      run: npm run snowbox:build
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm run test:e2e
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
+  type-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.16.0
+          registry-url: https://registry.npmjs.org/
+      - run: |
+          npm ci
+          npm run tsc:ci

.gitignore

@@ -14,4 +14,7 @@ logs
 /.idea/
 /.nx/
 **/.parcel-cache
-.nx/cache
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.prettierignore

@@ -1,2 +1,3 @@
 build
-dist
+dist
+/.nx/workspace-data

README.md

@@ -54,7 +54,7 @@ Other clients with more specific code include the [Denkmalkarte Schleswig-Holste
 <table align="center">
   <tr align="center">
     <td align="center"><img src="./pages/assets/landessymbole/bremen.svg" alt="Bremer Wappenzeichen" height="120px" style="object-fit: contain;"><div>Freie Hansestadt Bremen</div></td>
-    <td align="center"><img src="./pages/assets/landessymbole/hamburg.svg" alt="Hamburg-Symbol" height="120px" style="object-fit: contain;"><div>Freie Freie und Hansestadt Hamburg</div></td>
+    <td align="center"><img src="./pages/assets/landessymbole/hamburg.svg" alt="Hamburg-Symbol" height="120px" style="object-fit: contain;"><div>Freie und Hansestadt Hamburg</div></td>
   </tr>
   <tr align="center">
     <td align="center"><img src="./pages/assets/landessymbole/sachsen-anhalt.svg" alt="Landessymbol Sachsen-Anhalt" height="120px" style="object-fit: contain;"><div>Sachsen-Anhalt</div></td>

__mocks__/jest.setup.js

@@ -0,0 +1,20 @@
+import 'regenerator-runtime/runtime'
+
+class Worker {
+  constructor(stringUrl) {
+    this.url = stringUrl
+    this.onmessage = () => {
+      // empty
+    }
+  }
+
+  postMessage(msg) {
+    this.onmessage(msg)
+  }
+}
+// a mock for web worker
+window.Worker = Worker
+
+window.URL.createObjectURL = function () {
+  // empty
+}

e2e/draw.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test'
+import { openSnowbox } from './utils/openSnowbox'
+
+const drawTargetId = '#vuex-target-draw-result'
+
+test('clicks to the map produce a fetchable pin coordinate', async ({
+  page,
+}) => {
+  await openSnowbox(page)
+
+  const canvas = await page.locator('canvas')
+  const boundingBox = await canvas.boundingBox()
+  if (boundingBox === null) throw new Error('Canvas not found.')
+  const { width, height } = boundingBox
+  let { x, y } = boundingBox
+
+  x += width / 2
+  y += height / 2
+
+  await page.getByLabel('Draw tools').click()
+  await page.getByText('Draw and write').click()
+  await page.getByText('Polygon').click()
+
+  const moves: [number, number, string][] = [
+    [0, 0, 'click'],
+    [40, -40, 'click'],
+    [40, 40, 'click'],
+    [-80, 80, 'click'],
+    [-80, -80, 'click'],
+    [40, -40, 'dblclick'],
+  ]
+
+  for (const [xMove, yMove, method] of moves) {
+    await page.mouse[method]((x += xMove), (y += yMove))
+  }
+
+  const drawing = JSON.parse(await page.locator(drawTargetId).innerText())
+
+  expect(drawing.type).toBe('FeatureCollection')
+  expect(drawing.features.length).toBe(1)
+  expect(drawing.features[0].geometry.coordinates[0].length).toBe(7)
+})

e2e/pins.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+import { openSnowbox } from './utils/openSnowbox'
+
+const pinsTargetId = '#vuex-target-pin-coordinate'
+
+test('clicks to the map produce a fetchable pin coordinate', async ({
+  page,
+}) => {
+  await openSnowbox(page)
+
+  const coordinateTarget = page.locator(pinsTargetId)
+
+  await expect(coordinateTarget).toBeEmpty()
+  await page.locator('canvas').click()
+  await expect(coordinateTarget).toHaveText(/\d+(\.\d+)?,\d+(\.\d+)?/)
+})

e2e/toast.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+import { openSnowbox } from './utils/openSnowbox'
+import { dispatch } from './utils/vuex'
+
+const locatable = '私が来た'
+
+test('programmatically dispatched toasts are visible in the UI', async ({
+  page,
+}) => {
+  await openSnowbox(page)
+
+  await dispatch(page, 'plugin/toast/addToast', {
+    type: 'info',
+    text: locatable,
+  })
+
+  await expect(page.getByText(locatable)).toBeVisible()
+})

e2e/utils/clickTimes.ts

@@ -0,0 +1,17 @@
+import { Page } from '@playwright/test'
+
+export const clickTimes = async ({
+  page,
+  value,
+  times,
+  method = 'getByLabel',
+}: {
+  page: Page
+  value: string
+  times: number
+  method?: string
+}) => {
+  for (let i = 0; i < times; i++) {
+    await page[method](value).click()
+  }
+}

e2e/utils/openSnowbox.ts

@@ -0,0 +1,8 @@
+import { Page } from '@playwright/test'
+
+export const openSnowbox = async (page: Page) => {
+  // @ts-expect-error | it's manually added in snowbox client
+  const watchReadiness = page.waitForFunction(() => Boolean(window.mapInstance))
+  await page.goto('./dist/index.html')
+  await watchReadiness
+}

e2e/utils/vuex.ts

@@ -0,0 +1,33 @@
+import { Page } from '@playwright/test'
+
+const execute = async (
+  page: Page,
+  command: string,
+  path: string,
+  payload: unknown,
+  params?: object
+) => {
+  const evaluatable = `window.mapInstance.$store.${command}('${path}'${
+    typeof payload !== 'undefined'
+      ? `, ${JSON.stringify(payload)}`
+      : typeof params !== 'undefined'
+      ? JSON.stringify(null)
+      : ''
+  }${typeof params !== 'undefined' ? `, ${JSON.stringify(params)}` : ''})`
+  console.error(evaluatable)
+  await page.evaluate(evaluatable)
+}
+
+export const dispatch = async (
+  page: Page,
+  path: string,
+  payload: unknown,
+  params?: object
+) => await execute(page, 'dispatch', path, payload, params)
+
+export const commit = async (
+  page: Page,
+  path: string,
+  payload: unknown,
+  params?: object
+) => await execute(page, 'commit', path, payload, params)

e2e/zoom.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+import { openSnowbox } from './utils/openSnowbox'
+import { clickTimes } from './utils/clickTimes'
+
+const zoomTargetId = '#vuex-target-zoom'
+
+test('zoom in button zooms in until max zoom', async ({ page }) => {
+  const zoomInLabel = 'Zoom in'
+  await openSnowbox(page)
+
+  const zoomTarget = page.locator(zoomTargetId)
+  await expect(zoomTarget).toHaveText('2')
+  await clickTimes({ page, value: zoomInLabel, times: 7 })
+  await expect(zoomTarget).toHaveText('9')
+  await expect(page.getByLabel(zoomInLabel)).toBeDisabled()
+})
+
+test('zoom out button zooms out until min zoom', async ({ page }) => {
+  const zoomOutLabel = 'Zoom out'
+  await openSnowbox(page)
+
+  const zoomTarget = page.locator(zoomTargetId)
+  await expect(zoomTarget).toHaveText('2')
+  await clickTimes({ page, value: zoomOutLabel, times: 2 })
+  await expect(zoomTarget).toHaveText('0')
+  await expect(page.getByLabel(zoomOutLabel)).toBeDisabled()
+})

jest.config.ts

@@ -5,7 +5,7 @@ const config: Config.InitialOptions = {
     '**/*.{js,ts,vue}',
     '!**/(node_modules|build|dist|dist-test|.cache|coverage|docs|tests_output)/**',
   ],
-  modulePathIgnorePatterns: ['<rootDir>/mpapi/'],
+  modulePathIgnorePatterns: ['<rootDir>/mpapi/', '<rootDir>/e2e/'],
   moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
   moduleNameMapper: {
     'vuetify/lib': '<rootDir>/node_modules/vuetify/es5',
@@ -19,9 +19,11 @@ const config: Config.InitialOptions = {
     '^.+\\.tsx?$': 'ts-jest',
     '^.*\\.js$': 'babel-jest',
   },
+  // jest-canvas-mock and setup file is required because of @masterportal/masterportalapi; setup file is based on setup file from @masterportal/masterportalapi setup
+  setupFiles: ['jest-canvas-mock'],
+  setupFilesAfterEnv: ['./__mocks__/jest.setup.js'],
   transformIgnorePatterns: [
-    // TODO: Remove both geotiff and quick-lru once we upgraded masterportalapi; see https://github.com/geotiffjs/geotiff.js/issues/292 for more
-    '/node_modules/(?!(@repositoryname/vuex-generators|geotiff|quick-lru|ol|@masterportal/masterportalapi)/)',
+    '/node_modules/(?!(@repositoryname/vuex-generators|@masterportal/masterportalapi|ol|geotiff|quick-lru|color-(space|parse|rgba|name))/)',
   ],
 }