Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Unit Testing

4,692 views

Published on

A short presentation on three different takes on JavaScript Unit Testing

  • Be the first to comment

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>

×