HTML and CSS Reference
In-Depth Information
this.controller.addMessage({ user:"Kyle", message:":)" });
var dts = this.element.getElementsByTagName("dt");
var dds = this.element.getElementsByTagName("dd");
assertEquals(1, dts.length);
assertEquals(2, dds.length);
}
Unsurprisingly, the test fails. To pass it, we need the controller to keep track of
the previous user. This can be done by simply keeping a property with the last seen
user. Listing 15.61 shows the updated
addMessage
method.
Listing 15.61
Keeping track of the previous user
function addMessage(message) {
if (this.prevUser != message.user) {
var user = document.createElement("dt");
user.innerHTML = "@" + message.user;
this.view.appendChild(user);
this.prevUser = message.user;
}
/* ... */
}
Note that non-existent properties resolve to
undefined
, which will never be
equal to the current user, meaning that we don't need to initialize the property. The
first time a message is received, the
prevUser
property will not match the user, so
a
dt
is added. From here on, only messages from new users will cause another
dt
element to be created and appended.
Also note that node lists, as those returned by
getElementsByTagName
are live objects, meaning that they always reflect the current state of the DOM. As
we are now accessing both the collection of
dt
and
dd
elements from both tests,
we could fetch those lists in
setUp
as well to avoid duplicating them. I'll leave
updating the tests as an exercise.
Another exercise is to highlight any message directed at the current user, by
marking the
dd
element with a class name. Remember, the current user is available
through
this.model.currentUser
, and “directed at” is defined as “message
starts with @user:”. Good luck!
