A simple jQuery Qunit-based JavaScript Unit Test Project Template

UPDATE: I just updated the template. You can download it here.

Next week, I’m giving a talk on JavaScript Unit Testing at Codestock. I think this is my 5th year. Always a great show and am looking forward to seeing everyone in Knoxville, TN. The talk is going to be divided into 3 parts: 1 – recognizing and implementing testable JavaScript code, 2 – JavaScript Unit Testing fundamentals and 3 – Visual Studio integration. It is the 3rd part that I want to discuss right now. I’ve just uploaded a new JavaScript unit test project template to the Visual Studio Gallery.

js_testing_icon

There is a need for a simple unit test project that is devoted to JavaScript unit testing. For this template, I chose the jQuery QUnit project. To make full use of the template, you will also need the Chutzpah JavaScript Unit Test Runner installed. Chutzpah integrates your JavaScript Unit tests.

Once the extension is installed, the add-in will be available:

(Yes, I know the project type reads as Visual C#… When I created the template, I decided to start with a class library project – like any other unit test project. I could have hosted this in a Windows Store JavaScript project – but that would have left folks out that have not upgraded to Windows 8 yet. )

image0

To get up and running, I added a simple Hello World QUnit JavaScript unit test. The following example shows the template in action:

Consider the following solution structure:

image1

This solution has 3 projects: ASP.NET MVC, MVC Unit Test and a JavaScript Unit Test Project. To illustrate how to put your web project’s js code under test, I created a myFunctionTests.js file -  which corresponds to the myFunctions.js file in the UnitTesting.Web MVC Project. Here is the code for myFunction.js:

var myFunctions = (function () {
    var _functions = {};

    _functions.add = function (items) {
        var total = 0;
        for (var i in items)
        {
            total += items[i];
        }
        return total;
    };

    return _functions;
}());

A very simple function that takes an array of numbers and adds them together. Here’s the test in the JavaScript Unit Test Project:
(Take note of how to reference the js file that hosts the function under test.)

/// <reference path="../../../unittesting.web/scripts/myfunctions.js" />

test("My Function Add Test", function () {
    var result = myFunctions.add([1, 2, 3]);
    var expected = 6;

    ok(result == expected, "Result: " + result  + ", expected: " + expected);
});

In addition, there is also a standard unit test project which was added when the MVC project was created. The following figure shows the Visual Studio Test Explorer running all of our tests (in my Test Explorer settings, I’ve opted to organize the tests by project):

image2

If I was to alter the test by changing the expected value to 5 and saved the file, the affected tests will run again. The following figure shows our unit test in a failed state:

image3

 

Enjoy!!

About johnvpetersen

I've been developing software for 20 years, starting with dBase, Clipper and FoxBase + thereafter, migrating to FoxPro and Visual FoxPro and Visual Basic. Other areas of concentration include Oracle and SQL Server - versions 6-2008. From 1995 to 2001, I was a Microsoft Visual FoxPro MVP. Today, my emphasis is on ASP MVC .NET applications. I am a current Microsoft ASP .NET MVP. Publishing In 1999, I wrote the definitive whitepaper on ADO for VFP Developers. In 2002, I wrote the Absolute Beginner’s Guide to Databases for Que Publishing. I was a co-author of Visual FoxPro Enterprise Development from Prima Publishing with Rod Paddock, Ron Talmadge and Eric Ranft. I was also a co-author of Visual Basic Web Development from Prima Publishing with Rod Paddock and Richard Campbell. Education - B.S Business Administration – Mansfield University - M.B.A. – Information Systems – Saint Joseph’s University - J.D. – Rutgers University School of Law (Camden) In 2004, I graduated from the Rutgers University School of Law with a Juris Doctor Degree. I passed the Pennsylvania and New Jersey Bar exams and was in private practice for several years – concentrating transactional and general business law (contracts, copyrights, trademarks, independent contractor agreements, NDA’s, intellectual property and mergers and acquisitions.).
This entry was posted in Javascript, jQuery, QUnit, Unit Testing and tagged , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.