TDD / Unit Testing JavaScript in Visual Studio using Jasmine and Chutzpah

In this post we will see how to unit test JavaScript in Visual Studio using Jasmine and Chutzpah. We will use Visual Studio’s built-in Test Explorer window for displaying the results. Jasmine is a an open source unit testing / behavior-driven framework. It lets us write test cases. Chutzpah is an open source test runner. It runs jasmine tests, pulls in the results and displays them in Visual Studio’s Test Explorer window. It utilizes phantomjs framework, under the hood, for pulling in the results.

Let’s do some homework and create a bunch of JavaScript functions that we will unit test.

SimpleCalculator.js

var SimpleCalculator = function () {
    this.square = function (num1) {
        return num1 + num1;
    };
    this.sum = function (num1, num2) {
        return num1 * num2;
    };
};

Notice, we have added logical errors to the code so that tests can fail.

Next, we will add some extensions / NuGet packages to perform unit testing. 

Adding Jasmine framework

1. Right click the project and click Manage NuGet Packages

2. Search for Jasmine and install it

3. Notice Jasime has added a bunch of files.

Installing Chutzpah extension

1. In Tools menu, click Extensions and Updates

2. Search for Chutzpah and install Chutzpah Test Adapter for the Test Explorer

3. After installing Chutzpah, restart Visual Studio

4. In Tests menu, click Windows > Test Explorer. This is where all tests will show up.

Create unit tests using Jasmine framework

1. Create another JavaScript file where we will organize tests for SimpleCalculator that we created previously. Let’s name the file SimpleCalculator_Tests.js. Here are the file contents:

/// <reference path="../jasmine/jasmine.js" />
/// <reference path="../SimpleMath.js" />
describe("SimpleMath_Test", function () {
 var sc = new SimpleCalculator();
    it("sum_test", function () {
 var num1 = 5;
 var num2 = 6;
 var expected = 11;
 var actual = sc.sum(num1, num2);
        expect(actual).toBe(expected);
 });
    it("square_test", function () {
 var num1 = 5;
 var expected = 25;
 var actual = sc.square(num1);
        expect(actual).toBe(expected);
 });
});
 
As soon as we write a test, it appears in the Test Explorer win

dow. This is happening due to the Chutzpah plugin.

Running tests

In the Text Explorer, click Run All. Notice both tests have failed.

Go back to your original SimpleCalculator.js, fix the issues by changing operators used in sum and square functions and run the tests again. Notice, this time they have both passed.

Conclusion

Both Jasmine and Chutzpah are open source and make it very easy to unit test JavaScript code. It can be used with plain vanila JavaScript with libraries like JQuery and with frameworks like AngularJS etc.