Dr. Dobb's has covered HTML5 development on many occasions, as well as how to write extensions to Google Chrome. This article extends that coverage by examining how to test browser apps. The testing tool I'll use is QUnit, which is a convenient unit-testing framework that first saw light of day as part of the jQuery JavaScript framework. It is now an independent product, no longer dependent on jQuery. But like jQuery, it greatly facilitates useful work in JavaScript.
Setting up QUnit to Run in a Web Page
To get started with QUnit, download the files qunit.js and qunit.css and and copy them to a new folder in your ChromeProjects folder. Qunit.js contains the functions that make up the test framework, and quinit.css provides styles and other helpers to present the results of your QUnit tests.
To start, let us demonstrate a simple test using a standalone HTML file. We will create a simple function and test if the function returns a result of TRUE. In QUnit, the basic test function is named "ok." It takes two arguments: The first is the code or condition to be tested, and the second is a text string that appears in the results of the test. An example could be:
ok (2 + 2 == 4, "two plus two equals four");
The ok function evaluates the expression in the first argument, and displays in the test results whether the test passed or failed.
Simple Tests
Here is a simple Web page containing the expression to be tested and the test environment in which to observe the test results (save this as qunittest01.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" href="qunit.css">
<script src="qunit.js"></script>
<script>
test("hello", function() {
ok(2 + 2 == 4, "Hello, world");
});
</script>
<h1 id="qunit-header">QUnit Hello World</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol>
Open the file qunittest01.html in a browser, and you should see the results shown in Figure 1:
Figure 1.
Clicking on the "hello" link in the page displays each of the test results.
This simple Web page has links to the QUnit CSS file that formats the output of the test, a link to the QUnit JavaScript file containing the test framework functions, and the JavaScript for the test. The script includes a call to the "test" function, which is how tests in QUnit are grouped. The first argument of the test function is a text string that is the name of the group of tests. The second argument, a function, contains the tests in this group. In our first example, there is only one test. However, a test group can contain as many tests as you wish. We could add more tests for other algebraic expressions as follows:
ok (2 + 2 == 4, "two plus two equals four"); ok (2 + 5 == 7, "two plus five equals seven"); ok (5 + 5 == 10, "five plus five equals ten");
Save the following Web page as qunittest02.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" href="qunit.css">
<script src="qunit.js"></script>
<script>
test("hello", function() {
ok(2 + 2 == 4, "two plus two equals four");
ok(2 + 5 == 7, "two plus five equals seven");
ok(5 + 5 == 10, "five plus five equals ten");
});
</script>
<h1 id="qunit-header">QUnit Hello World</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol>
Open qunittest02.html in your Web browser and you should see the results shown in Figure 2:
Figure 2.
When you click on the "hello" link in the page, each of the test results are displayed.
