Agile JavaScript Testing

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

Oversimpliﬁed 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

Deﬁne 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 ﬁle), 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 workﬂow 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 ﬁles 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

http://synthesis.sbecker.net	927
http://www.slideshare.net	32
http://synthesis2.sbecker.net	27
http://feeds.feedburner.com	15
http://synthesis-old.sbecker.net	7
http://aulenbac.tumblr.com	2
http://web1.conversationminer.com	2
http://a0.twimg.com	2
http://localhost:3000	1
http://www.synthesis.sbecker.net	1
http://webcache.googleusercontent.com	1

Agile JavaScript Testing

by Scott Becker on Jun 25, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 1,017

Statistics

Agile JavaScript Testing — Presentation Transcript