Running QUnit tests on TeamCity

Let’s face it, it doesn’t make sense to keep and maintain unit tests not executed on a continuous basis. In my previous post, I looked at a unit test framework for JavaScript called QUnit. While commonly used unit test runners like NUnit, JUnit and MSTest have great support on TeamCity, there is no build-in support for executing QUnit tests (yet). During my recent adventures with QUnit, I wanted to be able to execute my new and shiny QUnit-tests on TeamCity. It turned out that it was almost as easy as integrating the supported framework.

Red Badger implemented a nice NuGet package called QUnitTeamCityDriver. The package consists of two JavaScript-files: QUnitTeamCityDriver.js and QUnitTeamCityDriver.phantom.js. The first file contains logic to output results from running the QUnit tests to a format understandable by TeamCity. This file should be referenced just after the reference to QUnit.js in your tests. The second file is used on TeamCity to integrate with PhantomJS. PhantomJS is a windowless browser with a nice JavaScript API to control it all.

Before we dig into the configuration on TeamCity, we need to specify a HTML-container referencing all the js-files containing unit-tests. This is probably the biggest flaw right now because ReSharper does a nice job avoiding this container. What you need is a HTML-file looking that looks like this:

<!DOCTYPE html>
<html>
	<head>
		<title>JavaScript Tests</title>
		<link rel="stylesheet" href="qunit.css" />
		<script type="text/javascript" src="jquery-1.7.1.js"></script>
		<script type="text/javascript" src="qunit.js"></script>
		<script type="text/javascript" src="QUnitTeamCityDriver.js"></script>
	</head>
	<body>
		<h1 id="qunit-header">QUnit example</h1>
		<h2 id="qunit-banner"></h2>
		<div id="qunit-testrunner-toolbar"></div>
		<h2 id="qunit-userAgent"></h2>
		<ol id="qunit-tests"></ol>
		<div id="qunit-fixture">test markup, will be hidden</div>
		<script type="text/javascript" src="tests.js"></script>
	</body>
</html>

The file contains some basic HTML elements and references to jQuery, QUnit and QUnitTeamCityDriver. At the bottom, I reference the tests.js-file which I implemented in my previous blog post. So what’s the main problem with this file? Each time a new js-file containing test are added to our project, we need to manually add a reference to this file at the bottom. I haven’t found a nicer solution to this problem, so until a better approach emerges, I’ll continue using this file.

In order to get the tests running on TeamCity, you need to download and extract PhantomJS on TeamCity. Unfortunately, PhantomJS doesn’t come as a NuGet package, which is why you need to do this manually. Place PhantomJS in a folder like c:\phantomjs.. In order to get the tests running on TeamCity, you need to reference phantomjs through NuGet. Add a new build step just after you run your unit tests called, “Run JS tests”, or another name of your choice. Your settings should look like this:

qunitteamcity

In the text area to the right of “Command parameters”, I reference two files. The first file is the QUnitTeamCityDriver.phantom.js-file which came with the QUnitTeamCityDriver NuGet-package. The second is a reference to the html-file created previously in this blog post. Save the build-step and Run the build. If everything looks green, you will be able to see the QUnit-tests alongside your NUnit-tests in the “Test” tab under each build. Simple and nicely integrated!