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




Wednesday 4 May 2011
Async testing


                   Callbacks: run assertions




Wednesday 4 May 2011
Async testing

                       Currently not supported
                          in 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 from
               http://code.google.com/p/js-test-driver/downloads/list




Wednesday 4 May 2011
JsTestDriver


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




Wednesday 4 May 2011
JsTestDriver


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




Wednesday 4 May 2011
JsTestDriver


                          Demo




Wednesday 4 May 2011
JsTestDriver

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




Wednesday 4 May 2011
JsTestDriver


                        Create config




Wednesday 4 May 2011
JsTestDriver

                           Run tests
           java -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

                       Github
                       https://github.com/Miljar/
                       PHPBenelux-BE-may




Wednesday 4 May 2011
Code Coverage



Wednesday 4 May 2011
Code Coverage


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




Wednesday 4 May 2011
Code Coverage


                           Demo




Wednesday 4 May 2011
Some links

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

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

                       CI with JsTestDriver
                       http://j.mp/acO6QI




Wednesday 4 May 2011
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/)




Wednesday 4 May 2011

Javascript Unit Testting (PHPBenelux 2011-05-04)

  • 1.
    Javascript Unit Testing Introduction to QUnit & JsTestDriver Wednesday 4 May 2011
  • 2.
    Tom Van Herreweghe PHP developer ZCE 5.0 & 5.3 I like Javascript http://blog.theanalogguy.be @miljar Wednesday 4 May 2011
  • 3.
    Overview Introduction to QUnit Introduction to JsTestDriver Wednesday 4 May 2011
  • 4.
  • 5.
    QUnit JS Unit Testing library JsUnit, DOH, YUI Test, ... JQuery http://docs.jquery.com/Qunit Wednesday 4 May 2011
  • 6.
    QUnit setup Demo Wednesday 4 May 2011
  • 7.
    QUnit structure module(‘name’[, {lifecycle}]) Wednesday 4 May 2011
  • 8.
    QUnit structure test(‘name’[, expected], test-code) Wednesday 4 May 2011
  • 9.
    QUnit structure Demo Wednesday 4 May 2011
  • 10.
    QUnit assertions ok(state[, ‘message’]) Wednesday 4 May 2011
  • 11.
    QUnit assertions equal(actual, expected[, ‘message’]) corresponds with: == Wednesday 4 May 2011
  • 12.
    QUnit assertions notEqual(actual, expected[, ‘message’]) corresponds with: != Wednesday 4 May 2011
  • 13.
    QUnit assertions Demo Wednesday 4 May 2011
  • 14.
    QUnit assertions deepEqual(actual, expected[, ‘message’]) corresponds with: === (recursive) Wednesday 4 May 2011
  • 15.
    QUnit assertions notDeepEqual(actual, expected[, ‘message’]) corresponds with: !== (recursive) Wednesday 4 May 2011
  • 16.
    QUnit assertions Demo Wednesday 4 May 2011
  • 17.
    QUnit assertions raises(function[, expected][, ‘message’]) Wednesday 4 May 2011
  • 18.
    QUnit assertions Demo Wednesday 4 May 2011
  • 19.
    Async testing the good: callbacks the bad: timers the ugly: currently not in QUnitAdapter for JsTestDriver Wednesday 4 May 2011
  • 20.
    Async testing Timers: hard to predict running time + slows down Wednesday 4 May 2011
  • 21.
    Async testing Callbacks: run assertions Wednesday 4 May 2011
  • 22.
    Async testing Currently not supported in QUnitAdapter Wednesday 4 May 2011
  • 23.
    Async testing stop() start() expect() asyncTest() Wednesday 4 May 2011
  • 24.
    Async testing Demo Wednesday 4 May 2011
  • 25.
  • 26.
    JsTestDriver Testrunner for your Unit Tests Written in Java Client / Server architecture http://code.google.com/p/js-test-driver Wednesday 4 May 2011
  • 27.
  • 28.
    JsTestDriver Custom syntax Need mapping from QUnit to JsTestDriver Some QUnit functionalities not (yet) available Wednesday 4 May 2011
  • 29.
    JsTestDriver module() test() ok() equals() same() (old name for deepEqual()) Wednesday 4 May 2011
  • 30.
    JsTestDriver Fetch JAR from http://code.google.com/p/js-test-driver/downloads/list Wednesday 4 May 2011
  • 31.
    JsTestDriver Run server java -jar /path/to/JsTestDriver-1.3.2.jar --port 4224 Wednesday 4 May 2011
  • 32.
    JsTestDriver Point browser(s) to http://localhost:4224 Wednesday 4 May 2011
  • 33.
    JsTestDriver Demo Wednesday 4 May 2011
  • 34.
    JsTestDriver Download QUnit adapter http://code.google.com/p/js-test-driver/wiki/ QUnitAdapter Wednesday 4 May 2011
  • 35.
    JsTestDriver Create config Wednesday 4 May 2011
  • 36.
    JsTestDriver Run tests java -jar /path/to/JsTestDriver-1.3.2.jar --config /path/to/jsTestDriver.conf --tests all Wednesday 4 May 2011
  • 37.
    JsTestDriver Demo Wednesday 4 May 2011
  • 38.
    Questions? Read more? Slideshare Joind.in Github https://github.com/Miljar/ PHPBenelux-BE-may Wednesday 4 May 2011
  • 39.
  • 40.
    Code Coverage Download plugin from http://code.google.com/p/js-test-driver/downloads/list Wednesday 4 May 2011
  • 41.
    Code Coverage Include plugin in config Wednesday 4 May 2011
  • 42.
    Code Coverage Add flags when executing tests --testOutput /path/to/outputfolder Wednesday 4 May 2011
  • 43.
    Code Coverage Install LCOV Wednesday 4 May 2011
  • 44.
    Code Coverage Generate HTML genhtml /path/to/jsTestDriver.conf-coverage.dat Wednesday 4 May 2011
  • 45.
    Code Coverage Demo Wednesday 4 May 2011
  • 46.
    Some links QUnit http://docs.jquery.com/Qunit JsTestDriver http://code.google.com/p/js-test-driver/ CI with JsTestDriver http://j.mp/acO6QI Wednesday 4 May 2011
  • 47.
    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/) Wednesday 4 May 2011