javascript unit testing

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

Point browser(s) tohttp://localhost: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/)