Category: TDD

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
[sourcecode language=”csharp”] 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;
}
}
[/sourcecode]
• Add a JavaScript file with your Jasmine tests for the code above like so :-
  [sourcecode language=”csharp”] 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);
  });
  });
  [/sourcecode]

• Ok so we have some JavaScript code and Jasmine tests for the code, lets add some required links to our Jasmine specrunner page so we can see the code coverage
  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.

• Now if we browse to the specrunner page for Jasmine we will see the results of the test – green for passed and red for failed (no code coverage results yet).

  

• Now lets show the JavaScript code coverage results – which is as simple as adding in the line to reference Blanket for Jasmine:-

  

• Refresh the specrunner page and you will now see your JavaScript code coverage results like so:-

  

  The screen shot above shows us 100% code coverage, so no lines of JavaScript are coloured red (not covered)

• If I comment out one of the tests we can see the difference below:-
  
• And there we have it code coverage results of your JavaScript, brief post but enough to get you started I hope, next time I will add this to TeamCity and see what that gives us.