I’ve been doing some webdevelopment lately (something I don’t do all that often) and found the need to test my javascript code. I find the need to test most of my code.

I came to the conclusion that qunit was the first to show up in a Google search so it must be really good. Thank you Google. I asked on twitter, but people were less then useful on there.

So how do I get started with qunit?

Well first of all I downloaded qunit.js and qunit.css from the qunit site.

Then I needed some code to test (truncate.js).

String.prototype.trunc = String.prototype.trunc ||
        function (n) {
            return this.length > n ? this.substr(0, n) + '…' : this;
        };

And some tests (tests.js)

test("truncate tests", function () {
    equal("test".trunc(10) , "test", "Truncate test to 10.");
    equal("test".trunc(1), "t…", "Truncate test to 1.");
    equal("test".trunc(2), "te…", "Truncate test to 2.");
    equal("test".trunc(3), "tes…", "Truncate test to 3.");
    equal("test".trunc(4), "test", "Truncate test to 4.");
    equal("".trunc(10), "", "Truncate empty string.");
});

And then a nancymodule to open the testpage that could run my tests.

Imports Nancy

Namespace Modules
    Public Class TestModule
        Inherits NancyModule

        Public Sub New()
            [Get]("/") = Function(parameters)
                                  Return View("Tests")
                              End Function
        End Sub
    End Class
End Namespace

Next up was the Tests.vbhtml file that would visualize the tests.

    

<div id="qunit">
  
</div>
    

<div id="qunit-fixture">
  
</div>
    
    
    

And here is my folder structure in case it wasn’t clear.

This is what you will see when you run the project.

Which is fantastic.

And they even run in the resharper testrunner.

Nearly anyway.

You have to tell resharper where to get the truncate.js file from.

Which you do like this.

/// <reference path="truncate.js" />

test("truncate tests", function () {

    equal("test".trunc(10) , "test", "Truncate test to 10.");
    equal("test".trunc(1), "t…", "Truncate test to 1.");
    equal("test".trunc(2), "te…", "Truncate test to 2.");
    equal("test".trunc(3), "tes…", "Truncate test to 3.");
    equal("test".trunc(4), "test", "Truncate test to 4.");
    equal("".trunc(10), "", "Truncate empty string.");
});

Next up is to get it to work in teamcity.

Sorry for the few words.