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

.github/CONTRIBUTING.md

@@ -53,9 +53,17 @@ Talk to us before creating a PR that refactors the code or directory structure o
 
 Make sure to follow the existing code style as much as possible.
 
-Code is linted with ESLint and formatted with Prettier, and pull requests must pass `npm run lint`. Run `npm run lint:fix` to fix what can be fixed automatically.
+Code is linted with ESLint and formatted with Prettier, and pull requests must pass `npm run lint`. `npm run lint` also type-checks the Playwright tests, which ESLint and Playwright don't do on their own. Run `npm run lint:fix` to fix what can be fixed automatically.
 
 * No underscores prefixing JS functions.
 * Use flat Sass:
   * **Don't** use [BEM conventions](https://css-tricks.com/bem-101/)
   * Avoid nesting selectors. This is done to make it easier for users without Sass experience to understand and read.
+
+### Testing
+
+Unit tests use [Vitest](https://vitest.dev/) and end-to-end tests use [Playwright](https://playwright.dev/). Pull requests must pass both in CI.
+
+- Run the unit tests: `npm run test:unit` (or `npm run test:unit:watch` to rerun on changes)
+- Run the end-to-end tests: `npm run test:e2e`. The first time, install the browser with `npx playwright install chromium`.
+- Run both: `npm test`

.github/workflows/CI.yml

@@ -48,4 +48,28 @@ jobs:
     - name: Build
       run: npm run build -- --configuration=production
     - name: Test
-      run: npm test -- --configuration=ci
+      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

@@ -35,3 +35,9 @@ $RECYCLE.BIN/
 .DS_Store
 Thumbs.db
 UserInterfaceState.xcuserstate
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

angular.json

@@ -12,7 +12,7 @@
     "app": {
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "configurations": {
             "ci": {
               "budgets": [
@@ -94,7 +94,7 @@
           }
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "app:build"
           }
@@ -104,12 +104,14 @@
           "options": {
             "lintFilePatterns": [
               "src/**/*.html",
-              "src/**/*.ts"
+              "src/**/*.ts",
+              "e2e/**/*.ts",
+              "playwright.config.ts"
             ]
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "ci": {},
             "production": {
@@ -118,45 +120,15 @@
           },
           "options": {
             "buildTarget": "app:build",
-            "disableHostCheck": true
+            "allowedHosts": true
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "configurations": {
-            "ci": {
-              "progress": false,
-              "watch": false,
-              "browsers": "ChromeHeadlessCI"
-            }
-          },
+          "builder": "@angular/build:unit-test",
           "options": {
-            "assets": [
-              {
-                "glob": "favicon.ico",
-                "input": "src/",
-                "output": "/"
-              },
-              {
-                "glob": "**/*",
-                "input": "src/assets",
-                "output": "/assets"
-              }
-            ],
-            "karmaConfig": "src/karma.conf.js",
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "scripts": [],
-            "styles": [
-              {
-                "inject": true,
-                "input": "src/global.scss"
-              },
-              {
-                "inject": true,
-                "input": "src/theme/variables.scss"
-              }
-            ],
+            "buildTarget": "app:build",
+            "runnerConfig": "vitest.config.mts",
+            "setupFiles": ["src/test-setup.ts"],
             "tsConfig": "tsconfig.spec.json"
           }
         }

e2e/app.spec.ts

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test';
+
+test('shows the tutorial on the first visit', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(page).toHaveURL(/\/tutorial$/);
+  await expect(page.getByRole('button', { name: 'Skip' })).toBeVisible();
+});
+
+test('skipping the tutorial opens the schedule', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Skip' }).click();
+
+  await expect(page).toHaveURL(/\/schedule$/);
+  await expect(page.locator('ion-segment-button', { hasText: 'Favorites' }).first()).toBeVisible();
+});