test: add tests

.github/actions/update-cache/action.yml

@@ -3,17 +3,25 @@ description: 'Get node_modules from cache else generate it'
 runs:
   using: "composite"
   steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Cache node_modules
       id: cache-node-modules
-      uses: actions/cache@v3
+      uses: actions/cache@v4
       with:
         path: ./node_modules
         key: node-modules-${{ hashFiles('**/package-lock.json') }}
 
+    - name: Cache Playwright Binaries
+      id: cache-playwright
+      uses: actions/cache@v4
+      with:
+        path: |
+          ~/.cache/ms-playwright
+        key: playwright-${{ hashFiles('**/package-lock.json') }}
+
     - name: Setup node
       if: steps.cache-node-modules.outputs.cache-hit != 'true'
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
         registry-url: https://registry.npmjs.org/
@@ -24,3 +32,8 @@ runs:
       run: |
         npm ci --no-audit
 
+    - name: Install Playwright Browsers
+      id: install-playwright-browsers
+      if: steps.cache-playwright.outputs.cache-hit != 'true'
+      shell: bash
+      run: npx playwright install --with-deps

.github/workflows/ci.yml

@@ -10,17 +10,34 @@ on:
 
 jobs:
   ci:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ./.github/actions/update-cache
       - name: Debug github action ref
         run: |
           echo "Tag name from GITHUB_REF_NAME: $GITHUB_REF_NAME"
           echo "Tag name from github.ref_name: ${{  github.ref_name }}"
+
       - name: Build
         run : npm run build
 
       - name: Test doc build
         run: npm run docs:build
 
+      - name: Run Playwright tests
+        run: |
+          npx playwright test --reporter=playwright-ctrf-json-reporter --trace=retain-on-failure
+          ls -als test-results
+
+      - name: Publish Test Summary Results
+        run: npx github-actions-ctrf ctrf/ctrf-report.json
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: test-results
+          path: |
+            test-results/
+          retention-days: 30

.gitignore

@@ -30,4 +30,6 @@ docs/.vitepress/dist
 
 app/
 android/
-ios/
+ios/
+
+test-results/

package.json

@@ -28,15 +28,16 @@
     "prepublishOnly": "npm run build",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "docs:preview": "vitepress preview docs",
+    "test": "playwright test"
   },
   "dependencies": {
     "@capacitor/android": "^5.7.3",
     "@capacitor/core": "^5.7.3",
     "@capacitor/filesystem": "^5.2.1",
     "@capacitor/ios": "^5.7.3",
     "@raruto/leaflet-elevation": "^1.9.0",
-    "@stencil/core": "^4.12.5",
+    "@stencil/core": "^4.23.1",
     "@turf/bbox": "^6.5.0",
     "@turf/point-on-feature": "^6.5.0",
     "capacitor-blob-writer": "^1.1.15",
@@ -53,8 +54,10 @@
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@capacitor/cli": "^5.7.3",
-    "@stencil/sass": "^3.0.10",
-    "@stencil/store": "^2.0.14",
+    "@playwright/test": "^1.49.1",
+    "@stencil/playwright": "^0.2.1",
+    "@stencil/sass": "^3.0.12",
+    "@stencil/store": "^2.0.16",
     "@storybook/addon-controls": "^6.5.16",
     "@storybook/addon-docs": "^6.5.16",
     "@storybook/builder-webpack5": "^6.5.16",
@@ -67,6 +70,7 @@
     "@types/leaflet.markercluster": "^1.5.4",
     "babel-loader": "^9.1.3",
     "glob": "^9.3.4",
+    "playwright-ctrf-json-reporter": "^0.0.18",
     "stencil-inline-svg": "^1.1.0",
     "typescript": "^5.4.2",
     "vitepress": "^1.0.0-rc.45",