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:

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:

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.

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:

The second rule tests are next:

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:

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:

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:

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:

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.