Software QA FYI - SQAFYI

Automating JavaScript Testing with QUnit

By: Jörn Zaefferer

This article explores how to write JavaScript unit tests with QUnit, and how QUnit can help developing applications.

QUnit was born May 2008, out of the testrunner embedded into the jQuery core repository. It got its own name and documentation and a new home for the code. Late 2009 QUnit was refactored to be independent of jQuery, making it useful for testing all kinds of JavaScript frameworks and applications. Its assertion methods now follow the CommonJS assert specification. While QUnit can run in server-side or command line environments, it’s still most useful for testing JavaScript in the browser. This article explores how to write unit tests with QUnit, and how QUnit can help developing applications.

To get started, let’s look at a minimal QUnit testsuite, the Hello World of QUnit:
1. <!DOCTYPE html>
2. <link rel="stylesheet" href="qunit.css">
3. <script src="qunit.js"></script>
4. <script>
5. test("hello", function() {
6. ok(true, "world");
7. });
8. </script>
9. <h1 id="qunit-header">QUnit Hello World</h1>
10.<h2 id="qunit-banner"></h2>
11. <ol id="qunit-tests"></ol>

This is a very minimalistic testsuite. It declares a doctype, includes the CSS and JS files for QUnit, defines another script element with a single QUnit test and assert, and a little bit of additional markup for QUnit to output testresults. The call to the test() function defines a test with the name of “hello”. QUnit will then run this test once the page has loaded. The second argument, a function passed to test(), contains the actual testcode to run, here a call to ok(). The first argument defines if the assertion passes or not, the second specifies a message to output. In this case, the boolean true will always pass, as we’re not yet testing anything really.

If we open this as a html file in a browser, we’ll see this output: We can now set the assertion to always fail:
1. test("hello", function() {
2. ok(false, "world");
3. });

The result will be this:
Now we see the hello test failing, along with the failing assertion. You’ll also notice in the screenshot the noglobals and notrycatch checkboxes and the text Rerun next to the testname. These are actually interactive elements. We’ll get to these later. For now, let’s write some actual tests. Writing QUnit Tests

Let’s look at a more complete example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <QUnit Test</title><br> 5. <link rel="stylesheet" href="qunit.css"><br> 6. <script src="qunit.js"></script><br> 7. <script src="tests.js"></script><br> 8. </head><br> 9. <body><br> 10. <h1 id="qunit-header">QUnit Test</h1><br> 11. <h2 id="qunit-banner"></h2><br> 12. <div id="qunit-testrunner-toolbar"></div><br> 13. <h2 id="qunit-userAgent"></h2><br> 14. <ol id="qunit-tests"></ol><br> 15. <div id="qunit-fixture">test markup</div><br> 16. </body><br> 17. </html><br> <br><br> We’ve added html, head and body elements, referenced an additional .js file and added some more markup for QUnit to interact with. The content of tests.js is this:<br> 1. function format(string, values) {<br> 2. for (var key in values) { 3. string = string.replace(new RegExp("\{" + key + "}"), values[key])<br>; 4. }<br> 5. return string;<br> 6. }<br> 7. <br> 8. test("basics", function() {<br> 9. var values = {<br> 10. name: "World"<br> 11. };<br> 12. equal( format("Hello, {name}", values), "Hello, World", "single use" )<br>; 13. equal( format("Hello, {name}, how is {name} today?", values),<br> 14. "Hello, World, how is World today?", "multiple" );<br> 15. });<br> <br><br> We’re now testing a function called format, which expects a string template and an object with keys and values to replace within that template. <br><br> The test for that function uses the equal() assertion. It compares the first two arguments using JavaScript’s “==” operator. The first argument is the actual value, in this case being the output of calling format(). The second argument is the expected value; the formatted string. <br><br> Running it in the browser produces this: </P> <p><a href="">Full article...</a></p> <script type="text/javascript" src="_200x90.js"></script> <script type="text/javascript" src=""></script> <hr> <h4>Other Resource</h4> <script type="text/javascript" src="_list.js"></script> <p>... to read more articles, visit <a href=""></a><br/> </p> </td></tr></table> <!-- end of body --> </td></tr> <tr><td class="page_line" colspan="3"><img height="1" width="100%" src="dot.gif"/></td></tr> <tr><td align="left"><font size="-1"><b>Automating JavaScript Testing with QUnit</b></font></td> <td align="center"><font size="-1"></font></td> <td align="right"><font size="-1"> <script language="JavaScript">writeMenu("QA");</script> </font></td></tr> </table> </td></tr> </table> </td> <td width="1" rowSpan="1"><img height="100%" width="1" src="dot.gif"/></td></tr> <tr><td colSpan="3" height="1"><img height="1" width="100%" src="dot.gif"/></td></tr> </table> </td> <td class="frame_right"> <script language="JavaScript">writeRight("QA");</script> </td></tr> <tr><td class="frame_bottom" colspan="3"> <script language="JavaScript">writeBottom("QA");</script> </td></tr> </table> </body></html>