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.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!
Search WWH ::

Custom Search