288 CHAPTER 6 Essential JavaScript and jQuery
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
test markup, will be hidden
<input id="txtInput" type="text" /><br />
<input id="txtResult" type="text" /><br />
</div>
</body>
</html>
In the Solution Explorer window, the Test.html file has been set as the startup page by
right-clicking the file and choosing Set As Start Page.
In the default.js file, the following code sets a reference to the txtInput and txtResult text
boxes and then calls the clear function to initialize the two text boxes to ‘0’.
var txtInput;
var txtResult;function initialize() {
txtInput = document.getElementById('txtInput');
txtResult = document.getElementById('txtResult');
clear();
}function clear() {
txtInput.value = '0';
txtResult.value = '0';
}
The tests.js file contains a simple test of the initialize method. When the test is run, the two
assertions pass. The following is the tests.js file contents.
module('QUnit Test Suite', { setup: function () { initialize(); } });test("Initialize Test", function () {
expect(2);
var expected = '0';
equal(txtInput.value, expected, 'Expected value: ' + expected +
' Actual value: ' + txtInput.value);
equal(txtResult.value, expected, 'Expected value: ' + expected +
' Actual value: ' + txtResult.value);
});
Now that the test is passing, change some code to use jQuery. The jQuery library code is in
the jQuery namespace, but this namespace also has an alias of $ (dollar sign) and can be used
as follows.
jQuery.someFeature
$.someFeature