JavaScript Unit Testing

Tools to support JavaScript TDD

Overview - Tools•JsUnitTest

•BlueRidge (For Rails)

•JsTestDriver

Overview - Techniques•"Normal tests"

•Asynchronous Tests

•User actions

•Mocking

JsUnitTest•http://jsunittest.com

•Originates from Prototype.js

•Standalone

•Uses a fixture (loaded in browser), a JS file and a CSS file

JsUnitTest Example•Simple test: String.prototype.trim

•Fail and succeed

•JavaScript property names as strings improves readability

JsContextSimple add-on to get basic contexts and tests starting with "should"

http://gitorious.org/jscontext/jscontext

Asynchronous Test•XmlHttpRequest

•Animations

•Timeouts

•More

Async Test Problem•Assertion(s) run after test has completed

•Test passes(!)

•Pay attention to the number of assertions

Async Test Solution•Setup test, call async method

•wait()

•Assert in callback

•Pauses test for x ms

User ActionsYUI Framework to the rescuehttp://developer.yahoo.com/yui/yuitest/#useractions

YAHOO.util.UserAction•click•dblclick•mousedown•mouseup•mouseover•mouseout•mousemove

UserAction example•Using YUI Test

Providing Event Data•detail - # of clicks•screenX/screenY - mouse coordinates (screen)•clientX/clientY - mouse coordinates (client area)•ctrlKey, altKey, shiftKey, metaKey (true means down)•button - 0 left, 1 right, 2 middle•relatedTarget - element mouse moved from YAHOO.util.Event.getRelatedTarget()•keyCode

JsUnitTest Pros•Simple

•Requires little setup

•Run in any browser

JsUnitTest Cons•Doesn't scale

•Requires browser interaction

•F5, F5, F5

•Uses fixtures

Similar OfferingsQUnithttp://docs.jquery.com/QUnit

YUI Testhttp://developer.yahoo.com/yui/yuitest/

JsUnithttp://www.jsunit.net

JsSpechttp://jania.pe.kr/aw/moin.cgi/JSSpec

BlueRidgeTesting cocktail, "convention over configuration" flavoured, for Rails

•Rhino - Java-based JavaScript interpretor•Screw.Unit - RSpec-like BDD framework for JavaScript•Smoke - Mocha-like mocking framework•env.js - JavaScript DOM implementation

script/plugin install git://github.com/relevance/blue-ridge.gitscript/generate blue_ridge

BlueRidge toolsscript/generate javascript_spec mylib

rake test:javascripts TEST=application

rake js:fixtures

rake js:shell

BlueRidge Directories test/javascriptsspec/javascripts OR examples/javascripts

javascripts/fixtures

BlueRidge DemoDouble-click to add text

BlueRidge + PrototypejQuery.noConflict();

require

(Demo)

BlueRidge Pros•Easy to setup

•Command line interaction

•Integrated with Rails

BlueRidge Cons•Doesn't use real browser engines

•In browser: Same as JsUnitTest

JsTestDriver•From Google•Server and Ajax communicates with browsers•Completely command-line driven•Eclipse-plugin•Easy to test several platforms simultaneously and INSTANTLY

JsTestDriver.confserver: http://localhost:4224load: - src/*.js - test/*.js

JsTestDriver demoDouble-click to add text

JsTestDriver Server•Can run server anywhere•Can connect any number of browsers on any number of systems•Tests run quickly•Any number of developers can run their tests on the same server

JsTestDriver Gem•Easier to remember command: jstestdriver•Red and green, baby•Autotest hook

JsTestDriver Pros•Completely commandline based

•Runs in actual browsers

•Scales!

•Several platforms simultaneously

•Can run any assertion framework

JsTestDriver Cons•Beta, slightly buggy (occasionally drops clients++)

•No asynchronous tests (AFAIK)

That's All, Folkshttp://cjohansen.no/

christian@cjohansen.no

Book out next year

http://gitorious.org/javascript-unit-testing