Merge pull request #187 from Dataport/feature/e2e-tests-poc

Feature/e2e tests poc

Author: warm-coolguy

.github/workflows/run-tests.yml

@@ -25,6 +25,28 @@ jobs:
       - run: |
           npm 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:

.gitignore

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

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',