Test-Driven Development Workflow

This skill ensures all code development follows TDD principles with comprehensive test coverage.

When to Activate

• Writing new features or functionality

• Fixing bugs or issues

• Refactoring existing code

• Adding API endpoints

• Creating new components

Core Principles

1. Tests BEFORE Code

ALWAYS write tests first, then implement code to make tests pass.

2. Coverage Requirements

• Minimum 80% coverage (unit + integration + E2E)

• All edge cases covered

• Error scenarios tested

• Boundary conditions verified

3. Test Types

Unit Tests

• Individual functions and utilities

• Component logic

• Pure functions

• Helpers and utilities

Integration Tests

• API endpoints

• Database operations

• Service interactions

• External API calls

E2E Tests (Playwright)

• Critical user flows

• Complete workflows

• Browser automation

• UI interactions

TDD Workflow Steps

Step 1: Write User Journeys

As a [role], I want to [action], so that [benefit]

Example: As a user, I want to search for markets semantically, so that I can find relevant markets even without exact keywords.

Step 2: Generate Test Cases

For each user journey, create comprehensive test cases:

describe('Semantic Search', () => { it('returns relevant markets for query', async () => { // Test implementation })

it('handles empty query gracefully', async () => { // Test edge case })

it('falls back to substring search when Redis unavailable', async () => { // Test fallback behavior })

it('sorts results by similarity score', async () => { // Test sorting logic }) })

Step 3: Run Tests (They Should Fail)

npm test

Tests should fail - we haven't implemented yet

Step 4: Implement Code

Write minimal code to make tests pass:

// Implementation guided by tests export async function searchMarkets(query: string) { // Implementation here }

Step 5: Run Tests Again

npm test

Tests should now pass

Step 6: Refactor

Improve code quality while keeping tests green:

• Remove duplication

• Improve naming

• Optimize performance

• Enhance readability

Step 7: Verify Coverage

npm run test:coverage

Verify 80%+ coverage achieved

Testing Patterns

Unit Test Pattern (Jest/Vitest)

import { render, screen, fireEvent } from '@testing-library/react' import { Button } from './Button'

describe('Button Component', () => { it('renders with correct text', () => { render(<Button>Click me</Button>) expect(screen.getByText('Click me')).toBeInTheDocument() })

it('calls onClick when clicked', () => { const handleClick = jest.fn() render(<Button onClick={handleClick}>Click</Button>)

fireEvent.click(screen.getByRole('button'))

expect(handleClick).toHaveBeenCalledTimes(1)

})

it('is disabled when disabled prop is true', () => { render(<Button disabled>Click</Button>) expect(screen.getByRole('button')).toBeDisabled() }) })

API Integration Test Pattern

import { NextRequest } from 'next/server' import { GET } from './route'

describe('GET /api/markets', () => { it('returns markets successfully', async () => { const request = new NextRequest('http://localhost/api/markets') const response = await GET(request) const data = await response.json()

expect(response.status).toBe(200)
expect(data.success).toBe(true)
expect(Array.isArray(data.data)).toBe(true)

})

it('validates query parameters', async () => { const request = new NextRequest('http://localhost/api/markets?limit=invalid') const response = await GET(request)

expect(response.status).toBe(400)

})

it('handles database errors gracefully', async () => { // Mock database failure const request = new NextRequest('http://localhost/api/markets') // Test error handling }) })

E2E Test Pattern (Playwright)

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

test('user can search and filter markets', async ({ page }) => { // Navigate to markets page await page.goto('/') await page.click('a[href="/markets"]')

// Verify page loaded await expect(page.locator('h1')).toContainText('Markets')

// Search for markets await page.fill('input[placeholder="Search markets"]', 'election')

// Wait for debounce and results await page.waitForTimeout(600)

// Verify search results displayed const results = page.locator('[data-testid="market-card"]') await expect(results).toHaveCount(5, { timeout: 5000 })

// Verify results contain search term const firstResult = results.first() await expect(firstResult).toContainText('election', { ignoreCase: true })

// Filter by status await page.click('button:has-text("Active")')

// Verify filtered results await expect(results).toHaveCount(3) })

test('user can create a new market', async ({ page }) => { // Login first await page.goto('/creator-dashboard')

// Fill market creation form await page.fill('input[name="name"]', 'Test Market') await page.fill('textarea[name="description"]', 'Test description') await page.fill('input[name="endDate"]', '2025-12-31')

// Submit form await page.click('button[type="submit"]')

// Verify success message await expect(page.locator('text=Market created successfully')).toBeVisible()

// Verify redirect to market page await expect(page).toHaveURL(//markets/test-market/) })

Test File Organization

src/ ├── components/ │ ├── Button/ │ │ ├── Button.tsx │ │ ├── Button.test.tsx # Unit tests │ │ └── Button.stories.tsx # Storybook │ └── MarketCard/ │ ├── MarketCard.tsx │ └── MarketCard.test.tsx ├── app/ │ └── api/ │ └── markets/ │ ├── route.ts │ └── route.test.ts # Integration tests └── e2e/ ├── markets.spec.ts # E2E tests ├── trading.spec.ts └── auth.spec.ts

Mocking External Services

Supabase Mock

jest.mock('@/lib/supabase', () => ({ supabase: { from: jest.fn(() => ({ select: jest.fn(() => ({ eq: jest.fn(() => Promise.resolve({ data: [{ id: 1, name: 'Test Market' }], error: null })) })) })) } }))

Redis Mock

jest.mock('@/lib/redis', () => ({ searchMarketsByVector: jest.fn(() => Promise.resolve([ { slug: 'test-market', similarity_score: 0.95 } ])), checkRedisHealth: jest.fn(() => Promise.resolve({ connected: true })) }))

OpenAI Mock

jest.mock('@/lib/openai', () => ({ generateEmbedding: jest.fn(() => Promise.resolve( new Array(1536).fill(0.1) // Mock 1536-dim embedding )) }))

Test Coverage Verification

Run Coverage Report

npm run test:coverage

Coverage Thresholds

{ "jest": { "coverageThresholds": { "global": { "branches": 80, "functions": 80, "lines": 80, "statements": 80 } } } }

Common Testing Mistakes to Avoid

❌ WRONG: Testing Implementation Details

// Don't test internal state expect(component.state.count).toBe(5)

✅ CORRECT: Test User-Visible Behavior

// Test what users see expect(screen.getByText('Count: 5')).toBeInTheDocument()

❌ WRONG: Brittle Selectors

// Breaks easily await page.click('.css-class-xyz')

✅ CORRECT: Semantic Selectors

// Resilient to changes await page.click('button:has-text("Submit")') await page.click('[data-testid="submit-button"]')

❌ WRONG: No Test Isolation

// Tests depend on each other test('creates user', () => { /* ... / }) test('updates same user', () => { / depends on previous test */ })

✅ CORRECT: Independent Tests

// Each test sets up its own data test('creates user', () => { const user = createTestUser() // Test logic })

test('updates user', () => { const user = createTestUser() // Update logic })

Continuous Testing

Watch Mode During Development

npm test -- --watch

Tests run automatically on file changes

Pre-Commit Hook

Runs before every commit

npm test && npm run lint

CI/CD Integration

GitHub Actions

• name: Run Tests run: npm test -- --coverage
• name: Upload Coverage uses: codecov/codecov-action@v3

Best Practices

• Write Tests First - Always TDD

• One Assert Per Test - Focus on single behavior

• Descriptive Test Names - Explain what's tested

• Arrange-Act-Assert - Clear test structure

• Mock External Dependencies - Isolate unit tests

• Test Edge Cases - Null, undefined, empty, large

• Test Error Paths - Not just happy paths

• Keep Tests Fast - Unit tests < 50ms each

• Clean Up After Tests - No side effects

• Review Coverage Reports - Identify gaps

Success Metrics

• 80%+ code coverage achieved

• All tests passing (green)

• No skipped or disabled tests

• Fast test execution (< 30s for unit tests)

• E2E tests cover critical user flows

• Tests catch bugs before production

Remember: Tests are not optional. They are the safety net that enables confident refactoring, rapid development, and production reliability.