Embed Size (px)
DESCRIPTION
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.
Citation preview
Javascript Unit Testing
Introduction to QUnit & JsTestDriver
Wednesday 4 May 2011
Tom Van Herreweghe
PHP developer
ZCE 5.0 & 5.3
I like Javascript
http://blog.theanalogguy.be
@miljar
Wednesday 4 May 2011
Overview
Introduction to QUnit
Introduction to JsTestDriver
Wednesday 4 May 2011
QUnit
Wednesday 4 May 2011
QUnit
JS Unit Testing library
JsUnit, DOH, YUI Test, ...
JQuery
http://docs.jquery.com/Qunit
Wednesday 4 May 2011
QUnit setup
Demo
Wednesday 4 May 2011
QUnit structure
module(‘name’[, {lifecycle}])
Wednesday 4 May 2011
QUnit structure
test(‘name’[, expected], test-code)
Wednesday 4 May 2011
QUnit structure
Demo
Wednesday 4 May 2011
QUnit assertions
ok(state[, ‘message’])
Wednesday 4 May 2011
QUnit assertions
equal(actual, expected[, ‘message’])
corresponds with: ==Wednesday 4 May 2011
QUnit assertions
notEqual(actual, expected[, ‘message’])
corresponds with: !=Wednesday 4 May 2011
QUnit assertions
Demo
Wednesday 4 May 2011
QUnit assertions
deepEqual(actual, expected[, ‘message’])
corresponds with: === (recursive)Wednesday 4 May 2011
QUnit assertions
notDeepEqual(actual, expected[, ‘message’])
corresponds with: !== (recursive)Wednesday 4 May 2011
QUnit assertions
Demo
Wednesday 4 May 2011
QUnit assertions
raises(function[, expected][, ‘message’])
Wednesday 4 May 2011
QUnit assertions
Demo
Wednesday 4 May 2011
Async testing
the good: callbacks
the bad: timers
the ugly: currently not in QUnitAdapter for JsTestDriver
Wednesday 4 May 2011
Async testing
Timers: hard to predictrunning time + slows down
Wednesday 4 May 2011
Async testing
Callbacks: run assertions
Wednesday 4 May 2011
Async testing
Currently not supportedin QUnitAdapter
Wednesday 4 May 2011
Async testing
stop()
start()
expect()
asyncTest()
Wednesday 4 May 2011
Async testing
Demo
Wednesday 4 May 2011
JsTestDriver
Wednesday 4 May 2011
JsTestDriver
Testrunner for your Unit Tests
Written in Java
Client / Server architecture
http://code.google.com/p/js-test-driver
Wednesday 4 May 2011
JsTestDriver
Wednesday 4 May 2011
JsTestDriver
Custom syntax
Need mapping from QUnit to JsTestDriver
Some QUnit functionalities not (yet) available
Wednesday 4 May 2011
JsTestDriver
module()
test()
ok()
equals()
same() (old name for deepEqual())
Wednesday 4 May 2011
JsTestDriver
Fetch JAR fromhttp://code.google.com/p/js-test-driver/downloads/list
Wednesday 4 May 2011
JsTestDriver
Run serverjava -jar /path/to/JsTestDriver-1.3.2.jar --port 4224
Wednesday 4 May 2011
JsTestDriver
Point browser(s) tohttp://localhost:4224
Wednesday 4 May 2011
JsTestDriver
Demo
Wednesday 4 May 2011
JsTestDriver
Download QUnit adapterhttp://code.google.com/p/js-test-driver/wiki/
QUnitAdapter
Wednesday 4 May 2011
JsTestDriver
Create config
Wednesday 4 May 2011
JsTestDriver
Run testsjava -jar /path/to/JsTestDriver-1.3.2.jar --config
/path/to/jsTestDriver.conf --tests all
Wednesday 4 May 2011
JsTestDriver
Demo
Wednesday 4 May 2011
Questions?
Read more?
Slideshare
Joind.in
Githubhttps://github.com/Miljar/PHPBenelux-BE-may
Wednesday 4 May 2011
Code Coverage
Wednesday 4 May 2011
Code Coverage
Download plugin fromhttp://code.google.com/p/js-test-driver/downloads/list
Wednesday 4 May 2011
Code Coverage
Include plugin in config
Wednesday 4 May 2011
Code Coverage
Add flags when executing tests--testOutput /path/to/outputfolder
Wednesday 4 May 2011
Code Coverage
Install LCOV
Wednesday 4 May 2011
Code Coverage
Generate HTMLgenhtml /path/to/jsTestDriver.conf-coverage.dat
Wednesday 4 May 2011
Code Coverage
Demo
Wednesday 4 May 2011
Some links
QUnithttp://docs.jquery.com/Qunit
JsTestDriverhttp://code.google.com/p/js-test-driver/
CI with JsTestDriverhttp://j.mp/acO6QI
Wednesday 4 May 2011
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
