JavaScript Testing

Unit Testing with Jest

CSCI 4513

Week 7, Lecture 13

Today's Learning Objectives

🎯 Understand testing fundamentals
🎯 Write unit tests with Jest
🎯 Practice Test-Driven Development
🎯 Measure code coverage

Norse Mythology Connection

Brokk and Eitri Forging Mjolnir

Constant testing prevented flaws during forging, just as continuous testing ensures code quality throughout development.

The Tale:

Brothers Brokk and Eitri wagered they could forge treasures rivaling any others. Eitri forged while Brokk worked the bellows—maintaining exact temperature without stopping, even for a moment, or the enchantments would fail.

Loki, desperate to disrupt them, transformed into a fly and bit Brokk repeatedly. Brokk didn't flinch through two treasures. But during Mjolnir's forging, Loki bit his eyelid. For just a moment, Brokk brushed blood from his eyes, briefly stopping the bellows. That tiny lapse caused Mjolnir's only flaw—a slightly short handle. Despite this, Mjolnir became the mightiest weapon in all realms.

Constant Vigilance

// Brokk's constant testing
describe('Mjolnir functionality', () => {
    test('hammer returns when thrown', () => {
        const mjolnir = new Hammer();
        mjolnir.throw();
        expect(mjolnir.inHand).toBe(true);
    });

    test('only Thor can lift it', () => {
        expect(() => mjolnir.liftBy('Loki')).toThrow();
    });
});

// Loki's interference - skipping tests
test.skip('performance test', () => {
    // "I'll test this later" - causes flaws
});

Reflection Questions

Click each card to reveal thoughts!

❓ Question 1

Brokk maintained steady work despite distractions. How do you maintain test discipline when deadlines pressure you?

❓ Question 2

One brief lapse created Mjolnir's only flaw. What flaws have you seen from skipping "just one test"?

❓ Question 3

Mjolnir was still mighty despite the flaw. When is "good enough with tests" better than "perfect but untested"?

What is Test-Driven Development?

TDD: Write tests BEFORE writing the code they test.

The TDD Cycle (Red-Green-Refactor):

Red: Write a failing test
Green: Write minimal code to make it pass
Refactor: Improve the code while keeping tests passing

💡 Key Insight: Tests define what your code should do before you write it!

Benefits of TDD

✅ Catches bugs early - Before they reach production
✅ Better architecture - Encourages modular, decoupled code
✅ Living documentation - Tests show how code should work
✅ Confidence to refactor - Tests catch regressions
✅ Forces you to think - About requirements before coding
✅ Faster debugging - Narrow down issues quickly

Remember: It's not about the syntax, it's about the TDD philosophy and mindset!

Introducing Jest

Jest is a delightful JavaScript testing framework with a focus on simplicity.

Why Jest?

Zero configuration for most projects
Fast and parallelized test execution
Built-in code coverage reports
Great error messages
Mocking and spying capabilities

# Install Jest
npm install --save-dev jest

Your First Jest Test

The Code

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

The Test

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Run it:

npx jest

Common Jest Matchers

// Exact equality
expect(value).toBe(4);

// Object/array equality
expect(data).toEqual({name: 'Thor'});

// Truthiness
expect(value).toBeTruthy();
expect(value).toBeFalsy();
expect(value).toBeNull();
expect(value).toBeUndefined();

// Numbers
expect(value).toBeGreaterThan(3);
expect(value).toBeLessThan(5);

// Strings
expect('team').toMatch(/tea/);

// Arrays
expect(list).toContain('milk');

// Exceptions
expect(() => throwError()).toThrow();

Organizing Tests

Use describe blocks to group related tests:

describe('Calculator', () => {
  describe('add', () => {
    test('adds positive numbers', () => {
      expect(add(2, 3)).toBe(5);
    });

    test('adds negative numbers', () => {
      expect(add(-2, -3)).toBe(-5);
    });
  });

  describe('subtract', () => {
    test('subtracts numbers', () => {
      expect(subtract(5, 3)).toBe(2);
    });
  });
});

Pure Functions Make Testing Easy

A pure function always returns the same output for the same input and has no side effects.

