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

integration tests, those are good places to test end-to-end functionality, including
DOM event handlers. We will return briefly to this topic in Chapter 17, Writing
Good Unit Tests.
As there is no need to add an actual DOM event listener while testing, we can
simply stub addEventHandler in the tests. Listing 15.9 shows the first test.
Listing 15.9 Expect the element's submit event to be handled
"test should handle submit event": function () {
var controller = Object.create(userController);
var element = {};
var dom = tddjs.namespace("dom");
dom.addEventHandler = stubFn();
controller.setView(element);
assert(dom.addEventHandler.called);
assertSame(element, dom.addEventHandler.args[0]);
assertEquals("submit", dom.addEventHandler.args[1]);
assertFunction(dom.addEventHandler.args[2]);
}
As we have not yet included addEventHandler as a dependency, we use the
namespace method to retrieve or define the dom namespace before stubbing the
addEventHandler method. The test fails, and Listing 15.10 adds the method
call to pass it.
Listing 15.10 Adding a submit event handler
var dom = tddjs.namespace("dom");
function setView(element) {
element.className = "js-chat";
dom.addEventHandler(element, "submit", function () {});
}
Once again, we use the namespace method to avoid trouble. Using local
aliases to reduce typing and speed up identifier resolution is useful, but also causes
objects to be cached before we use them. Because the source files are loaded first,
the tddjs.dom object is not available when we assign it to the local dom variable.
However, by the time the test triggers the call to dom.addEventHandler , the
test has filled in the blanks. Using the namespace method means both files refer
to the same object without us having to worry about which one loaded first.