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

1. Javascript Unit
Testing
Introduction to QUnit & JsTestDriver

2. Tom Van Herreweghe
PHP developer
ZCE 5.0 & 5.3
I like Javascript
http://blog.theanalogguy.be
@miljar

3. Overview
Javascript Unit Testing?
Introduction to QUnit
Introduction to JsTestDriver

4. Javascript Unit
Testing

5. JS Unit Testing
Not functional testing
Selenium, Watir
Example: http://www.cuttherope.ie

6. JS Unit Testing
Multitier Architecture
Write DRY code
Avoid event-coupling through HTML
do it in the business logic

7. QUnit

8. QUnit
JS Unit Testing library
JQuery
http://docs.jquery.com/Qunit

9. QUnit
Testrunner = browser

10. QUnit setup
Demo

11. QUnit structure
module(‘name’[, {lifecycle}])

12. QUnit structure
test(‘name’[, expected], test-code)

13. QUnit structure
Demo

14. QUnit assertions
ok(state[, ‘message’])

15. QUnit assertions
equal(actual, expected[, ‘message’])
corresponds with: ==

16. QUnit assertions
strictEqual(actual, expected[,
‘message’])

17. QUnit assertions
notEqual(actual, expected[,
‘message’])
corresponds with: !=

18. QUnit assertions
Demo

19. QUnit assertions
deepEqual(actual, expected[,
‘message’])
corresponds with: === (recursive)

20. QUnit assertions
notDeepEqual(actual, expected[,
‘message’])
corresponds with: !== (recursive)

21. QUnit assertions
Demo

22. QUnit assertions
raises(function[, expected][,
‘message’])

23. QUnit assertions
Demo

24. Async testing
the good: callbacks
the bad: timers
the ugly: currently not in QUnitAdapter for
JsTestDriver

25. Async testing
Timers: hard to predict
running time + slows down

26. Async testing
Callbacks: run assertions

27. Async testing
Currently not supported
in QUnitAdapter

28. Async testing
stop()
start()
expect()
asyncTest()

29. Async testing
Demo

30. PHPUnit QUnit
PHPUnit_Framework_TestCase module
test* methods test
assertTrue() ok()
equal()
assertEquals()
deepEqual()
assertSame() strictEqual()
notEqual()
assertNotEquals()
notDeepEqual()
setExpectedException raises()

31. JsTestDriver

32. JsTestDriver
Testrunner for your Unit Tests
Written in Java
Client / Server architecture
http://code.google.com/p/js-test-driver

33. JsTestDriver

34. JsTestDriver
Custom unit testing syntax
Need mapping from QUnit to JsTestDriver
Some QUnit functionalities not (yet) available

35. JsTestDriver
module()
test()
ok()
equals()
same() (old name for deepEqual())

36. JsTestDriver
Fetch JAR from
http://code.google.com/p/js-test-driver/downloads/list

37. JsTestDriver
Run server
java -jar /path/to/JsTestDriver-1.3.2.jar --port 4224

38. JsTestDriver
Point browser(s) to
http://localhost:4224

39. JsTestDriver
Demo

40. JsTestDriver
Download QUnit adapter
http://code.google.com/p/js-test-driver/wiki/
QUnitAdapter

41. JsTestDriver
Create config

42. JsTestDriver
Run tests
java -jar /path/to/JsTestDriver-1.3.2.jar --config
/path/to/jsTestDriver.conf --tests all

43. JsTestDriver
Demo

44. Questions?
Read more?
Joind.in
https://joind.in/4777
Github
https://github.com/Miljar/

45. Code Coverage

46. Code Coverage
Download plugin from
http://code.google.com/p/js-test-driver/downloads/list

47. Code Coverage
Include plugin in config

48. Code Coverage
Add flags when executing tests
--testOutput /path/to/outputfolder

49. Code Coverage
Install LCOV

50. Code Coverage
Generate HTML
genhtml /path/to/jsTestDriver.conf-coverage.dat

51. Code Coverage
Demo

52. Some links
QUnit
http://docs.jquery.com/Qunit
JsTestDriver
http://code.google.com/p/js-test-driver/
CI with JsTestDriver
http://j.mp/acO6QI

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