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

Listing 15.55 Storing a reference to the view element
function setView(element) {
element.className = "js-chat";
this.view = element;
}
With a reference to the view in place, all the tests pass. That leaves the message,
which should be added to the DOM as well. Listing 15.56 shows the test.
Listing 15.56 Expecting the message to be added to the DOM
TestCase("MessageListControllerAddMessageTest", {
setUp: function () {
messageListControllerSetUp.call(this);
this.controller.setModel(this.model);
this.controller.setView(this.element);
},
/* ... */
"test should add dd element with message": function () {
this.controller.addMessage({
user: "Theodore",
message: "We are one"
});
var dds = this.element.getElementsByTagName("dd");
assertEquals(1, dds.length);
assertEquals("We are one", dds[0].innerHTML);
}
});
Again, some test setup code was immediately elevated to the setUp method,
to keep the goal of the test obvious. To pass this test, we basically just need to repeat
the three lines from before, changing the text content and tag name. Listing 15.57
has the lowdown.
Listing 15.57 Adding the message as a dd element
function addMessage(message) {
/* ... */
var msg = document.createElement("dd");
msg.innerHTML = message.message;
this.view.appendChild(msg);
}