Javascript Unit Testing
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Javascript Unit Testing

  • 2,269 views
Uploaded on

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

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

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,269
On Slideshare
2,267
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
24
Comments
0
Likes
2

Embeds 2

http://www.linkedin.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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