Ben Heymink

Software Developer - Javascript/Angular/node/C++/C#/MAPI/Outlook

Integrating Javascript unit tests with Visual Studio build

In the office where I work, automated Unit testing as part of our nightly build is the norm. We use a variety of test frameworks (NUnit, Google Test, etc.) in order to test a huge amount of native and managed code. Recently however, my team has been writing some fresh javascript code around a new  feature for Exchange 15 (which I can’t go into details about) and we faced a problem around writing and automating Javascript-based unit tests. Ideally we wanted our suite of (javascript) unit tests to be run along side the rest of the more traditional native and managed unit tests, from within our build environment (MSBuild) AND also be accessible to individual developers to execute as part of a local build step.

So how did we do it? The first step was getting hold of QUnit, a Javascript unit test suite capable of executing our tests; in fact, QUnit is apparently used to unit test not only itself, but also JQueryUI, JQuery and JQuery mobile. As per the site, tests are written within a Javascript file using the QUnit ‘Test’ construct:

test( "hello test", function() {
ok( 1 == "1", "Passed!" );
});

The file containing the above test can then be referenced from a simple HTML document, itself including the core QUnit files; a css stylesheet to style the test result output, and the QUnit javascript file, qunit.js, which will execute the tests:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="/resources/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <script src="/resources/qunit.js"></script>
  <script src="/resources/tests.js"></script>
</body>
</html>
(the referenced file, tests.js contains the javascript tests)
With the above setup, we can simply load the HTML document in a browser to see the results of the executed tests:

So that’s all great and groovy, but requires a manual step of launching the document in a browser in order to execute the javascript.

Enter Chutzpah, a command-line javascript test runner. It uses PhantomJS to execute javascript in a headless (read:no window) Webkit browser and also allows us to execute it from the command line. Usage is as simple as specifying the above HTML document as an argument to the Chutzpah runner:

chutzpah.console.exe test.html

Furthermore, we can omit the HTML document altogether and simply specify the raw javascript file! With this in our toolbox, it was as simple as writing a new batch file that we could call as a post-build step:

%~dp0\chutzpah.console.exe %~dp1%2 /silent /timeoutMilliseconds 20000

Our post build step then, looks like this:

IF "$(ConfigurationName)" == "Unit Test" call "$(SolutionDir)..\Common\UnitTest\Chutzpah\HandleJSUnitTests.bat" "..\MyTests\" MyTestFile.js

2 Comments

  1. Very cool! We are just getting into writing more unit tests for our front-end JS and this helps immensely in getting it all setup with our build.

Leave a Reply

Your email address will not be published.

*

© 2017 Ben Heymink

Theme by Anders NorenUp ↑