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

.github/CONTRIBUTING.md

@@ -59,3 +59,11 @@ Code is linted with ESLint and formatted with Prettier, and pull requests must p
 * 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

@@ -2,7 +2,7 @@
 # https://help.github.com/en/articles/about-github-actions
 # https://help.github.com/en/articles/workflow-syntax-for-github-actions
 
-name: Install Dependencies, Lint and Build
+name: Install Dependencies, Lint, Build and Test
 
 on: [pull_request]
 
@@ -47,3 +47,29 @@ jobs:
       run: npm ci
     - name: Build
       run: npm run build
+    - name: Test
+      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

@@ -82,3 +82,9 @@ yarn-error.log*
 
 .stencil/
 .idea/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

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();
+});

eslint.config.mjs

@@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh';
 import globals from 'globals';
 
 export default defineConfig([
-  { ignores: ['dist/**', 'android/**', 'ios/**'] },
+  { ignores: ['dist/**', 'android/**', 'ios/**', 'playwright-report/**', 'test-results/**', 'blob-report/**'] },
   ionic,
   {
     files: ['**/*.{ts,tsx}'],
@@ -28,12 +28,10 @@ export default defineConfig([
     },
   },
   {
-    // The snapshot test predates the current tooling and has no runner; it is
-    // still typechecked by `tsc`, so keep it linted with jest globals defined.
     files: ['**/*.test.{ts,tsx}'],
     languageOptions: {
       globals: {
-        ...globals.jest,
+        ...globals.vitest,
       },
     },
   },