chore(test): run unit tests with vitest and add playwright e2e tests

.github/workflows/CI.yml

@@ -48,4 +48,28 @@ jobs:
     - name: Build
       run: npm run build
     - name: Test
-      run: npm test -- --watch=false --browsers=ChromeHeadless
+      run: npm run test:unit
+
+  e2e:
+    name: E2E
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+    - name: Use Node.js 24
+      uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+      with:
+        node-version: 24
+    - name: Install Dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps chromium
+    - name: Run E2E Tests
+      run: npm run test:e2e
+    - name: Upload Playwright Report
+      uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 14

.gitignore

@@ -34,3 +34,9 @@ npm-debug.log*
 
 # Stray Gradle cache (native build artifacts live under android/)
 /.gradle
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -44,3 +44,9 @@ The code is checked with [ESLint](https://eslint.org/) and formatted with [Prett
 
 - Check for issues: `npm run lint`
 - Fix what can be fixed automatically: `npm run lint:fix`
+
+## Testing
+
+- Run the unit tests ([Vitest](https://vitest.dev/)): `npm run test:unit` (or `npm run test:unit:watch` to rerun on changes)
+- Run the end-to-end tests ([Playwright](https://playwright.dev/)): `npm run test:e2e`. The first time, install the browser with `npx playwright install chromium`.
+- Run both: `npm test`

angular.json

@@ -98,37 +98,16 @@
           }
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "polyfills": [],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "src/assets",
-                "output": "assets"
-              },
-              {
-                "glob": "**/*.svg",
-                "input": "node_modules/ionicons/dist/ionicons/svg",
-                "output": "./svg"
-              }
-            ],
-            "styles": ["src/global.scss", "src/theme/variables.scss"],
-            "scripts": []
-          },
-          "configurations": {
-            "ci": {
-              "progress": false,
-              "watch": false
-            }
+            "runnerConfig": "vitest.config.mts",
+            "tsConfig": "tsconfig.spec.json"
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html", "e2e/**/*.ts", "playwright.config.ts"]
           }
         }
       }

e2e/app.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test';
+
+test('shows the first tab on load', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(page.locator('ion-content').getByText('Tab 1 page')).toBeVisible();
+});
+
+test('opens the photo gallery from the tab bar', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('tab', { name: 'Photos' }).click();
+
+  await expect(page).toHaveURL(/\/tab2$/);
+  await expect(page.locator('ion-title', { hasText: 'Photo Gallery' }).first()).toBeVisible();
+});