Add e2e tests (#131)

* initial attempt

* Add initial e2e:tests

* Add e2e tests to PRs

* Fix tests

* fix unit tests

* Fix to name for scheduled focus sessions

* install playwright

* try again

* move e2e to release step

* remove e2e from ci

* fix test

Author: rphovley

.github/workflows/build_and_publish.yaml

@@ -47,7 +47,7 @@ jobs:
           targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
 
       - name: install frontend dependencies
-        run: yarn install
+        run: npm ci
 
       - name: import Apple Developer Certificate
         env:

.github/workflows/test.yaml

@@ -19,5 +19,5 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Run tests
+      - name: Run unit tests
         run: npm run test

.gitignore

@@ -53,4 +53,7 @@ scripts/apps.csv
 
 # Supabase
 supabase/supabase/
-supabase/.branches
+supabase/.branches
+
+# Test Results
+test-results

e2e/home.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('home page: renders key components', async ({ page }) => {
+  // Mark onboarding as completed to avoid redirects
+  await page.addInitScript(() => {
+    localStorage.setItem('onboarding_completed', 'true')
+  })
+  await page.goto('/#/')
+
+  // Heading should render
+  await expect(page.getByRole('heading', { name: /Welcome/i })).toBeVisible()
+
+  // Basic layout renders (TopNav and Sidebar landmarks)
+  const linkCount = await page.getByRole('link').filter({ has: page.locator('svg') }).count()
+  expect(linkCount).toBeGreaterThan(0)
+  await expect(page.getByRole('button', { name: /Start Focus/i })).toBeVisible()
+})
+

e2e/login.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('login page: skip login navigates to accessibility onboarding', async ({ page }) => {
+  await page.goto('/#/login')
+
+  await expect(page.getByRole('button', { name: 'Continue with Google' })).toBeVisible()
+  await expect(page.getByRole('button', { name: 'Do this later' })).toBeVisible()
+
+  await page.getByRole('button', { name: 'Do this later' }).click()
+
+  await expect(page.getByRole('heading', { name: 'Enable Accessibility' })).toBeVisible()
+})
+

package-lock.json

@@ -6,6 +6,7 @@
   "author": "Paul Hovley <rphovley@gmail.com>",
   "scripts": {
     "dev": "tsc && vite",
+    "dev:e2e": "VITE_E2E=1 tsc && vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "monitor:update": "node scripts/os-monitor-update.js",
@@ -16,7 +17,10 @@
     "tauri:build:x86_64": "tauri build --target x86_64-apple-darwin",
     "lint": "eslint src --max-warnings=0",
     "format": "eslint --fix src",
-    "test": "vitest"
+    "test": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "npx playwright test e2e/ --headed --project=chromium"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -73,10 +77,11 @@
     "zustand": "^5.0.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.54.2",
     "@tauri-apps/cli": "^2.6.1",
     "@types/canvas-confetti": "^1.9.0",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.17.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^8.19.1",

package.json

@@ -0,0 +1,20 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: 'e2e',
+  timeout: 30_000,
+  use: {
+    baseURL: 'http://localhost:1420',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'npm run dev:e2e',
+    port: 1420,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+  ],
+})
+