Test-Driven React with Karma and Webpack: #2 Game Logic

This article continues from the first instalment in this series where we set up the JavaScript environment with Karma to run begin test-driving Conway's Game of Life.

Alright, this time we are going to finish off test-driving the game logic. Let's jump right in with the next test.

Test-Driving the Game Module

Now, we want to introduce the ability to set a cell in the grid.  The following test will make sure that we can set a single cell in the grid:

	describe('Game of Life', function () {
	var game;
	beforeEach(function () {
	game = Game(30);
	});
	//...other tests
	it('should set cell', function () {
	game.setCell(1,1);
	expect(game.grid()[1][1]).toBe(1);
	});
	});

view raw gistfile1.js hosted with ❤ by GitHub

Running the karma start command now will run red because the setCell method is not defined yet.  Not to worry, let's implement it now:

Now run the following command:

$ karma start

You should now see 2 tests running green!

Conway's Game of Life has 4 rules:

1. Any live cell with fewer than two live neighbours dies, as if caused by under-population.
2. Any live cell with two or three live neighbours lives on to the next generation.
3. Any live cell with more than three live neighbours dies, as if by overcrowding.
4. Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

Here are the tests for the first rule:

	describe('Any live cell with fewer than two live neighbours dies, as if caused by under-population.', function () {
	it('should kill cell with no live neighbours', function () {
	game.setCell(3,3);
	game.nextFrame();
	expect(game.grid()[3][3]).toBe(0);
	});
	it('should kill cell with one live neighbour', function () {
	game.setCell(3,2);
	game.setCell(3,3);
	game.nextFrame();
	expect(game.grid()[3][3]).toBe(0);
	});
	it('should kill cell with one live neighbour in the previous row', function () {
	game.setCell(2,2);
	game.setCell(3,3);
	game.nextFrame();
	expect(game.grid()[3][3]).toBe(0);
	});
	it('should kill cell with one live neighbour in the next row', function () {
	game.setCell(4,4);
	game.setCell(3,3);
	game.nextFrame();
	expect(game.grid()[3][3]).toBe(0);
	});
	});

view raw gistfile1.js hosted with ❤ by GitHub

This describe needs to be nested inside the original describe in order to apply the beforeEach to each of the tests. Let's get that to pass by adding the nextFrame function. The nextFrame function is where most of the game is implemented.  It represents one generation in The Game of Life.  It will use the existing state of the internal data structure _grid and use the rules of the game to mutate the game state.

	var nextFrame = function () {
	function countRow(row, prevColumn, nextColumn, isNotCurrent) {
	var result = 0;
	if (row) {
	if (prevColumn) {
	result += row[prevColumn];
	}
	if (nextColumn) {
	result += row[nextColumn];
	}
	if (isNotCurrent) {
	result += row[prevColumn + 1]
	}
	}
	return result;
	}
	var gridClone = _grid.map(function (arr) {
	return arr.slice();
	});
	for (var x = gridClone.length - 1; x >= 0; x--) {
	var currentRow = gridClone[x],
	prevRow = null,
	nextRow = null;
	if (x > 0) {
	prevRow = gridClone[x - 1];
	}
	if (x < (gridClone.length - 1)) {
	nextRow = gridClone[x + 1];
	}
	for (var y = currentRow.length - 1; y >= 0; y--) {
	var count = 0,
	prevColumn = null,
	nextColumn = null;
	if (y > 0) {
	prevColumn = y - 1;
	}
	if (y < (currentRow.length - 1)) {
	nextColumn = y + 1;
	}
	count += countRow(prevRow, prevColumn, nextColumn, true);
	count += countRow(nextRow, prevColumn, nextColumn, true);
	count += countRow(currentRow, prevColumn, nextColumn);
	if (count < 2) {
	_grid[x][y] = 0;
	}
	};
	};
	};
	return function (size) {
	init(size);
	return {
	grid: grid,
	setCell: setCell,
	nextFrame: nextFrame
	};
	};

