javascript unittesting with js-test-driver

Javascript Unittesting with js-test-driver

Jakob Westhoff <[email protected]>@jakobwesthoff

PHPBarcamp.atMay 2, 2010

http://westhoffswelt.de [email protected] slide: 1 / 31

About Me

Jakob Westhoff

PHP developer for several years

Computer science student at the TU Dortmund

Co-Founder of the PHP Usergroup Dortmund

Active in different Open Source projects

Who is actively using TDD/Unittesting?

Who uses unittesting?

Who uses TDD?

Who unittests javascript code?

Who uses TDD?

Goals of this session

1 Getting to know js-test-driver

2 Unittesting javascript

Synchronous testsAsynchronous tests

3 Run these tests

From within a terminalFrom within Eclipse

4 Create javascript code coverage reports

3 Run these tests

What is js-test-driver

Javascript testrunner and framework

Client/Server approach

Server: js-test-driverClient: BrowserClient: Testrunner

Assertion framework

Mostly xUnit compatibleassertEqualsassertSameassertTrue...

Assertion framework

What comes next?

Architecture

Architecture of js-test-driver

Advantages of this design

Run from possibly any IDE

CommandlineEclipse

Parallel execution of tests in multiple browsers

Test execution on different machines with possibly differentoperating systems

Website DOM not used for any testrunner output

Browser independent code coverage reports (planned for afuture release)

CommandlineEclipse

What comes next?

Example

A simple example

Javascript application/function

Testcase

js-test-driver configuration file

A simple example

Testcase

A simple example

Testcase

A simple example - Javascript

Really simple hello world function:

1 myApp = {} ;23 myApp . He l loWor ld = f u n c t i o n ( ) {} ;45 myApp . He l loWor ld . p r o t o t yp e . s a yHe l l o = f u n c t i o n ( ) {6 re tu rn ” He l l o World ! ” ;7 }

A simple example - Testcase

Our first js-test-driver testcase:

1 He l l oWor ldTes t = TestCase ( ’ He l l oWor ld ’ ) ;23 He l l oWor ldTes t . p r o t o t yp e . setUp = f u n c t i o n ( ) {4 t h i s . h e l l o F i x t u r e = new myApp . He l loWor ld ( ) ;5 }67 He l l oWor ldTes t . p r o t o t yp e . t e s tOutpu t = f u n c t i o n ( ) {8 a s s e r t E q u a l s (9 ” He l l o World ! ” ,

10 t h i s . h e l l o F i x t u r e . s a yHe l l o ( )11 ) ;12 }

Digression about test lifecycle

The js-test-driver test lifecycle follows the JUnit lifecycle

1 Instantiate new Testcase implementation

2 Execute the setUp() method

3 Execute the next testWhatever() method

4 Execute the tearDown() method

5 While tests left in testcase jump to Step 1

A simple example - js-test-driver configuration

Every project needs a js-test-driver configuration file.

Written in YAMLCalled jsTestDriver.conf by default

js-test-driver configuration for our example:

1 s e r v e r : h t tp : // l o c a l h o s t :422423 l oad :4 − s r c / h e l l o w o r l d . j s5 − t e s t s / h e l l o w o r l d . j s

Run js-test-driver - Server

Run the js-test-driver server

j a v a − j a r j s T e s tD r i v e r . j a r −−po r t 4224

Capture the all browsers

ht tp : // l o c a l h o s t :4224/ cap tu r e

Execute the testrunner

j a v a − j a r j s T e s tD r i v e r . j a r −−t e s t s a l l

Run js-test-driver - Browser

Run js-test-driver - Testrunner

A simple example - Live Demo

Hello World example

Live Demo!

Eclipse testrunner

A testrunner plugin for Eclipse is available

Available through eclipse plugin manager

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

Eclipse testrunner

What comes next?

Asynchronous tests

Test asynchronous implementations

Asynchronous timeouts

setTimeout, setInterval

Asynchronous callbacks

XMLHttpRequest, onReady

”[...] JS test driver does not support asynchronous test. This wasa conscious decision, as we want to make sure that the testsremain fast.”

– Misko Hevery on Google groups

