HTML and CSS Reference
In-Depth Information
like a good fit; its value is the entire height of the element's contents, which will
obviously always be greater than the greatest possible
scrollTop
. Listing 15.83
shows the test.
Listing 15.83
Expecting the message list controller to scroll its view down
TestCase("MessageListControllerAddMessageTest", {
/* ... */
"test should scroll element down": function () {
var element = {
appendChild: stubFn(),
scrollHeight: 1900
};
this.controller.setView(element);
this.controller.addMessage({ user:"me",message:"Hey" });
assertEquals(1900, element.scrollTop);
}
});
This test uses a stubbed element rather than the actual element available in the
test. In a test such as this, we need complete control over the input and output to
verify its correct behavior. We cannot stub an element's
scrollTop
property setter;
neither can we easily determine that its value was set correctly, because it depends
on the rendered height and requires styles to be added to make the element scroll
on overflow to begin with. To pass the test we assign the value of
scrollHeight
to
scrollTop
as seen in Listing 15.84.
Listing 15.84
Scrolling the message list down on each new message
function addMessage(message) {
/* ... */
this.view.scrollTop = this.view.scrollHeight;
}
15.6.1.3 Clearing the Input Field
When a user has posted her message, it is unlikely that they would like to start the
next message with the text from the previous one. Thus, the message form controller
should clear the input field once the message is posted. Listing 15.85 shows the test.