view raw gistfile1.js hosted with ❤ by GitHub

The code above is mostly concerned with counting neighbour cells and protecting against hitting the boundary of the grid.  In Conway's Game of Life, each cell has 8 neighbours.  However, if the cell is against the edge of the grid, it could have only 5.  And if the cell is in the corner of the grid, only 3.  Once the neighbour count is done, the 1st rule is straight forward:

	if (count < 2) {
	_grid[x][y] = 0;
	}

view raw gistfile1.js hosted with ❤ by GitHub

The second rule tests are next:

	describe('Any live cell with two or three live neighbours lives on to the next generation.', function () {
	it('should save cell with two live neighbours', function () {
	game.setCell(3,2);
	game.setCell(3,4);
	game.setCell(3,3);
	game.nextFrame();
	expect(game.grid()[3][3]).toBe(1);
	});
	it('should save cell with three live neighbours', function () {
	game.setCell(3,2);
	game.setCell(3,4);
	game.setCell(4,4);
	game.setCell(3,3);
	game.nextFrame();
	expect(game.grid()[3][3]).toBe(1);
	});
	it('should save cell with three live neighbours on different rows', function () {
	game.setCell(2,2);
	game.setCell(3,4);
	game.setCell(4,4);
	game.setCell(3,3);
	game.nextFrame();
	expect(game.grid()[3][3]).toBe(1);
	});
	});

view raw gistfile1.js hosted with ❤ by GitHub

The surprising thing about these tests, is that they all pass without any changes to the code! This is because at the moment our original rule covers both cases.  Let's now add tests for the 3rd rule of the game:

	describe('Any live cell with more than three live neighbours dies, as if by overcrowding.', function () {
	it('should kill cell with four live neighbours on different rows', function () {
	game.setCell(2,2);
	game.setCell(3,4);
	game.setCell(4,4);
	game.setCell(4,3);
	game.setCell(3,3);
	game.nextFrame();
	expect(game.grid()[3][3]).toBe(0);
	});
	it('should kill cell with five live neighbours on different rows', function () {
	game.setCell(2,2);
	game.setCell(3,4);
	game.setCell(4,4);
	game.setCell(4,3);
	game.setCell(4,2);
	game.setCell(3,3);
	game.nextFrame();
	expect(game.grid()[3][3]).toBe(0);
	});
	});

view raw gistfile1.js hosted with ❤ by GitHub

Now the tests will run red because now we are introducing the rule that if there are over 3 neighbours the cell dies. And before we were only catering for the case where there were under 2 live neighbours. Let's fix that by very slightly adjusting our rule logic:

	if (count < 2 || count > 3) {
	_grid[x][y] = 0;
	}

view raw gistfile1.js hosted with ❤ by GitHub

Now that we added that a cell dies when live neighbours are greater than 3, everything works as expected. Almost done, we just have to add tests for the final rule:

	describe('Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.', function () {
	it('should set cell with three live neighbours on different rows', function () {
	game.setCell(2,2);
	game.setCell(3,4);
	game.setCell(4,4);
	game.nextFrame();
	expect(game.grid()[3][3]).toBe(1);
	});
	});

view raw gistfile1.js hosted with ❤ by GitHub

Finally, this test is asserting that if we have exactly 3 live neightbors, then the cell becomes alive as well. At first this runs red, but let's update our code to finish off the game:

	if (count < 2 || count > 3) {
	_grid[x][y] = 0;
	}
	if (count === 3) {
	_grid[x][y] = 1;
	}

view raw gistfile1.js hosted with ❤ by GitHub

Adding the final completes the game logic for Game of Life! Running the command $ karma start, should now show all tests passing.  You can see all of the tests and code at the completed repository if you get into any trouble.

Ok, now we are in the position to add the environment for React and start to build up our web components.  This will be topic of the next instalment.