Test Driven Development for JavaScript: jQuery and QUnit

Unit test your jQuery code at development time to reduce bugs in your JavaScript application. The QUnit JavaScript TDD framework makes it easy.

by Joydip Kanjilal

Jun 19, 2012

JQuery, the popular open source, cross-browser JavaScript library, simplifies JavaScript programming by enabling developers to easily write code that incorporates event handling, animations and calls to Web services. The library supports browser independence, a simple event-handling model and extensibility through a plug-in API. Combining these features with a Test Driven Development (TDD) approach can greatly reduce bugs in your Web applications.

What is TDD, you ask? TDD is a style of programming in which you test drive your application code during development, i.e., you write your tests first and then your application's source code. With properly planned code reviews, test-driven development can help in designing and implementing high-quality applications as well as in conforming to the stated requirements. As a result, TDD can reduce development time, code complexity, and post-deployment bugs.

In this article, I will explore how to use TDD with jQuery in Visual Studio. To get started, you should have the following installed in your system:

You can also use Visual Studio 2010 -- it comes with jQuery by default.

Test Driven Development Using jQuery

Test Driven Development is an Agile development technique that typically involves the following steps:

Write the test

Write the code for the test, i.e., the code that would make the test pass

Run the test

If the test fails, repeat, i.e., refactor the code and run the test again

If the test passes, you can still refactor the code to make it clean and organized

Make sure you re-run your tests every time the application's code changes

Some popular JavaScript TDD frameworks include:

QUnit

JsUnit

JsSpec

YUI Test

In this article, I will use the QUnit TDD tool for demonstration. This tool is capable of testing any JavaScript code -- even code written on the server side -- making it great for testing JavaScript libraries and frameworks. Particularly useful for regression testing, QUnit opens up a lot of possibilities for unit testing your JavaScript code. In QUnit, you have the concept of Units and Modules. Units refer to units of testable code; they can be as simple as typical unit tests. Modules on the other hand are a mechanism to group the results of the tests, whether they succeeded or failed.

The following code snippet illustrates how you can use QUnit to unit test your JavaScript code:

Summary

When writing unit tests for JavaScript, the major challenge is making them browser independent. Not all JavaScript TDD frameworks support all browsers. In this article I discussed the features of jQuery and how you can work with one JavaScript TDD framework, QUnit, to practice test driven development using jQuery. Happy coding!

Joydip Kanjilal has over 10 years of industry experience with C, C++, Java, C#, VB, VC++, ASP.Net, XML, Design Patterns, UML, etc. He currently works as a senior project leader in a reputable multinational company in Hyderabad, India, and has contributed articles on .NET and related technologies to www.aspalliance.com.