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.

1. Javascript Unit
Testing
Introduction to QUnit & JsTestDriver
Wednesday 4 May 2011

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

3. Overview
Introduction to QUnit
Introduction to JsTestDriver
Wednesday 4 May 2011

4. QUnit
Wednesday 4 May 2011

5. QUnit
JS Unit Testing library
JsUnit, DOH, YUI Test, ...
JQuery
http://docs.jquery.com/Qunit
Wednesday 4 May 2011

6. QUnit setup
Demo
Wednesday 4 May 2011

7. QUnit structure
module(‘name’[, {lifecycle}])
Wednesday 4 May 2011

8. QUnit structure
test(‘name’[, expected], test-code)
Wednesday 4 May 2011

9. QUnit structure
Demo
Wednesday 4 May 2011

10. QUnit assertions
ok(state[, ‘message’])
Wednesday 4 May 2011

11. QUnit assertions
equal(actual, expected[, ‘message’])
corresponds with: ==
Wednesday 4 May 2011

12. QUnit assertions
notEqual(actual, expected[,
‘message’])
corresponds with: !=
Wednesday 4 May 2011

13. QUnit assertions
Demo
Wednesday 4 May 2011

14. QUnit assertions
deepEqual(actual, expected[,
‘message’])
corresponds with: === (recursive)
Wednesday 4 May 2011

15. QUnit assertions
notDeepEqual(actual, expected[,
‘message’])
corresponds with: !== (recursive)
Wednesday 4 May 2011

16. QUnit assertions
Demo
Wednesday 4 May 2011

17. QUnit assertions
raises(function[, expected][,
‘message’])
Wednesday 4 May 2011

18. QUnit assertions
Demo
Wednesday 4 May 2011

19. Async testing
the good: callbacks
the bad: timers
the ugly: currently not in QUnitAdapter for
JsTestDriver
Wednesday 4 May 2011

20. Async testing
Timers: hard to predict
running time + slows down
Wednesday 4 May 2011

21. Async testing
Callbacks: run assertions
Wednesday 4 May 2011

22. Async testing
Currently not supported
in QUnitAdapter
Wednesday 4 May 2011

23. Async testing
stop()
start()
expect()
asyncTest()
Wednesday 4 May 2011

24. Async testing
Demo
Wednesday 4 May 2011

25. JsTestDriver
Wednesday 4 May 2011

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

27. JsTestDriver
Wednesday 4 May 2011

28. JsTestDriver
Custom syntax
Need mapping from QUnit to JsTestDriver
Some QUnit functionalities not (yet) available
Wednesday 4 May 2011

29. JsTestDriver
module()
test()
ok()
equals()
same() (old name for deepEqual())
Wednesday 4 May 2011

30. JsTestDriver
Fetch JAR from
http://code.google.com/p/js-test-driver/downloads/list
Wednesday 4 May 2011

31. JsTestDriver
Run server
java -jar /path/to/JsTestDriver-1.3.2.jar --port 4224
Wednesday 4 May 2011

32. JsTestDriver
Point browser(s) to
http://localhost:4224
Wednesday 4 May 2011

33. JsTestDriver
Demo
Wednesday 4 May 2011

34. JsTestDriver
Download QUnit adapter
http://code.google.com/p/js-test-driver/wiki/
QUnitAdapter
Wednesday 4 May 2011

35. JsTestDriver
Create config
Wednesday 4 May 2011

36. JsTestDriver
Run tests
java -jar /path/to/JsTestDriver-1.3.2.jar --config
/path/to/jsTestDriver.conf --tests all
Wednesday 4 May 2011

37. JsTestDriver
Demo
Wednesday 4 May 2011

38. Questions?
Read more?
Slideshare
Joind.in
Github
https://github.com/Miljar/
PHPBenelux-BE-may
Wednesday 4 May 2011

39. Code Coverage
Wednesday 4 May 2011

40. Code Coverage
Download plugin from
http://code.google.com/p/js-test-driver/downloads/list
Wednesday 4 May 2011

41. Code Coverage
Include plugin in config
Wednesday 4 May 2011

42. Code Coverage
Add flags when executing tests
--testOutput /path/to/outputfolder
Wednesday 4 May 2011

43. Code Coverage
Install LCOV
Wednesday 4 May 2011

44. Code Coverage
Generate HTML
genhtml /path/to/jsTestDriver.conf-coverage.dat
Wednesday 4 May 2011

45. Code Coverage
Demo
Wednesday 4 May 2011

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

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