How to Implement Test-Driven Development with 80% Coverage in ECC
ECC (Everything Claude Code) ships a dedicated TDD skill that codifies the complete test-driven development workflow and enforces a strict 80% minimum coverage threshold across unit, integration, and end-to-end tests.
The ECC repository provides a comprehensive framework for implementing test-driven development with 80% coverage through its specialized skills/tdd-workflow/SKILL.md file. This skill establishes architectural pillars that guide developers through the RED-GREEN-REFACTOR cycle while automating coverage enforcement via Jest configuration and CI pipelines. By following the prescribed workflow, development teams can maintain deterministic test suites that cover branches, functions, lines, and statements to meet the mandatory 80% global threshold.
The Fail-First Cycle (RED)
The TDD workflow begins with writing a test that expresses desired behavior and intentionally fails. According to skills/tdd-workflow/SKILL.md, this RED gate guarantees the test actually exercises missing implementation or edge-case bugs before any production code exists.
Create a failing unit test that targets a specific component behavior:
// src/components/Button/Button.test.tsx
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();
});
// The following test will fail until the “disabled” prop is implemented
it('is disabled when disabled prop is true', () => {
render(<Button disabled>Click me</Button>);
expect(screen.getByRole('button')).toBeDisabled();
});
});
Run the test suite to confirm the RED state:
npm test
Minimal Implementation (GREEN)
With the failing test establishing the behavioral contract, add only the code required to make the test pass. The ECC skill advises writing the smallest possible implementation to transition from RED to GREEN, avoiding premature abstraction or feature creep.
Implement the minimal code to satisfy the failing assertion:
// src/components/Button/Button.tsx
import React from 'react';
export function Button({ children, disabled = false }: { children: React.ReactNode; disabled?: boolean }) {
return (
<button disabled={disabled}>
{children}
</button>
);
}
Re-run the test suite to confirm the GREEN state:
npm test
Green Validation and Checkpoint Commits
Once the GREEN state is confirmed, the ECC workflow requires creating a Git checkpoint commit to lock the transition. This practice maintains a clean Git history that explicitly tracks the TDD cycle.
Create the checkpoint commit after tests pass:
git add .
git commit -m "fix: implement disabled prop for Button component"
Refactor Safely
With the safety net of passing tests, developers may clean up, rename, or improve production code. The ECC skill mandates a final checkpoint commit after refactoring passes all tests, ensuring the RED-GREEN-REFACTOR loop completes with full traceability.
Example commit after refactoring:
git commit -m "refactor: simplify Button prop destructuring"
Coverage Enforcement Configuration
ECC expects the command npm run test:coverage to generate a coverage report that meets 80% global thresholds defined in the Jest configuration. The thresholds apply to branches, functions, lines, and statements simultaneously.
Configure Jest in your package.json or jest.config.js to enforce the mandate:
{
"jest": {
"coverageThresholds": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
}
}
}
}
Execute coverage verification:
npm run test:coverage
The command fails with a non-zero exit code if any metric falls below 80%, blocking commits and merges.
Integration Testing Patterns
Beyond unit tests, ECC requires integration tests for API routes and service boundaries. The tests/test_templates.py file in the ECC repository provides templates for generating integration test files that maintain the 80% coverage requirement.
Test a Next.js API route using the integration pattern:
// src/app/api/markets/route.test.ts
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);
});
});
End-to-End Testing with Playwright
ECC incorporates Playwright for end-to-end (E2E) testing to ensure critical user flows function correctly in a browser environment. These tests contribute to the overall coverage calculation and verify integration between frontend components and backend services.
Create an E2E test for a critical user flow:
// tests/e2e/markets.spec.ts
import { test, expect } from '@playwright/test';
test('user can search and filter markets', async ({ page }) => {
await page.goto('/');
await page.click('a[href="/markets"]');
await expect(page.locator('h1')).toContainText('Markets');
await page.fill('input[placeholder="Search markets"]', 'election');
await page.waitForTimeout(600);
const results = page.locator('[data-testid="market-card"]');
await expect(results).toHaveCount(5);
await expect(results.first()).toContainText('election', { ignoreCase: true });
});
Automation Hooks and CI/CD Integration
The ECC workflow leverages pre-commit hooks and GitHub Actions to enforce the 80% coverage threshold automatically. Pre-commit hooks run npm test && npm run lint before allowing commits, while CI pipelines execute the same coverage command and upload reports.
Configure pre-commit hooks in package.json:
{
"scripts": {
"test": "jest",
"test:coverage": "jest --coverage",
"lint": "eslint src/"
}
}
Implement the CI pipeline in .github/workflows/ci.yml to block merges when coverage falls below 80%:
name: CI
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- run: npm ci
- run: npm run test:coverage
- uses: actions/upload-artifact@v3
with:
name: coverage-report
path: coverage/
Mocking External Services
ECC provides ready-to-use mocking patterns for external services (Supabase, Redis, OpenAI) in skills/tdd-workflow/SKILL.md. These patterns ensure unit tests remain deterministic and fast by isolating external dependencies.
Reference the mocking patterns from the skill file to stub external API calls:
// Example mocking pattern from skills/tdd-workflow/SKILL.md
jest.mock('@supabase/supabase-js', () => ({
createClient: jest.fn(() => ({
from: jest.fn(() => ({
select: jest.fn().mockResolvedValue({ data: [], error: null })
}))
}))
}));
Summary
- ECC provides a dedicated TDD skill at
skills/tdd-workflow/SKILL.mdthat codifies the complete RED-GREEN-REFACTOR workflow. - The 80% coverage threshold applies globally to branches, functions, lines, and statements via Jest configuration.
- Checkpoint commits (
fix:andrefactor:) create a traceable Git history that maps commits to TDD cycle phases. - Pre-commit hooks (
npm test && npm run lint) and CI pipelines block code changes that fail to meet coverage requirements. - Integration and E2E tests using the patterns in
tests/test_templates.pyand Playwright ensure comprehensive coverage beyond unit tests. - Mocking patterns for external services keep tests deterministic and fast while maintaining coverage accuracy.
Frequently Asked Questions
How does ECC enforce the 80% coverage threshold?
ECC enforces coverage through Jest configuration thresholds set to 80% for branches, functions, lines, and statements. When running npm run test:coverage, Jest calculates coverage metrics and exits with an error code if any metric falls below 80%, preventing commits and merges in CI pipelines.
What types of tests does the ECC TDD workflow require?
The workflow requires three test layers: unit tests for individual components and functions, integration tests for API routes and service boundaries using patterns from tests/test_templates.py, and end-to-end tests using Playwright for critical user flows. All three contribute to the global 80% coverage calculation.
Where does ECC store the TDD workflow documentation?
The complete TDD workflow is documented in skills/tdd-workflow/SKILL.md within the ECC repository. This file contains step-by-step instructions for the RED-GREEN-REFACTOR cycle, coverage threshold definitions, mocking patterns for external services, and CI/CD integration guidelines.
Can I use ECC's TDD patterns with other testing frameworks?
While ECC's examples use Jest and Playwright, the architectural principles in skills/tdd-workflow/SKILL.md are framework-agnostic. You can adapt the RED-GREEN-REFACTOR cycle, checkpoint commit strategy, and 80% threshold requirement to other testing frameworks like Vitest, Mocha, or Cypress by adjusting the coverage configuration and test commands accordingly.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" Maintain an open-source project? Get it listed too →