How to employ test driven JavaScript using QUnit

Test driven development is now widely accepted as a JavaScript workflow, and it’s something we should all embrace because it saves us a great deal of time when coding.

In this article I’ll introduce you to QUnit, a testing framework that will help you spot errors and bugs in your code.

Why use test driven development?

At first, this process may seem complex and tedious. Creating a test for all of your functions does take some time, but it will save you hours of debugging at the end of the project cycle.

Not only that, but you’ll save yourself the blushes we all get when a client emails us about a bug they’ve found.

As a further benefit, you’ll find that this workflow also benefits cross-browser testing, and using this approach you can test in several browsers straight out of the box.

Why QUnit?

Accepting that the principle is sound, why should you use QUnit? Well, for starters QUnit was created by the same amazing people who gave birth to the jQuery framework. As such, QUnit is the test framework of choice for jQuery developers.

In addition, using QUnit is really simple. It’s a great way to get started with test driven development, as we’ll now see.

Getting started

Once you’re ready to start testing functions with QUnit, the first thing to do is include QUnit’s JavaScript and CSS files, like so:

<link rel=“stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css" type="text/css" media="screen">
<script src=“//code.jquery.com/qunit/qunit-1.14.0.js”></script>

After that, include the JavaScript file that contains your functions.

Once you’ve done that, add the following HTML after your body tag:

    <h1 id="qunit-header">QUnit Test Suite</h1>
    <h2 id="qunit-banner"></h2>
    <div id="qunit-testrunner-toolbar"></div>
    <h2 id="qunit-userAgent"></h2>
    <ol id=“qunit-tests"></ol>

This is the boilerplate HTML QUnit needs to show the results of all the tests you perform.

For the purposes of demonstration, I’m going to write two simple functions, one that will multiply two numbers and return the result, and another that will test if a number is odd:

function multiply(a,b) {
  return a*b;
}
function isOdd(n) {
   return Math.abs(n) % 2 == 1;
}

Using these two functions we will be able to run a variety of tests.

If for instance I wanted to check if the multiply function with the values 2,3 would return the value 6 I could write:

test('multiply()', function() {
    equal(multiply(2,3), 6, '3 multiplied by 2 is 6');
});

As you can see the syntax is pretty straight forward, we call the test method and in it we pass two parameters , the first one is the function we want to test and the second one is a callback function, this is where our tests will be:

equal(multiply(2,3), 6, ‘3 multiplied by 2 is 6’);

Inside the function I called the equal with three parameters, the first one is the function with the values in it, then I typed the number I expected and finally a message to show in our page. (This last one is optional but a visual representation is always nice.)

What this assertion does is it uses the simple comparison operator (==) to compare the actual and expected arguments and if they are equal the test passes, if not it doesn’t. This means that if I place another test like:

equal(multiply(2,2), ‘4’, '2 multiplied by 2 is 4');

This will pass even though I am testing against a string because it only tests the value. If you wish to test the value and also the type you should use strictEqual:

strictEqual(multiply(2,2), ‘4’, '2 multiplied by 2 is 4');

If you use this instead you will see that this test will fail just like we’d expect it to.

Our second function checks if a number is odd and to do that we use ok, which will test if the function returns true or false. In our case if we insert an odd number the function will return true, otherwise it will return false. So to test this we use:

test('isOdd()', function() {
    ok(isOdd(3), 'Three is an odd number');
    ok(isOdd(2), 'Two is not an odd number');
});

As you’d expect, the first test runs without a problem, the second throws an error.

Conclusion

This is simply the beginning of test driven development and QUnit. This framework has a lot more to it.

You can take a look at all the asserts here and see an example of our test in this pen ready for you to add your own tests and functions.

Do you practice test driven development? Have you trialled QUnit? Let us know in the comments.