Unittesting JavaScript with Evidence

Unittesting JavaScript
with Evidence
Tobie Langel
@tobie on twitter

“Evidence in its broadest
sense includes everything
that is used to determine
or demonstrate the truth
of an assertion.”
–Wikipedia

http://github.com/tobie/evidence

Yet Another Unit Test
Framework

DOH Test.Simple/More
JSUnit TestCase
QUnit jsUnitTest
Crosscheck JSTest
J3Unit jsUnity
JSNUnit RhinoUnit
YUI Test FireUnit
JSSpec ...
unittest.js
JSpec
screw-unit

Unittesting JavaScript with Evidence

A lot of unit tests (> 2000 assertions).

Complex cases (async, cross-browser).

Uses a framework originally created in
2005 for script.aculo.us...

Uses a framework originally created in
2005 for script.aculo.us...
...with a dependency on Prototype.

#2
Environment agnostic
(Attempts to run in as many different
environments as possible.)

#3
Self-contained
(Doesn’t pollute the global scope.)

“I recommend that
developers spend
25-50% of their time
developing tests.”
–Kent Beck

Drawing by Witold Riedel (http://www.witoldriedel.com)

Kent Beck’s original
white paper


Kent Beck’s original
white paper
http://tr.im/kentbeck


... and of course, Kent
Beck’s original Smalltalk
implementation.

JavaScript’s awful at
writing DSLs

you’re using it’s bad
parts!

function callAssertions(fn) {
var rgxp = /^[^{]*{((.*n*)*)}/m;
fn = fn.toString();
fn = fn.match(rgxp)[1];

eval('with (dsl) {
with (context) {
with (matchers) { ' +
fn + ' }}}');
}

Function decompilation
(Not part of any standard.)
var rgxp = /^[^{]*{((.*n*)*)}/m;
fn = fn.toString();

eval('with (dsl) {
with (context) {
fn + ' }}}');
}

var rgxp = /^[^{]*{((.*n*)*)}/m;
fn = fn.toString();

eval('with (dsl) {
with (context) {
fn + ' }}}'); Nested with statements
} (Not ES5 strict compliant.)

var rgxp = /^[^{]*{((.*n*)*)}/m;
fn = fn.toString();
eval
(Not supported in some environments.)

eval('with (dsl) {
with (context) {
fn + ' }}}');
}

xUnit
TestCase
TestSuite
TestRunner

xUnit
TestCase
TestSuite
TestRunner
TestResult

setUp: function() {
},
“Subclass” TestCase
},

}
});

setUp: function() {
},
Give it a name.
},

}
});

setUp: function() {
},

Add ﬁxtures to your _.ﬁrst(this.array));
this.assertEqual('foo',
setUp method.
},

}
});

Preﬁx setUp:testcases {with
your function()
}, test.
},

}
});

setUp: function() {
},

},

testLast: your assertions.
Write function() {
}
});

setUp: function() {
},

},

}
Optionally add
}); meaningful error
messages.

Evidence.TestCase.extend('AjaxTest', {
testAjaxRequest: function(testcase) {
testcase.pause();
new Ajax.Request('/some/url', {
onComplete: function(response) {
testcase.resume(function() {
this.assert(response);
});
}
});
}
});

testcase.pause();
new Ajax.Request('/some/url', { instance
TestCase
conveniently passed as a
this.assert(response); ﬁrst argument.
});
}
});
}
});

No need to bind this or
testcase.pause();
create your own closure.
});
}
});
}
});

testcase.pause();
});
Bound to the original
}
}); scope so:
} this === testcase
});

Grab all the methods
var results = []; starting with test.

}
}

}

var results = [];

} Sort the results.
}

}

function loadTestsFromTestCase(testcaseClass) {
var suite = new TestSuite(testcaseClass.displayName),
methodNames = getTestCaseNames(testcaseClass);

for (var i = 0; i < methodNames.length; i++) {
suite.push(new testcaseClass(methodNames[i]));
}

return suite;
}

Create a new suite.


}

return suite;
}

Give it a name.


}

return suite;
}


}
Grab the testcase names.

return suite;
}


}

return suite; Create a new instance of
}
the testcase class.


}

return suite;
Add it to your suite.
}

Evidence.TestCase.extend('ElementTest', {
setUp: function() {
this.element = document.createElement('div');
},

testElementExtend: function() {
var extended = Element.extend(this.element);
this.assertEqual(this.element, extended);
this.assertRespondsTo('show', extended);
// ...
},

testElementClone: function() {
var cloned = Element.clone(this.element);
this.assert(cloned.show); // is extended
// ...
}
});

setUp: function() {
},
What!?
// ...
},

// ...
}
});

setUp: function() {
},

// ...
}, Again?!
// ...
}
});

setUp: function() {
},

// ...
},

// ...
OK, now I get it.
}
});

//...

assertElementExtended: function(element, message) {
this._assertExpression(
typeof element.show === 'function',
message || 'Element is not extended.',
'Expected %o to be extended.', element
);
},

this.assertElementExtended(extended);
},

this.assertElementExtended(cloned);
}

//...

assertElementExtended: function(element, message) {
this._assertExpression(
typeof element.show === 'function',
!
message || 'Element is not extended.',
'Expected %o to be extended.', element
);
Syntax still subject to
}, change!
this.assertElementExtended(extended);
},

this.assertElementExtended(cloned);
}

function getInnerHTML(element) {
var html = element.innerHTML.toString();
return html.toLowerCase().gsub(/[rnt]/, '');
}

// ...

testElementInsert: function() {
var html = '<p>a paragraph</p>';
Element.insert(this.element, html);
this.assertEqual(html, getInnerHTML(this.element));
}
});

}
Global scope pollution.
// ...

}
});

} Obscure syntax.
What’s wrong with
//this.element.innerHTML?
...

}
});

// ...

this.assertEqual(html, this.getElementHTML());
},

getElementHTML: function() {
var html = this.element.innerHTML.toString();
}
});

// ...
Instance method!
},

}
});

// ...

},

Would beneﬁt from a
custom assertion too.
}
});

var suite = loadTestsFromTestCase(ArrayTest);
var runner = new Evidence.Runner();
var results = runner.run(suite);

Logs to the console.

The TestResult

Logs to the console.

The TestResult

Prints to STDOUT.

Displays the results in Logs to the console.
a web page.

The TestResult

Prints to STDOUT.

Displays the results in Logs to the console.
a web page.

The TestResult
Sends the data back
to the server in JSON
Prints to STDOUT.
(or XML).

Evidence.TestCase.extend('ArrayTest', {
setUp: function() {
},

},

}
});

?
@tobie on twitter

http://github.com/tobie/evidence
(Soon hopefully on http://evidencejs.org)

Unittesting JavaScript with Evidence

More Related Content

What's hot (20)

Similar to Unittesting JavaScript with Evidence (20)

Recently uploaded (20)

Unittesting JavaScript with Evidence