Unit testing javascript
Sponsored Links
This presentation is the property of its rightful owner.
1 / 50

Unit Testing JavaScript PowerPoint PPT Presentation


  • 85 Views
  • Uploaded on
  • Presentation posted in: General

Unit Testing JavaScript. Using Test Driven Development Jon Kruger Email: [email protected] Blog: http://jonkruger.com Twitter: JonKruger. Goals of this talk. Explain why you should write unit tests Show you how to write unit tests for JavaScript code

Download Presentation

Unit Testing JavaScript

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Unit Testing JavaScript

Using Test Driven Development

Jon Kruger

Email: [email protected]

Blog: http://jonkruger.com

Twitter: JonKruger


Goals of this talk

  • Explain why you should write unit tests

  • Show you how to write unit tests for JavaScript code

  • Show you Test Driven Development in action!


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


Informal Survey


What is a unit test?

  • Tests a small unit of functionality

  • Must run fast

  • Isolate external dependencies using mocks and stubs


What is not a unit test?

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

  • Test that is slow

  • Web tests, load tests, performance tests


Why write unit tests?

  • You will write bad code

  • You (or someone else) will break your code

  • Someone else will need to understand your code

  • No compiler for JavaScript

  • Peace of mind


What's in it for me?

  • Proof that your code works

  • Fewer bugs (both now and in the future)

  • Peace of mind


Why Test Driven Development?

  • Design

    • Edge cases

    • Separation of concerns

  • Verification

  • Documentation

  • Testable code

  • When you’re “done” your done


The TDD Lifecycle

  • Get Specs (features or bugs)

  • Write tests

  • Watch ‘emfail

  • Write code

  • Watch ‘empass

  • Repeat!


Your new accountability partner

http://PairProgrammingBot.com


?


JavaScript Unit Testing Frameworks

JSUnitJ3Unit

QUnitJSSpec

YUI TestScrew-Unit

JSNUnitscript.aculo.us unit testing

TestCaseCrosscheck

RhinoUnitjqUnit

more?


Official Measure of Relevance


Relevant JavaScript Testing Frameworks

QUnit

JSSpec

YUI Test

Screw-Unit


JavaScript class design


JavaScript class design


JavaScript class design


QUnit Basics


QUnit basics – module()


QUnit basics – test()


Untestable JavaScript


Untestable JavaScript

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


Testable JavaScript


Untestable JavaScript

Testing this method will pop up an alert box!


Testable JavaScript


Untestable 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 2 – Write tests


Step 2 – Write tests


Step 2 – Write tests


Step 3 – Run tests (should fail)


Step 4 – Create classes


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 ‘emfail

  • Write code

  • Watch ‘empass

  • Repeat!


Step 9 – Celebrate!


Hook it up to your .aspx page!

  • Need to inject UI elements into the tests


What do we have?

  • I know that my code works

  • I know what my code is supposed to do - tests are my documentation of my code

  • I know that my code will continue to work

  • My classes are well-designed

  • Tests and good design will mean that it will be easier to make changes to the code

  • Peace of mind!


Zero Defects

  • Hold yourself to higher standard

  • If your code sucks, then stop writing sucky code.

  • Make quality a priority


?


Resources

  • QUnit home page

    • http://docs.jquery.com/QUnit

  • Integrating QUnit tests into a continuous integration build

    • http://tinyurl.com/qunitbuild

  • MiniSudoku source code

    • http://jonkruger.com/minisudoku/source.php

  • My blog

    • http://jonkruger.com

  • Send me an email!

    • [email protected]

  • Twitter

    • http://twitter.com/jonkruger


  • Login