Javascript Unittesting with js-test-driver

  • 5,662 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,662
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
75
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 14. What is js-test-driver Javascript testrunner and framework Client/Server approach Server: js-test-driver Client: Browser Client: Testrunner Assertion framework Mostly xUnit compatible assertEquals assertSame assertTrue ... http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
  • 15. What is js-test-driver Javascript testrunner and framework Client/Server approach Server: js-test-driver Client: Browser Client: Testrunner Assertion framework Mostly xUnit compatible assertEquals assertSame assertTrue ... http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
  • 16. What is js-test-driver Javascript testrunner and framework Client/Server approach Server: js-test-driver Client: Browser Client: Testrunner Assertion framework Mostly xUnit compatible assertEquals assertSame assertTrue ... http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
  • 17. What is js-test-driver Javascript testrunner and framework Client/Server approach Server: js-test-driver Client: Browser Client: Testrunner Assertion framework Mostly xUnit compatible assertEquals assertSame assertTrue ... http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
  • 18. What is js-test-driver Javascript testrunner and framework Client/Server approach Server: js-test-driver Client: Browser Client: Testrunner Assertion framework Mostly xUnit compatible assertEquals assertSame assertTrue ... http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
  • 19. What is js-test-driver Javascript testrunner and framework Client/Server approach Server: js-test-driver Client: Browser Client: Testrunner Assertion framework Mostly xUnit compatible assertEquals assertSame assertTrue ... http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
  • 20. What is js-test-driver Javascript testrunner and framework Client/Server approach Server: js-test-driver Client: Browser Client: Testrunner Assertion framework Mostly xUnit compatible assertEquals assertSame assertTrue ... http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
  • 21. What is js-test-driver Javascript testrunner and framework Client/Server approach Server: js-test-driver Client: Browser Client: Testrunner Assertion framework Mostly xUnit compatible assertEquals assertSame assertTrue ... http://westhoffswelt.de jakob@westhoffswelt.de slide: 5 / 31
  • 22. What comes next? Architecture http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  • 23. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  • 24. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  • 25. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  • 26. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  • 27. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  • 28. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  • 29. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 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