Test Driven Development with JavaScript

Unit testing is one of the most important aspects of computer programming however it is often overlooked and not taught in great lengths at school. Lets start with some basics.

What is unit testing?

Unit testing is a software testing method by which individual units of code are tested to determine if they are fit to use.

How to write unit tests?

To properly understand unit test development, the developer needs to change his mindset on the way he writes code. While approaching the new implementation they have to code, they must first write the unit test, make sure it fails, and they write the code to pass the test.

For example:

You are given the task of write a function that returns the square root of the given number. First, we write the test of what we want to happen.

it ("should return the exponent square of given number" , function(){
     var result = powerOfTwo(6);
     expect(result).toEqual(36);
)};

When you run this test it will fail because we do not have the squareRoot function. The next step is to write the function and run the test again until it passed.

function powerOfTwo(a){
    return a * a;
}

When you run the test again it will pass and this is the essence of test driven development. Test first, code after.

Setting up the environment

In order to start testing, you are going to need two things, a runner and atesting framework. The runner is in charge of launching the browser and running your code against the testing framework. While the testing framework is in charge of all the assertions and the code that tests your application.

Let's get started.

  • Download NodeJS
  • http://nodejs.org/
  • Navigate to your project's root folder in your command line.
  • Install karma and jasmine
npm install -g karma-cli
    npm install karma-jasmine
  • Install Chrome web driver
npm install karma-chrome-launcher
  • Once you have Karma install create the config.js by typing the following
karma init

This guide will help you build the karma configuration file.

a. Which testing framework do you want to use ? jasmine

b. Do you want to use Require.js ? no

c. Do you want to capture any browsers automatically ? Chrome

d. What is the location of your source and test files ?

*js/*.js*
    *test/**/*.spec.js*

e. Should any of the files included by the previous patterns be excluded ?Enter

f. Do you want Karma to watch all the files and run the tests on change?true

Put it to the test!

  1. Create a js folder and a test folder. You should have the following structure.
project-name
         |
         ---js
               |
               ---myFile.js
         ---test
               |
               |
              ---myFile.spec.js
               |
               |
         ---karma.conf.js
  1. In your myFile.spec.js copy and paste the following code:
describe("testing myFile", function() {
         it ("should return the exponent square of given number", function() {
          var result = powerOfTwo(8);
          expect(result).toEqual(64);
     });
});
  1. Run karma
karma start karma.conf.js
  1. The test will fail since we have not written the squareRoot function.

  2. On myFile.js copy and paste the following code.

function powerOfTwo(a){
    return a * a;
}
  1. Run karma again and the test will pass.

In this tutorial we touched the very basic of unit testing. Hopefully you enjoyed it. For more posts please follow me.