✅ Pure Function

function add(a, b) {
  return a + b;
}

// Easy to test!
expect(add(2, 3)).toBe(5);

❌ Impure Function

let total = 0;
function addToTotal(num) {
  total += num;
  return total;
}

// Hard to test!

The Problem: Tightly Coupled Code

// Hard to test!
function guessingGame() {
  const magicNumber = 22;
  const guess = prompt('guess a number between 1 and 100!');
  if (guess > magicNumber) {
    alert('YOUR GUESS IS TOO BIG');
  } else if (guess < magicNumber) {
    alert('YOUR GUESS IS TOO SMALL');
  } else if (guess == magicNumber) {
    alert('YOU DID IT! 🎉');
  } else {
    return 'INVALID INPUT';
  }
}

⚠️ Problems: Mixes DOM interaction with logic. Can't test without a browser!

The Solution: Decouple!

// Easy to test!
function evaluateGuess(magicNumber, guess) {
  if (guess > magicNumber) {
    return 'YOUR GUESS IS TOO BIG';
  } else if (guess < magicNumber) {
    return 'YOUR GUESS IS TOO SMALL';
  } else if (guess == magicNumber) {
    return 'YOU DID IT! 🎉';
  } else {
    return 'INVALID INPUT';
  }
}

// DOM interaction separated
function guessingGame() {
  const magicNumber = 22;
  const guess = prompt('guess a number between 1 and 100!');
  const message = evaluateGuess(magicNumber, guess);
  alert(message);
}

💡 Now we can test evaluateGuess without touching the DOM!

Mocking: Faking Dependencies

Mocking creates fake versions of functions that always behave exactly how you want for testing.

When to Mock:

