$npx -y skills add affaan-m/ECC --skill tdd-workflowUse this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.
| 1 | # Test-Driven Development Workflow |
| 2 | |
| 3 | This skill ensures all code development follows TDD principles with comprehensive test coverage. |
| 4 | |
| 5 | ## When to Activate |
| 6 | |
| 7 | - Writing new features or functionality |
| 8 | - Fixing bugs or issues |
| 9 | - Refactoring existing code |
| 10 | - Adding API endpoints |
| 11 | - Creating new components |
| 12 | |
| 13 | ## Core Principles |
| 14 | |
| 15 | ### 1. Tests BEFORE Code |
| 16 | ALWAYS write tests first, then implement code to make tests pass. |
| 17 | |
| 18 | ### 2. Coverage Requirements |
| 19 | - Minimum 80% coverage (unit + integration + E2E) |
| 20 | - All edge cases covered |
| 21 | - Error scenarios tested |
| 22 | - Boundary conditions verified |
| 23 | |
| 24 | ### 3. Test Types |
| 25 | |
| 26 | #### Unit Tests |
| 27 | - Individual functions and utilities |
| 28 | - Component logic |
| 29 | - Pure functions |
| 30 | - Helpers and utilities |
| 31 | |
| 32 | #### Integration Tests |
| 33 | - API endpoints |
| 34 | - Database operations |
| 35 | - Service interactions |
| 36 | - External API calls |
| 37 | |
| 38 | #### E2E Tests (Playwright) |
| 39 | - Critical user flows |
| 40 | - Complete workflows |
| 41 | - Browser automation |
| 42 | - UI interactions |
| 43 | |
| 44 | ## TDD Workflow Steps |
| 45 | |
| 46 | ### Step 0: Detect the Test Runner |
| 47 | |
| 48 | Do not assume `npm test`. The commands in the steps and examples below use `<test>`, `<test-watch>`, and `<coverage>` as placeholders for the project's actual runner. Resolve them once before starting: |
| 49 | |
| 50 | 1. **Run the package-manager detector** (ships with ECC): |
| 51 | |
| 52 | ```bash |
| 53 | node scripts/setup-package-manager.js --detect |
| 54 | ``` |
| 55 | |
| 56 | It resolves the package manager (npm / pnpm / yarn / bun) from, in order: `CLAUDE_PACKAGE_MANAGER`, `.claude/package-manager.json`, the `package.json` `packageManager` field, the lockfile, then global config. |
| 57 | |
| 58 | 2. **Distinguish the package manager from the test runner — they are not the same.** A project can use Bun to install dependencies yet still run Jest or Vitest. Inspect `package.json` `scripts.test` and the test files: |
| 59 | - `scripts.test` invokes `jest` / `vitest` -> run through the detected PM (`npm test`, `pnpm test`, `yarn test`, or `bun run test`). |
| 60 | - `scripts.test` is `bun test`, or test files `import { test, expect } from "bun:test"`, or there is no jest/vitest config but Bun is present -> use **Bun's native runner** (`bun test`). See [Bun Native Test Pattern](#bun-native-test-pattern-buntest) below. |
| 61 | |
| 62 | Runner command matrix: |
| 63 | |
| 64 | | Runner | `<test>` | `<test-watch>` | `<coverage>` | `<lint>` | |
| 65 | |--------|----------|----------------|--------------|----------| |
| 66 | | npm | `npm test` | `npm test -- --watch` | `npm run test:coverage` | `npm run lint` | |
| 67 | | pnpm | `pnpm test` | `pnpm test --watch` | `pnpm test:coverage` | `pnpm lint` | |
| 68 | | yarn | `yarn test` | `yarn test --watch` | `yarn test:coverage` | `yarn lint` | |
| 69 | | Bun (script runs jest/vitest) | `bun run test` | `bun run test --watch` | `bun run test:coverage` | `bun run lint` | |
| 70 | | Bun (native `bun:test`) | `bun test` | `bun test --watch` | `bun test --coverage` | `bun run lint` | |
| 71 | |
| 72 | > `bun test` (Bun's built-in runner) is **not** the same as `bun run test` (which runs the `package.json` `test` script). Picking the wrong one is a common failure — e.g. invoking Jest through `npx`/`bun run` in an ESM-only project breaks, while `bun test` runs the suite natively. Confirm which the project expects before the RED gate, then substitute `<test>` / `<coverage>` everywhere `npm test` appears below. |
| 73 | |
| 74 | ### Step 1: Write User Journeys |
| 75 | ``` |
| 76 | As a [role], I want to [action], so that [benefit] |
| 77 | |
| 78 | Example: |
| 79 | As a user, I want to search for markets semantically, |
| 80 | so that I can find relevant markets even without exact keywords. |
| 81 | ``` |
| 82 | |
| 83 | ### Step 2: Generate Test Cases |
| 84 | For each user journey, create comprehensive test cases: |
| 85 | |
| 86 | ```typescript |
| 87 | describe('Semantic Search', () => { |
| 88 | it('returns relevant markets for query', async () => { |
| 89 | // Test implementation |
| 90 | }) |
| 91 | |
| 92 | it('handles empty query gracefully', async () => { |
| 93 | // Test edge case |
| 94 | }) |
| 95 | |
| 96 | it('falls back to substring search when Redis unavailable', async () => { |
| 97 | // Test fallback behavior |
| 98 | }) |
| 99 | |
| 100 | it('sorts results by similarity score', async () => { |
| 101 | // Test sorting logic |
| 102 | }) |
| 103 | }) |
| 104 | ``` |
| 105 | |
| 106 | ### Step 3: Run Tests (They Should Fail) |
| 107 | ```bash |
| 108 | <test> |
| 109 | # Tests should fail - we haven't implemented yet |
| 110 | ``` |
| 111 | |
| 112 | ### Step 4: Implement Code |
| 113 | Write minimal code to make tests pass: |
| 114 | |
| 115 | ```typescript |
| 116 | // Implementation guided by tests |
| 117 | export async function searchMarkets(query: string) { |
| 118 | // Implementation here |
| 119 | } |
| 120 | ``` |
| 121 | |
| 122 | ### Step 5: Run Tests Again |
| 123 | ```bash |
| 124 | <test> |
| 125 | # Tests should now pass |
| 126 | ``` |
| 127 | |
| 128 | ### Step 6: Refactor |
| 129 | Improve code quality while keeping tests green: |
| 130 | - Remove duplication |
| 131 | - Improve naming |
| 132 | - Optimize performance |
| 133 | - Enhance readability |
| 134 | |
| 135 | ### Step 7: Verify Coverage |
| 136 | ```bash |
| 137 | <coverage> |
| 138 | # Verify 80%+ coverage achieved |
| 139 | ``` |
| 140 | |
| 141 | ## Testing Patterns |
| 142 | |
| 143 | ### Unit Test Pattern (Jest/Vitest) |
| 144 | ```typescript |
| 145 | import { render, screen, fireEvent } from '@testing-library/react' |
| 146 | import { Button } from './Button' |
| 147 | |
| 148 | describe('Button Component', () => { |
| 149 | it('renders with correct text', () |