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:

• Visual Studio 2008
• Visual Studio 2008 SP1
• jQuery Library
• Visual Studio 2008 jQuery Plug-in

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:

1. Write the test
2. Write the code for the test, i.e., the code that would make the test pass
3. Run the test
4. If the test fails, repeat, i.e., refactor the code and run the test again
5. If the test passes, you can still refactor the code to make it clean and organized
6. 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:

// Unit testing using QUnitfunction isNumberEvenOrOdd(valueToTest) {     return (valueToTest % 2 === 0);}test('isNumberEvenOrOdd()', function() {     ok(!isNumberEvenOrOdd (1), 'One is an odd number');     ok(isNumberEvenOrOdd (2), 'Two is an even number');})

In the above code snippet, ok is an assertion. Other assertions include same, equals, and so on.

You can also use QUnit to run asynchronous tests, meaning tests for functions that are asynchronous. To write such test cases, you’ll need to use setTimeout as shown in the code snippet below:

asyncTest('This is an asynchronous test case', function() {     setTimeout(function() {          ok(true);          start();     }, 250)})

Review the QUnit API documentation for more information.

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!