I've been using JsUnit for a while now to do Test Driven Development with OO Javascript. I've been implementing mock objects simply by stubbing out methods and adding in a limited amount of logic, but it's just not the same. So, this past weekend was the time to come up with a port of jMock to Javascript. But before reinventing the wheel, I thought I'd take a look around one more time to see if anyone had beaten me to the punch. Enter JsMock, a Javascript mock objects library that supports Firefox 1.0+, IE6+ and Safari 1.5+.
You can add JsMock into JsUnit tests simply by including the jsmock.js file into your unit test HTML page and adding some mock object code to your tests. An example:
var mockControl =
null;
var div =
null;
function setUp
()
{
mockControl =
new MockControl
();
div = document.
createElement("div");
}
/* Interface we will mock */
function DocWrapper() {};
DocWrapper.prototype = {
byId:function(){},
create:function(){},
appendToBody:function(){}
};
/* Object we will test */
function Hello(docWrapper) { this.docWrapper = docWrapper; };
Hello.prototype = {
displayHello:function(id) {
var elem = this.docWrapper.byId(id);
if (elem == null) {
elem = this.docWrapper.create("div");
elem.id = id;
this.docWrapper.appendToBody(elem);
}
elem.style.fontWeight = 'bold';
}
};
/* tests we will run */
function test_NewElem() {
var mock = mockControl.createMock(DocWrapper);
mock.expect().byId("helloContent").andReturn(null);
mock.expect().create("div").andReturn(div);
mock.expect().appendToBody(div);
var hello = new Hello(mock);
hello.displayHello("helloContent");
try {
mockControl.verify();
}
catch(e)
{
fail("Verify should have passed: " + e);
}
}
function test_ExistingElem() {
var mock = mockControl.createMock(DocWrapper);
mock.expect().byId("helloContent").andReturn(div);
var hello = new Hello(mock);
hello.displayHello("helloContent");
try {
mockControl.verify();
}
catch(e)
{
fail("Verify should have passed: " + e);
}
}
function test_BadOrder() {
var mock = mockControl.createMock(DocWrapper);
mock.expect().create("div").andReturn(div);
mock.expect().byId("helloContent").andReturn(null);
mock.expect().appendToBody(div);
var hello = new Hello(mock);
hello.displayHello("helloContent");
try {
mockControl.verify();
}
catch(e)
{
fail("This will fail: \n" + e);
}
}
In the above example, we stub out an interface for a wrapper for the document object (in Firefox and Safari you can actually mock the document object, but not in IE), mock it out for different scenarios, then put the Hello class through its paces, first when there is no DOM node with id "helloContent" and next when there is one. We don't actually modify the DOM in this case, we just reuse a scratch DIV node that we create in the setup. The last test fails on purpose, just to illustrate how the order of calls matters in JsMock.
:
The documentation is a little sparse, so you have to work your way through the examples to get the gist of JsMock. Prior knowledge of jMock or EasyMock is definitely helpful. If you never do any OO Javascript or TDD, you won't understand why you need something like JsMock. If you do TDD, have at it. It's just another step in the professionalization of Javascript development.
BTW, this tool was just released in August and updated in the last few days, so the paint is still wet on it. Please consider making bug reports to the authors.
