Decent programmers tests their code before deploying it. In JavaScript development, this usually means viewing the web page that your code interacts with, and clicking one or more elements in the page to ensure that the desired result is achieved
When your code base starts to grow and become more complex, testing can become tedious. Even worse, manual testing can become unreliable, because you not only have to test your new code, you have to regression test as well, so that you can be sure your new code did not break any old code.
Yuck!
If we’ve learned nothing else at this point in technology, we have at least discovered, first hand, that humans are really bad at tedious, repetitive tasks. Fortunately, computers love this kind of work.
Enter Unit Testing
The key to writing testable code is to produce small modules of functionality that always return a predictable result.
Unit testing provides a methodical way to ensure that your code always performs as expected, and provides red flags for the nanosecond that this condition changes. The key to writing testable code is to produce small modules of functionality that always return a predictable result.
jQuery QUnit
jQuery QUnit is a test framework created by the same impressive folks who bring you jQuery. It is lightweight, easy to understand, and easy to use. It has a number of simple methods that allow you to test your code. What is really impressive about jQuery QUnit is that it is designed to run in a (very) simple web page so that your test results are not only visual, but easy to understand.
Before we dive into the code, it might help to take a look at the full working example:
http://examples.kevinchisholm.com/javascript/unit-testing/qunit/part-i/
Let’s review the files involved in the full working example.
qunit.js
This is the QUnit JavaScript library.
qunit.css
This is the CSS that our test page will need.
tests.js
This is the JavaScript file that contains our unit tests.
index.html
This is the web page that you see in the full working example. It allows us to view the test results.
Here is the full source code for index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Getting Started with JavaScript Unit Testing and jQuery QUnit Part I || blog.kevinchisholm.com</title> <link rel="stylesheet" href="qunit.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <script src="qunit.js"></script> <script src="tests.js"></script> </body> </html> |
Example # 1 A
|
1 2 3 4 5 6 7 |
function badFunction(){ return false; }; test( "badFunction", function() { ok( badFunction(), "badFunction failed." ); }); |
In Example # 1A, we test a function named “badFunction”. I gave it that name because when we test for a positive result, it fails. The syntax is simple:
- We execute the test() method
- The first argument to the test() method is simply a label for the test that makes it easier to identify in the test results page (index.html).
- The second argument to the test() method is an anonymous function. We craft our test(s) inside of this function.
- Inside of the anonymous function, we execute the ok() method, a boolean assertion. This test passes if the first argument is “truthy”.
- The first argument to the ok() method is the execution of badFunction(). Since badFunction returns false, the test fails.
- The second argument to the ok() method is the test result message.
Example # 1 B
|
1 2 3 4 5 6 7 |
function goodFunction(){ return true; }; test( "goodFunction", function() { ok( goodFunction(), "goodFunction succeeded." ); }); |
In Example # 1B, The approach taken is identical to Example # 1A, with one exception: we test goodFunction(), which passes the ok() test because its goodFunction() returns true.
Example # 2 A
|
1 2 3 4 5 6 7 8 |
function makeArray1(){ return []; }; test( "makeArray1", function() { ok( (makeArray1() instanceof Array), "makeArray1 is an array." ); ok( (makeArray1().length), "makeArray1 is empty." ); }); |
In example # 2A, we test the function makeArray1(). That function returns an empty array literal. Our unit test consists of two calls to the ok() method. The first call simply checks to see that makeArray() returns a true array. It does, so that test passes. The second call to ok() checks to make sure there is at least one element in the array. The array is empty, so that test fails.
Example # 2 B
|
1 2 3 4 5 6 7 8 |
function makeArray2(){ return ['monday','tuesday','wednesday']; }; test( "makeArray2", function() { ok( (makeArray2() instanceof Array), "makeArray2 is an array." ); ok( (makeArray2().length), "makeArray2 has at least one element" ); }); |
In Example # 2B, we test makeArray2(). Since that function returns an array with three elements, both calls to the ok() method pass.
Example # 3 A
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//this closure allows lessThanFive to keep track //of how many times it has been executed var lessThanFive = (function(){ var i = 0; //this function will return false //if it has been executed more than four times return function(reset){ //allows us to run multiple unit tests on lessThanFive if(reset === "reset"){i = 0;return}; i++; return (i < 5) ? true : false; }; })(); test( "lessThanFive", function() { //this teset will execute lessThanFive 6 times //so the last two tests should fail ok( lessThanFive(),"This is the first test, it should succeed" ); ok( lessThanFive(),"This is the second test, it should succeed" ); ok( lessThanFive(),"This is the third test, it should succeed" ); ok( lessThanFive(),"This is the fourth test, it should succeed" ); ok( lessThanFive(),"This is the fifth test, it should fail" ); ok( lessThanFive(),"This is the sixth test, it should fail" ); }); |
In Example # 3A, we test a function named lessThanFive(). It is actually a closure that returns a function. The closure allows us to have a private scope which will keep track of how many times the function has been executed. Since this function was designed only to be executed less than five times, on the fifth execution, and for every execution that follows, the function returns false. The first four times, it will return true. You’ll see in the full working example that our unit test passes four times and then fails twice. This is because the first four times that lessThanFive() runs, it returns true. The fifth and sixth times that it is run, it returns false.
Example # 3 B
|
1 2 3 4 5 6 7 8 9 10 |
test( "lessThanFive", function() { //reset lessThanFive so that we can test it again cleanly lessThanFive("reset") //this teset will execute lessThanFive 6 times //so the last two tests should fail for (var i = 1 ;i < 7; i++){ ok( lessThanFive() ); }; }); |
In Example # 3B, we have a slightly more elegant approach. Instead of writing out six calls to the ok() method, we have a FOR/LOOP, which executes six times. On each iteration, it calls the ok() method, which, in turn, executes the lessThanFive() function. The only drawback to this approach is that we do not have a nice customized test message for each iteration of the test.
Once again, here is the full working example:
http://examples.kevinchisholm.com/javascript/unit-testing/qunit/part-i/
Summary
In this article, we took a brief look at how to write JavaScript unit tests using jQuery QUnit. We learned about the files needed, the test() method, and the ok() method. We learned how to check for more than one possible outcome of a test, and that there is more than one way to write the same test.
In the next article, we’ll take a closer look at the other features of QUnit.
Helpful Links for jQuery QUnit
https://github.com/jquery/qunit
http://en.wikipedia.org/wiki/QUnit
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-test-your-javascript-code-with-qunit/
