Testing with PhantomJS and Jasmine


Durandal provides the Durandal Test Framework for unit testing. This test framework uses PhantomJS and Jasmine. As shipped with Durandal, it's focused on testing Durandal's own internal components, but it can easily be adapted for your own unit testing needs.

You can obtain the test framework by downloading the entire Durandal project using git:

git clone https://github.com/BlueSpire/Durandal.git

Note: If you're not on Windows, you'll also need to install PhantomJS on your system, since the PhantomJS that comes with the Test Framework is an .exe.

In your own work, you're probably not going to want to use the entire Durandal project -- you may start with a starter kit such as the HTML Starter Kit, or even with your own custom setup. For the moment, the Starter Kits don't include the Test Framework, which is why you need to get it from the repository directly.

Once you download the testing framework, you will need to update it's configuration. To do this edit spec.html in the test directory. In that file, you'll see that require is configured with some paths:

paths: {
    'specs': '../test/specs/',
    'text': '../lib/require/text',
    'durandal': 'durandal/js',
    'plugins' : 'plugins/js',
    'transitions' : 'transitions/js',
    'knockout': '../lib/knockout/knockout-2.3.0',
    'jquery': '../lib/jquery/jquery-1.9.1'

For the HTML Starter Kit, with the test directory copied into the top-level directory at the same level as lib, css, and app, you only have to change three of them:

'durandal': '../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '/lib/durandal/js/transitions',

In general, you just need to find the durandal, plugins, and transitions directories and set the paths appropriately. It's also helpful to add a path to the app directory where your code will live:

'app': '../app',

You can test your paths by removing the existing test modules from test/specs (which will no longer work, since they are for Durandal's internal testing) and replacing them with a new, dummy test module such as:

define(['viewmodels/flickr'], function (flickr) {
    describe('', function(){
        it('returns true', function () {

This sets up testing for the flickr module that ships with the HTML Starter Kit. If you're using some other setup, you'll need a different test. But this shows how it's done. It doesn't test every path, but since the flickr module uses the durandal and plugin paths, it tells you whether you're on the right track.

To run the test type the following on the command prompt:

$ phantomjs spec.js

You'll know that you don't have the paths set correctly if you get an error like the following, which leads to a hang of PhantomJS:

Running spec files: specs/mytest.spec
Error: Script error

  file:///Users/garyrob/Source/Durandal%20Projects/HTML%20StarterKit%20(Durandal%202.0)%20Exp%202/lib/require/require.js:12 in C

If all is well, you should see something like:

Running spec files: specs/mytest.spec

1 spec, 0 failures in 0.002s.

Now you're ready to unit test your new Durandal project!