Test your Javascript! v1.0

Eric WendelinBlog: eriwen.comTwitter: @eriwenCode: git.io/eric

Why is testing yourJavaScript important?

Tests === Refactor-ability

Tests === Peace of mind

Tests === documentation

Better documentation Maintainability++

The community isbehind in testing

Javascript is hard to test

Un-testable JS ismost of the problem

We must make iteasier to write and run tests

Don’t do this!Do this!

Use with caution!Better!

Don’t do this!Do this!

Testing Approaches

Functional Testing

Gebgebish.org

zombie.jszombie.labnotes.org

PhantomJSphantomjs.org

How do you run a browser without a viewable window?

CasperJSgithub.com/n1k0/casperjs

Unit Testing

QUnitdocs.jquery.com/QUnit

JUnit XML output for QUnit edub.me/umOxnn

sinon.jssinonjs.org

sinon-qunitgithub.com/cjohansen/sinon-qunit

Jasmine + sinon.jspivotal.github.com/jasmine

jasmine-sinongithub.com/froots/jasmine-sinon

JUTE + YUI3 Test Framework github.com/zzo/JUTEyuilibrary.com/yui/docs/test

JsTestDriver + sinon.jscode.google.com/p/js-test-driver/ sinonjs.org

{DEMO}

testling.com

Mochavisionmedia.github.com/mocha

Unique Features• Write tests for the • Reports test durations server AND client sides and ﬂags slow tests• Flexible API • TextMate bundle• coffee-script support • Growl support• Detects slow tests • Unique reporting• Run tests that match a RegExp

How do I choose?• Lots of Ajax or DOM manipulation? • phantom.js, Geb, or zombie.js• IE support is your biggest concern? • Use Geb, JsTestDriver or JUTE• Mobile site (no blackberry)? • phantom.js• Making a JS library for others? • JsTestDriver with Jasmine or QUnit

1 unit test framework +1 functional test framework Infinite Pocket Bacon

Logic / Computation unit test

Computation Example

User Interactionfunctional test

Interaction Example

Debugging is bad Testing is good

A culture of testing

In Real Projects• JsTestDriver, Jasmine, sinon.js and PhantomJS at git.io/eriwen• QUnit, JsTestDriver, sinon.js and PhantomJS at git.io/stacktracejs• Mocha at github.com/visionmedia/express• YUI Test at github.com/eriwen/csslint• zombie.js and jasmine-node at git.io/thumbs

Code at: git.io/ericBlog: eriwen.comTwitter: @eriwen

http://mobicon.tistory.com	362
http://a0.twimg.com	3
https://si0.twimg.com	3
http://www.linkedin.com	2
http://paper.li	1
http://twitter.com	1
http://172.25.1.151	1
http://es.twitter.com	1

Test your Javascript! v1.0

by Eric Wendelin on May 27, 2011

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 374

Statistics

Test your Javascript! v1.0 Presentation Transcript