Unit Testing JavaScript
with QUnit and Sinon

A Portal-themed parody of a British WWII propaganda poster: 'Keep Calm and Continue Testing'

Matthew Turland

(Use arrows to navigate between slides.)

There will be slides

Publications section of my web site at matthewturland.com

Publications section of http://matthewturland.com

I co/wrote these

</ShamelessPlug>

Got tests?

Darth Vader from Star Wars with the caption, 'I find your lack of tests disturbing.'

Enough said

Unit test ALL THE THINGS!

What do unit tests do?

Picard standing in front of the brig containing Riker in the ST:TNG episode 'The Pegasus'

What can unit tests verify?

River Tam gazing up at a screen before whispering 'Miranda' in the film Serenity

What is not a unit test?

Any test where the results can be impacted by...

The Doctor in the TARDIS from Doctor Who

QUnit defined

QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!
QUnit was originally developed by John Resig as part of jQuery... At the time it still depended on jQuery. A rewrite in 2009 fixed that, and now QUnit runs completely standalone.
~ http://qunitjs.com

QUnit basic demo

Demo (lifted from Cookbook)

Test organization

Demo (see also: Cookbook and API documentation)

Black-and-white screenshot of the game Tetris

Equality assertions

Demo (see also: Intro to Unit Testing and API documentation)

Miscellanous assertions

Demo

xkcd: Labyrinth

Real world example

Demo (lifted from Intro to Unit Testing)

Injection for time-based tests

Demo

Injection for DOM-based tests

Parameterize plugin

Demo

Johnny Five from the film Short Circuit

Data provider plugin

Demo

Sinon

Standalone test spies, stubs and mocks for JavaScript.
No dependencies, works with any unit testing framework.
~ http://sinonjs.org

The Procession of the Trojan Horse in Troy by Giovanni Domenico Tiepolo

Spies

Demo

A test spy is a function that records arguments, return value, the value of this and exception thrown (if any) for all its calls... Test spies are useful to test both callbacks and how certain functions/methods are used throughout the system under test.
~ Sinon.JS - Documentation

Spy Vs Spy

Stubs

Demo

Test stubs are functions (spies) with pre-programmed behavior. They support the full test spy API in addition to methods which can be used to alter the stub's behavior... When wrapping an existing function with a stub, the original function is not called.
~ Sinon.JS - Documentation

Crash Dummies figures

Testing Synchronous Callbacks

Demo

Fake timers is a synchronous implementation of setTimeout and friends that ... can overwrite the global functions ... to allow you to more easily test code using them. Fake timers provide a clock object to pass time, which can also be used to control Date objects ...
~ Sinon.JS - Documentation

The TARDIS from Doctor Who

Testing Asynchronous Callbacks

Demo

Provides a fake implementation of XMLHttpRequest and provides several interfaces for manipulating objects created by it. Helps with testing requests made with XHR.
~ Sinon.JS - Documentation

Doc in the blackboard scene from Back to the Future

Code Coverage

Donkey from the Shrek cartoon film franchise

Best Practices

Grumpy Programmer Chris Hartjes declaring, 'WRITE TESTS OR I WILL CUT YOU'

Feedback

Please rate my talk!

http://joind.in/9996

Check out joind.in mobile apps!

http://joind.in/help

QR code with a link to give feedback on joind.in

That's All, Folks