window . setTimeout (f u n c t i o n ( ) { . . . } ,3000

Use jsUnitMockTimeout.jshttp://jsunit.net

Mocks setTimeout, setInterval, clearTimeout andclearInterval

Timeflow can be controlled manually in tests

jsUnitMockTimeout example - Stopwatch

Simple stopwatch example:

1 Stopwatch . s t a r t = f u n c t i o n ( ) {2 Stopwatch . c l e a r ( ) ;3 Stopwatch . t ime r = s e t I n t e r v a l (4 Stopwatch . advance ,5 10006 ) ;7 }89 Stopwatch . advance = f u n c t i o n ( ) { . . . }

10 Stopwatch . s top = f u n c t i o n ( ) { . . . }11 Stopwatch . c l e a r = f u n c t i o n ( ) { . . . }12 Stopwatch . r e s u l t = f u n c t i o n ( ) { . . . }

jsUnitMockTimeout example - Test

Test using jsUnitMockTimeout:

1 StopwatchTest . p r o t o t yp e . t e s tT im ing = f u n c t i o n ( ) {2 Clock . r e s e t ( ) ;3 Stopwatch . s t a r t ( ) ;4 a s s e r t E q u a l s (0 , Stopwatch . r e s u l t ( ) ) ;56 Clock . t i c k (5000) ;7 a s e r t E q u a l s (5 , Stopwatch . r e s u l t ( ) ) ;8 }

Generalized callback mocks do not exist

Mock the used function manually, calling the callbackimmediately

1 xhr . send = f u n c t i o n ( data ) {2 // C a l l onReady wi th a p p r o p r i a t e r e s u l t s

d i r e c t l y3 t h i s . onReady ( someData ) ;4 }

What comes next?

Debugging

Use whatever javascript debugging technique you like!

Firebug (Firefox)Visual Studio (IE)Web Inspector (Safari)...

1 Run the test you want to debug:

j a v a − j a r j s T e s tD r i v e r . j a r −−t e s t s He l l oWor ldTes t .t e s tOutpu t

2 Set breakpoints

3 Rerun the test using the command above.

Debugging

2 Set breakpoints

Debugging

2 Set breakpoints

Debugging

2 Set breakpoints

Debugging

2 Set breakpoints

Debugging

2 Set breakpoints

Debugging - Using the console

A lot of javascript debuggers provide a console object

c on s o l e . l o g ( ” He l l o World ! ” ) ;

Redirect this output to js-test-driver

j a v a − j a r j s T e s tD r i v e r . j a r −−t e s t s a l l −−cap tu r eCon so l e

Note: Does not work in Firefox

Use jstestdriver.console directly

j s t e s t d r i v e r . c o n s o l e . l o g ( ” He l l o World ! ” ) ;

Debugging - Live Demo

Debugging example

Live Demo!

What comes next?

Automation and CI

Test automation and continuous integration

--testOutput parameter generates JUnit XML compatibletest logs

One XML for every used browser

j a v a − j a r j s T e s tD r i v e r . j a r −−t e s tOutpu t someD i r e c to r y−−t e s t s a l l

--browser parameter runs and captures browsersautomatically

j a v a − j a r j s T e s tD r i v e r . j a r −−browse r e x e cu tab l e1 ,e x e cu tab l e2 , . . . −−po r t 4224

--port and --tests can be combined to automate serverstartup and testrun

j a v a − j a r j s T e s tD r i v e r . j a r −−browse r e x e cu tab l e1 ,e x e cu tab l e2 , . . . −−po r t 4224 −−t e s t s a l l

--port and --tests can be combined to automate serverstartup and testrun

j a v a − j a r j s T e s tD r i v e r . j a r −−browse r e x e cu tab l e1 ,e x e cu tab l e2 , . . . −−po r t 4224 −−t e s t s a l l

What comes next?

Code Coverage

Code coverage

Code coverage may be an indicator for untested code paths

js-test-driver plugin allows to create code coverage reports

Possible output formats

Textual output on terminalLCOV compatible info file

Code coverage

Code coverage - Plugin

Download jar-file from js-test-driver homepage

Put the coverage.jar file into some folder relative to yourjs-text-driver.jar (eg. plugins/coverage.jar)

Add plugin to jsTestDriver.conf

1 p l u g i n :2 − name : ” cove rage ”3 j a r : ” p l u g i n s / cove r age . j a r ”4 module : ”com . goog l e . j s t e s t d r i v e r . cove r age .

CoverageModule ”

Using LCOV to generate HTML reports

The --testOutput commandline parameter generates codecoverage reports in LCOV compatible info file format

Use genHtml from the LCOV package to generate nice HTMLresults:

http://ltp.sourceforge.net

Using LCOV to generate HTML reports

The --testOutput commandline parameter generates codecoverage reports in LCOV compatible info file format

Use genHtml from the LCOV package to generate nice HTMLresults:

http://ltp.sourceforge.net

Code coverage - Live Demo

Code coverage example

Live Demo!

Thanks for listening

Questions, comments or annotations?

Slides: http://westhoffswelt.de/portfolio.htm

Contact: Jakob Westhoff <[email protected]>Twitter: @jakobwesthoff

Please leave comments and vote at: http://joind.in/1626

Sources

Breathe Icon Set:https://launchpad.net/breathe-icon-set, Licensedunder Creative Common Attribution-ShareAlike 3.0 License(http://creativecommons.org/licenses/by-sa/3.0)

javascript unittesting with js-test-driver

Technology

driverjavascript testrunner

javascript unittesting

driver jakob westho

php usergroup dortmund

years computer science

tu dortmundcofounder

mejakob westhophp developer