Integrate QUnit with TeamCity

In this post I'll present how to integrate QUnit test runner with Team City, popular Continous Integration platform. Although, the example project is written in C#, the description is not language spacific. What is more, QUnit test runner is only one step in CI process, which can be used as separate.

Creating base project (optional)

Let's start with creating simple ASP.NET MVC 4 project. This step is optional, but I'd like this example to be more comrehensive and to the build would consist of 3 steps:

Build project
Run C# tests
Run JavaScript tests

I've created 2 projects: QUnitTestableApp (ASP.NET MVC) and QUnitTestableApp.Tests (Test Project). The first project contains one controller:

public class ProductController : Controller
{
    public ActionResult Index()
    {
        return View("ProductsList");
    }
}

The second contains simple unit test:

[TestClass]
public class ProductControllerTests
{
    [TestMethod]
    public void IndexTest()
    {
        var controller = new ProductController();
        var result = controller.Index() as ViewResult;
        Assert.AreEqual("ProductsList", result.ViewName);
    }
}

Let's run the test and check that it works.

Create JavaScript code and tests

Now it is time to create JavaScript code that will be tested. Let's create class Greeter. I'm using TypeScript for that. If you are not familiar with it, you can translate the TypeScript code to pure JavaScript on their Playground page.

Greeter class (Greeter.ts):

module GreeterModule {
    export class Greeter {
        private name: string;
        constructor(name: string) {
            this.name = name;
        }
        Greet() {
            return "Hello, " + this.name;
        }
    }
}

Test (Tests\GreeterTests.ts):

QUnit.test("Simple test", function () {
    var greeter = new GreeterModule.Greeter("Lukasz");
    var result = greeter.Greet();
    QUnit.equal(result, "Hello, Lukasz");
});

And test runner (Tests\TestRunner.html):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.11.0.css">
    <script src="http://code.jquery.com/qunit/qunit-1.11.0.js"></script>
    <script src="../Greeter.js"></script>
    <script src="GreeterTests.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>

Let's open TestRunner.html file in browser and check that test passes.

Create build steps in TeamCity

Now we finally start to configure TeamCity build. Let's create new project and build configuration. For the purpose of this example we won't need VCS, so in "VCS checkout mode" select "Do not checkout files automatically".

Let's create build step. We have to specify two settings to make it work:

Runner type: Visual Studio (sln)
Solution file path: this should be set to point to our solution file

Then let's create test step:

Runner type: MSTest
Path to MSTest.exe: MSTest 2012
List assembly files / Edit assemblies include list: Select path to QUnitTestableApp.Tests assembly.

Now we can test our configuration by running the build. We should see one test run successfully:

Add QUnit test step

For this we will need:

PhantomJS
run-qunit.js file (it is contained in PhantomJS's zip file in examples folder)
qunit.teamcity.js file (more about it below)

First of all we will need to make our TestRunner.html file being able to be parsed by TeamCity. There is nice short article explaining this. You can copy the code from there and create qunit.teamcity.js file (the file can be found in the repo for this post - link at the end). What just need to inculde this file in our TestRunner.html:

<script src="../Vendor/qunit.teamcity.js"></script>

When we open our TestRunner.html in the browser we can see additional messages printed out to the console:

This text will be used by TeamCity to indicate that our run was successful.

Then let's add last build step:

Runner type: Command Line
Execute step: Even if some of previous steps failed - We want to test JavaScript code even if our C# code fails
Working directory: Directory with TestRunner.html file
Run: Executable with parameters
Command executable: Path to phantomjs.exe
Command parameters: run-qunit.js TestRunner.html. Make sure that the path to run-qunit.js is correct or the file is inside Working directory specified above.

Now let's test this configuration by running build again. You should see two tests run: one for our C# code and one for JavaScript:

When we enter Tests page we can see that JavaScript tests are treated equally to C# ones.

Let's break something and see if TeamCity will respond. The easiest way would be to change assert in JavaScript test.

...
QUnit.equal(result, "Hello, L");

And the result is as expected:

Source code of the example: https://github.com/lukasz-lysik/qunit-testable-app.git.