Channels ▼
RSS

JVM Languages

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.


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