Geeks With Blogs
Guilherme Cardoso, Blog EN .NET geek

I've wrote this article a few months ago but in Portuguese:
I've decided to translate it to engish. The sample project is hostead at GitHub but it's in Portuguese (the same as my first article).

Link Github:

I've been progamming with unit testing and test-driven developement in use for server-side for 2 years. On the last months i've been working more with javascript, so i decided to try this concepts in cliente-side!
Of all the frameworks i've seen for unit tests, the QUnit was my favourite. It's also used by jQuery team.
For this article i use the scenario where you need to write a method that validate some student code, and you test your code with unit tests.

jQuery (required by QUnit):

First lets start by declare our scripts in the head of page.
You can use the default theme (.css). It's quite simple and clean.

<link href="/Styles/qunit.css" rel="Stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="/Scripts/qunit.js" type="text/javascript"></script>

Now we're going to declare an object to handler the erros details. This is optional of course.

function OutputJS() {
      this.Msg = null;
      this.Code = null;

Use the follow html elements in your page:

<h1 id="qunit-header">Unit Tests</h1>  
<h2 id="qunit-banner"></h2>  
<h2 id="qunit-userAgent"></h2>  
<ol id="qunit-tests">

Now it's time for us to write the first test!
For this we'll follow TDD. First we write the test and it should give an error. Then we start writing the code that will be tested, and we run the test to see if the code is already doing what we want (you can check some scenarious using tests like massing requests and bots that are greate!).

function Should_Validate_StudentCode(studentCode) {
        result.Code = false;
        result.Msg = "The minimum length of Code should be 4.";
        return result;

As we already except, the test will fail. This is what we want.
As we're using javascript code, the best option for you to run your tests it's in $(document).ready() of a page. But if you want you can execute the tests from some plugin or even an server side application.

<script type="text/javascript">
    $(document).ready(function () {
        test("Validate Student Code", function () {
            var result = Should_Validate_StudentCode("AAAAA");
            ok(result.Code, result.Msg);

module: acts like a category (you can group your tests in modules)
test: name of the test
ok: one of QUnit assertions.
ok excepts the first parameter as a true boolean, and if we passe a false boolean, then the test failes and display the message "result.Msg". That's why i use an object for this (;

The Should_Validate_StudentCode() is returning the OutputJS with the results of the test (code and message). If you write your tests using this design you can easily check the tests details.
Now open the HTML page and the result is this:

That screenshot is from this article in Portuguese, but as you can see the test fails.
Now that we've writed the test, let's start writing the code to test the student code.

function Should_Validate_StudentCode(studentCode) {
    var result = new OutputJS();
    if (studentCode.length < 4) {
        result.Code = false;
        result.Msg = "The minimum length of Code should be 4.";
    else {
        result.Code = true;
        result.Msg= "Code s valid.";
    return result;

Now run the test again (open the html page)

And there it's, passed!
QUnit documentation can be found in jQuery website. Here you can check more assertions types and other fun stuff like async requests! Posted on Saturday, October 15, 2011 8:16 AM | Back to top

Comments on this post: QUnit - Client side unit testing with TDD

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Guilherme Cardoso | Powered by: