Unit testing javascript
Download
1 / 50

Unit Testing JavaScript - PowerPoint PPT Presentation


  • 80 Views
  • Uploaded on

Unit Testing JavaScript. Using Test Driven Development Jon Kruger Email: jon@jonkruger.com 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Unit Testing JavaScript' - sloane-fitzgerald


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

Unit Testing JavaScript

Using Test Driven Development

Jon Kruger

Email: jon@jonkruger.com

Blog: http://jonkruger.com

Twitter: JonKruger


Goals of this talk
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!




What is a unit test
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
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
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
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
Why Test Driven Development?

  • Design

    • Edge cases

    • Separation of concerns

  • Verification

  • Documentation

  • Testable code

  • When you’re “done” your done


The tdd lifecycle
The TDD Lifecycle

  • Get Specs (features or bugs)

  • Write tests

  • Watch ‘emfail

  • Write code

  • Watch ‘empass

  • Repeat!


Your new accountability partner
Your new accountability partner

http://PairProgrammingBot.com


Unit testing javascript

?


Javascript unit testing frameworks
JavaScript Unit Testing Frameworks

JSUnit J3Unit

QUnit JSSpec

YUI Test Screw-Unit

JSNUnit script.aculo.us unit testing

TestCase Crosscheck

RhinoUnitjqUnit

more?



Relevant javascript testing frameworks
Relevant JavaScript Testing Frameworks

QUnit

JSSpec

YUI Test

Screw-Unit






Qunit basics module
QUnit basics – module()


Qunit basics test
QUnit basics – test()


Unit testing javascript

Untestable JavaScript


Untestable javascript
Untestable JavaScript

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



Untestable javascript1
Untestable JavaScript

Testing this method will pop up an alert box!



Untestable javascript2
Untestable JavaScript

Unable to test asynchronous AJAX calls.


Testable javascript synchronous ajax
Testable JavaScript – synchronous AJAX


Testable javascript stop start
Testable JavaScript –stop(), start()


Unit testing javascript

?


Sample project minisudoku
Sample project – "MiniSudoku"


Step 1 stub out tests
Step 1 – Stub out tests


Step 2 write tests
Step 2 – Write tests


Step 2 write tests1
Step 2 – Write tests


Step 2 write tests2
Step 2 – Write tests


Step 2 write tests3
Step 2 – Write tests


Step 3 run tests should fail
Step 3 – Run tests (should fail)


Step 4 create classes
Step 4 – Create classes


Step 4 create classes1
Step 4 – Create classes


Step 5 run tests should fail
Step 5 – Run tests (should fail)


Step 6 write actual class code
Step 6 – Write actual class code


Step 7 passing tests
Step 7 – Passing tests!


Step 8 repeat
Step 8 – Repeat!

  • Get Specs (features or bugs)

  • Write tests

  • Watch ‘emfail

  • Write code

  • Watch ‘empass

  • Repeat!


Step 9 celebrate
Step 9 – Celebrate!


Hook it up to your aspx page
Hook it up to your .aspx page!

  • Need to inject UI elements into the tests


What do we have
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
Zero Defects

  • Hold yourself to higher standard

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

  • Make quality a priority


Unit testing javascript

?


Resources
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!

    • jon@jonkruger.com

  • Twitter

    • http://twitter.com/jonkruger