Add Playwright E2E coverage for dashboard flows

.github/workflows/ci.yml

@@ -101,21 +101,45 @@ jobs:
       - name: Check all imports exist in package.json
         run: node scripts/check-deps.js
 
+  # ── 5. End-to-end tests ───────────────────────────────────────────────────
+  # Exercises the public auth entry point and authenticated dashboard flows with
+  # deterministic API fixtures so CI does not depend on GitHub OAuth or Supabase.
+  e2e:
+    name: Playwright E2E
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browser
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+
   # ── Summary gate ───────────────────────────────────────────────────────────
   # Single status check to add to branch protection rules.
   # Branch: main → require "CI passed" before merge.
   ci-pass:
     name: CI passed
     runs-on: ubuntu-latest
-    needs: [typecheck, lint, build, dep-check]
+    needs: [typecheck, lint, build, dep-check, e2e]
     if: always()
     steps:
       - name: Check all jobs passed
         run: |
           if [[ "${{ needs.typecheck.result }}" != "success" ||
                 "${{ needs.lint.result }}"      != "success" ||
                 "${{ needs.build.result }}"     != "success" ||
-                "${{ needs.dep-check.result }}" != "success" ]]; then
+                "${{ needs.dep-check.result }}" != "success" ||
+                "${{ needs.e2e.result }}"       != "success" ]]; then
             echo "One or more CI jobs failed."
             exit 1
           fi

package.json

@@ -7,7 +7,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.43.4",
@@ -22,6 +24,7 @@
     "recharts": "^2.12.7"
   },
   "devDependencies": {
+    "@playwright/test": "^1.60.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

playwright.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const PORT = Number(process.env.PORT ?? 3100);
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:${PORT}`;
+const npmCommand = process.env.npm_execpath
+  ? `node ${process.env.npm_execpath}`
+  : "npm";
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  timeout: 30_000,
+  expect: {
+    timeout: 10_000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? "github" : "list",
+  use: {
+    baseURL,
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+  },
+  webServer: {
+    command: `PORT=${PORT} E2E_TEST_AUTH_BYPASS=true NEXTAUTH_SECRET=e2e-secret-that-is-long-enough-for-nextauth NEXTAUTH_URL=${baseURL} NEXT_PUBLIC_APP_URL=${baseURL} GITHUB_ID=e2e-client GITHUB_SECRET=e2e-secret NEXT_PUBLIC_SUPABASE_URL=https://example.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=e2e-anon-key SUPABASE_SERVICE_ROLE_KEY=e2e-service-role-key ${npmCommand} run dev`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+});

src/app/dashboard/page.tsx

@@ -19,10 +19,14 @@ import { authOptions } from "@/lib/auth";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 
+const isE2EAuthBypassEnabled =
+  process.env.NODE_ENV !== "production" &&
+  process.env.E2E_TEST_AUTH_BYPASS === "true";
+
 export default async function DashboardPage() {
   const session = await getServerSession(authOptions);
 
-  if (!session) {
+  if (!session && !isE2EAuthBypassEnabled) {
     redirect("/");
   }
 
@@ -80,4 +84,4 @@ export default async function DashboardPage() {
       </div>
     </div>
   );
-}
+}