Tools of trade
As I mentioned before, you need an IDE, for this article I choose JetBrains WebStorm 2.1- Zend Studio 8 or PHPStorm 2.* are also possible (these are the other tools I´ve given a try and it was also working). Now do we need a way to execute our tests – switching to a browser and refreshing a testsite is cheating at this moment although it would work anyway! What we need is anything to trigger the execution of the tests from the IDE (as the guys from the workshop have done). Therefore we need jsTestDriver, a testframework combined with a test server. By the way, I have written an article about integrating jsTestDriver into your continious integration environment during the Mayflower advent calendar series, maybe this will be also interesting for you. Coming back to our setup for the test driven development session. You can easily integrate jsTestDriver as a plugin into WebStorm (this plugin is also available for Zend Studio and PHPStorm).
Adding the jsTestDriver assertion framework to your supported libraries…
… will help you in many situations, e.g. for a smart code completion
Start your engine(s)…
Before I will write the first test, I need to start the jsTestDriver server (local) and add a browser to the list of test browsers. This is called capture and will be done by opening the URL with a browser of your choice, for this first scenario I choose Googles Chrome and Firefox. By the way it´s also possible to capture a remote browser, e.g. an Internet Explorer running on a virtual image.
At the moment the server is not running
Now the server is running and two browsers are captured
From this point our engines are running and we can start working on the coding kata. The kata called Fizzbuzz want us to substitute all numbers from 0 to 100 that are divisible by three with fizz, all numbers divisible by five with buzz and all numbers divisible by fifteen with fizzbuzz.
Test driven development
The test driven development process is an iterative process where each iteration consists of these steps:
- Write a test
- Execute the tests and watch the (new) test fail
- Make the test pass
- Refactor to remove duplication
Let´s begin with a first test. For this you can write the test by hand or you use the shortut ctrl+N on Mac or Alt+Insert on any other operating system for creating a stub of new testcase.
This function generates a new testcase for you
I prefer the shortcut and I called the test case “test say fizz”. My first pretty simple testcase looks like this:
You might think writing such easy tests will be senseless and not worth doing it, but that´s not true. It´s one of the key concepts of test driven development to do small steps and iterate in more steps to the right solution.
Next step: execute the test!
Since we have everything set up properly we can either use another shortcut to run the tests (shift + ctrl + F10) or press the run button at the header toolbar. In addition, you can use the contextual operation of the config-file “RUN” as well. We learn two things from our first test run – first, we see that we can trigger the execution of the tests from our IDE- thats great! Secondly, our tests fails- not so great! But ok, as we haven’t actually coded anything yet, so let´s make our test green!
Since there is no function play() the test fails
I implemented a first method play() which says fizz. Restarting the tests with my new learned (and loved) shortcut – cool, our tests are green!
Well done! Our first test runs fine.
For my next babystep I will write a test for any other number unlike three, five or fifteen. Once again I use the shortcut ctrl+N to generate a new testcase and write down another short assertion.
As you can imagine, this this will fail- and you are right. Executing this test will turn the lamp red, our test fails. We have to do a small change in our fizzbuzz function to turn the lamp green, look at this lines of ode:
I have done the first iteration and a first part of the specification is implemented, now it´s up to you to finish this pretty easy kata I will not copy and paste the next lines of code and screenhsots here.