Unit Testing with Typescript and Resharper

UPDATE –  I have been unable to get this to work with newer versions of resharper, hopefully full support is on the way from Jetbrains. I’d recommend using Chutzpa in the interim 

As a c# developer there are a few tools which I cannot live without. Visual studio obviously (and VS11 is the best yet IMHO) and the other is Resharper. When I write my c# code I like to follow TDD principles and ensure my code is highly testable. These days if I don’t have tests around my code I feel very exposed when refactoring, it’s this safety net that I want to ensure I have in the TypeScript world too.

In my previous post where I tested out some of the features of the TypeScript language I built a small GA based decrypter which can be used to crack a simple code. However I had no tests around this class and going forward if I am to feel comfortable working in TypeScript I’m going to need unit tests. The good thing about Resharper is that while it handles the day to day C# development tasks with ease, it also has a wealth of functionality for web technologies including JavaScript programming. Looking in the options under Unit Testing we can see that Resharper supports two different JavaScript testing frameworks, Jasmine and QUnit. I looked this up and it appears Resharper supported QUnit since v6 and Jasmine from V7.

This is encouraging as it means that I should be able to run my JavaScript unit tests within the Resharper test runner as I do in c#. As an aside, Jasmine is a more BDD style testing framework compared to QUnit which I prefer and maps closer to NUnit which is what we use at work.

In Visual Studio I created a new TypeScript project and copied my Decrypter class into a libs folder. I also created a new Tests folder where I added another new class called DecrypterTests which is where I will add all more tests. Now as I want to target QUnit for my testing I needed to understand the QUnit API. On their website it shows a very simple example of what it takes to create a QUnit test. Only two method are needed from the api those being “test” and “ok”.

test( "hello test", function() {  ok( 1 == "1", "Passed!" );});

Seeing as I want to work with QUnit in TypeScript and have full intellisense and static typing I need to create a TypeScript definition file. Definition files are a way for JavaScript library authors to create a separate file to their js library which applies static typing to the api. This static typing “evaporates” at compile time and resulting JavaScript is not impacted. As QUnit does not currently have a TypeScript definition file I manually created one in my project which covers the two methods I want to use.

declare module test {
    export function (description: string, method: Function): void;
}

declare module ok {
    export function (condition: bool, error: string): void;
}

You can see that there is not much to the definition file. When you add a definition file in TypeScript you are supposed to add a “.d.ts” in order to clarify that this has no implementation. Now I should have all the pieces in place so that I can write a test for my Decrypter class.

The method I want to write a test is the GenerateRandomKey method which is supposed to create random key which is 50 chars long. In order to test this functionality I now need to import 3 references into my test file. Firstly the TypeScript file for my Decrypter class, then its compiled JS file, and finally a reference to the QUnit definition file I created.

///<reference path="../libs/Decrypter.ts" />
///<reference path="../libs/Decrypter.js" />
///<reference path="../libs/qunit.d.ts" />

You may notice that I haven’t included a reference to the QUnit.js file. This is because Resharper handles this for us by references the file automatically when it goes to run the tests. Therefore we can just omit the references.

test("Decrypter Library - GenerateRandomKey", ()=> {

    //Arrange
    var decrypter = new Decrypter();

    //Act
    var key = decrypter.GenerateRandomKey();

    //Assert
    ok(key != null, "The key should not be null.");
    ok(key.length == 50, "The key lenght should be 50 chars long.");

});

After we have the correct references we can go about writing our test. This case is dead simple but illustrates the point. The QUnit.d.ts file provides me with full intellisense and type checking. The only thing left to do is run the tests to make sure they pass. I can do this in Visual Studio by right clicking on the “Tests” folder and choosing “Run Unit Tests”. Resharper automagically finds the QUnit tests and executes them.

So now we have the ability to write unit tests in TypeScript that target our TypeScript code and executing them inline without jumping back to JavaScript.

Hope this helps,

Advertisement