Upload
tom-van-herreweghe
View
1.910
Download
2
Embed Size (px)
DESCRIPTION
These are the slides I presented at the PHPBenelux 2012 conference.
Citation preview
Javascript Unit Testing
Introduction to QUnit & JsTestDriver
Tom Van Herreweghe
PHP developer
ZCE 5.0 & 5.3
I like Javascript
http://blog.theanalogguy.be
@miljar
Overview
Javascript Unit Testing?
Introduction to QUnit
Introduction to JsTestDriver
Javascript Unit Testing
JS Unit Testing
Not functional testing
Selenium, Watir
Example: http://www.cuttherope.ie
JS Unit Testing
Multitier Architecture
Write DRY code
Avoid event-coupling through HTML
do it in the business logic
QUnit
QUnit
JS Unit Testing library
JQuery
http://docs.jquery.com/Qunit
QUnit
Testrunner = browser
QUnit setup
Demo
QUnit structure
module(‘name’[, {lifecycle}])
QUnit structure
test(‘name’[, expected], test-code)
QUnit structure
Demo
QUnit assertions
ok(state[, ‘message’])
QUnit assertions
equal(actual, expected[, ‘message’])
corresponds with: ==
QUnit assertions
strictEqual(actual, expected[, ‘message’])
QUnit assertions
notEqual(actual, expected[, ‘message’])
corresponds with: !=
QUnit assertions
Demo
QUnit assertions
deepEqual(actual, expected[, ‘message’])
corresponds with: === (recursive)
QUnit assertions
notDeepEqual(actual, expected[, ‘message’])
corresponds with: !== (recursive)
QUnit assertions
Demo
QUnit assertions
raises(function[, expected][, ‘message’])
QUnit assertions
Demo
Async testing
the good: callbacks
the bad: timers
the ugly: currently not in QUnitAdapter for JsTestDriver
Async testing
Timers: hard to predictrunning time + slows down
Async testing
Callbacks: run assertions
Async testing
Currently not supportedin QUnitAdapter
Async testing
stop()
start()
expect()
asyncTest()
Async testing
Demo
PHPUnit QUnitPHPUnit_Framework_TestCase module
test* methods testassertTrue() ok()
assertEquals() equal()deepEqual()
assertSame() strictEqual()
assertNotEquals() notEqual()notDeepEqual()
setExpectedException raises()
JsTestDriver
JsTestDriver
Testrunner for your Unit Tests
Written in Java
Client / Server architecture
http://code.google.com/p/js-test-driver
JsTestDriver
JsTestDriver
Custom unit testing syntax
Need mapping from QUnit to JsTestDriver
Some QUnit functionalities not (yet) available
JsTestDriver
module()
test()
ok()
equals()
same() (old name for deepEqual())
JsTestDriver
Fetch JAR fromhttp://code.google.com/p/js-test-driver/downloads/list
JsTestDriver
Run serverjava -jar /path/to/JsTestDriver-1.3.2.jar --port 4224
JsTestDriver
Demo
JsTestDriver
Download QUnit adapterhttp://code.google.com/p/js-test-driver/wiki/
QUnitAdapter
JsTestDriver
Create config
JsTestDriver
Run testsjava -jar /path/to/JsTestDriver-1.3.2.jar --config
/path/to/jsTestDriver.conf --tests all
JsTestDriver
Demo
Questions?
Read more?
Joind.inhttps://joind.in/4777
Githubhttps://github.com/Miljar/
Code Coverage
Code Coverage
Download plugin fromhttp://code.google.com/p/js-test-driver/downloads/list
Code Coverage
Include plugin in config
Code Coverage
Add flags when executing tests--testOutput /path/to/outputfolder
Code Coverage
Install LCOV
Code Coverage
Generate HTMLgenhtml /path/to/jsTestDriver.conf-coverage.dat
Code Coverage
Demo
Some links
QUnithttp://docs.jquery.com/Qunit
JsTestDriverhttp://code.google.com/p/js-test-driver/
CI with JsTestDriverhttp://j.mp/acO6QI
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/)