Test-Driven Development — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— Test-Driven Development
📋Red (Fail)
⚙️Green (Pass)
🔄Refactor
✅Repeat
🎯 Next: Test →
Step 1 / 4
Speed
Red — Write Failing Test
Write the test before the implementation exists💡 Analogy
Like writing the acceptance criteria before starting construction — you know exactly what "done" means.
Write the test first. It will fail because ShoppingCart doesn't exist yet. The failing test defines the interface your code must satisfy.
Console Output
> ✗ ShoppingCart starts empty
>   Cannot find module './cart'
> 1 failed, 0 passed — Red phase ✓
●cart.test.ts
Red — Write Failing TestL6–10
1// TDD Red-Green-Refactor cycle
2// STEP 1: Red — write failing test first
3import { describe, it, expect } from 'vitest';
4import { ShoppingCart } from './cart';
5 
6describe('ShoppingCart', () => {
7  it('starts empty', () => {
8    const cart = new ShoppingCart();
9    expect(cart.items).toHaveLength(0);
10    expect(cart.total).toBe(0);
11  });
12 
13  it('adds item and calculates total', () => {
14    const cart = new ShoppingCart();
15    cart.addItem({ id: '1', name: 'Book', price: 29.99, qty: 2 });
16    expect(cart.items).toHaveLength(1);
17    expect(cart.total).toBeCloseTo(59.98);
18  });
19 
20  it('removes item by id', () => {
21    const cart = new ShoppingCart();
22    cart.addItem({ id: '1', name: 'Book', price: 9.99, qty: 1 });
23    cart.addItem({ id: '2', name: 'Pen', price: 1.99, qty: 3 });
24    cart.removeItem('1');
25    expect(cart.items).toHaveLength(1);
26    expect(cart.items[0]?.id).toBe('2');
27  });
28 
29  it('applies discount code', () => {
30    const cart = new ShoppingCart();
31    cart.addItem({ id: '1', name: 'Shirt', price: 50, qty: 1 });
32    cart.applyDiscount('SAVE10'); // 10% off
33    expect(cart.total).toBeCloseTo(45);
34  });
35});
35 lines
Timeline — 4 Steps
Red — Write Failing Test
Write the test before the implementation exists💡 Analogy
Like writing the acceptance criteria before starting construction — you know exactly what "done" means.
Write the test first. It will fail because ShoppingCart doesn't exist yet. The failing test defines the interface your code must satisfy.
Console Output
> ✗ ShoppingCart starts empty
>   Cannot find module './cart'
> 1 failed, 0 passed — Red phase ✓

Was this page helpful?

Discussion

Write the test before the implementation exists

💡 Analogy

Like writing the acceptance criteria before starting construction — you know exactly what "done" means.

Write the test first. It will fail because ShoppingCart doesn't exist yet. The failing test defines the interface your code must satisfy.

Console Output

> ✗ ShoppingCart starts empty
>   Cannot find module './cart'
> 1 failed, 0 passed — Red phase ✓

Write the test before the implementation exists

💡 Analogy

Like writing the acceptance criteria before starting construction — you know exactly what "done" means.

Write the test first. It will fail because ShoppingCart doesn't exist yet. The failing test defines the interface your code must satisfy.

Console Output

> ✗ ShoppingCart starts empty
>   Cannot find module './cart'
> 1 failed, 0 passed — Red phase ✓