ci: add e2e tests to workflow

Add database services startup, migration, and Playwright installation to CI pipeline.
Configure Playwright for api and web test projects with web server setup.
Add invalidateUserDashboardCache method in RedisService.
Enhance getDashboard in GroupsService to fetch user groups.
Add dashboard.spec.ts e2e test file and test-results directory.

Author: Arun-kushwaha007

.github/workflows/ci.yml

@@ -59,6 +59,28 @@ jobs:
       - name: Build
         run: pnpm build
 
+      - name: Start Database Services
+        run: docker compose up -d
+
+      - name: Migrate Database
+        env:
+          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
+          JWT_SECRET: supersecret
+          STRIPE_SECRET_KEY: test_key
+        run: pnpm --filter backend prisma:migrate
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run E2E Tests
+        env:
+          CI: true
+          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/fairshare?schema=public
+          JWT_SECRET: supersecret
+          STRIPE_SECRET_KEY: test_key
+          NEXT_PUBLIC_APP_URL: http://localhost:3000
+        run: pnpm run e2e
+
       - name: Upload coverage
         if: always()
         uses: actions/upload-artifact@v4

apps/backend/src/groups/groups.service.ts

@@ -251,6 +251,7 @@ export class GroupsService {
   }
 
   async getDashboard(userId: string): Promise<GroupDashboardDto> {
+    const groups = await this.prisma.group.findMany({
       where: {
         members: {
           some: {

apps/backend/src/redis/redis.service.ts

@@ -61,6 +61,14 @@ export class RedisService {
     }
   }
 
+  async invalidateUserDashboardCache(userId: string): Promise<void> {
+    try {
+      await this.redis.del(`user:${userId}:dashboard`);
+    } catch (error) {
+      this.logger.warn(`Redis invalidate skipped: ${error instanceof Error ? error.message : 'unknown error'}`);
+    }
+  }
+
   private async safeGet(key: string): Promise<string | null> {
     try {
       return await this.redis.get(key);

playwright.config.ts

@@ -1,9 +1,42 @@
-import { defineConfig } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
   testDir: './tests/e2e',
   timeout: 120_000,
   use: {
-    baseURL: process.env.E2E_API_BASE_URL ?? 'http://localhost:3001/api/v1',
+    trace: 'on-first-retry',
   },
+  projects: [
+    {
+      name: 'api',
+      testMatch: /fairshare\.spec\.ts/,
+      use: {
+        baseURL: process.env.E2E_API_BASE_URL ?? 'http://localhost:3001/api/v1',
+      },
+    },
+    {
+      name: 'web',
+      testMatch: /dashboard\.spec\.ts/,
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: process.env.WEB_URL ?? 'http://localhost:3000',
+      },
+    },
+  ],
+  webServer: process.env.CI
+    ? [
+        {
+          command: 'pnpm --filter backend start',
+          port: 3001,
+          timeout: 180_000,
+          reuseExistingServer: !process.env.CI,
+        },
+        {
+          command: 'pnpm --filter web start',
+          port: 3000,
+          timeout: 180_000,
+          reuseExistingServer: !process.env.CI,
+        },
+      ]
+    : undefined,
 });

test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}

tests/e2e/dashboard.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+
+const randomEmail = () => `dashboard_ui_${Date.now()}_${Math.random().toString(36).slice(2)}@example.com`;
+
+test.describe('Dashboard UI', () => {
+  test('User can log in and view dashboard', async ({ page, request }) => {
+    const email = randomEmail();
+    const password = 'PasswordUI123!';
+
+    // Seed user via API to avoid UI registration flakiness in testing
+    const apiBaseUrl = process.env.E2E_API_BASE_URL ?? 'http://localhost:3001/api/v1';
+    const registerResp = await request.post(`${apiBaseUrl}/auth/register`, {
+      data: { name: 'UI User', email, password },
+    });
+    expect(registerResp.ok()).toBeTruthy();
+
+    await test.step('Log into web app', async () => {
+      await page.goto('/login');
+      await page.fill('input[type="email"]', email);
+      await page.fill('input[type="password"]', password);
+      await page.click('button[type="submit"]');
+
+      // Should redirect to dashboard
+      await expect(page).toHaveURL(/\/dashboard/);
+    });
+
+    await test.step('Verify Dashboard Elements', async () => {
+      // Check for navigation or header
+      await expect(page.locator('h1', { hasText: 'Dashboard' }).first()).toBeVisible();
+      
+      // Removed flaky networkidle wait
+
+
+      // The user doesn't have any groups yet, so check for empty state
+      await expect(page.getByText('group', { exact: false }).first()).toBeVisible();
+    });
+  });
+});