Download - JavaScript Unit Testing
![Page 1: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/1.jpg)
JavaScript Unit Testing
Tools to support JavaScript TDD
![Page 2: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/2.jpg)
Overview - Tools•JsUnitTest
•BlueRidge (For Rails)
•JsTestDriver
![Page 3: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/3.jpg)
Overview - Techniques•"Normal tests"
•Asynchronous Tests
•User actions
•Mocking
![Page 4: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/4.jpg)
JsUnitTest•http://jsunittest.com
•Originates from Prototype.js
•Standalone
•Uses a fixture (loaded in browser), a JS file and a CSS file
![Page 5: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/5.jpg)
JsUnitTest Example•Simple test: String.prototype.trim
•Fail and succeed
•JavaScript property names as strings improves readability
![Page 6: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/6.jpg)
JsContextSimple add-on to get basic contexts and tests starting with "should"
http://gitorious.org/jscontext/jscontext
![Page 7: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/7.jpg)
Asynchronous Test•XmlHttpRequest
•Animations
•Timeouts
•More
![Page 8: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/8.jpg)
Async Test Problem•Assertion(s) run after test has completed
•Test passes(!)
•Pay attention to the number of assertions
![Page 9: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/9.jpg)
Async Test Solution•Setup test, call async method
•wait()
•Assert in callback
•Pauses test for x ms
![Page 10: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/10.jpg)
User ActionsYUI Framework to the rescuehttp://developer.yahoo.com/yui/yuitest/#useractions
YAHOO.util.UserAction•click•dblclick•mousedown•mouseup•mouseover•mouseout•mousemove
![Page 11: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/11.jpg)
UserAction example•Using YUI Test
![Page 12: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/12.jpg)
Providing Event Data•detail - # of clicks•screenX/screenY - mouse coordinates (screen)•clientX/clientY - mouse coordinates (client area)•ctrlKey, altKey, shiftKey, metaKey (true means down)•button - 0 left, 1 right, 2 middle•relatedTarget - element mouse moved from YAHOO.util.Event.getRelatedTarget()•keyCode
![Page 13: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/13.jpg)
JsUnitTest Pros•Simple
•Requires little setup
•Run in any browser
![Page 14: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/14.jpg)
JsUnitTest Cons•Doesn't scale
•Requires browser interaction
•F5, F5, F5
•Uses fixtures
![Page 15: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/15.jpg)
Similar OfferingsQUnithttp://docs.jquery.com/QUnit
YUI Testhttp://developer.yahoo.com/yui/yuitest/
JsUnithttp://www.jsunit.net
JsSpechttp://jania.pe.kr/aw/moin.cgi/JSSpec
![Page 16: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/16.jpg)
BlueRidgeTesting cocktail, "convention over configuration" flavoured, for Rails
•Rhino - Java-based JavaScript interpretor•Screw.Unit - RSpec-like BDD framework for JavaScript•Smoke - Mocha-like mocking framework•env.js - JavaScript DOM implementation
script/plugin install git://github.com/relevance/blue-ridge.gitscript/generate blue_ridge
![Page 17: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/17.jpg)
BlueRidge toolsscript/generate javascript_spec mylib
rake test:javascripts TEST=application
rake js:fixtures
rake js:shell
![Page 18: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/18.jpg)
BlueRidge Directories test/javascriptsspec/javascripts OR examples/javascripts
javascripts/fixtures
![Page 19: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/19.jpg)
BlueRidge DemoDouble-click to add text
![Page 20: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/20.jpg)
BlueRidge + PrototypejQuery.noConflict();
require
(Demo)
![Page 21: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/21.jpg)
BlueRidge Pros•Easy to setup
•Command line interaction
•Integrated with Rails
![Page 22: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/22.jpg)
BlueRidge Cons•Doesn't use real browser engines
•In browser: Same as JsUnitTest
![Page 23: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/23.jpg)
JsTestDriver•From Google•Server and Ajax communicates with browsers•Completely command-line driven•Eclipse-plugin•Easy to test several platforms simultaneously and INSTANTLY
![Page 24: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/24.jpg)
JsTestDriver.confserver: http://localhost:4224load: - src/*.js - test/*.js
![Page 25: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/25.jpg)
JsTestDriver demoDouble-click to add text
![Page 26: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/26.jpg)
JsTestDriver Server•Can run server anywhere•Can connect any number of browsers on any number of systems•Tests run quickly•Any number of developers can run their tests on the same server
![Page 27: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/27.jpg)
JsTestDriver Gem•Easier to remember command: jstestdriver•Red and green, baby•Autotest hook
![Page 28: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/28.jpg)
JsTestDriver Pros•Completely commandline based
•Runs in actual browsers
•Scales!
•Several platforms simultaneously
•Can run any assertion framework
![Page 29: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/29.jpg)
JsTestDriver Cons•Beta, slightly buggy (occasionally drops clients++)
•No asynchronous tests (AFAIK)
![Page 30: JavaScript Unit Testing](https://reader033.vdocuments.mx/reader033/viewer/2022061218/54b7a13b4a79592d048b45a9/html5/thumbnails/30.jpg)
That's All, Folkshttp://cjohansen.no/
Book out next year
http://gitorious.org/javascript-unit-testing