Unit Testing JavaScript

transcript

Using Test Driven Development

Jon KrugerEmail: jon@jonkruger.comBlog: http://jonkruger.com

Twitter: JonKruger

Explain why you should write unit testsShow you how to write unit tests for

JavaScript codeShow you Test Driven Development in

action!

Goals of this talk

I thought this was a .NET user group...

Informal Survey

Tests a small unit of functionalityMust run fastIsolate external dependencies using

mocks and stubs

What is a unit test?

Test that runs against external dependencies (e.g. database, UI, file system)

Test that is slowWeb tests, load tests, performance tests

What is not a unit test?

You will write bad codeYou (or someone else) will break your

codeSomeone else will need to understand

your codeNo compiler for JavaScriptPeace of mind

Why write unit tests?

Proof that your code worksFewer bugs (both now and in the future)Peace of mind

What's in it for me?

1. Design Edge cases Separation of concerns

2. Verification3. Documentation4. Testable code5. When you’re “done” your done

Why Test Driven Development?

The TDD Lifecycle

Get Specs (features or bugs)

Write tests

Watch ‘em fail

Write code

Watch ‘em pass

Repeat!

http://PairProgrammingBot.com

Your new accountability partner

JavaScript Unit Testing FrameworksJSUnit J3UnitQUnit JSSpecYUI Test Screw-UnitJSNUnit script.aculo.us unit

testingTestCase Crosscheck

RhinoUnit jqUnitmore?

Official Measure of Relevance

Relevant JavaScript Testing Frameworks

QUnitJSSpec

YUI TestScrew-Unit

JavaScript class design

QUnit Basics

QUnit basics – module()

QUnit basics – test()

Untestable JavaScript

Test won’t run unless it’s run from a page that contains these elements.

Testable JavaScript

Testing this method will pop up an alert box!

Testable JavaScript

Unable to test asynchronous AJAX calls.

Testable JavaScript – synchronous AJAX

Testable JavaScript –stop(), start()

Sample project – "MiniSudoku"

Step 1 – Stub out tests

Step 2 – Write tests

Step 3 – Run tests (should fail)

Step 4 – Create classes

Step 5 – Run tests (should fail)

Step 6 – Write actual class code

Step 7 – Passing tests!

Step 8 – Repeat!

Get Specs (features or bugs)

Write tests

Watch ‘em fail

Write code

Watch ‘em pass

Repeat!

Step 9 – Celebrate!

Need to inject UI elements into the tests

Hook it up to your .aspx page!

I know that my code worksI know what my code is supposed to do - tests

are my documentation of my codeI know that my code will continue to workMy classes are well-designed Tests and good design will mean that it will

be easier to make changes to the codePeace of mind!

What do we have?

Hold yourself to higher standardIf your code sucks, then stop writing sucky

code.Make quality a priority

Zero Defects

QUnit home pagehttp://docs.jquery.com/QUnit

Integrating QUnit tests into a continuous integration build http://tinyurl.com/qunitbuild

MiniSudoku source codehttp://jonkruger.com/minisudoku/source.php

My bloghttp://jonkruger.com

Send me an email! jon@jonkruger.com

Twitterhttp://twitter.com/jonkruger

Resources

Unit Testing JavaScript

Documents