Lab 2.3: Red-Green-Refactor-AI

Module: 2.3 - Test-Driven Development with Claude | ← SlidesDuration: 1 hour Sample Project: node-express-mongoose-demo

Learning Objectives

By the end of this lab, you will be able to:

• Practice the TDD cycle (Red → Green → Refactor) with Claude
• Write failing tests before implementation
• Use Claude to implement code that makes tests pass
• Refactor while keeping tests green

Prerequisites

• Completed Lab 2.2 (Test Generation)
• Tests running in the project

The TDD Cycle

┌──────────────────────────────────────────┐
│                                          │
│    RED ──────► GREEN ──────► REFACTOR    │
│     │                            │       │
│     └────────────────────────────┘       │
│                                          │
└──────────────────────────────────────────┘

RED:      Write a failing test
GREEN:    Write minimum code to pass
REFACTOR: Improve without changing behavior

Setup

# Navigate to the sample project
cd sample-projects/node-express-mongoose-demo

# Make sure tests work
npm test

# Start Claude Code
claude

The Feature

You'll implement a new feature using TDD:

Feature: Add a function to slugify article titles

• Input: "My Article Title"
• Output: "my-article-title"

---

Phase 1: RED - Write Failing Test

Time: 12-15 minutes

Create a test for functionality that doesn't exist yet.

Step 1: Create test file

Create a test file for a new slugify utility. The function should:
- Convert "Hello World" to "hello-world"
- Handle special characters
- Handle multiple spaces

Write only the tests, not the implementation.

Step 2: Verify test fails

npm test

The test should fail with "function not found" or similar.

Success criteria:

• [ ] Test file created
• [ ] Tests run but fail (RED)
• [ ] Failure is because implementation is missing

---

Phase 2: GREEN - Make It Pass

Time: 15-20 minutes

Write the minimum code to make tests pass.

Step 1: Implement the function

Now implement the slugify function to make the tests pass. Write the minimum code necessary.

Step 2: Run tests

npm test

Step 3: Fix any failures

The test for [specific case] is failing. Fix the implementation.

Success criteria:

• [ ] Implementation created
• [ ] All tests pass (GREEN)
• [ ] No extra features added

---

Phase 3: REFACTOR - Improve the Code

Time: 15-20 minutes

Improve code quality while keeping tests green.

Step 1: Review the code

Review the slugify function. What could be improved for readability or performance?

Step 2: Refactor

Refactor the slugify function to [specific improvement] while keeping tests passing.

Step 3: Verify tests still pass

npm test

Success criteria:

• [ ] Code is cleaner/more readable
• [ ] Tests still pass
• [ ] No behavior changes

---

Phase 4: Add Edge Cases

Time: 15-20 minutes

Extend the feature with more tests.

Step 1: Write more failing tests

Add tests for these edge cases:
- Empty string input
- String with only special characters
- Very long strings
- Strings with numbers

Step 2: Make them pass

Update the slugify function to handle these edge cases.

Success criteria:

• [ ] New edge case tests added
• [ ] All tests pass
• [ ] Function handles all cases

---

Example TDD Session

# RED: Write the test first
> Create a test for a slugify function that converts "Hello World" to "hello-world"

# Run tests - they fail
$ npm test
FAIL: slugify is not defined

# GREEN: Implement
> Implement slugify to make the test pass

# Run tests - they pass
$ npm test
PASS: all tests passing

# REFACTOR: Improve
> Refactor slugify to use regex instead of multiple replace calls

# Run tests - still pass
$ npm test
PASS: all tests passing

---

The TDD Mindset

Phase	Focus	Claude Prompt Style
RED	Behavior	"Write a test that..."
GREEN	Correctness	"Implement to make tests pass"
REFACTOR	Quality	"Improve without changing behavior"

---

Common Mistakes to Avoid

1. Writing implementation first - Always test first
2. Writing too many tests at once - One test at a time
3. Over-implementing - Only write code to pass the current test
4. Skipping refactor - This is where code quality improves

---

Tips for Success

1. Small steps - One test, one feature at a time
2. Run tests frequently - After every change
3. Commit at green - Save your progress when tests pass
4. Trust the process - It feels slow but prevents bugs

---

Refactoring Ideas

After tests pass, consider:

• Extracting helper functions
• Improving variable names
• Reducing complexity
• Adding type annotations (if using TypeScript)

---

Stretch Goals

If you finish early:

1. Add the slugify function to the Article model
2. Write integration tests for article creation with slugs
3. Add a test for slug uniqueness

---

Deliverables

At the end of this lab, you should have:

1. A new utility function with full test coverage
2. Experience with the Red-Green-Refactor cycle
3. Clean, well-tested code
4. Understanding of how TDD works with Claude

---

Next Steps

After completing this lab, move on to Lab 2.4: Incremental Improvement to practice safe refactoring.