Javascript Unit Testting (PHPBenelux 2011-05-04)

Post on 24-Dec-2014

1.921 views 0 download

Tags:

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.

Transcript of Javascript Unit Testting (PHPBenelux 2011-05-04)

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

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