HTML and CSS Reference
In-Depth Information
this.controller.handleSubmit(event);
assert(event.preventDefault.called);
}
});
15.2.2.2 Embedding HTML in Tests
Next up is verifying that the model is updated with the username as entered in
an input element. How will we provide an input element in the test? Basically
we have two choices; continue stubbing, e.g., by giving the stub element a stub
getElementsByTagName
method, which returns a stub
input
element, or
embed some markup in the test.
Although the former approach works and allows us to completely control both
direct and indirect inputs to the method under test, it increases the risk of stubs
not matching reality, and for anything other than trivial cases requires us to write a
whole lot of stubs. Embedding some markup in the test will keep the tests closer
to the production environment, and at the same time requires less manual stub-
bing. Additionally, by adding the user form inside the test case, the test case better
documents how to use the controller.
JsTestDriver provides two ways to include HTML in a test; in-memory elements
and elements added to the document. Listing 15.19 shows a test that creates some
HTML that is not attached to the document.
Listing 15.19
Embedding HTML in a JsTestDriver test
"test should embed HTML": function () {
/*:DOC element = <div></div> */
assertEquals("div", this.element.tagName.toLowerCase());
}
As you can see, the name before the equals sign names the property JsTestDriver
should assign the resulting DOM element to. It's important to note that the right
side of the equals sign needs to nest elements inside a single root element. It can
contain an arbitrarily complex structure, but there can only be one root node. The
other way to include HTML in tests is by appending to the document, as Listing
15.20 illustrates.
