Running QUnit tests in TeamCity

NOTE: there is an enhanced version in this gist.
Also Qunit now comes with a phantomjs runner in "qunit/addons/phantomjs/runner.js".

In my previous post I shown how to use QUnit and PhantomJS to do continuous testing. In this post I will show how to integrate QUnit to TeamCity; the powerful and user-friendly continuous integration server from JetBrains.

Running the tests is not that complicated. The challenging part is how we can let Teamcity to know the tests results. Teamcity has two options for reading tests results;

  1. By reading an xml report file (from nunit, mstests, junit and lot of other frameworks).
  2. With service messages. Which basically means that our build script write special messages in the standard output that TeamCity can read.

I am used to use option 1 with nunit, but for this case, and since qunit doesn’t generate any xml out of the box we have to use option 2.

The first step is to create a file (which I call QUnit.Teamcity.js), with the following code:

//QUnit.moduleStart({ name })
QUnit.moduleStart = function(settings){
    console.log("##teamcity[testSuiteStarted name='" + + "']");

//QUnit.moduleDone({ name, failed, passed, total })
QUnit.moduleDone = function(settings){
    console.log("##teamcity[testSuiteFinished name='" + + "']");

//QUnit.testStart({ name })
QUnit.testStart = function (settings){
    console.log("##teamcity[testStarted name='" + + "']");

//QUnit.testDone({ name, failed, passed, total })
QUnit.testDone = function(settings){
    if(settings.failed > 0){
        console.log("##teamcity[testFailed name='" + + "'"
                     + " message='Assertions failed: " + settings.failed + "'"
                     + " details='Assertions failed: " + settings.failed + "']");
    console.log("##teamcity[testFinished name='" + + "']");

MMmmmmOkaay, but what is this?

  • QUnit.moduleStart/moduleDone/testStart/testDone, are extensibility points of QUnit well explained in the very first page of QUnit.
  • console.log is javascript brought to you by the PhantomJs “runtime”. Since phantomjs is a webkit javascript runtime without graphical interface, this is the way you use to print messages to the standard output.
  • ##teamcity messages are in the format that Teamcity can read, this is documented here.

And as John Smith would say;

I love it when a plans comes together

The next step is to reference QUnit.TeamCity.js in your html test harness (this is explained in the first page of QUnit) and then you can call it from your build script as:

phantomjs.exe run-qunit.js my.html.tests.harness.htm

where run-qunit.js is exactly the same than in my previous post.

blog comments powered by Disqus