Your SlideShare is downloading. ×
Javascript Unit Testing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Javascript Unit Testing

1,853
views

Published on

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

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,853
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

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/)