External API calls (don't want real network requests)
Database queries (don't want to modify real data)
DOM interactions (don't want to set up a browser)
Time-dependent functions (don't want to wait)

Understanding Mocking

Watch this explanation of mocking in testing:

Mock Function Example

// Create a mock function
const mockCallback = jest.fn(x => x + 1);

// Use it
[1, 2, 3].forEach(mockCallback);

// Test it was called
expect(mockCallback).toHaveBeenCalledTimes(3);

// Test it was called with specific arguments
expect(mockCallback).toHaveBeenCalledWith(1);
expect(mockCallback).toHaveBeenCalledWith(2);
expect(mockCallback).toHaveBeenCalledWith(3);

// Test the results
expect(mockCallback.mock.results[0].value).toBe(2);
expect(mockCallback.mock.results[1].value).toBe(3);
expect(mockCallback.mock.results[2].value).toBe(4);

Testing Best Practices

✅ Test behavior, not implementation - Test what code does, not how
✅ Only test public interfaces - Don't test private methods
✅ One assertion per test (ideally) - Makes failures clear
✅ Test edge cases - Empty arrays, null, undefined, large numbers
✅ Test error conditions - What happens when things go wrong?
✅ Don't test external libraries - Trust that React/Express work
✅ Keep tests fast - Slow tests don't get run

Project: Testing Practice

Your Assignment:

Write tests for these functions, then make the tests pass!

capitalize(string) - Returns string with first character capitalized
reverseString(string) - Returns reversed string
calculator - Object with add, subtract, divide, multiply
caesarCipher(string, shift) - Caesar cipher with wrapping, case preservation, punctuation
analyzeArray(array) - Returns object with average, min, max, length

Walk-Through: `capitalize` — Red

Write the test first in tests/capitalize.test.js. These will fail — that's the point!

const capitalize = require('../src/capitalize');

describe('capitalize', () => {
  test('capitalizes the first character of a string', () => {
    expect(capitalize('hello')).toBe('Hello');
  });

  test('does not change already-capitalized strings', () => {
    expect(capitalize('World')).toBe('World');
  });

  test('leaves a non-letter first character unchanged', () => {
    expect(capitalize('123abc')).toBe('123abc');
  });

  test('handles an empty string', () => {
    expect(capitalize('')).toBe('');
  });
});

💡 Run npm test — you should see failures. Red is good at this stage!

Walk-Through: `capitalize` — Green

Now write src/capitalize.js to make the tests pass:

function capitalize(string) {
  if (string.length === 0) return string;
  return string[0].toUpperCase() + string.slice(1);
}

module.exports = capitalize;

Edge case first — Return early if empty to avoid string[0] being undefined.

string[0].toUpperCase() — Uppercases only the first character.

string.slice(1) — Returns all characters from index 1 onward, unchanged.

💡 Run npm test — all green!

Walk-Through: `reverseString` — Red

Write the test in tests/reverseString.test.js:

const reverseString = require('../src/reverseString');

describe('reverseString', () => {
  test('reverses a simple string', () => {
    expect(reverseString('hello')).toBe('olleh');
  });

  test('reverses a string with spaces', () => {
    expect(reverseString('hello world')).toBe('dlrow olleh');
  });

  test('returns an empty string unchanged', () => {
    expect(reverseString('')).toBe('');
  });

  test('a single character is unchanged', () => {
    expect(reverseString('a')).toBe('a');
  });
});

💡 Run npm test — watch it fail. Red first!

Walk-Through: `reverseString` — Green

Now write src/reverseString.js to make the tests pass:

function reverseString(string) {
  return string.split('').reverse().join('');
}

module.exports = reverseString;

.split('') — Splits the string into an array of individual characters.

.reverse() — Reverses the array in place.

.join('') — Joins the array back into a string with no separator.

💡 Run npm test — all green!

Project: Battleship

Build the classic Battleship game using TDD from the start!

Step-by-Step TDD Approach:

Create Ship class with hit(index) and isSunk()
Create Gameboard to place ships and receive shots
Create Player class for real and computer players
Implement game logic with event listeners
Add UI to display gameboards
Implement ship placement system

Let's Build It Together

Battleship — TDD from the Ground Up

Three Classes to Build:

Ship — name, position, hits, isSunk
Gameboard — 100-cell array, place ships, receive shots
Player — fire shots, prevent duplicates

Coordinate System: A flat 0–99 index for the 10×10 grid. Formula: index = row × 10 + col. So row 2, col 1 → index 21. Moving right = +1, moving down = +10.

Our cycle: Write test → Watch it fail → Write code → Watch it pass

File Structure:

battleship/
├── src/
│   ├── Ship.js
│   ├── Gameboard.js
│   └── Player.js
├── tests/
│   ├── Ship.test.js
│   ├── Gameboard.test.js
│   └── Player.test.js
└── package.json

Step 1: Project Setup

Run these commands to get started:

mkdir battleship && cd battleship
npm init -y
npm install --save-dev jest
mkdir src tests

Then update the "scripts" section of package.json:

{
  "scripts": {
    "test": "jest"
  }
}

💡 Run npm test now — no tests found yet, and that's okay!

Step 2: Ship Tests — Red

Write this in tests/Ship.test.js. These will all fail right now!

const Ship = require('../src/Ship');

describe('Ship', () => {
  test('has the correct name and position', () => {
    const ship = new Ship('destroyer', [20, 21, 22]); // row 2, cols 0–2
    expect(ship.name).toBe('destroyer');
    expect(ship.position).toEqual([20, 21, 22]);
  });

  test('starts with no hits', () => {
    const ship = new Ship('destroyer', [20, 21, 22]);
    expect(ship.hits).toEqual([]);
  });

  test('records a hit at a specific index', () => {
    const ship = new Ship('destroyer', [20, 21, 22]);
    ship.hit(21);
    expect(ship.hits).toContain(21);
  });

  test('is not sunk when partially hit', () => {
    const ship = new Ship('destroyer', [20, 21, 22]);
    ship.hit(20);
    expect(ship.isSunk()).toBe(false);
  });

  test('is sunk when all positions are hit', () => {
    const ship = new Ship('patrol boat', [30, 31]);
    ship.hit(30); ship.hit(31);
    expect(ship.isSunk()).toBe(true);
  });
});

Step 3: Ship Implementation — Green

Write this in src/Ship.js to make your tests pass:

class Ship {
  constructor(name, position) {
    this.name = name;
    this.position = position;
    this.hits = [];
  }

  hit(index) {
    this.hits.push(index);
  }

  isSunk() {
    return this.hits.length >= this.position.length;
  }
}

module.exports = Ship;

position — Array of 0–99 indices the ship occupies. Its length is the ship's size.

hit(index) — Stores the exact index hit, not just a count. Useful for knowing which cells were struck.

isSunk() — Compares array lengths: sunk when the hits count matches the position count.

Run npm test — all 5 tests should pass! ✅

Step 4: Gameboard Tests — Red

Write this in tests/Gameboard.test.js:

const Gameboard = require('../src/Gameboard');
const Ship = require('../src/Ship');

describe('Gameboard', () => {
  test('initializes with 100 empty cells', () => {
    const board = new Gameboard();
    expect(board.board.length).toBe(100);
    expect(board.board[0]).toEqual({ hasShip: null, isShot: false });
  });

  test('places a ship at its position indices', () => {
    const board = new Gameboard();
    const ship = new Ship('patrol boat', [0, 1]);
    board.placeShip(ship);
    expect(board.board[0].hasShip).toBe(ship);
  });

  test('records a hit when shot lands on a ship', () => {
    const board = new Gameboard();
    const ship = new Ship('patrol boat', [5, 6]);
    board.placeShip(ship);
    board.receiveShot(5);
    expect(ship.hits).toContain(5);
  });

  test('marks missed shots on the opponent board', () => {
    const board = new Gameboard();
    board.receiveShot(42);
    expect(board.opponentBoard()[42]).toBe('miss');
  });

  test('knows when all ships are sunk', () => {
    const board = new Gameboard();
    const ship = new Ship('patrol boat', [0, 1]);
    board.placeShip(ship);
    board.receiveShot(0); board.receiveShot(1);
    expect(board.allSunk()).toBe(true);
  });
});

Step 5: Gameboard Implementation — Green

Write this in src/Gameboard.js:

class Gameboard {
  constructor() {
    this.board = Array.from({ length: 100 }, () => ({
      hasShip: null, isShot: false
    }));
    this.ships = [];
  }

  placeShip(ship) {
    ship.position.forEach(index => {
      this.board[index].hasShip = ship;
    });
    this.ships.push(ship);
  }

  receiveShot(index) {
    const cell = this.board[index];
    cell.isShot = true;
    if (cell.hasShip) cell.hasShip.hit(index);
  }

  opponentBoard() {
    return this.board.map(cell => {
      if (cell.isShot && cell.hasShip) return 'hit';
      if (cell.isShot) return 'miss';
      return 'empty';
    });
  }

  allSunk() {
    return this.ships.every(ship => ship.isSunk());
  }
}
module.exports = Gameboard;

Array.from + factory — Creates 100 independent objects. Using .fill({}) would give every cell the same object reference — mutating one would mutate all!

placeShip — The ship already knows where it goes via position. We just mark those cells.

receiveShot — Sets isShot = true on the cell, then tells the ship if it was hit.

opponentBoard — Hides ship locations. Returns only what's been revealed. This is what the AI reads!

Step 6: Player Tests — Red

Write this in tests/Player.test.js:

const Player = require('../src/Player');
const Gameboard = require('../src/Gameboard');
const Ship = require('../src/Ship');

describe('Player', () => {
  test('can fire a shot at an enemy board', () => {
    const player = new Player('Alice');
    const enemy = new Gameboard();
    const ship = new Ship('patrol boat', [0, 1]);
    enemy.placeShip(ship);
    player.fireShot(0, enemy);
    expect(ship.hits).toContain(0);
  });

  test('cannot fire at the same cell twice', () => {
    const player = new Player('Alice');
    const enemy = new Gameboard();
    player.fireShot(5, enemy);
    const result = player.fireShot(5, enemy);
    expect(result).toBe(false);
  });

  test('computer fires at a random empty cell', () => {
    const computer = new Player('CPU', true);
    const enemy = new Gameboard();
    computer.randomShot(enemy);
    const shots = enemy.opponentBoard().filter(c => c !== 'empty');
    expect(shots.length).toBe(1);
  });
});

Step 7: Player Implementation — Green

Write this in src/Player.js:

const Gameboard = require('./Gameboard');

class Player {
  constructor(name, isComputer = false) {
    this.name = name;
    this.isComputer = isComputer;
    this.gameboard = new Gameboard();
  }

  fireShot(index, enemyBoard) {
    const visible = enemyBoard.opponentBoard();
    if (visible[index] === 'empty') {
      enemyBoard.receiveShot(index);
      return true;
    }
    return false;
  }

  randomShot(enemyBoard) {
    const visible = enemyBoard.opponentBoard();
    const available = visible
      .map((cell, i) => cell === 'empty' ? i : null)
      .filter(i => i !== null);
    const index = available[
      Math.floor(Math.random() * available.length)
    ];
    return this.fireShot(index, enemyBoard);
  }
}

module.exports = Player;

Default parameter — isComputer = false means human by default. Pass true for the AI.

fireShot — Reads opponentBoard() first. Returns false if already shot — the rules enforce themselves!

randomShot — Builds a list of available indices, picks one at random. Can't repeat because fireShot rejects non-empty cells.

Run npm test — all tests green! Core is complete! ✅

Battleship Project Tips

⚠️ Do NOT test the DOM! Separate application logic from DOM manipulation.

Remember:

Write tests FIRST, then make them pass
Only test public interfaces, not internal details
Test one method at a time
Run tests frequently - they guide your progress!
Isolate game logic from DOM - keeps code testable

💡 Extra Credit: Drag & drop ships, 2-player mode, smarter AI!

Knowledge Check

Click each card to reveal the answer!

❓ Question 1

What are the benefits of TDD?

❓ Question 2

What are some common Jest matchers?

Knowledge Check (continued)

❓ Question 3

What is tightly coupled code?

❓ Question 4

What are the two requirements for a function to be pure?

❓ Question 5

What is mocking and when would you use it?

Today's Takeaways

You Can Now:

✅ Understand Test-Driven Development philosophy
✅ Write unit tests with Jest
✅ Use common Jest matchers (toBe, toEqual, etc.)
✅ Write pure, testable functions
✅ Decouple code to make it testable
✅ Use mocking for dependencies
✅ Apply testing best practices

📅 Next Class: Midterm Review

📝 Homework: Testing Practice project & Battleship (TDD!)

JavaScript Testing

Unit Testing with Jest

Today's Learning Objectives

Norse Mythology Connection

Brokk and Eitri Forging Mjolnir

Constant Vigilance

Reflection Questions

❓ Question 1

❓ Question 2

❓ Question 3

What is Test-Driven Development?

The TDD Cycle (Red-Green-Refactor):

Benefits of TDD

Introducing Jest

Why Jest?

Your First Jest Test

The Code

The Test

Run it:

Common Jest Matchers

Organizing Tests

Pure Functions Make Testing Easy

✅ Pure Function

❌ Impure Function

The Problem: Tightly Coupled Code

The Solution: Decouple!

Mocking: Faking Dependencies

When to Mock:

Understanding Mocking

Mock Function Example

Testing Best Practices

Project: Testing Practice

Your Assignment:

Walk-Through: capitalize — Red

Walk-Through: capitalize — Green

Walk-Through: reverseString — Red

Walk-Through: reverseString — Green

Project: Battleship

Step-by-Step TDD Approach:

Let's Build It Together

Battleship — TDD from the Ground Up

Three Classes to Build:

File Structure:

Step 1: Project Setup

Step 2: Ship Tests — Red

Step 3: Ship Implementation — Green

Step 4: Gameboard Tests — Red

Step 5: Gameboard Implementation — Green

Step 6: Player Tests — Red

Step 7: Player Implementation — Green

Battleship Project Tips

Remember:

Knowledge Check

❓ Question 1

❓ Question 2

Knowledge Check (continued)

❓ Question 3

❓ Question 4

❓ Question 5

Today's Takeaways

You Can Now:

Walk-Through: `capitalize` — Red

Walk-Through: `capitalize` — Green

Walk-Through: `reverseString` — Red

Walk-Through: `reverseString` — Green