refactor(e2e): Migrate from MSW mocking to real Supabase local database with fixtures

[ryota-murakami]

Summary

Migrate E2E tests from MSW (Mock Service Worker) mocking to real Supabase local database with fixture seeding.

Background

Previously, the local environment used Supabase Cloud, so E2E tests relied entirely on MSW to mock server actions. Now that supabase start runs PostgreSQL in Docker locally, we can eliminate MSW mocking for E2E tests and use real database interactions with fixture data, following the pattern established in corelive.

Benefits

• More realistic tests: Tests interact with real database, catching issues MSW couldn't detect
• Simpler test setup: No need to maintain complex MSW handlers for E2E
• Better test isolation: Database reset between test runs ensures clean state
• Reduced flakiness: Eliminates MSW state management issues

Implementation Plan

Phase 1: Supabase CLI Setup

• Initialize supabase/ directory with supabase init
• Pull existing schema from cloud: supabase db pull
• Create supabase/seed.sql with E2E test fixtures
• Add npm scripts: db:reset, db:seed, db:truncate

Phase 2: Playwright Configuration

• Create e2e/global-setup.ts to reset DB before tests
• Create e2e/global-teardown.ts to reset DB after tests
• Update playwright.config.ts:
  • Add globalSetup and globalTeardown paths
  • Remove MSW env vars from webServer.command
  • Keep fullyParallel: false for DB consistency

Phase 3: Auth Setup Update

• Update e2e/auth.setup.ts for local Supabase URL (127.0.0.1:54321)
• Seed test user in supabase/seed.sql
• Update auth cookie injection for local Supabase project ref

Phase 4: Fixture Data Migration

• Convert mocks/handlers/data.ts to SQL seed format
• Seed tables: board, statuslist, repocard, projectinfo, maintenance
• Ensure test user ID matches existing mock: test-user-id-12345

Phase 5: MSW Cleanup (Gradual)

• Keep MSW for unit tests and Storybook only
• Remove NEXT_PUBLIC_ENABLE_MSW_MOCK=true from E2E builds
• Clean up E2E-specific MSW handlers

Phase 6: CI/CD Update

• Add supabase start step to GitHub Actions E2E workflow
• Add supabase db reset before E2E tests
• Update Docker configuration if needed

Technical Details

Current Architecture (MSW-based)

e2e/auth.setup.ts          → Injects mock auth cookies
mocks/handlers/data.ts     → In-memory mock data
mocks/handlers/supabase.ts → MSW handlers for PostgREST
playwright.config.ts       → Builds with NEXT_PUBLIC_ENABLE_MSW_MOCK=true

Target Architecture (Real DB)

e2e/global-setup.ts        → execSync('supabase db reset')
e2e/global-teardown.ts     → execSync('supabase db reset')
supabase/seed.sql          → Fixture data (SQL)
playwright.config.ts       → No MSW env vars, globalSetup/Teardown

Reference Implementation

• corelive/e2e/global-setup.ts
• corelive/e2e/global-teardown.ts
• corelive/playwright.config.ts

Files to Create

• supabase/config.toml
• supabase/migrations/*.sql
• supabase/seed.sql
• e2e/global-setup.ts
• e2e/global-teardown.ts

Files to Modify

• package.json (add db scripts)
• playwright.config.ts
• e2e/auth.setup.ts
• .github/workflows/*.yml

Related

• CLAUDE.md: Supabase local setup documentation
• Pattern: pattern_supabase-local-setup in Serena memory

Labels

• enhancement
• testing
• refactoring