JavaScript Unit Testing with QUnit

Recently, I’ve been trying to learn more about the Reactive Extensions library (currently still in Microsoft DevLabs) which I’ve blogged about previously. Since then Microsoft have pushed out a JavaScript version of the library and published a couple of Hands-on Labs for both the .NET and JavaScript versions. I thought I’d start looking at the JavaScript version as well. However, since the lab makes use of the jQuery JavaScript library it helps to be familiar with it too. So I’ve spent some time with jQuery as well. This in turn led me to realise that I needed to learn more about JavaScript in general.

In following Matthew Podwysocki’s Rx for JavaScript tutorials (not got very far yet) I noticed that he makes use of QUnit, a JavaScript unit testing library that is an offshoot of jQuery. So I made a diversion into this. It turns out that there are a number of unit testing libraries for JavaScript, but I’d not bothered to look into them before. Although QUnit is an offshoot of jQuery, and is what jQuery itself uses to test jQuery, it can be used for generic JavaScript. I have a number of JavaScript utility methods so after an initial play with QUnit I thought I’d try creating a few tests. Lo and behold I discovered a bug in the first method I tried.  Ah, the benefits of unit testing.

There’s a one-page runnable example on the home page and a couple of tutorial links. Following the lead of the second tutorial I created a web site in Visual Studio, added the tester page and then separate “project under test” and unit tests JavaScript files.

<script type="text/javascript" src="Scripts/qunit.js"></script> 
<!-- Library -->  
<script type="text/javascript" src="Scripts/utility.js"></script>
<!-- Tests -->  
<script type="text/javascript" src="Scripts/tests.js"></script>  

I have a method called isInteger(text) that checks whether a text entry is a [positive] integer. Its unit tests are:

/// <reference path="utility.js" />
module('isInteger Tests');

test('isInteger_positiveInteger_true', function () {
  var text = '32';
  ok(isInteger(text), text + ' is an integer');
})

test('isInteger_negativeInteger_false', function () {
  var text = '-32';
  ok(!isInteger(text), text + ' is not an integer');
})

test('isInteger_zero_true', function () {
  var text = '0';
  ok(isInteger(text), text + ' is an integer');
})

test('isInteger_decimal_false', function () {
  var text = '32.3';
  ok(!isInteger(text), text + ' is not an integer');
})

test('isInteger_alpha_false', function () {
  var text = 'abc';
  ok(!isInteger(text), text + ' is not an integer');
})

test('isInteger_alphanumeric_false', function () {
  var text = 'abc123';
  ok(!isInteger(text), text + ' is not an integer');
})

test('isInteger_whitespace_false', function () {
  var text = ' ';
  ok(!isInteger(text), 'Whitespace text is not an integer');
})

test('isInteger_empty_false', function () {
  var text = '';
  ok(!isInteger(text), text + 'Empty text is not an integer');
})

QUnit produces out put like this (showing tests 1 to 5 for isInteger with some tests collapsed):

This is just the simplest usage of QUnit. It has some more assertions and also an asynchronous testing capability. It is this that Matthew Podwysocki uses in one of his Rx for JavaScript blog posts.