TDD and BDD -style automated testing Javascript in Visual Studio

At NForza we take code quality and testing seriously.
So when we need to build a front-end application with JavaScript we als want to test it.
And because we use Visual Studio for development I want the tests to run from there.

So how can we accomplish that? Well, there is an excellent plugin for Visual Studio called Chutzpah.

When you install it you get a nicely integrated testing experience for JavaScript.

An example:
I created a simple empty web site in Visual Studio and added a scripts folder, where I added a calculator in calc.js:

function Calculator() {
}

Calculator.prototype.add = function(num1, num2) {
    return num1 + num2;
}

Calculator.prototype.subtract = function(num1, num2) {
    return num1 - num2;
}

Calculator.prototype.divide = function(num1, num2) {
    return num1 / num2;
}

Calculator.prototype.multiply = function(num1, num2) {
    return num1 * num2;
}

So it's a very basic piece of JavaScript, but still I want to test it.

Chutzpah supports 3 testing frameworks out of the box: qunit
Jasmine (more BDD style) and Mocha (also BDD)

So I used all three to write tests and compare them:

1. QUnitTest.js:

Notice the first 2 lines, these are hints for VisualStudio / Chutzpah which Javascript files to 'include' for the test to run. You don't have to download qunit.js because Chutzpah already contains the test frameworks. Just refence it and ofcourse the Javascript-file you want to test.

    /// <reference path="../Scripts/calc.js" />
    /// <reference path="qunit.js" />

    module("QUnit");
    var calculator = new Calculator();

    test("add should add two numbers", function () {
    var result = calculator.add(5, 5);
    equal(result, 10);
    });

    test("subtract should subtract two numbers", function () {
    var result = calculator.subtract(5, 5);
    equal(result, 0);
    });

    test("multiply should multiply two numbers", function () {
    var result = calculator.multiply(5, 5);
    equal(result, 25);
    });

    test("divide should divide two numbers", function () {
    var result = calculator.divide(5, 5);
    equal(result, 1);
    });

2. JasmineTest.js:

    /// <reference path="jasmine.js" />
    /// <reference path="../Scripts/calc.js" />

    describe("JasmineTest", function () {
      var calculator;

      beforeEach(function () {
      calculator = new Calculator();
      });

      it("add should add two numbers", function () {
      var result = calculator.add(5, 5);
      expect(result).toBe(10);
      });

      it("subtract should subtract two numbers", function () {
      var result = calculator.subtract(5, 5);
      expect(result).toBe(0);
      });

      it("multiply should multiply two numbers", function () {
      var result = calculator.multiply(5, 5);
      expect(result).toBe(25);
      });

      it("divide should divide two numbers", function () {
      var result = calculator.divide(5, 5);
      expect(result).toBe(1);
      });
    });

3. MochaTest.js

Mocha is slightly more complicated because you need to plugin your own assertion framework. One of the common used versions is ChaiJS. You can download it or add it through a NuGet package Install-Package chai.

    /// <reference path="mocha.js" />
    /// <reference path="chai.js" />
    /// <reference path="../Scripts/calc.js" />

    var expect = chai.expect;
    var calculator = new Calculator();

    describe('MochaTest', function () {
      it("A basic test", function () {
      expect(true).to.be.ok;
      var value = "hello";
      expect(value).to.equal("hello");
      });

      it("add should add two numbers", function () {
      var result = calculator.add(5, 5);
      expect(result).to.equal(10);
      });

      it("subtract should subtract two numbers", function () {
      var result = calculator.subtract(5, 5);
      expect(result).to.equal(0);
      });

      it("multiply should multiply two numbers", function () {
      var result = calculator.multiply(5, 5);
      expect(result).to.equal(25);
      });

      it("divide should divide two numbers", function () {
      var result = calculator.divide(5, 5);
      expect(result).to.equal(1);
      });
    });

From each test file you can use the right mousebutton to bring up the contextmenu and select 'Run JS Tests'.
Chutzpah Contextmenu

And ofcourse there is Test Explorer integration as well:
Test Explorer Window

And as you can see in the Chutzpah contextmenu there is also an option for showing code coverage (Yay!) and opening the testrunner in a browser. This option will open up your default browser and show the html-testrunner page for the selected testing framework.

Ronald Harmsen

I'm a software developer. When I'm not developing software I'm training & coaching other developers, speaking on a conference or fiddling with some technical stuff.

Arnhem, The Netherlands

Subscribe to Ronald to the cloud

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!