claude-workspace: Skill for Claude Code

Testing Strategy

Philosophy

• Test behavior, not implementation. Refactors should never break tests unless behavior changes.
• TDD when practical. Write the failing test first. Red → Green → Refactor.
• Factory pattern for all test data. getMockX(overrides?) — no duplicated fixtures.
• Test the contract. Props in, rendered output + callbacks out.

Test Pyramid

         /\        E2E (Playwright)
        /  \       Critical paths only: auth, checkout, core CRUD
       /    \      ~10% of tests
      /------\     Integration
     /        \    Feature workflows, API + rendering
    /          \   ~20% of tests
   /------------\  Unit
  /              \ Components, hooks, utilities
 /                \ ~70% of tests

Factory Pattern

Props Factory

import { type ComponentProps } from 'react';

const getDefaultProps = (
  overrides?: Partial<ComponentProps<typeof UserCard>>
) => ({
  name: 'Jane Doe',
  email: '[email protected]',
  role: 'admin' as const,
  onEdit: vi.fn(),
  onDelete: vi.fn(),
  ...overrides,
});

Data Factory

let idCounter = 0;

export function getMockUser(overrides?: Partial<User>): User {
  idCounter += 1;
  return {
    id: `user-${idCounter}`,
    name: 'Test User',
    email: `test${idCounter}@example.com`,
    role: 'viewer',
    createdAt: new Date('2024-01-01').toISOString(),
    ...overrides,
  };
}

export function getMockUsers(count: number, overrides?: Partial<User>): User[] {
  return Array.from({ length: count }, () => getMockUser(overrides));
}

Query Result Factory

export function getMockQueryResult<T>(data: T, overrides?: Partial<UseQueryResult<T>>) {
  return {
    data,
    isPending: false,
    isError: false,
    error: null,
    refetch: vi.fn(),
    ...overrides,
  };
}

// Usage
vi.mocked(useUsers).mockReturnValue(
  getMockQueryResult(getMockUsers(3))
);

// Loading state
vi.mocked(useUsers).mockReturnValue(
  getMockQueryResult(undefined, { isPending: true, data: undefined })
);