Javascript Unit   TestingIntroduction to QUnit & JsTestDriver
Tom Van HerreweghePHP developerZCE 5.0 & 5.3I like Javascripthttp://blog.theanalogguy.be@miljar
OverviewJavascript Unit Testing?Introduction to QUnitIntroduction to JsTestDriver
Javascript Unit   Testing
JS Unit TestingNot functional testing  Selenium, WatirExample: http://www.cuttherope.ie
JS Unit TestingMultitier ArchitectureWrite DRY codeAvoid event-coupling through HTML  do it in the business logic
QUnit
QUnitJS Unit Testing libraryJQueryhttp://docs.jquery.com/Qunit
QUnitTestrunner = browser
QUnit setup  Demo
QUnit structuremodule(‘name’[, {lifecycle}])
QUnit structuretest(‘name’[, expected], test-code)
QUnit structure    Demo
QUnit assertionsok(state[, ‘message’])
QUnit assertionsequal(actual, expected[, ‘message’])           corresponds with: ==
QUnit assertionsstrictEqual(actual, expected[,         ‘message’])
QUnit assertionsnotEqual(actual, expected[,       ‘message’])       corresponds with: !=
QUnit assertions     Demo
QUnit assertionsdeepEqual(actual, expected[,       ‘message’])    corresponds with: === (recursive)
QUnit assertionsnotDeepEqual(actual, expected[,         ‘message’])      corresponds with: !== (recursive)
QUnit assertions     Demo
QUnit assertionsraises(function[, expected][,         ‘message’])
QUnit assertions     Demo
Async testingthe good: callbacksthe bad: timersthe ugly: currently not in QUnitAdapter forJsTestDriver
Async testing  Timers: hard to predictrunning time + slows down
Async testingCallbacks: run assertions
Async testingCurrently not supported   in QUnitAdapter
Async testingstop()start()expect()asyncTest()
Async testing   Demo
PHPUnit                    QUnitPHPUnit_Framework_TestCase       module    test* methods                  test     assertT...
JsTestDriver
JsTestDriverTestrunner for your Unit TestsWritten in JavaClient / Server architecturehttp://code.google.com/p/js-test-driver
JsTestDriver
JsTestDriverCustom unit testing syntaxNeed mapping from QUnit to JsTestDriverSome QUnit functionalities not (yet) available
JsTestDrivermodule()test()ok()equals()same() (old name for deepEqual())
JsTestDriver            Fetch JAR fromhttp://code.google.com/p/js-test-driver/downloads/list
JsTestDriver                 Run serverjava -jar /path/to/JsTestDriver-1.3.2.jar --port 4224
JsTestDriverPoint browser(s) to  http://localhost:4224
JsTestDriver   Demo
JsTestDriver   Download QUnit adapterhttp://code.google.com/p/js-test-driver/wiki/               QUnitAdapter
JsTestDriver Create config
JsTestDriver                Run testsjava -jar /path/to/JsTestDriver-1.3.2.jar --config      /path/to/jsTestDriver.conf --t...
JsTestDriver   Demo
Questions?Read more?Joind.inhttps://joind.in/4777Githubhttps://github.com/Miljar/
Code Coverage
Code Coverage     Download plugin fromhttp://code.google.com/p/js-test-driver/downloads/list
Code CoverageInclude plugin in config
Code CoverageAdd flags when executing tests      --testOutput /path/to/outputfolder
Code Coverage Install LCOV
Code Coverage        Generate HTMLgenhtml /path/to/jsTestDriver.conf-coverage.dat
Code Coverage    Demo
Some linksQUnithttp://docs.jquery.com/QunitJsTestDriverhttp://code.google.com/p/js-test-driver/CI with JsTestDriverhttp://...
CopyrightsBen Scholzen (http://www.flickr.com/photos/dasprid/5142854471/in/set-72157625158543743)JsTestDriver schema (http:...
Upcoming SlideShare
Loading in...5
×

Javascript Unit Testing

1,936

Published on

These are the slides I presented at the PHPBenelux 2012 conference.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,936
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Javascript Unit Testing

  1. 1. Javascript Unit TestingIntroduction to QUnit & JsTestDriver
  2. 2. Tom Van HerreweghePHP developerZCE 5.0 & 5.3I like Javascripthttp://blog.theanalogguy.be@miljar
  3. 3. OverviewJavascript Unit Testing?Introduction to QUnitIntroduction to JsTestDriver
  4. 4. Javascript Unit Testing
  5. 5. JS Unit TestingNot functional testing Selenium, WatirExample: http://www.cuttherope.ie
  6. 6. JS Unit TestingMultitier ArchitectureWrite DRY codeAvoid event-coupling through HTML do it in the business logic
  7. 7. QUnit
  8. 8. QUnitJS Unit Testing libraryJQueryhttp://docs.jquery.com/Qunit
  9. 9. QUnitTestrunner = browser
  10. 10. QUnit setup Demo
  11. 11. QUnit structuremodule(‘name’[, {lifecycle}])
  12. 12. QUnit structuretest(‘name’[, expected], test-code)
  13. 13. QUnit structure Demo
  14. 14. QUnit assertionsok(state[, ‘message’])
  15. 15. QUnit assertionsequal(actual, expected[, ‘message’]) corresponds with: ==
  16. 16. QUnit assertionsstrictEqual(actual, expected[, ‘message’])
  17. 17. QUnit assertionsnotEqual(actual, expected[, ‘message’]) corresponds with: !=
  18. 18. QUnit assertions Demo
  19. 19. QUnit assertionsdeepEqual(actual, expected[, ‘message’]) corresponds with: === (recursive)
  20. 20. QUnit assertionsnotDeepEqual(actual, expected[, ‘message’]) corresponds with: !== (recursive)
  21. 21. QUnit assertions Demo
  22. 22. QUnit assertionsraises(function[, expected][, ‘message’])
  23. 23. QUnit assertions Demo
  24. 24. Async testingthe good: callbacksthe bad: timersthe ugly: currently not in QUnitAdapter forJsTestDriver
  25. 25. Async testing Timers: hard to predictrunning time + slows down
  26. 26. Async testingCallbacks: run assertions
  27. 27. Async testingCurrently not supported in QUnitAdapter
  28. 28. Async testingstop()start()expect()asyncTest()
  29. 29. Async testing Demo
  30. 30. PHPUnit QUnitPHPUnit_Framework_TestCase module test* methods test assertTrue() ok() equal() assertEquals() deepEqual() assertSame() strictEqual() notEqual() assertNotEquals() notDeepEqual()setExpectedException raises()
  31. 31. JsTestDriver
  32. 32. JsTestDriverTestrunner for your Unit TestsWritten in JavaClient / Server architecturehttp://code.google.com/p/js-test-driver
  33. 33. JsTestDriver
  34. 34. JsTestDriverCustom unit testing syntaxNeed mapping from QUnit to JsTestDriverSome QUnit functionalities not (yet) available
  35. 35. JsTestDrivermodule()test()ok()equals()same() (old name for deepEqual())
  36. 36. JsTestDriver Fetch JAR fromhttp://code.google.com/p/js-test-driver/downloads/list
  37. 37. JsTestDriver Run serverjava -jar /path/to/JsTestDriver-1.3.2.jar --port 4224
  38. 38. JsTestDriverPoint browser(s) to http://localhost:4224
  39. 39. JsTestDriver Demo
  40. 40. JsTestDriver Download QUnit adapterhttp://code.google.com/p/js-test-driver/wiki/ QUnitAdapter
  41. 41. JsTestDriver Create config
  42. 42. JsTestDriver Run testsjava -jar /path/to/JsTestDriver-1.3.2.jar --config /path/to/jsTestDriver.conf --tests all
  43. 43. JsTestDriver Demo
  44. 44. Questions?Read more?Joind.inhttps://joind.in/4777Githubhttps://github.com/Miljar/
  45. 45. Code Coverage
  46. 46. Code Coverage Download plugin fromhttp://code.google.com/p/js-test-driver/downloads/list
  47. 47. Code CoverageInclude plugin in config
  48. 48. Code CoverageAdd flags when executing tests --testOutput /path/to/outputfolder
  49. 49. Code Coverage Install LCOV
  50. 50. Code Coverage Generate HTMLgenhtml /path/to/jsTestDriver.conf-coverage.dat
  51. 51. Code Coverage Demo
  52. 52. Some linksQUnithttp://docs.jquery.com/QunitJsTestDriverhttp://code.google.com/p/js-test-driver/CI with JsTestDriverhttp://j.mp/acO6QI
  53. 53. CopyrightsBen Scholzen (http://www.flickr.com/photos/dasprid/5142854471/in/set-72157625158543743)JsTestDriver schema (http://code.google.com/p/js-test-driver/)Christian Johansen (http://cjohansen.no/)
  1. A particular slide catching your eye?

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

×