javascript unit testing

53
Javascript Unit Testing Introduction to QUnit & JsTestDriver

Upload: tom-van-herreweghe

Post on 07-May-2015

1.910 views

Category:

Technology


2 download

DESCRIPTION

These are the slides I presented at the PHPBenelux 2012 conference.

TRANSCRIPT

Page 1: Javascript Unit Testing

Javascript Unit Testing

Introduction to QUnit & JsTestDriver

Page 2: Javascript Unit Testing

Tom Van Herreweghe

PHP developer

ZCE 5.0 & 5.3

I like Javascript

http://blog.theanalogguy.be

@miljar

Page 3: Javascript Unit Testing

Overview

Javascript Unit Testing?

Introduction to QUnit

Introduction to JsTestDriver

Page 4: Javascript Unit Testing

Javascript Unit Testing

Page 5: Javascript Unit Testing

JS Unit Testing

Not functional testing

Selenium, Watir

Example: http://www.cuttherope.ie

Page 6: Javascript Unit Testing

JS Unit Testing

Multitier Architecture

Write DRY code

Avoid event-coupling through HTML

do it in the business logic

Page 7: Javascript Unit Testing

QUnit

Page 8: Javascript Unit Testing

QUnit

JS Unit Testing library

JQuery

http://docs.jquery.com/Qunit

Page 9: Javascript Unit Testing

QUnit

Testrunner = browser

Page 10: Javascript Unit Testing

QUnit setup

Demo

Page 11: Javascript Unit Testing

QUnit structure

module(‘name’[, {lifecycle}])

Page 12: Javascript Unit Testing

QUnit structure

test(‘name’[, expected], test-code)

Page 13: Javascript Unit Testing

QUnit structure

Demo

Page 14: Javascript Unit Testing

QUnit assertions

ok(state[, ‘message’])

Page 15: Javascript Unit Testing

QUnit assertions

equal(actual, expected[, ‘message’])

corresponds with: ==

Page 16: Javascript Unit Testing

QUnit assertions

strictEqual(actual, expected[, ‘message’])

Page 17: Javascript Unit Testing

QUnit assertions

notEqual(actual, expected[, ‘message’])

corresponds with: !=

Page 18: Javascript Unit Testing

QUnit assertions

Demo

Page 19: Javascript Unit Testing

QUnit assertions

deepEqual(actual, expected[, ‘message’])

corresponds with: === (recursive)

Page 20: Javascript Unit Testing

QUnit assertions

notDeepEqual(actual, expected[, ‘message’])

corresponds with: !== (recursive)

Page 21: Javascript Unit Testing

QUnit assertions

Demo

Page 22: Javascript Unit Testing

QUnit assertions

raises(function[, expected][, ‘message’])

Page 23: Javascript Unit Testing

QUnit assertions

Demo

Page 24: Javascript Unit Testing

Async testing

the good: callbacks

the bad: timers

the ugly: currently not in QUnitAdapter for JsTestDriver

Page 25: Javascript Unit Testing

Async testing

Timers: hard to predictrunning time + slows down

Page 26: Javascript Unit Testing

Async testing

Callbacks: run assertions

Page 27: Javascript Unit Testing

Async testing

Currently not supportedin QUnitAdapter

Page 28: Javascript Unit Testing

Async testing

stop()

start()

expect()

asyncTest()

Page 29: Javascript Unit Testing

Async testing

Demo

Page 30: Javascript Unit Testing

PHPUnit QUnitPHPUnit_Framework_TestCase module

test* methods testassertTrue() ok()

assertEquals() equal()deepEqual()

assertSame() strictEqual()

assertNotEquals() notEqual()notDeepEqual()

setExpectedException raises()

Page 31: Javascript Unit Testing

JsTestDriver

Page 32: Javascript Unit Testing

JsTestDriver

Testrunner for your Unit Tests

Written in Java

Client / Server architecture

http://code.google.com/p/js-test-driver

Page 33: Javascript Unit Testing

JsTestDriver

Page 34: Javascript Unit Testing

JsTestDriver

Custom unit testing syntax

Need mapping from QUnit to JsTestDriver

Some QUnit functionalities not (yet) available

Page 35: Javascript Unit Testing

JsTestDriver

module()

test()

ok()

equals()

same() (old name for deepEqual())

Page 36: Javascript Unit Testing

JsTestDriver

Fetch JAR fromhttp://code.google.com/p/js-test-driver/downloads/list

Page 37: Javascript Unit Testing

JsTestDriver

Run serverjava -jar /path/to/JsTestDriver-1.3.2.jar --port 4224

Page 38: Javascript Unit Testing

JsTestDriver

Point browser(s) tohttp://localhost:4224

Page 39: Javascript Unit Testing

JsTestDriver

Demo

Page 41: Javascript Unit Testing

JsTestDriver

Create config

Page 42: Javascript Unit Testing

JsTestDriver

Run testsjava -jar /path/to/JsTestDriver-1.3.2.jar --config

/path/to/jsTestDriver.conf --tests all

Page 43: Javascript Unit Testing

JsTestDriver

Demo

Page 44: Javascript Unit Testing

Questions?

Read more?

Joind.inhttps://joind.in/4777

Githubhttps://github.com/Miljar/

Page 45: Javascript Unit Testing

Code Coverage

Page 46: Javascript Unit Testing

Code Coverage

Download plugin fromhttp://code.google.com/p/js-test-driver/downloads/list

Page 47: Javascript Unit Testing

Code Coverage

Include plugin in config

Page 48: Javascript Unit Testing

Code Coverage

Add flags when executing tests--testOutput /path/to/outputfolder

Page 49: Javascript Unit Testing

Code Coverage

Install LCOV

Page 50: Javascript Unit Testing

Code Coverage

Generate HTMLgenhtml /path/to/jsTestDriver.conf-coverage.dat

Page 51: Javascript Unit Testing

Code Coverage

Demo

Page 52: Javascript Unit Testing

Some links

QUnithttp://docs.jquery.com/Qunit

JsTestDriverhttp://code.google.com/p/js-test-driver/

CI with JsTestDriverhttp://j.mp/acO6QI