JavaScript Unit Testing

JavaScript Unit Testing Tools of the trade

Christian Johansen
http://cjohansen.no/en
http://twitter.com/cjno
http://gitorious.org/~cjohansen
http://github.com/cjohansen

Table of Contents
Why unit test JavaScript?
How to unit test JavaScript?
Brief example of unit testing chat client

Why unit test JavaScript?

Debugging

console.log

F5, F5, F5

Which version?
IE: 6, 7, 8 ?
Firefox: 3.0, 3.5, 3.6, 3.7 ?
Safari: 4, 3.1?
Opera 10.50, 10.10, 10.0?

What about mobile?

Manual testing
It doesn't scale

Manual testing
Non reproducible

Manual testing It's time consuming

Automated unit tests

Unit tests
Run now, run later
Run in new browsers
Put the test in a file rather than Firebug

How to unit test JavaScript?
In-browser test frameworks
Headless test frameworks
Hybrids

In-Browser Frameworks

YUI Test Part of the YUI Framework Can test any code Typical in-browser test framework http://developer.yahoo.com/yui/3/test/

YUI Test 2

YUI Test 3

HTML Fixture loads test

Code To Test: strftime

strftime Overview

Date formats

Unit Test (YUI 3)

The Good Parts
Run in any browser
Simple to get started
(don't even have to download YUI)
Many high-level assertions

The Bad Parts
Requires HTML fixture
Requires internet connection
(can be fixed)
Does not solve the scaling problem

Similar offerings
QUnit
http://docs.jquery.com/QUnit
JsUnitTest (Prototype.js)
http://jsunittest.com/
JsUnit (Since 2001)
http://jsunit.net/

Headless frameworks

JSpec
BDD style testing framework
Custom grammar
(Ruby-like, optional)
Run in browser, or headlessly
http://visionmedia.github.com/jspec /

HTML Fixture

JSpec Spec

Run From Command Line

Result

Headless Run

The Good Parts
Rich library of matchers
Runs in browsers, Rhino, Node.js

More Good Parts
Command Line Tool
Initialize projects
Run tests
Install libraries
+++

JSpec Goodness
Built-in stub and mock API
Built-in mock XMLHttpRequest
Built-in mock timers

The Bad Parts
Rhino + env.js = Fully emulated
Browser launching still manual
Ruby-like DSL (although optional)

Hybrids

JsTestDriver

The JsTestDriver Way
Tests execute in browsers
Browsers listen for tests
Browsers can run locally or remote
Execute in multiple browsers simultaneously

Running Tests
Issue test runs from command line
...or from IDE (Eclipse + Idea)
View results in command line, IDE

JsTestDriver Server
java -jar JsTestDriver-1.2.jar --port 4224

JsTestDriver Config

JsTestDriver Test

Run From Command Line

100% More Color

Uh-oh!

Run in Eclipse

The Good Parts
Scales!
Test any platform from your machine
FAST

More Good Parts
Can integrate runner with other assertion frameworks (QUnit, YIU Test++)
Coverage tool
JUnit compatible XML output

Continuous Integration

JUnit XML Output

Hudson

Mocks and Stubs Working on it! http://gitorious.org/sinon

Quick Live Demo

Want More? Out Fall 2010 Rough cuts available: http://my.safaribooksonline.com/9780321684097

That's it!
http://cjohansen.no/en
http://twitter.com/cjno
http://gitorious.org/~cjohansen
http://github.com/cjohansen

JavaScript Unit Testing

by Christian Johansen on Apr 30, 2010

Accessibility

Tags

Upload Details

Usage Rights

1 Embed 22

Statistics

JavaScript Unit Testing — Presentation Transcript