test(e2e): setup tests with playwright (#313)

* test(e2e): setup tests with playwright

closes #222

* test(e2e): add missing tests for sources

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -30,3 +30,6 @@ coverage
 
 # generate types
 components/*.d.ts
+/test-results/
+/playwright-report/
+/playwright/.cache/

PULL_REQUEST_TEMPLATE.md

@@ -25,6 +25,7 @@
 - [ ] New feature (non-breaking change that adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] Documentation Update
+- [ ] Tests
 - [ ] Other (Tooling, Dependency Updates, etc.)
 
 ## Checklist:
@@ -35,10 +36,12 @@
 - [ ] My code follows the code style of this project.
 - [ ] My change requires a change to the documentation.
 - [ ] I have updated the documentation accordingly.
+- [ ] I added a new test.
 
 If you added a new component feature (layer, geom, source, etc.), please be sure to update the documentation:
 
 - [ ] Add component to `output.globals` in `vite.config.ts`
+- [ ] Provide at least one simple snapshot test (see `test` directory)
 - [ ] Create a `src/demos/<Component>Demo.vue`
 - [ ] Create a `docs/componentsguide/<Category>/<Feature>/index.md` containing the Demo and documentation for the component
 - [ ] Add the docs page to `docs/.vitepress/config.ts`

README.md

@@ -58,6 +58,49 @@ It can display maps with tiled, raster or vector layers loaded from different so
 
 <!-- auto-generated-peer-dependency-requirements END -->
 
+## Run End-to-End Tests with https://playwright.dev[Playwright]
+
+```bash
+# Install browsers for the first run
+npx playwright install
+
+# Runs the end-to-end tests
+npm run test:e2e
+
+# Runs the end-to-end tests in interactive UI mode (for local development)
+npm run test:e2e:ui
+
+# Runs the tests in debug mode
+npm run test:e2e:debug
+
+# Runs the tests in trace mode (to time-travel between actions)
+npm run test:e2e:trace
+
+# Serve test report (and inspect trace when)
+npm run test:e2e:report
+
+# Runs the tests only on Chromium
+npm run test:e2e -- --project=chromium
+# Runs the tests of a specific file
+npm run test:e2e -- tests/example.spec.ts
+
+# Run tests and record new screenshots locally using the same image as in CI env
+docker compose run screenshot-update
+```
+
+### Screenshots
+
+Please note, when recording screenshots locally the may differ from the platform (linux) in CI.
+This results in:
+- a: a different file name
+- b: a slightly different screenshot
+
+So tackle this issue, please always record screenshots locally using the docker compose file which will use the same image/platform as in CI.
+
+```bash
+docker compose run screenshot-update
+```
+
 ## License
 
 **MIT** (c) Melih Altıntaş

docker-compose.yaml

@@ -0,0 +1,15 @@
+version: "3.8"
+services:
+  screenshot-update:
+    image: mcr.microsoft.com/playwright:v1.42.1-focal
+    volumes:
+      - .:/e2e
+    working_dir: /e2e
+    command: >
+      sh -c  "
+        rm -rf node_modules &&
+        npm i --force --no-package-lock &&
+        npx playwright test --update-snapshots
+      "
+    stdin_open: true
+    tty: true

docs/.vitepress/config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from "vitepress";
+import { defineConfig, SiteConfig, UserConfig } from "vitepress";
 
 // https://vitepress.vuejs.org/reference/site-config
-export default defineConfig({
+export const config: UserConfig = {
   // https://MelihAltintas.github.com/vue3-openlayers
   // base: '/vue3-openlayers/',
   title: "vue3-openlayers",
@@ -426,4 +426,6 @@ export default defineConfig({
       provider: "local",
     },
   },
-});
+};
+
+export default defineConfig(config);