Testing Browser Apps

Next, let's add another element to the test HTML logic (an input text field). Save qunittest03.html as qunittest04.html, and replace the qunit-fixture logic with the following:

<div id="test-input">
<form><input type="text" size="30" name="xlInput"
         id="xlInputTest" class="xlarge" value="Andy"></form>
</div> <!-- test input markup -->

This logic reuses the input text field from the application, changes the ID to "xlInputTest," and adds a value attribute equal to "Andy." Next, let's modify the testing function as follows:

test("hello", function() {
   // Find element with id="xlInputTest"
   var testMessage = document.getElementById("xlInputTest");
   var testMessageresult = testMessage.value;
   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");
   equal(testMessageresult, "Andy", "text in div is correct");
});

Here, we modified the logic to get the HTML element associated with the input text field that was added, to get the value of that field, and to compare that value to the expected value "Andy." After adding these changes to the app, we see the test results in Figure 5:

Figure 5.

Let's make one more change to set a div element based on the test input field value, see that value be displayed just as if it were in the actual text field, and perform a test to check the value. Save qunittest04.html as qunittest05.html, then update the testing function as follows:

test("hello", function() {
   // Find element with id="xlInputTest"
   var testMessage = document.getElementById("xlInputTest");
   var testMessageresult = testMessage.value;
   // Find element with id="test"
   var showMessagetest = document.getElementById("test");
   showMessagetest.innerHTML = "Hello, " + testMessageresult; // Display message
   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");
   equal(testMessageresult, "Andy", "text in input field is correct");
   equal(showMessagetest.innerHTML, "Hello, Andy", "text in message is correct");
});

We will also add a div with an ID of "test" to the bottom of the file as follows:

<div id="test">
</div><!-- /test -->

When we add these changes to the application, we get the test results shown in Figure 6:

Figure 6.

Conclusion

This article has given a quick overview of how easy it is to test browser apps and have the results show in the browser itself. Several additional resources are available to continue your exploration.

The NetTuts tutorial gives an excellent overview of QUnit with simple examples.

The article Automating JavaScript Testing with QUnit on the Microsoft Developer Network goes into more detail on testing DOM elements and asynchronous testing. It is a good follow-on piece to the NetTuts tutorial.

Finally, this presentation by Ben Alman on QUnit has links to some good example code, and is also a neat HTML-based presentation (press the space bar to move to the next slide).

Enjoy!

Andy Sylvester has developed software and managed software development projects for over 25 years in the aerospace industry. His areas of focus have been in computer simulation and avionics software. This article was adapted from his book, Building Browser Apps with Google Chrome, which is available for free in HTML and can be purchased inexpensively in other formats.