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 predict
running time + slows down
Async testing


Callbacks: run assertions
Async testing

Currently not supported
   in QUnitAdapter
Async testing

stop()

start()

expect()

asyncTest()
Async testing


   Demo
PHPUnit                    QUnit
PHPUnit_Framework_TestCase       module
    test* methods                  test
     assertTrue()                  ok()
                                 equal()
    assertEquals()
                              deepEqual()
    assertSame()              strictEqual()
                               notEqual()
 assertNotEquals()
                             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 from
http://code.google.com/p/js-test-driver/downloads/list
JsTestDriver


                 Run server
java -jar /path/to/JsTestDriver-1.3.2.jar --port 4224
JsTestDriver


Point browser(s) to
  http://localhost:4224
JsTestDriver


   Demo
JsTestDriver

   Download QUnit adapter
http://code.google.com/p/js-test-driver/wiki/
               QUnitAdapter
JsTestDriver


 Create config
JsTestDriver

                Run tests
java -jar /path/to/JsTestDriver-1.3.2.jar --config
      /path/to/jsTestDriver.conf --tests all
JsTestDriver


   Demo
Questions?

Read more?


Joind.in
https://joind.in/4777

Github
https://github.com/Miljar/
Code Coverage
Code Coverage


     Download plugin from
http://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 HTML
genhtml /path/to/jsTestDriver.conf-coverage.dat
Code Coverage


    Demo
Some links

QUnit
http://docs.jquery.com/Qunit

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

CI with JsTestDriver
http://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/)

Javascript Unit Testing