HTML and CSS Reference
In-Depth Information
9.5.1 Setting Up the Test
To support the tabbed panel we will build a tabController interface, one test
case at a time. Each test case will target a single method in this interface, which
controls the state of the tabs and offers a callback that fires anytime the active tab
changes.
In order for tests to share the setup code, which creates the minimum markup
and keeps a reference to it available for the tests, we wrap the test cases in an
anonymous closure that is immediately executed. Inside it we can add a shortcut to
the namespaced object and a local setUp function. The setup code can be viewed
in Listing 9.3.
Listing 9.3 Test setup using a shared setUp
(function () {
var tabController = tddjs.ui.tabController;
// All test cases can share this setUp
function setUp() {
/*:DOC += <ol id="tabs">
<li><a href="#news">News</a></li>
<li><a href="#sports">Sports</a></li>
<li><a href="#economy">Economy</a></li>
</ol>*/
this.tabs = document.getElementById("tabs");
}
// Test cases go here
}());
In addition to this setup, we will use the two helpers in Listing 9.4, which simply
adds and removes class names from an element's class attribute.
Listing 9.4 Adding and removing class names
(function () {
var dom = tddjs.namespace("dom");
function addClassName(element, cName) {
var regexp = new RegExp("(^ | \\s)" + cName + "(\\s | $ )");
if (element && !regexp.test(element.className)) {
cName = element.className +""+cName;
 
Search WWH ::




Custom Search