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

Unit Testing JavaScript PowerPoint PPT Presentation


  • 72 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

Unit Testing JavaScript

Using Test Driven Development

Jon Kruger

Email: [email protected]

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!


I thought this was a net user group

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


Informal survey

Informal Survey


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

JSUnitJ3Unit

QUnitJSSpec

YUI TestScrew-Unit

JSNUnitscript.aculo.us unit testing

TestCaseCrosscheck

RhinoUnitjqUnit

more?


Official measure of relevance

Official Measure of Relevance


Relevant javascript testing frameworks

Relevant JavaScript Testing Frameworks

QUnit

JSSpec

YUI Test

Screw-Unit


Javascript class design

JavaScript class design


Javascript class design1

JavaScript class design


Javascript class design2

JavaScript class design


Unit testing javascript

QUnit Basics


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.


Testable javascript

Testable JavaScript


Untestable javascript1

Untestable JavaScript

Testing this method will pop up an alert box!


Testable javascript1

Testable JavaScript


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!

    • [email protected]

  • Twitter

    • http://twitter.com/jonkruger


  • Login