Testing Patterns for Crispy CRM

Overview

Comprehensive testing guidance for the Crispy CRM codebase. Covers unit testing with Vitest, component testing with React Admin context, validation testing with Zod schemas, and E2E testing with Playwright.

Philosophy: Tests should verify behavior, not implementation. Focus on what the code does, not how it does it.

When to Use

Use this skill when:

• Writing new tests (unit, integration, E2E)
• Implementing TDD (Test-Driven Development)
• Debugging failing tests
• Setting up test infrastructure
• Mocking Supabase or React Admin
• Understanding test coverage requirements
• Writing Claude Chrome manual E2E prompts

Test Stack

src/**/__tests__/*.test.ts

src/**/__tests__/*.test.tsx

src/atomic-crm/validation/__tests__/

tests/e2e/

docs/tests/e2e/

supabase/tests/

TDD Workflow

The Red-Green-Refactor Cycle

1. RED: Write a failing test that describes expected behavior. Run it to confirm failure.
2. GREEN: Write minimal code to make the test pass. Speed over elegance.
3. REFACTOR: Clean up while tests still pass. This step is NOT optional.

Arrange-Act-Assert Pattern

Structure every test with three clear sections:

it('calculates total with tax', () => {
  // Arrange: Set up test data
  const items = [{ price: 100 }, { price: 50 }];
  const taxRate = 0.1;

  // Act: Execute the code
  const total = calculateTotalWithTax(items, taxRate);

  // Assert: Verify the outcome
  expect(total).toBe(165);
});

Where TDD Thrives

TDD in Watch Mode

just test:watch
# 1. Write failing test -> See RED in terminal
# 2. Write code -> See GREEN
# 3. Refactor -> Confirm still GREEN
# 4. Commit -> Repeat

Common TDD Pitfalls

Automatic Activation

This skill activates automatically for implementation tasks. When you see:

• "implement feature", "create component", "add handler", "new schema"
• Any file modification in

  src/atomic-crm/**/*.ts

  or

  src/atomic-crm/**/*.tsx

The skill will remind you:

1. Write test FIRST (Red phase)
2. Run test to confirm it fails
3. Implement minimal code (Green phase)
4. Refactor while tests pass
5. Verify with

   just test

   before claiming complete

Integration with verification-before-completion

Testing is now enforced at completion time:

• Cannot claim "done" without test evidence
• Cannot claim "feature complete" without passing tests
• UI changes prompt for Manual E2E via Claude Chrome

Quick Reference

Running Tests

just test              # All unit tests
just test:watch        # Watch mode for TDD
just test:coverage     # Generate coverage report
just test:ui           # Vitest UI for debugging
npx playwright test    # E2E tests
npx supabase test db   # Database tests

Coverage Requirements

Integration with Other Skills

verification-before-completion

fail-fast-debugging

enforcing-principles

Decision Tree

Need to write tests?
|
+- New feature?
|  +- Start with TDD -> Write failing test first
|
+- Bug fix?
|  +- Write test that reproduces bug -> Fix -> Verify passes
|
+- Validation logic?
|  +- Test Zod schemas -> Valid/invalid inputs, coercion, defaults
|
+- React component?
|  +- Use renderWithAdminContext -> Test user interactions
|
+- Database logic?
|  +- pgTAP tests -> RLS policies, constraints, triggers
|
+- Full user journey?
   +- Playwright E2E -> Critical path scenarios

Red Flags - STOP and Review

If you find yourself:

• Writing tests after code is "done" -> Consider TDD next time
• Testing internal state -> Test behavior instead
• Skipping async waitFor -> Race condition risk
• Using raw

  render()

  for React Admin components -> Use

  renderWithAdminContext

• No assertions in test -> Test is meaningless
• Massive snapshots -> Use specific assertions

Remember: Tests are documentation. They should clearly express what the code does.

Resources

For detailed implementation patterns, see the reference files below:

• vitest-patterns.md - Test file structure, hook testing, anti-patterns, ESLint enforcement, CLI commands
• mock-patterns.md - Supabase mocking, per-test overrides, typed mock factories
• react-admin-testing.md - renderWithAdminContext, form/error/accessibility testing, E2E with Playwright, Claude Chrome manual E2E, pgTAP
• zod-testing.md - Schema validation testing, coercion, defaults, strict vs passthrough