Frontend e2e tests

e2e/auth.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Authentication Flow', () => {
+  test.beforeEach(async ({ page }) => {
+    // Mock the login API with correct nested structure
+    await page.route('**/api/auth/login', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          access_token: 'mock-token',
+          token_type: 'bearer',
+          user: {
+            email: 'test@example.com',
+            full_name: 'Test User'
+          }
+        }),
+      });
+    });
+  });
+
+  test('User can log in successfully and be redirected to dashboard', async ({ page }) => {
+    // Navigate to the login page
+    await page.goto('/login');
+
+    // Verify we are on the login page
+    await expect(page).toHaveTitle(/Delta|Login/);
+    await expect(page.locator('h1')).toContainText('Delta.');
+
+    // Fill in the login form. 
+    await page.fill('input[type="email"]', 'test@example.com');
+    await page.fill('input[type="password"]', 'testpassword123');
+
+    // Click the login button
+    await page.click('button[type="submit"]');
+
+    // Verify redirection to the dashboard
+    await expect(page).toHaveURL(/\/dashboard/);
+
+    // Verify dashboard elements are visible indicating successful login
+    // Using regex for more robust matching of "Welcome back, Test"
+    await expect(page.getByText(/Welcome back/)).toBeVisible();
+    await expect(page.locator('.dashboard-user-name')).toContainText('Test User');
+  });
+});

e2e/dashboard.spec.ts

@@ -0,0 +1,72 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Dashboard Flow', () => {
+  test.beforeEach(async ({ page }) => {
+    // 1. Mock the Auth login
+    await page.route('**/api/auth/login', async (route) => {
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ 
+                access_token: 'mock-token',
+                token_type: 'bearer',
+                user: { email: 'test@example.com', full_name: 'Test User' } 
+            }),
+        });
+    });
+
+    // 2. Mock the repositories list (endpoint is /repos/ according to useRepos.ts)
+    await page.route('**/api/repos/**', async (route) => {
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify([
+                { 
+                    id: '1', 
+                    repo_name: 'mock-repo-1', 
+                    is_active: true,
+                    avatar_url: null,
+                    created_at: new Date().toISOString()
+                }
+            ]),
+        });
+    });
+
+    // 3. Mock the statistics (/dashboard/stats)
+    await page.route('**/api/dashboard/stats', async (route) => {
+        await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ 
+                installations_count: 1,
+                repos_linked_count: 5,
+                drift_events_count: 12,
+                pr_waiting_count: 2
+            }),
+        });
+    });
+
+    // Navigate to login and authenticate
+    await page.goto('/login');
+    await page.fill('input[type="email"]', 'test@example.com');
+    await page.fill('input[type="password"]', 'testpassword123');
+    await page.click('button[type="submit"]');
+    await expect(page).toHaveURL(/\/dashboard/);
+  });
+
+  test('User can view the dashboard and interact with repositories', async ({ page }) => {
+    // Verify key UI components of the dashboard are present
+    await expect(page.getByText(/Welcome back/)).toBeVisible();
+    await expect(page.getByText('mock-repo-1')).toBeVisible();
+
+    // Check if the page has finished loading by looking for stats tiles
+    await expect(page.getByText('Repos Linked')).toBeVisible();
+    await expect(page.getByText('PRs Waiting')).toBeVisible();
+
+    // The user should eventually see the empty state message or a list of repos
+    await Promise.any([
+        expect(page.getByText('No repositories linked')).toBeVisible(),
+        expect(repoList.first()).toBeVisible(),
+    ]);
+  });
+});

package.json

@@ -10,7 +10,8 @@
     "preview": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "test:run": "vitest run"
+    "test:run": "vitest run",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.10",
@@ -39,11 +40,12 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@playwright/test": "^1.58.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/md5": "^2.3.6",
-    "@types/node": "^24.10.1",
+    "@types/node": "^25.4.0",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",

playwright.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:5173',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'bun run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+    stderr: 'pipe',
+  },
+});

src/hooks/useAuth.ts

@@ -3,17 +3,12 @@ import { api } from '@/lib/api'
 import { queryClient } from '@/lib/queryClient'
 import type { UserCreate, UserLogin, MessageResponse, LoginResponse } from '@/types/auth'
 import { clearStoredUser, getStoredUser, setStoredUser } from '@/hooks/useUser'
-import { hashPassword } from '@/lib/utils'
 
 
 export function useSignup() {
   return useMutation({
     mutationFn: async (data: UserCreate) => {
-      const hashedPassword = await hashPassword(data.password)
-      const response = await api.post<LoginResponse>('/auth/signup', {
-        ...data,
-        password: hashedPassword,
-      })
+      const response = await api.post<LoginResponse>('/auth/signup', data)
       if (response.error) {
         throw new Error(response.error)
       }
@@ -29,11 +24,7 @@ export function useSignup() {
 export function useLogin() {
   return useMutation({
     mutationFn: async (data: UserLogin) => {
-      const hashedPassword = await hashPassword(data.password)
-      const response = await api.post<LoginResponse>('/auth/login', {
-        ...data,
-        password: hashedPassword,
-      })
+      const response = await api.post<LoginResponse>('/auth/login', data)
       if (response.error) {
         throw new Error(response.error)
       }