JavaScript Unit Testing

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

JsContext
Simple 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 Actions
YUI Framework to the rescue
http://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 Offerings
QUnit
http://docs.jquery.com/QUnit
YUI Test
http://developer.yahoo.com/yui/yuitest/
JsUnit
http://www.jsunit.net
JsSpec
http://jania.pe.kr/aw/moin.cgi/JSSpec

BlueRidge
Testing 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.git
script/generate blue_ridge

BlueRidge tools
script/generate javascript_spec mylib
rake test:javascripts TEST=application
rake js:fixtures
rake js:shell

BlueRidge Directories
test/javascripts
spec/javascripts OR examples/javascripts
javascripts/fixtures

BlueRidge Demo
Double-click to add text

BlueRidge + Prototype
jQuery.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.conf
server: http://localhost:4224
load:
- src/*.js
- test/*.js

JsTestDriver demo
Double-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, Folks
http://cjohansen.no/
[email_address]
Book out next year
http://gitorious.org/javascript-unit-testing

JavaScript Unit Testing

by Christian Johansen on Sep 22, 2009

Accessibility

Upload Details

Usage Rights

1 Embed 21

Statistics

JavaScript Unit Testing Presentation Transcript