JavaScript Unit Testing with Evidence Framework

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

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)

JavaScript Unit Testing with Evidence Framework

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to JavaScript Unit Testing with Evidence Framework

Similar to JavaScript Unit Testing with Evidence Framework (20)

Recently uploaded

Recently uploaded (20)

JavaScript Unit Testing with Evidence Framework