javascript unittesting with js-test-driver
Post on 28-Jun-2015
5.866 Views
Preview:
TRANSCRIPT
Javascript Unittesting with js-test-driver
Jakob Westhoff <jakob@php.net>@jakobwesthoff
PHPBarcamp.atMay 2, 2010
http://westhoffswelt.de jakob@westhoffswelt.de 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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 2 / 31
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
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
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
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 4 / 31
What is js-test-driver
Javascript testrunner and framework
Client/Server approach
Server: js-test-driverClient: BrowserClient: Testrunner
Assertion framework
Mostly xUnit compatibleassertEqualsassertSameassertTrue...
http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
What is js-test-driver
Javascript testrunner and framework
Client/Server approach
Server: js-test-driverClient: BrowserClient: Testrunner
Assertion framework
Mostly xUnit compatibleassertEqualsassertSameassertTrue...
http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
What is js-test-driver
Javascript testrunner and framework
Client/Server approach
Server: js-test-driverClient: BrowserClient: Testrunner
Assertion framework
Mostly xUnit compatibleassertEqualsassertSameassertTrue...
http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
What is js-test-driver
Javascript testrunner and framework
Client/Server approach
Server: js-test-driverClient: BrowserClient: Testrunner
Assertion framework
Mostly xUnit compatibleassertEqualsassertSameassertTrue...
http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
What is js-test-driver
Javascript testrunner and framework
Client/Server approach
Server: js-test-driverClient: BrowserClient: Testrunner
Assertion framework
Mostly xUnit compatibleassertEqualsassertSameassertTrue...
http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
What is js-test-driver
Javascript testrunner and framework
Client/Server approach
Server: js-test-driverClient: BrowserClient: Testrunner
Assertion framework
Mostly xUnit compatibleassertEqualsassertSameassertTrue...
http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
What is js-test-driver
Javascript testrunner and framework
Client/Server approach
Server: js-test-driverClient: BrowserClient: Testrunner
Assertion framework
Mostly xUnit compatibleassertEqualsassertSameassertTrue...
http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
What is js-test-driver
Javascript testrunner and framework
Client/Server approach
Server: js-test-driverClient: BrowserClient: Testrunner
Assertion framework
Mostly xUnit compatibleassertEqualsassertSameassertTrue...
http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
What comes next?
Architecture
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
Architecture of js-test-driver
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
Architecture of js-test-driver
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
Architecture of js-test-driver
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
Architecture of js-test-driver
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
Architecture of js-test-driver
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
Architecture of js-test-driver
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
Architecture of js-test-driver
http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
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)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
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)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
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)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
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)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
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)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
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)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
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)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 7 / 31
What comes next?
Example
http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
A simple example
Javascript application/function
Testcase
js-test-driver configuration file
http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
A simple example
Javascript application/function
Testcase
js-test-driver configuration file
http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
A simple example
Javascript application/function
Testcase
js-test-driver configuration file
http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
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 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 9 / 31
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 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 10 / 31
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
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
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
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
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
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
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 12 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 31
Run js-test-driver - Browser
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 31
Run js-test-driver - Testrunner
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 13 / 31
A simple example - Live Demo
Hello World example
Live Demo!
http://westhoffswelt.de jakob@westhoffswelt.de slide: 14 / 31
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
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
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
What comes next?
Asynchronous tests
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 31
Asynchronous timeouts
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 31
Asynchronous timeouts
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 31
Asynchronous timeouts
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 31
Asynchronous timeouts
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 31
Asynchronous timeouts
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 17 / 31
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 ( ) { . . . }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 18 / 31
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 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 19 / 31
Asynchronous callbacks
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 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 31
Asynchronous callbacks
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 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 31
Asynchronous callbacks
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 }
http://westhoffswelt.de jakob@westhoffswelt.de slide: 20 / 31
What comes next?
Debugging
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
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.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
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.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
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.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
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.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
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.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
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.
http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
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 ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
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 ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
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 ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
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 ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
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 ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
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 ! ” ) ;
http://westhoffswelt.de jakob@westhoffswelt.de slide: 22 / 31
Debugging - Live Demo
Debugging example
Live Demo!
http://westhoffswelt.de jakob@westhoffswelt.de slide: 23 / 31
What comes next?
Automation and CI
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
Test automation and continuous integration
--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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 31
Test automation and continuous integration
--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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 25 / 31
What comes next?
Code Coverage
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
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 ”
http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 31
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 ”
http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 31
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 ”
http://westhoffswelt.de jakob@westhoffswelt.de slide: 27 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 31
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
http://westhoffswelt.de jakob@westhoffswelt.de slide: 28 / 31
Code coverage - Live Demo
Code coverage example
Live Demo!
http://westhoffswelt.de jakob@westhoffswelt.de slide: 29 / 31
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
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)
http://westhoffswelt.de jakob@westhoffswelt.de slide: 31 / 31
top related