Testing TypeScript with Chutzpah

Whatever is meant by “Application Scale” I think a good testing environment is an essential component. With a javascript testrunner like the free Chutzpah or the commercial Resharper (“Unit Testing with Typescript and Resharper (Lord Hanson)” ) it’s as easy to run your javascript tests as regular C# ones.

Edit : Now Chutzpah supports unit testing directly from Typescript files, see video

See also my screen cast showing a small TDD-demo with Chutzpah.

Two Visual Studio Extentions for terrific TypeScript testing

1. Add the Chutzpah addin for running Jasmine or QUnit testing in Visual Studio.

Note: there’s also a extension that makes Chutzpah tests integrate with Visual Studio test runner, but I did not get that to work with my ts-tests (esp after file updates). Running them in the console or in the browser works fine though.

2. And add Web Essentials to compile your TypeScripts on save.

When you have the two Visual Studio extensions in place you create and run your tests like this:

1. Create a folder for your tests.

2. Create a TypeScript file for your test, write your test in Jasmine or Qunit syntax, reference Jasmine.d.ts (or Qunit.d.ts) to get intellisense.

3. Add references to your own ts-files get IDE benefits for your strongly types AND also add js-references to the compiled files, for the testrunner to find and include your compiled js-file.

4. The TypeScript compiler wipes away all comments by default. We do not want that, because its a comment reference syntax that makes the Chutzpah test runner to know which files we need to run our tests. So make Web Essentials compile with kept comments by Going to Tools>Options>Web Essentials Keep Comments : True;

5. When you have saved your test in your tests folder you can right click the folder and choose “Run JS-tests”. Chutzpah will automatically run all tests in that folder. To be able to run an individual file you will need to show all files and then right click on the compiled javascript file.

///<reference path="../app/items.ts" />
///<reference path="../app/items.js" />
///<reference path="qunit.d.ts"/>

test("hello test", ()=> {

    var i = new Items();
    var item1 = i.findItem(1);
    var item2 = i.findItem(2);

    ok(item1.id == 1, "Passed!");
    ok(item2.name == "second", "Passed!");

});

If you prefer Jasmine syntax you can use that in the same way (Chutzpah will automatically reference QUnit and Jasmine):

///<reference path="../app/items.ts"/>
///<reference path="../app/items.js" />
///<reference path="jasmine.d.ts"/>

describe("Test Items", ()=> {
  var i = new Items();

  it("find item with id 1", ()=> {
    expect(i.findItem(1).id).toBe(1);
  });

  it("find item name from item with id 2", ()=> {
    expect(i.findItem(2).name).toBe("second");
  });

});

Type Definitions for Qunit and Jasmine