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

Advertisements

15 thoughts on “Testing TypeScript with Chutzpah

  1. I followed your blog post and got it running nicely, but I get horrible squigly lines in VS for the jasmine syntax, i.e. although Chutzpah will automatically reference the jasmine file, VS IDE doesn’t and so tells me my syntax is all wrong.

  2. Basic jasmine.d.ts has some wrong definitions:
    // 1.
    interface Ifnv {
    (…value: any[]): void;
    }
    // 2.
    expect.ItoBe.toBeTruthy: Ifn; // has no args
    // 3.
    expect.ItoBe.toBeFalsy: Ifn; // this is missing

  3. Awesome stuff.
    One issue we have while running the console exe against a folder containing jasmine specs, is that chutzpah will execute the .ts file and then the generated .js and .min.js files. Is there a way to switch off this behavior ?

  4. How to get it working with a typescript file which uses Jquery functions. Chutzpah with jasmine just fails with “encountered a declaration exception”, Can’t find variable $ in the js file.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s