TDD for FizzBuzz: Step-by-Step Guide

In this guide, we will solve the FizzBuzz problem using Test-Driven Development (TDD), which emphasizes writing tests before implementing functionality.

What is FizzBuzz?

The FizzBuzz problem requires printing numbers from 1 to 100, with the following rules:

  1. For multiples of 3, print "Fizz" instead of the number.
  2. For multiples of 5, print "Buzz" instead of the number.
  3. For multiples of both 3 and 5, print "FizzBuzz" instead of the number.

TDD Process Overview

The TDD process follows a simple cycle, often referred to as Red-Green-Refactor:

  1. Red: Write a failing test.
  2. Green: Write just enough code to pass the test.
  3. Refactor: Clean up the code while ensuring all tests still pass.

Step 1: Write the First Test (Print Numbers)

Red: Write the Failing Test

In this step, we will create a test to verify that the fizzBuzz function correctly prints numbers from 1 to 100.

  1. Create a test file named fizzbuzz.test.js if you haven't already.

  2. Add the following code to the test file:


test('prints numbers from 1 to 100', () => {
  const result = fizzbuzz();
  expect(result[0]).toBe(1);  // The first element should be 1
  expect(result[99]).toBe(100); // The last element should be 100
});

Green: Write the Minimum Code

Implement the fizzBuzz function to make the test pass.

export const fizzbuzz = () => {
    const result = [];
    for (let i = 1; i <= 100; i++) {
    result.push(i);
  }
    return result;
  }

Quizz Time

Time to see if you've been paying attention—don't worry, it's just between you and the quiz... no pressure, no judgment, no one will know (unless you tell them)!

What is the first step in the TDD process?

Why do we write tests first in TDD?

What do you do after writing a failing test?

Another exercise ?

Exercise: Roman Numerals Converter

Problem Statement:

Write a function that converts an integer (between 1 and 3999) into its corresponding Roman numeral representation.

Roman Numeral Rules:

  • Roman numerals are represented by seven symbols:

  • I - 1

  • V - 5

  • X - 10

  • L - 50

  • C - 100

  • D - 500

  • M - 1000

  • The following combinations are used to form numbers:

  • II - 2

  • III - 3

  • IV - 4 (5 - 1)

  • VI - 6 (5 + 1)

  • IX - 9 (10 - 1)

  • XII - 12 (10 + 2)

  • XX - 20

  • XL - 40 (50 - 10)

  • LX - 60 (50 + 10)

  • XC - 90 (100 - 10)

  • CXX - 120

  • CD - 400 (500 - 100)

  • DC - 600 (500 + 100)

  • CM - 900 (1000 - 100)

  • MCMXC - 1990 (1000 + 1000 - 100 + 1000 - 10)

Input:

  • An integer num (1 ≤ num ≤ 3999).

Output:

  • A string representing the Roman numeral equivalent of the input integer.

Examples:

  1. Input: 3 Output: "III"

  2. Input: 4 Output: "IV"

  3. Input: 9 Output: "IX"

  4. Input: 58 Output: "LVIII" Explanation: L = 50, V = 5, III = 3.

  5. Input: 1994 Output: "MCMXCIV" Explanation: M = 1000, CM = 900, XC = 90, IV = 4.

Task:

  1. Write Failing Tests First (Red Phase):
  • Start by writing unit tests for each conversion case.
  1. Implement the Conversion Logic (Green Phase):
  • Write the code that converts the integer to a Roman numeral to pass the tests.
  1. Refactor the Code (Refactor Phase):
  • Optimize the implementation without breaking the functionality as validated by the tests.