TDD and DOM Manipulation: The Chat Client - Test-Driven JavaScript Development - page 416

That's it for now. We'll need the method to actually store the view as well, but
preferably without poking at its implementation. Also, currently there is no need to
store it, at least not until we need to use it in another context.
15.4.3 Adding Messages
Onwards to the heart and soul of the controller; receiving messages, building DOM
elements for them, and injecting them into the view. The first thing we will test
for is that a dt element containing the user prefixed with an “@” is added to the
definition list, as Listing 15.53 shows.
Listing 15.53 Expecting the user to be injected into the DOM in a dt element
TestCase("MessageListControllerAddMessageTest", {
setUp: messageListControllerSetUp,
"test should add dt element with @user": function () {
this.controller.setModel(this.model);
this.controller.setView(this.element);
this.controller.addMessage({
user: "Eric",
message: "We are trapper keeper"
});
var dts = this.element.getElementsByTagName("dt");
assertEquals(1, dts.length);
assertEquals("@Eric", dts[0].innerHTML);
}
});
The test adds a message and then expects the definition list to have gained a dt
element. To pass the test we need to build an element and append it to the view, as
Listing 15.54 shows.
Listing 15.54 Adding the user to the list
function addMessage(message) {
var user = document.createElement("dt");
user.innerHTML = "@" + message.user;
this.view.appendChild(user);
}
Boom! Test fails; this.view is undefined . There we go, a documented
need for the view to be kept in a property. Listing 15.55 fixes setView to store a
reference to the element.