JavaScript Unit Testing Tools to support JavaScript TDD
Overview - Tools <ul><ul><li>JsUnitTest </li></ul></ul><ul><ul><li>BlueRidge (For Rails) </li></ul></ul><ul><ul><li>JsTest...
Overview - Techniques <ul><ul><li>&quot;Normal tests&quot; </li></ul></ul><ul><ul><li>Asynchronous Tests </li></ul></ul><u...
JsUnitTest <ul><ul><li>http://jsunittest.com </li></ul></ul><ul><ul><li>Originates from Prototype.js </li></ul></ul><ul><u...
JsUnitTest Example <ul><ul><li>Simple test: String.prototype.trim </li></ul></ul><ul><ul><li>Fail and succeed </li></ul></...
JsContext <ul><li>Simple add-on to get basic contexts and tests starting with &quot;should&quot; </li></ul><ul><li>http://...
Asynchronous Test <ul><ul><li>XmlHttpRequest </li></ul></ul><ul><ul><li>Animations </li></ul></ul><ul><ul><li>Timeouts </l...
Async Test Problem <ul><ul><li>Assertion(s) run after test has completed </li></ul></ul><ul><ul><li>Test passes(!) </li></...
Async Test Solution <ul><ul><li>Setup test, call async method </li></ul></ul><ul><ul><li>wait() </li></ul></ul><ul><ul><li...
User Actions <ul><li>YUI Framework to the rescue </li></ul><ul><li>http://developer.yahoo.com/yui/yuitest/#useractions </l...
UserAction example <ul><ul><li>Using YUI Test </li></ul></ul>
Providing Event Data <ul><ul><li>detail - # of clicks </li></ul></ul><ul><ul><li>screenX/screenY - mouse coordinates (scre...
JsUnitTest Pros <ul><ul><li>Simple </li></ul></ul><ul><ul><li>Requires little setup </li></ul></ul><ul><ul><li>Run in any ...
JsUnitTest Cons <ul><ul><li>Doesn't scale </li></ul></ul><ul><ul><li>Requires browser interaction </li></ul></ul><ul><ul><...
Similar Offerings <ul><li>QUnit </li></ul><ul><li>http://docs.jquery.com/QUnit </li></ul><ul><li>YUI Test </li></ul><ul><l...
BlueRidge <ul><li>Testing cocktail, &quot;convention over configuration&quot; flavoured, for Rails </li></ul><ul><ul><li>R...
BlueRidge tools <ul><li>script/generate javascript_spec mylib </li></ul><ul><li>rake test:javascripts TEST=application </l...
BlueRidge Directories  <ul><li>test/javascripts </li></ul><ul><li>spec/javascripts OR examples/javascripts </li></ul><ul><...
BlueRidge Demo <ul><li>Double-click to add text </li></ul>
BlueRidge + Prototype <ul><li>jQuery.noConflict(); </li></ul><ul><li>require </li></ul><ul><li>(Demo) </li></ul>
BlueRidge Pros <ul><ul><li>Easy to setup </li></ul></ul><ul><ul><li>Command line interaction </li></ul></ul><ul><ul><li>In...
BlueRidge Cons <ul><ul><li>Doesn't use real browser engines </li></ul></ul><ul><ul><li>In browser: Same as JsUnitTest </li...
JsTestDriver <ul><ul><li>From Google </li></ul></ul><ul><ul><li>Server and Ajax communicates with browsers </li></ul></ul>...
JsTestDriver.conf <ul><li>server: http://localhost:4224 </li></ul><ul><li>load: </li></ul><ul><li>- src/*.js </li></ul><ul...
JsTestDriver demo <ul><li>Double-click to add text </li></ul>
JsTestDriver Server <ul><ul><li>Can run server anywhere </li></ul></ul><ul><ul><li>Can connect any number of browsers on a...
JsTestDriver Gem <ul><ul><li>Easier to remember command: jstestdriver </li></ul></ul><ul><ul><li>Red  and  green , baby </...
JsTestDriver Pros <ul><ul><li>Completely commandline based </li></ul></ul><ul><ul><li>Runs in actual browsers </li></ul></...
JsTestDriver Cons <ul><ul><li>Beta, slightly buggy (occasionally drops clients++) </li></ul></ul><ul><ul><li>No asynchrono...
That's All, Folks <ul><li>http://cjohansen.no/ </li></ul><ul><li>[email_address] </li></ul><ul><li>Book out next year </li...
Upcoming SlideShare
Loading in...5
×

JavaScript Unit Testing

4,233

Published on

A short presentation on three different takes on JavaScript Unit Testing

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,233
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

JavaScript Unit Testing

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

    Clipping is a handy way to collect important slides you want to go back to later.

×