1. Javascript Unittesting with js-test-driver
Jakob Westhoff <jakob@php.net>
@jakobwesthoff
PHPBarcamp.at
May 2, 2010
http://westhoffswelt.de jakob@westhoffswelt.de slide: 1 / 31
2. 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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 2 / 31
3. Who is actively using TDD/Unittesting?
Who uses unittesting?
Who uses TDD?
Who unittests javascript code?
http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 31
4. Who is actively using TDD/Unittesting?
Who uses unittesting?
Who uses TDD?
Who unittests javascript code?
http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 31
5. Who is actively using TDD/Unittesting?
Who uses unittesting?
Who uses TDD?
Who unittests javascript code?
http://westhoffswelt.de jakob@westhoffswelt.de slide: 3 / 31
6. Goals of this session
1 Getting to know js-test-driver
2 Unittesting javascript
Synchronous tests
Asynchronous tests
3 Run these tests
From within a terminal
From within Eclipse
4 Create javascript code coverage reports
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
7. Goals of this session
1 Getting to know js-test-driver
2 Unittesting javascript
Synchronous tests
Asynchronous tests
3 Run these tests
From within a terminal
From within Eclipse
4 Create javascript code coverage reports
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
8. Goals of this session
1 Getting to know js-test-driver
2 Unittesting javascript
Synchronous tests
Asynchronous tests
3 Run these tests
From within a terminal
From within Eclipse
4 Create javascript code coverage reports
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
9. Goals of this session
1 Getting to know js-test-driver
2 Unittesting javascript
Synchronous tests
Asynchronous tests
3 Run these tests
From within a terminal
From within Eclipse
4 Create javascript code coverage reports
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
10. Goals of this session
1 Getting to know js-test-driver
2 Unittesting javascript
Synchronous tests
Asynchronous tests
3 Run these tests
From within a terminal
From within Eclipse
4 Create javascript code coverage reports
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
11. Goals of this session
1 Getting to know js-test-driver
2 Unittesting javascript
Synchronous tests
Asynchronous tests
3 Run these tests
From within a terminal
From within Eclipse
4 Create javascript code coverage reports
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
12. Goals of this session
1 Getting to know js-test-driver
2 Unittesting javascript
Synchronous tests
Asynchronous tests
3 Run these tests
From within a terminal
From within Eclipse
4 Create javascript code coverage reports
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
13. Goals of this session
1 Getting to know js-test-driver
2 Unittesting javascript
Synchronous tests
Asynchronous tests
3 Run these tests
From within a terminal
From within Eclipse
4 Create javascript code coverage reports
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
30. Advantages of this design
Run from possibly any IDE
Commandline
Eclipse
Parallel execution of tests in multiple browsers
Test execution on different machines with possibly different
operating systems
Website DOM not used for any testrunner output
Browser independent code coverage reports (planned for a
future release)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
31. Advantages of this design
Run from possibly any IDE
Commandline
Eclipse
Parallel execution of tests in multiple browsers
Test execution on different machines with possibly different
operating systems
Website DOM not used for any testrunner output
Browser independent code coverage reports (planned for a
future release)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
32. Advantages of this design
Run from possibly any IDE
Commandline
Eclipse
Parallel execution of tests in multiple browsers
Test execution on different machines with possibly different
operating systems
Website DOM not used for any testrunner output
Browser independent code coverage reports (planned for a
future release)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
33. Advantages of this design
Run from possibly any IDE
Commandline
Eclipse
Parallel execution of tests in multiple browsers
Test execution on different machines with possibly different
operating systems
Website DOM not used for any testrunner output
Browser independent code coverage reports (planned for a
future release)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
34. Advantages of this design
Run from possibly any IDE
Commandline
Eclipse
Parallel execution of tests in multiple browsers
Test execution on different machines with possibly different
operating systems
Website DOM not used for any testrunner output
Browser independent code coverage reports (planned for a
future release)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
35. Advantages of this design
Run from possibly any IDE
Commandline
Eclipse
Parallel execution of tests in multiple browsers
Test execution on different machines with possibly different
operating systems
Website DOM not used for any testrunner output
Browser independent code coverage reports (planned for a
future release)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
36. Advantages of this design
Run from possibly any IDE
Commandline
Eclipse
Parallel execution of tests in multiple browsers
Test execution on different machines with possibly different
operating systems
Website DOM not used for any testrunner output
Browser independent code coverage reports (planned for a
future release)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
37. What comes next?
Example
http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
38. A simple example
Javascript application/function
Testcase
js-test-driver configuration file
http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
39. A simple example
Javascript application/function
Testcase
js-test-driver configuration file
http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
40. A simple example
Javascript application/function
Testcase
js-test-driver configuration file
http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
41. A simple example - Javascript
Really simple hello world function:
1 myApp = { } ;
2
3 myApp . H e l l o W o r l d = f u n c t i o n ( ) { } ;
4
5 myApp . H e l l o W o r l d . p r o t o t y p e . s a y H e l l o = f u n c t i o n ( ) {
6 r e t u r n ” H e l l o World ! ” ;
7 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 9 / 31
42. A simple example - Testcase
Our first js-test-driver testcase:
1 HelloWorldTest = TestCase ( ’ HelloWorld ’ ) ;
2
3 HelloWorldTest . p r o t o t y p 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 . H e l l o W o r l d ( ) ;
5 }
6
7 HelloWorldTest . prototype . testOutput = function () {
8 assertEquals (
9 ” H e l l o World ! ” ,
10 this . helloFixture . sayHello ()
11 );
12 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 10 / 31
43. 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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 31
44. 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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 31
45. 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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 31
46. 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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 31
47. 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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 31
48. 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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 11 / 31
49. A simple example - js-test-driver configuration
Every project needs a js-test-driver configuration file.
Written in YAML
Called jsTestDriver.conf by default
js-test-driver configuration for our example:
1 s e r v e r : http :// l o c a l h o s t :4224
2
3 load :
4 − src / hello world . js
5 − tests / hello world . js
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 31
50. A simple example - js-test-driver configuration
Every project needs a js-test-driver configuration file.
Written in YAML
Called jsTestDriver.conf by default
js-test-driver configuration for our example:
1 s e r v e r : http :// l o c a l h o s t :4224
2
3 load :
4 − src / hello world . js
5 − tests / hello world . js
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 31
51. A simple example - js-test-driver configuration
Every project needs a js-test-driver configuration file.
Written in YAML
Called jsTestDriver.conf by default
js-test-driver configuration for our example:
1 s e r v e r : http :// l o c a l h o s t :4224
2
3 load :
4 − src / hello world . js
5 − tests / hello world . js
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 31
52. A simple example - js-test-driver configuration
Every project needs a js-test-driver configuration file.
Written in YAML
Called jsTestDriver.conf by default
js-test-driver configuration for our example:
1 s e r v e r : http :// l o c a l h o s t :4224
2
3 load :
4 − src / hello world . js
5 − tests / hello world . js
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 31
53. Run js-test-driver - Server
Run the js-test-driver server
j a v a − j a r j s T e s t D r i v e r . j a r −−p o r t 4224
Capture the all browsers
http :// l o c a l h o s t :4224/ capture
Execute the testrunner
j a v a − j a r j s T e s t D r i v e r . j a r −− t e s t s all
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 31
54. Run js-test-driver - Browser
Run the js-test-driver server
j a v a − j a r j s T e s t D r i v e r . j a r −−p o r t 4224
Capture the all browsers
http :// l o c a l h o s t :4224/ capture
Execute the testrunner
j a v a − j a r j s T e s t D r i v e r . j a r −− t e s t s all
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 31
55. Run js-test-driver - Testrunner
Run the js-test-driver server
j a v a − j a r j s T e s t D r i v e r . j a r −−p o r t 4224
Capture the all browsers
http :// l o c a l h o s t :4224/ capture
Execute the testrunner
j a v a − j a r j s T e s t D r i v e r . j a r −− t e s t s all
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 31
56. A simple example - Live Demo
Hello World example
Live Demo!
http://westhoffswelt.de jakob@westhoffswelt.de slide: 14 / 31
57. Eclipse testrunner
A testrunner plugin for Eclipse is available
Available through eclipse plugin manager
http://code.google.com/p/js-test-driver/wiki/UsingTheEclipsePlugin
http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 31
58. Eclipse testrunner
A testrunner plugin for Eclipse is available
Available through eclipse plugin manager
http://code.google.com/p/js-test-driver/wiki/UsingTheEclipsePlugin
http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 31
59. Eclipse testrunner
A testrunner plugin for Eclipse is available
Available through eclipse plugin manager
http://code.google.com/p/js-test-driver/wiki/UsingTheEclipsePlugin
http://westhoffswelt.de jakob@westhoffswelt.de slide: 15 / 31
60. What comes next?
Asynchronous tests
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 31
61. Test asynchronous implementations
Asynchronous timeouts
setTimeout, setInterval
Asynchronous callbacks
XMLHttpRequest, onReady
”[...] JS test driver does not support asynchronous test. This was
a conscious decision, as we want to make sure that the tests
remain fast.”
– Misko Hevery on Google groups
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 31
62. Test asynchronous implementations
Asynchronous timeouts
setTimeout, setInterval
Asynchronous callbacks
XMLHttpRequest, onReady
”[...] JS test driver does not support asynchronous test. This was
a conscious decision, as we want to make sure that the tests
remain fast.”
– Misko Hevery on Google groups
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 31
63. Test asynchronous implementations
Asynchronous timeouts
setTimeout, setInterval
Asynchronous callbacks
XMLHttpRequest, onReady
”[...] JS test driver does not support asynchronous test. This was
a conscious decision, as we want to make sure that the tests
remain fast.”
– Misko Hevery on Google groups
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 31
64. Asynchronous timeouts
window . s e t T i m e o u t (
function () { . . . } ,
3000
);
Use jsUnitMockTimeout.js
http://jsunit.net
Mocks setTimeout, setInterval, clearTimeout and
clearInterval
Timeflow can be controlled manually in tests
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 31
65. Asynchronous timeouts
window . s e t T i m e o u t (
function () { . . . } ,
3000
);
Use jsUnitMockTimeout.js
http://jsunit.net
Mocks setTimeout, setInterval, clearTimeout and
clearInterval
Timeflow can be controlled manually in tests
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 31
66. Asynchronous timeouts
window . s e t T i m e o u t (
function () { . . . } ,
3000
);
Use jsUnitMockTimeout.js
http://jsunit.net
Mocks setTimeout, setInterval, clearTimeout and
clearInterval
Timeflow can be controlled manually in tests
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 31
67. Asynchronous timeouts
window . s e t T i m e o u t (
function () { . . . } ,
3000
);
Use jsUnitMockTimeout.js
http://jsunit.net
Mocks setTimeout, setInterval, clearTimeout and
clearInterval
Timeflow can be controlled manually in tests
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 31
68. Asynchronous timeouts
window . s e t T i m e o u t (
function () { . . . } ,
3000
);
Use jsUnitMockTimeout.js
http://jsunit.net
Mocks setTimeout, setInterval, clearTimeout and
clearInterval
Timeflow can be controlled manually in tests
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 31
69. 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 i m e r = s e t I n t e r v a l (
4 S t o p w a t c h . advance ,
5 1000
6 );
7 }
8
9 Stopwatch . advance = function () {...}
10 Stopwatch . s t o p = function () {...}
11 Stopwatch . c l e a r = function () {...}
12 Stopwatch . r e s u l t = function () {...}
http://westhoffswelt.de jakob@westhoffswelt.de slide: 18 / 31
70. jsUnitMockTimeout example - Test
Test using jsUnitMockTimeout:
1 StopwatchTest . pr o to t yp e . testTiming = 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 , S to p w a t ch . r e s u l t ( ) ) ;
5
6 Clock . t i c k (5000) ;
7 a s e r t E q u a l s ( 5 , S t o pw a t c h . r e s u l t ( ) ) ;
8 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 19 / 31
71. Asynchronous callbacks
Generalized callback mocks do not exist
Mock the used function manually, calling the callback
immediately
1 xhr . send = f u n c t i o n ( data ) {
2 // C a l l onReady w i t h a p p r o p r i a t e r e s u l t s
directly
3 t h i s . onReady ( someData ) ;
4 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 31
72. Asynchronous callbacks
Generalized callback mocks do not exist
Mock the used function manually, calling the callback
immediately
1 xhr . send = f u n c t i o n ( data ) {
2 // C a l l onReady w i t h a p p r o p r i a t e r e s u l t s
directly
3 t h i s . onReady ( someData ) ;
4 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 31
73. Asynchronous callbacks
Generalized callback mocks do not exist
Mock the used function manually, calling the callback
immediately
1 xhr . send = f u n c t i o n ( data ) {
2 // C a l l onReady w i t h a p p r o p r i a t e r e s u l t s
directly
3 t h i s . onReady ( someData ) ;
4 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 31
74. What comes next?
Debugging
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
75. 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 t D r i v e r . j a r −− t e s t s H e l l o W o r l d T e s t .
testOutput
2 Set breakpoints
3 Rerun the test using the command above.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
76. 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 t D r i v e r . j a r −− t e s t s H e l l o W o r l d T e s t .
testOutput
2 Set breakpoints
3 Rerun the test using the command above.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
77. 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 t D r i v e r . j a r −− t e s t s H e l l o W o r l d T e s t .
testOutput
2 Set breakpoints
3 Rerun the test using the command above.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
78. 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 t D r i v e r . j a r −− t e s t s H e l l o W o r l d T e s t .
testOutput
2 Set breakpoints
3 Rerun the test using the command above.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
79. 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 t D r i v e r . j a r −− t e s t s H e l l o W o r l d T e s t .
testOutput
2 Set breakpoints
3 Rerun the test using the command above.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
80. 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 t D r i v e r . j a r −− t e s t s H e l l o W o r l d T e s t .
testOutput
2 Set breakpoints
3 Rerun the test using the command above.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
81. Debugging - Using the console
A lot of javascript debuggers provide a console object
c o n s o l e . l o g ( ” H e l l o World ! ” ) ;
Redirect this output to js-test-driver
j a v a − j a r j s T e s t D r i v e r . j a r −− t e s t s a l l −−
captureConsole
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 ( ” H e l l o World ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
82. Debugging - Using the console
A lot of javascript debuggers provide a console object
c o n s o l e . l o g ( ” H e l l o World ! ” ) ;
Redirect this output to js-test-driver
j a v a − j a r j s T e s t D r i v e r . j a r −− t e s t s a l l −−
captureConsole
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 ( ” H e l l o World ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
83. Debugging - Using the console
A lot of javascript debuggers provide a console object
c o n s o l e . l o g ( ” H e l l o World ! ” ) ;
Redirect this output to js-test-driver
j a v a − j a r j s T e s t D r i v e r . j a r −− t e s t s a l l −−
captureConsole
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 ( ” H e l l o World ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
84. Debugging - Using the console
A lot of javascript debuggers provide a console object
c o n s o l e . l o g ( ” H e l l o World ! ” ) ;
Redirect this output to js-test-driver
j a v a − j a r j s T e s t D r i v e r . j a r −− t e s t s a l l −−
captureConsole
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 ( ” H e l l o World ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
85. Debugging - Using the console
A lot of javascript debuggers provide a console object
c o n s o l e . l o g ( ” H e l l o World ! ” ) ;
Redirect this output to js-test-driver
j a v a − j a r j s T e s t D r i v e r . j a r −− t e s t s a l l −−
captureConsole
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 ( ” H e l l o World ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
86. Debugging - Using the console
A lot of javascript debuggers provide a console object
c o n s o l e . l o g ( ” H e l l o World ! ” ) ;
Redirect this output to js-test-driver
j a v a − j a r j s T e s t D r i v e r . j a r −− t e s t s a l l −−
captureConsole
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 ( ” H e l l o World ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
87. Debugging - Live Demo
Debugging example
Live Demo!
http://westhoffswelt.de jakob@westhoffswelt.de slide: 23 / 31
88. What comes next?
Automation and CI
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
89. Test automation and continuous integration
--testOutput parameter generates JUnit XML compatible
test logs
One XML for every used browser
j a v a − j a r j s T e s t D r i v e r . j a r −−t e s t O u t p u t s o m e D i r e c t o r y
−− t e s t s a l l
--browser parameter runs and captures browsers
automatically
j a v a − j a r j s T e s t D r i v e r . j a r −−b r o w s e r e x e c u t a b l e 1 ,
e x e c u t a b l e 2 , . . . −−p o r t 4224
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
90. Test automation and continuous integration
--testOutput parameter generates JUnit XML compatible
test logs
One XML for every used browser
j a v a − j a r j s T e s t D r i v e r . j a r −−t e s t O u t p u t s o m e D i r e c t o r y
−− t e s t s a l l
--browser parameter runs and captures browsers
automatically
j a v a − j a r j s T e s t D r i v e r . j a r −−b r o w s e r e x e c u t a b l e 1 ,
e x e c u t a b l e 2 , . . . −−p o r t 4224
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
91. Test automation and continuous integration
--testOutput parameter generates JUnit XML compatible
test logs
One XML for every used browser
j a v a − j a r j s T e s t D r i v e r . j a r −−t e s t O u t p u t s o m e D i r e c t o r y
−− t e s t s a l l
--browser parameter runs and captures browsers
automatically
j a v a − j a r j s T e s t D r i v e r . j a r −−b r o w s e r e x e c u t a b l e 1 ,
e x e c u t a b l e 2 , . . . −−p o r t 4224
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
92. Test automation and continuous integration
--testOutput parameter generates JUnit XML compatible
test logs
One XML for every used browser
j a v a − j a r j s T e s t D r i v e r . j a r −−t e s t O u t p u t s o m e D i r e c t o r y
−− t e s t s a l l
--browser parameter runs and captures browsers
automatically
j a v a − j a r j s T e s t D r i v e r . j a r −−b r o w s e r e x e c u t a b l e 1 ,
e x e c u t a b l e 2 , . . . −−p o r t 4224
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
93. Test automation and continuous integration
--testOutput parameter generates JUnit XML compatible
test logs
One XML for every used browser
j a v a − j a r j s T e s t D r i v e r . j a r −−t e s t O u t p u t s o m e D i r e c t o r y
−− t e s t s a l l
--browser parameter runs and captures browsers
automatically
j a v a − j a r j s T e s t D r i v e r . j a r −−b r o w s e r e x e c u t a b l e 1 ,
e x e c u t a b l e 2 , . . . −−p o r t 4224
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
94. Test automation and continuous integration
--port and --tests can be combined to automate server
startup and testrun
j a v a − j a r j s T e s t D r i v e r . j a r −−b r o w s e r e x e c u t a b l e 1 ,
e x e c u t a b l e 2 , . . . −−p o r t 4224 −− t e s t s a l l
http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 31
95. Test automation and continuous integration
--port and --tests can be combined to automate server
startup and testrun
j a v a − j a r j s T e s t D r i v e r . j a r −−b r o w s e r e x e c u t a b l e 1 ,
e x e c u t a b l e 2 , . . . −−p o r t 4224 −− t e s t s a l l
http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 31
96. What comes next?
Code Coverage
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
97. 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 terminal
LCOV compatible info file
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
98. 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 terminal
LCOV compatible info file
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
99. 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 terminal
LCOV compatible info file
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
100. 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 terminal
LCOV compatible info file
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
101. 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 terminal
LCOV compatible info file
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
102. Code coverage - Plugin
Download jar-file from js-test-driver homepage
Put the coverage.jar file into some folder relative to your
js-text-driver.jar (eg. plugins/coverage.jar)
Add plugin to jsTestDriver.conf
1 plugin :
2 − name : ” c o v e r a g e ”
3 j a r : ” plugins / coverage . j a r ”
4 module : ”com . g o o g l e . j s t e s t d r i v e r . c o v e r a g e .
CoverageModule ”
http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 31
103. Code coverage - Plugin
Download jar-file from js-test-driver homepage
Put the coverage.jar file into some folder relative to your
js-text-driver.jar (eg. plugins/coverage.jar)
Add plugin to jsTestDriver.conf
1 plugin :
2 − name : ” c o v e r a g e ”
3 j a r : ” plugins / coverage . j a r ”
4 module : ”com . g o o g l e . j s t e s t d r i v e r . c o v e r a g e .
CoverageModule ”
http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 31
104. Code coverage - Plugin
Download jar-file from js-test-driver homepage
Put the coverage.jar file into some folder relative to your
js-text-driver.jar (eg. plugins/coverage.jar)
Add plugin to jsTestDriver.conf
1 plugin :
2 − name : ” c o v e r a g e ”
3 j a r : ” plugins / coverage . j a r ”
4 module : ”com . g o o g l e . j s t e s t d r i v e r . c o v e r a g e .
CoverageModule ”
http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 31
105. Using LCOV to generate HTML reports
The --testOutput commandline parameter generates code
coverage reports in LCOV compatible info file format
Use genHtml from the LCOV package to generate nice HTML
results:
http://ltp.sourceforge.net
http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 31
106. Using LCOV to generate HTML reports
The --testOutput commandline parameter generates code
coverage reports in LCOV compatible info file format
Use genHtml from the LCOV package to generate nice HTML
results:
http://ltp.sourceforge.net
http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 31
107. Code coverage - Live Demo
Code coverage example
Live Demo!
http://westhoffswelt.de jakob@westhoffswelt.de slide: 29 / 31
108. Thanks for listening
Questions, comments or annotations?
Slides: http://westhoffswelt.de/portfolio.htm
Contact: Jakob Westhoff <jakob@php.net>
Twitter: @jakobwesthoff
Please leave comments and vote at: http://joind.in/1626
http://westhoffswelt.de jakob@westhoffswelt.de slide: 30 / 31
109. Sources
Breathe Icon Set:
https://launchpad.net/breathe-icon-set, Licensed
under Creative Common Attribution-ShareAlike 3.0 License
(http://creativecommons.org/licenses/by-sa/3.0)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 31 / 31