JavaScript Unit Testing Tools of the trade
Christian Johansen <ul><li>http://cjohansen.no/en </li></ul><ul><li>http://twitter.com/cjno </li></ul><ul><li>http://gitor...
Table of Contents <ul><li>Why unit test JavaScript? </li></ul><ul><li>How to unit test JavaScript? </li></ul><ul><li>Brief...
Why unit test JavaScript?
Debugging
 
console.log
 
 
F5, F5, F5
 
 
 
 
 
 
 
Which version? <ul><ul><li>IE: 6, 7, 8 ? </li></ul></ul><ul><ul><li>Firefox: 3.0, 3.5, 3.6, 3.7 ? </li></ul></ul><ul><ul><...
What about mobile?
Manual testing <ul><li>It doesn't scale </li></ul>
Manual testing <ul><li>Non reproducible </li></ul>
Manual testing It's time consuming
Automated unit tests
Unit tests <ul><li>Run now, run later </li></ul><ul><li>Run in new browsers </li></ul><ul><li>Put the test in a file rathe...
How to unit test JavaScript? <ul><li>In-browser test frameworks </li></ul><ul><li>Headless test frameworks </li></ul><ul><...
In-Browser Frameworks
YUI Test Part of the YUI Framework Can test any code Typical in-browser test framework http://developer.yahoo.com/yui/3/te...
YUI Test 2
YUI Test 3
HTML Fixture loads test
Code To Test: strftime
strftime Overview
Date formats
Unit Test (YUI 3)
The Good Parts <ul><li>Run in any browser </li></ul><ul><li>Simple to get started </li></ul><ul><li>(don't even have to do...
The Bad Parts <ul><li>Requires HTML fixture </li></ul><ul><li>Requires internet connection </li></ul><ul><li>(can be fixed...
Similar offerings <ul><li>QUnit </li></ul><ul><li>http://docs.jquery.com/QUnit </li></ul><ul><li>JsUnitTest (Prototype.js)...
Headless frameworks
JSpec <ul><li>BDD style testing framework </li></ul><ul><li>Custom grammar </li></ul><ul><li>(Ruby-like, optional) </li></...
HTML Fixture
JSpec Spec
Run From Command Line
Result
Headless Run
The Good Parts <ul><li>Rich library of matchers </li></ul><ul><li>Runs in browsers, Rhino, Node.js </li></ul>
More Good Parts <ul><li>Command Line Tool </li></ul><ul><ul><li>Initialize projects </li></ul></ul><ul><ul><li>Run tests <...
JSpec Goodness <ul><li>Built-in stub and mock API </li></ul><ul><li>Built-in mock XMLHttpRequest </li></ul><ul><li>Built-i...
The Bad Parts <ul><li>Rhino + env.js = Fully emulated </li></ul><ul><li>Browser launching still manual </li></ul><ul><li>R...
Hybrids
JsTestDriver
The JsTestDriver Way <ul><li>Tests execute in browsers </li></ul><ul><li>Browsers listen for tests </li></ul><ul><li>Brows...
Running Tests <ul><li>Issue test runs from command line </li></ul><ul><li>...or from IDE (Eclipse + Idea) </li></ul><ul><l...
JsTestDriver Server <ul><li>java -jar JsTestDriver-1.2.jar --port 4224 </li></ul>
 
 
 
 
JsTestDriver Config
JsTestDriver Test
Run From Command Line
100% More Color
Uh-oh!
Run in Eclipse
The Good Parts <ul><li>Scales! </li></ul><ul><li>Test any platform from your machine </li></ul><ul><li>FAST </li></ul>
More Good Parts <ul><li>Can integrate runner with other assertion frameworks (QUnit, YIU Test++) </li></ul><ul><li>Coverag...
Continuous Integration
JUnit XML Output
Hudson
 
 
Mocks and Stubs Working on it! http://gitorious.org/sinon
Quick Live Demo
Want More? Out Fall 2010 Rough cuts available: http://my.safaribooksonline.com/9780321684097
That's it! <ul><li>http://cjohansen.no/en </li></ul><ul><li>http://twitter.com/cjno </li></ul><ul><li>http://gitorious.org...
Upcoming SlideShare
Loading in...5
×

JavaScript Unit Testing

3,570

Published on

Introduction to available tools for unit testing JavaScript

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

No Downloads
Views
Total Views
3,570
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
67
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

JavaScript Unit Testing

  1. 1. JavaScript Unit Testing Tools of the trade
  2. 2. Christian Johansen <ul><li>http://cjohansen.no/en </li></ul><ul><li>http://twitter.com/cjno </li></ul><ul><li>http://gitorious.org/~cjohansen </li></ul><ul><li>http://github.com/cjohansen </li></ul>
  3. 3. Table of Contents <ul><li>Why unit test JavaScript? </li></ul><ul><li>How to unit test JavaScript? </li></ul><ul><li>Brief example of unit testing chat client </li></ul>
  4. 4. Why unit test JavaScript?
  5. 5. Debugging
  6. 7. console.log
  7. 10. F5, F5, F5
  8. 18. Which version? <ul><ul><li>IE: 6, 7, 8 ? </li></ul></ul><ul><ul><li>Firefox: 3.0, 3.5, 3.6, 3.7 ? </li></ul></ul><ul><ul><li>Safari: 4, 3.1? </li></ul></ul><ul><ul><li>Opera 10.50, 10.10, 10.0? </li></ul></ul>
  9. 19. What about mobile?
  10. 20. Manual testing <ul><li>It doesn't scale </li></ul>
  11. 21. Manual testing <ul><li>Non reproducible </li></ul>
  12. 22. Manual testing It's time consuming
  13. 23. Automated unit tests
  14. 24. Unit tests <ul><li>Run now, run later </li></ul><ul><li>Run in new browsers </li></ul><ul><li>Put the test in a file rather than Firebug </li></ul>
  15. 25. How to unit test JavaScript? <ul><li>In-browser test frameworks </li></ul><ul><li>Headless test frameworks </li></ul><ul><li>Hybrids </li></ul>
  16. 26. In-Browser Frameworks
  17. 27. YUI Test Part of the YUI Framework Can test any code Typical in-browser test framework http://developer.yahoo.com/yui/3/test/
  18. 28. YUI Test 2
  19. 29. YUI Test 3
  20. 30. HTML Fixture loads test
  21. 31. Code To Test: strftime
  22. 32. strftime Overview
  23. 33. Date formats
  24. 34. Unit Test (YUI 3)
  25. 35. The Good Parts <ul><li>Run in any browser </li></ul><ul><li>Simple to get started </li></ul><ul><li>(don't even have to download YUI) </li></ul><ul><li>Many high-level assertions </li></ul>
  26. 36. The Bad Parts <ul><li>Requires HTML fixture </li></ul><ul><li>Requires internet connection </li></ul><ul><li>(can be fixed) </li></ul><ul><li>Does not solve the scaling problem </li></ul>
  27. 37. Similar offerings <ul><li>QUnit </li></ul><ul><li>http://docs.jquery.com/QUnit </li></ul><ul><li>JsUnitTest (Prototype.js) </li></ul><ul><li>http://jsunittest.com/ </li></ul><ul><li>JsUnit (Since 2001) </li></ul><ul><li>http://jsunit.net/ </li></ul>
  28. 38. Headless frameworks
  29. 39. JSpec <ul><li>BDD style testing framework </li></ul><ul><li>Custom grammar </li></ul><ul><li>(Ruby-like, optional) </li></ul><ul><li>Run in browser, or headlessly </li></ul><ul><li>http://visionmedia.github.com/jspec / </li></ul>
  30. 40. HTML Fixture
  31. 41. JSpec Spec
  32. 42. Run From Command Line
  33. 43. Result
  34. 44. Headless Run
  35. 45. The Good Parts <ul><li>Rich library of matchers </li></ul><ul><li>Runs in browsers, Rhino, Node.js </li></ul>
  36. 46. More Good Parts <ul><li>Command Line Tool </li></ul><ul><ul><li>Initialize projects </li></ul></ul><ul><ul><li>Run tests </li></ul></ul><ul><ul><li>Install libraries </li></ul></ul><ul><ul><li>+++ </li></ul></ul>
  37. 47. JSpec Goodness <ul><li>Built-in stub and mock API </li></ul><ul><li>Built-in mock XMLHttpRequest </li></ul><ul><li>Built-in mock timers </li></ul>
  38. 48. The Bad Parts <ul><li>Rhino + env.js = Fully emulated </li></ul><ul><li>Browser launching still manual </li></ul><ul><li>Ruby-like DSL (although optional) </li></ul>
  39. 49. Hybrids
  40. 50. JsTestDriver
  41. 51. The JsTestDriver Way <ul><li>Tests execute in browsers </li></ul><ul><li>Browsers listen for tests </li></ul><ul><li>Browsers can run locally or remote </li></ul><ul><li>Execute in multiple browsers simultaneously </li></ul>
  42. 52. Running Tests <ul><li>Issue test runs from command line </li></ul><ul><li>...or from IDE (Eclipse + Idea) </li></ul><ul><li>View results in command line, IDE </li></ul>
  43. 53. JsTestDriver Server <ul><li>java -jar JsTestDriver-1.2.jar --port 4224 </li></ul>
  44. 58. JsTestDriver Config
  45. 59. JsTestDriver Test
  46. 60. Run From Command Line
  47. 61. 100% More Color
  48. 62. Uh-oh!
  49. 63. Run in Eclipse
  50. 64. The Good Parts <ul><li>Scales! </li></ul><ul><li>Test any platform from your machine </li></ul><ul><li>FAST </li></ul>
  51. 65. More Good Parts <ul><li>Can integrate runner with other assertion frameworks (QUnit, YIU Test++) </li></ul><ul><li>Coverage tool </li></ul><ul><li>JUnit compatible XML output </li></ul>
  52. 66. Continuous Integration
  53. 67. JUnit XML Output
  54. 68. Hudson
  55. 71. Mocks and Stubs Working on it! http://gitorious.org/sinon
  56. 72. Quick Live Demo
  57. 73. Want More? Out Fall 2010 Rough cuts available: http://my.safaribooksonline.com/9780321684097
  58. 74. That's it! <ul><li>http://cjohansen.no/en </li></ul><ul><li>http://twitter.com/cjno </li></ul><ul><li>http://gitorious.org/~cjohansen </li></ul><ul><li>http://github.com/cjohansen </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.

×