platform-codebase/features/platform-admin/frontend-admin/e2e

Platform Admin E2E Tests

End-to-end tests for the Platform Admin dashboard, including conversion funnels visualization.

Test Types

1. Mock API Tests (Fast, Local)

Tests use mocked API responses - no database required. Good for development.

# Run all E2E tests with mocks
pnpm test:e2e

# Run with UI mode (interactive)
pnpm test:e2e:ui

# Run headed (see browser)
pnpm test:e2e:headed

# Run specific test
pnpm test:e2e e2e/conversion-funnels.e2e.ts

2. Docker E2E Tests (Real Database)

Tests use real PostgreSQL with seeded data. Self-contained environment.

# Run full Docker E2E pipeline (build, seed, test, teardown)
pnpm test:e2e:docker

# Clean up Docker resources
pnpm test:e2e:docker:down

Directory Structure

e2e/
├── README.md                          # This file
├── fixtures/
│   └── seed-conversion-events.sql     # Test data for Docker E2E
├── docker-compose.e2e.yml             # Docker environment setup
├── playwright.docker.config.ts        # Playwright config for Docker
├── conversion-funnels.e2e.ts          # Mock-based tests (local dev)
└── conversion-funnels.docker.e2e.ts   # Real database tests (Docker)

Docker E2E Environment

The Docker setup spins up:

Service	Description	Port
postgres	PostgreSQL with analytics schema + seed data	5432
redis	Cache for analytics backend	6379
analytics-api	Backend API serving funnel data	3012
platform-admin	Frontend under test	3200
e2e-runner	Playwright test container	-

Seed Data

The fixtures/seed-conversion-events.sql seeds realistic funnel data:

Source	Visits	Conversions	Rate
ORGANIC	5,000	350	7.0%
PAID	3,000	320	10.7%
SOCIAL	4,000	85	2.1%
EMAIL	1,500	280	18.7%
REFERRAL	800	65	8.1%
DIRECT	2,000	110	5.5%

Writing Tests

Mock-Based Tests

Use for fast iteration during development:

import { test, expect } from '@playwright/test'

test.beforeEach(async ({ page }) => {
  // Mock API responses
  await page.route('**/api/analytics/**', async (route) => {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify(MOCK_DATA),
    })
  })

  await page.goto('/analytics/funnels')
})

test('my test', async ({ page }) => {
  // Test with mocked data
})

Real Database Tests

Use for CI/CD and integration testing:

import { test, expect } from '@playwright/test'

test.beforeEach(async ({ page }) => {
  // No mocks - uses real API
  await page.goto('/analytics/funnels')
  await page.waitForSelector('[data-testid="kpi-card"]')
})

test('my test', async ({ page }) => {
  // Test with real seeded data
})

CI/CD Integration

Add to your pipeline:

e2e-tests:
  stage: test
  services:
    - docker:dind
  script:
    - cd codebase/features/platform-admin/frontend-admin
    - pnpm test:e2e:docker
  artifacts:
    when: always
    paths:
      - e2e/test-results/
    expire_in: 7 days

Troubleshooting

Tests fail to find elements

1. Check if dev server is running: pnpm dev
2. Verify the route exists: /analytics/funnels
3. Check for console errors: pnpm test:e2e:headed

Docker tests hang

1. Check Docker resources: docker ps
2. Clean up and retry: pnpm test:e2e:docker:down && pnpm test:e2e:docker
3. Check logs: docker compose -f e2e/docker-compose.e2e.yml logs

Database connection errors

1. Ensure PostgreSQL is healthy
2. Check seed file syntax
3. Verify schema matches seed file expectations