Channels ▼
RSS

Testing

Testing Browser Apps


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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video