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:
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:
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!