I wanted to find out if there were any tools that can display code coverage results for JavaScript code (without the need for Java on the server or having to use Node), I experimented with a few different frameworks, test runners and what not and have spent a couple of hours looking in to this, in the end I opted for the following:-
At work we currently use Jasmine which is a behaviour-driven development framework for testing JavaScript code along with PhantomJS which we use to run the tests using a specrunner (there are several ways to do it but this works for now)
I have installed the Visual Studio Extension called Chutzpah which is a JavaScript Test Runner which gives you a few nice things such as integration with TeamCity and the ability to right-click and then select Run Tests similarly to unit testing your C# code with your favourite unit testing framework.
Ok so back to code coverage for our JavaScript code – Matthew the guy who created Chutzpah is working on integrating code coverage into the next release so in the mean time here is how you get it to work – enter one further library called Blanket.js – Blanket.js is used to give us the code coverage results and currently supports Qunit, Mocha and Jasmine. An adapter API exists for supporting other test runners.
At this point you might be thinking its a fair amount of work to get this going but I will simplify the steps required to get your JavaScript code outputting code coverage results.
- Download Blanket.js and look for the file called blanket-jasmine.js, add this to your Scripts folder inside your web application. This file is blanket version that works with Jasmine.
- Add the Nuget package jasmine.js
- Add some JavaScript code as below for example this is code.js
var stringLib = { vowels: function (a) { count = 0; for (var i = 0; i < a.length; i++) { if ("aeiou".indexOf(a[i]) > -1) { count++; } } return count; } } var mathLib = { add5: function (a) { return a + 5; }, mult5: function (a) { return a * 5; } }
describe("general", function () { it("A basic test", function () { expect(true).toBeTruthy(); var value = "hello"; expect("hello").toEqual(value); }); }); describe("stringLib", function () { it("will get vowel count", function () { var count = stringLib.vowels("hello"); expect(count).toEqual(2); }); }); describe("mathLib", function () { it("will add 5 to number", function () { var res = mathLib.add5(10); expect(res).toEqual(15); }); it("will multiply 5 to number", function () { var res = mathLib.mult5(10); expect(res).toEqual(50); }); });
results output to the screen, edit the spec runner like so:-
The above screen shot shows that we have added a reference to both our JavaScript code file and the file containing the Jasmine tests.
The screen shot above shows us 100% code coverage, so no lines of JavaScript are coloured red (not covered)

Cool stuff! I’ll put it in practice at work next week 🙂
Nice post! Did you ever add this to TeamCity? If so, I would love to hear about it