Running KnockoutJS Unit Tests with Chutzpah

In my previous blog post I discussed some of the specifics involved with unit testing JavaScript code that uses KnockoutJS and Web API. This blog posts builds on the example discussed in the previous post. If you missed that post you can read more about it here.

While unit testing our ViewModel was all working great, the real icing on the cake is getting JavaScript unit testing working without a browser, integrated into Visual Studio. And it would be even better if the test runs and results could be integrated into the Visual Studio Test Explorer. That’s where two separate Visual Studio extensions come in to play: the Chutzpah JavaScript Test Runner and the Chutzpah Test Adapter for Visual Studio. Both can be installed directly from the Extensions and Updates window in Visual Studio.

Chutzpah Extensions

The first extension allows you to right-click on your tests.js file and click a new “Run JS Tests” menu item to run your QUnit tests without launching a browser.

Run JS Tests

In order to for this to work, though, you must tell Chutzpah where to find the other JS files that your tests require (as it will not be launching your tests.html in a browser). To do this, add the following lines to the top of our tests.js file:

/// <reference path="../Scripts/jquery-1.9.1.js" />
///
/// <reference path="../Scripts/knockout-2.2.1.debug.js" />
///
/// <reference path="../Scripts/app/namespace.js" />
/// <reference path="webapiclient.stub.js" />
///
/// <reference path="../Scripts/app/model.js" />
/// <reference path="../Scripts/app/viewmodel.js" />

This is the same format used by the _references.js file that Visual Studio uses for JavaScript IntelliSense. With these lines in place, you can now right-click the tests.js file and click Run JS Tests, seeing the results right within Visual Studio:

Test Results in Visual Studio

Even cooler, with the Test Adapter installed, you can click CTRL+R, A to run all of the unit tests in your solution, and your QUnit tests will be run too, with their results displayed within the Visual Studio testing UI:

Test Results in Test Explorer

There is one catch I’ve found when using Chutzpah as a JavaScript test runner for KnockoutJS projects: if you right-click your tests.js file and click “Run JS Tests in browser”, Chutzpah will automatically generate an HTML file for the JS file and display that in a browser.

Run JS Tests in browser

However, the default template for the HTML used by Chutzpah puts the JavaScript references in the HTML head instead of at the bottom of the body. Without any changes, using the “Run JS Tests in browser” feature from Chutzpah, along with KnockoutJS, will result in an error running tests:

Test Results Wrong Order

To fix this you need to find and edit the HTML template used by Chutzpah. Search your C: drive for the text “Chutzpah” – under Windows Vista and up this should be located in a subfolder of C:UsersUserNameAppDataLocalMicrosoftVisualStudio. For instance, the path on my system is:

C:UsersNathanialAppDataLocalMicrosoftVisualStudio11.0Extensions30spjmvi.u3x

Once you have found the folder, open the TestFilesQUnitqunit.html file:

<!DOCTYPE html>
<html>
<head>
    @@TestFrameworkDependencies@@
    @@ReferencedCSSFiles@@
    @@ReferencedJSFiles@@
    @@TestJSFile@@
</head>

<body>
    <h1 id="qunit-header">Unit Tests</h1>
    <h2 id="qunit-banner"></h2>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
    <div id="qunit-fixture"></div>
</body>
</html>

Move the lines referencing the JS files to the bottom of the body, leaving the CSS reference in the head tag:

<!DOCTYPE html>
<html>
<head>
    @@ReferencedCSSFiles@@
</head>

<body>
    <h1 id="qunit-header">Unit Tests</h1>
    <h2 id="qunit-banner"></h2>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
    <div id="qunit-fixture"></div>
    @@TestFrameworkDependencies@@
    @@ReferencedJSFiles@@
    @@TestJSFile@@
</body>
</html>

Save your changes and that’s it! You can now delete the tests.html file from the project if you’d like and use Chutzpah to run tests both within the Visual Studio IDE and within the browser.

Run JS Tests in browser - Fixed

One thought on “Running KnockoutJS Unit Tests with Chutzpah

  1. Matthew Manela (@mmanela)

    I am glad Chutzpah is working for you. I am the main developer on Chutpzpah and one of the features I am planning for the next release is to allow you to specify your own custom HTML test harness templates. This should give you a less *hacky* way to have Chutzpah generate html that works for you.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>