Agile JavaScript Testing
Making the web a better place

What?
TDD is...

A Design Method

For better quality
And less bugs

It Goes like this:

1. Think:
What is this code supposed to do?
How am I going to interact with it?
What would be the simplest, clearest API?

2. Write a test
Test what the code is supposed to do

3. Run the test
It will fail.

4. Write the code
Make the test pass

Repeat...

Confused?

“Don’t tests come after?”

Terminology issues...
“tests”, “assertions”, etc...

Get the words right
(it’s easier to think)

Behavior Driven Development
same thing, better terminology

In BDD
you write “specs” to describe “behavior”
you describe what you “expect” to occur

It’s more like...

Behavior Driven Development
With Screw.Unit, a BDD framework for JS
http://github.com/nkallen/screw-unit

Oversimplified Example
We need a method of doubling a number

First in plain text
describe doubleIt
- it returns twice the number passed to it

Now with Screw.Unit

What do we expect?

Now run the spec

Define doubleIt

Run the spec again

You want 4?! Done!

Run the spec again

A couple more expectations

Run the spec again

Refactor the code

Run the spec again

One expectation per spec
Recommended, not always necessary.
Just be pragmatic.

Refactor the specs

Run the spec again

Before / After
Setup and teardown

Higher level - UI interactions

Testing the DOM
Verify JS is doing what we expect to the HTMLs

Testing the DOM
In suite.html (container file), have a special DOM node:
In a before block, set it to it’s default state:

Testing the DOM
In your specs, you can interact with it:

Always more to explore...
Mocking and Stubbing - using the Smoke library
Testing / simulating browser events
Testing / mocking ajax requests and callbacks

Integrate with your workflow
An example using Blue Ridge for Ruby on Rails

Blue Ridge
A JavaScript Testing plugin for Rails
Run JavaScript tests via the command-line, with a
head-less browser environment
Uses Rhino - a Java based JavaScript interpreter
And env.js - an implementation of the DOM in pure
JavaScript (thanks John Resig!)
Screw.Unit and Smoke built in! Plus generators.
http://github.com/relevance/blue-ridge

Always be testing
Run your JS tests at the same time as your
other tests!
Example...

A universe of browsers
each with its own “features” (bugs)

JS Test Driver
Parallel cross-browser testing via command line

JS Test Driver
http://code.google.com/p/js-test-driver/
Launch the server
Capture one or more browsers
Write tests and code
Run your tests
Bonus: Continously run tests, whenever files change

Future / Other
Test Swarm: Distributed Continous Integration for JS
http://testswarm.com
JSpec: An alternative BDD framework for JS
http://visionmedia.github.com/jspec

Thanks!
Scott Becker
becker.scott@gmail.com
http://synthesis.sbecker.net