tdd-workflow

TDD Workflow

Test-Driven Development means writing a failing test before writing implementation code. This ensures every feature has coverage and drives cleaner design through the red-green-refactor cycle.

When to Use

• User is implementing a new feature (push for test-first)
• User is fixing a bug (write a test that reproduces the bug first)
• User asks about TDD or test-driven development
• User asks how to structure tests
• Coverage is below 80% and needs improvement

Core Patterns

The Red-Green-Refactor Cycle

  RED: Write a failing test
   |
   v
  GREEN: Write minimal code to pass
   |
   v
  REFACTOR: Clean up without changing behavior
   |
   v
  (repeat)

Step 1: RED — Write a Failing Test

Write the test first. It must fail because the implementation does not exist yet:

// src/utils/slug.test.ts
import { describe, it, expect } from 'vitest'
import { createSlug } from './slug'

describe('createSlug', () => {
  it('converts a title to a URL-safe slug', () => {
    expect(createSlug('Hello World')).toBe('hello-world')
  })

  it('removes special characters', () => {
    expect(createSlug('Hello & World!')).toBe('hello-world')
  })

  it('collapses multiple hyphens', () => {
    expect(createSlug('Hello   World')).toBe('hello-world')
  })

  it('trims leading and trailing hyphens', () => {
    expect(createSlug(' Hello World ')).toBe('hello-world')
  })
})

Run the test — it must FAIL:

npx vitest run src/utils/slug.test.ts
# FAIL: Cannot find module './slug'

Step 2: GREEN — Minimal Implementation

Write the minimum code to make all tests pass:

// src/utils/slug.ts
export function createSlug(title: string): string {
  return title
    .toLowerCase()
    .replace(/[^a-z0-9\s-]/g, '')
    .replace(/\s+/g, '-')
    .replace(/-+/g, '-')
    .replace(/^-|-$/g, '')
}

Run the test — it must PASS:

npx vitest run src/utils/slug.test.ts
# PASS: All 4 tests passed

Step 3: REFACTOR — Improve Without Changing Behavior