Javascript Unit Testting (PHPBenelux 2011-05-04)

2,339 views

Published on

As a PHP developer, you've probably had to deal with Javascript at some point in your career. Some of the Javascript code you've written may even have been pretty complex. What happens if you need to make some changes? Will it break existing functionality? The only way to really know if everything is still working, is by unit testing your Javascript. This talk will introduce you to QUnit for creating Javascript unit tests and JsTestDriver for automating these tests.

Published in: Self Improvement
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,339
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Javascript Unit Testting (PHPBenelux 2011-05-04)

  1. 1. Javascript Unit Testing Introduction to QUnit & JsTestDriverWednesday 4 May 2011
  2. 2. Tom Van Herreweghe PHP developer ZCE 5.0 & 5.3 I like Javascript http://blog.theanalogguy.be @miljarWednesday 4 May 2011
  3. 3. Overview Introduction to QUnit Introduction to JsTestDriverWednesday 4 May 2011
  4. 4. QUnitWednesday 4 May 2011
  5. 5. QUnit JS Unit Testing library JsUnit, DOH, YUI Test, ... JQuery http://docs.jquery.com/QunitWednesday 4 May 2011
  6. 6. QUnit setup DemoWednesday 4 May 2011
  7. 7. QUnit structure module(‘name’[, {lifecycle}])Wednesday 4 May 2011
  8. 8. QUnit structure test(‘name’[, expected], test-code)Wednesday 4 May 2011
  9. 9. QUnit structure DemoWednesday 4 May 2011
  10. 10. QUnit assertions ok(state[, ‘message’])Wednesday 4 May 2011
  11. 11. QUnit assertions equal(actual, expected[, ‘message’]) corresponds with: ==Wednesday 4 May 2011
  12. 12. QUnit assertions notEqual(actual, expected[, ‘message’]) corresponds with: !=Wednesday 4 May 2011
  13. 13. QUnit assertions DemoWednesday 4 May 2011
  14. 14. QUnit assertions deepEqual(actual, expected[, ‘message’]) corresponds with: === (recursive)Wednesday 4 May 2011
  15. 15. QUnit assertions notDeepEqual(actual, expected[, ‘message’]) corresponds with: !== (recursive)Wednesday 4 May 2011
  16. 16. QUnit assertions DemoWednesday 4 May 2011
  17. 17. QUnit assertions raises(function[, expected][, ‘message’])Wednesday 4 May 2011
  18. 18. QUnit assertions DemoWednesday 4 May 2011
  19. 19. Async testing the good: callbacks the bad: timers the ugly: currently not in QUnitAdapter for JsTestDriverWednesday 4 May 2011
  20. 20. Async testing Timers: hard to predict running time + slows downWednesday 4 May 2011
  21. 21. Async testing Callbacks: run assertionsWednesday 4 May 2011
  22. 22. Async testing Currently not supported in QUnitAdapterWednesday 4 May 2011
  23. 23. Async testing stop() start() expect() asyncTest()Wednesday 4 May 2011
  24. 24. Async testing DemoWednesday 4 May 2011
  25. 25. JsTestDriverWednesday 4 May 2011
  26. 26. JsTestDriver Testrunner for your Unit Tests Written in Java Client / Server architecture http://code.google.com/p/js-test-driverWednesday 4 May 2011
  27. 27. JsTestDriverWednesday 4 May 2011
  28. 28. JsTestDriver Custom syntax Need mapping from QUnit to JsTestDriver Some QUnit functionalities not (yet) availableWednesday 4 May 2011
  29. 29. JsTestDriver module() test() ok() equals() same() (old name for deepEqual())Wednesday 4 May 2011
  30. 30. JsTestDriver Fetch JAR from http://code.google.com/p/js-test-driver/downloads/listWednesday 4 May 2011
  31. 31. JsTestDriver Run server java -jar /path/to/JsTestDriver-1.3.2.jar --port 4224Wednesday 4 May 2011
  32. 32. JsTestDriver Point browser(s) to http://localhost:4224Wednesday 4 May 2011
  33. 33. JsTestDriver DemoWednesday 4 May 2011
  34. 34. JsTestDriver Download QUnit adapter http://code.google.com/p/js-test-driver/wiki/ QUnitAdapterWednesday 4 May 2011
  35. 35. JsTestDriver Create configWednesday 4 May 2011
  36. 36. JsTestDriver Run tests java -jar /path/to/JsTestDriver-1.3.2.jar --config /path/to/jsTestDriver.conf --tests allWednesday 4 May 2011
  37. 37. JsTestDriver DemoWednesday 4 May 2011
  38. 38. Questions? Read more? Slideshare Joind.in Github https://github.com/Miljar/ PHPBenelux-BE-mayWednesday 4 May 2011
  39. 39. Code CoverageWednesday 4 May 2011
  40. 40. Code Coverage Download plugin from http://code.google.com/p/js-test-driver/downloads/listWednesday 4 May 2011
  41. 41. Code Coverage Include plugin in configWednesday 4 May 2011
  42. 42. Code Coverage Add flags when executing tests --testOutput /path/to/outputfolderWednesday 4 May 2011
  43. 43. Code Coverage Install LCOVWednesday 4 May 2011
  44. 44. Code Coverage Generate HTML genhtml /path/to/jsTestDriver.conf-coverage.datWednesday 4 May 2011
  45. 45. Code Coverage DemoWednesday 4 May 2011
  46. 46. Some links QUnit http://docs.jquery.com/Qunit JsTestDriver http://code.google.com/p/js-test-driver/ CI with JsTestDriver http://j.mp/acO6QIWednesday 4 May 2011
  47. 47. Copyrights Ben 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/)Wednesday 4 May 2011

×