0
Javascript Unittesting with js-test-driver

                     Jakob Westhoff <jakob@php.net>
                           ...
About Me



        Jakob Westhoff

              PHP developer for several years
              Computer science student at...
Who is actively using TDD/Unittesting?




         Who uses unittesting?
         Who uses TDD?
         Who unittests ja...
Who is actively using TDD/Unittesting?




         Who uses unittesting?
         Who uses TDD?
         Who unittests ja...
Who is actively using TDD/Unittesting?




         Who uses unittesting?
         Who uses TDD?
         Who unittests ja...
Goals of this session


      1   Getting to know js-test-driver
      2   Unittesting javascript
               Synchrono...
Goals of this session


      1   Getting to know js-test-driver
      2   Unittesting javascript
               Synchrono...
Goals of this session


      1   Getting to know js-test-driver
      2   Unittesting javascript
               Synchrono...
Goals of this session


      1   Getting to know js-test-driver
      2   Unittesting javascript
               Synchrono...
Goals of this session


      1   Getting to know js-test-driver
      2   Unittesting javascript
               Synchrono...
Goals of this session


      1   Getting to know js-test-driver
      2   Unittesting javascript
               Synchrono...
Goals of this session


      1   Getting to know js-test-driver
      2   Unittesting javascript
               Synchrono...
Goals of this session


      1   Getting to know js-test-driver
      2   Unittesting javascript
               Synchrono...
What is js-test-driver


         Javascript testrunner and framework
         Client/Server approach
               Serve...
What is js-test-driver


         Javascript testrunner and framework
         Client/Server approach
               Serve...
What is js-test-driver


         Javascript testrunner and framework
         Client/Server approach
               Serve...
What is js-test-driver


         Javascript testrunner and framework
         Client/Server approach
               Serve...
What is js-test-driver


         Javascript testrunner and framework
         Client/Server approach
               Serve...
What is js-test-driver


         Javascript testrunner and framework
         Client/Server approach
               Serve...
What is js-test-driver


         Javascript testrunner and framework
         Client/Server approach
               Serve...
What is js-test-driver


         Javascript testrunner and framework
         Client/Server approach
               Serve...
What comes next?




                          Architecture



 http://westhoffswelt.de     jakob@westhoffswelt.de   slide: ...
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
               Commandline
               Eclipse
         ...
Advantages of this design


         Run from possibly any IDE
               Commandline
               Eclipse
         ...
Advantages of this design


         Run from possibly any IDE
               Commandline
               Eclipse
         ...
Advantages of this design


         Run from possibly any IDE
               Commandline
               Eclipse
         ...
Advantages of this design


         Run from possibly any IDE
               Commandline
               Eclipse
         ...
Advantages of this design


         Run from possibly any IDE
               Commandline
               Eclipse
         ...
Advantages of this design


         Run from possibly any IDE
               Commandline
               Eclipse
         ...
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

...
A simple example




         Javascript application/function
         Testcase
         js-test-driver configuration file

...
A simple example




         Javascript application/function
         Testcase
         js-test-driver configuration file

...
A simple example - Javascript



          Really simple hello world function:

      1   myApp = { } ;
      2
      3   ...
A simple example - Testcase

          Our first js-test-driver testcase:

      1    HelloWorldTest = TestCase ( ’ HelloWo...
Digression about test lifecycle


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


      1   Instantiate...
Digression about test lifecycle


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


      1   Instantiate...
Digression about test lifecycle


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


      1   Instantiate...
Digression about test lifecycle


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


      1   Instantiate...
Digression about test lifecycle


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


      1   Instantiate...
Digression about test lifecycle


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


      1   Instantiate...
A simple example - js-test-driver configuration


          Every project needs a js-test-driver configuration file.
        ...
A simple example - js-test-driver configuration


          Every project needs a js-test-driver configuration file.
        ...
A simple example - js-test-driver configuration


          Every project needs a js-test-driver configuration file.
        ...
A simple example - js-test-driver configuration


          Every project needs a js-test-driver configuration file.
        ...
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 ...
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...
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 . ...
A simple example - Live Demo




   Hello World example

                          Live Demo!




 http://westhoffswelt.de ...
Eclipse testrunner

         A testrunner plugin for Eclipse is available
         Available through eclipse plugin manage...
Eclipse testrunner

         A testrunner plugin for Eclipse is available
         Available through eclipse plugin manage...
Eclipse testrunner

         A testrunner plugin for Eclipse is available
         Available through eclipse plugin manage...
What comes next?




              Asynchronous tests



 http://westhoffswelt.de   jakob@westhoffswelt.de   slide: 16 / 31
Test asynchronous implementations


         Asynchronous timeouts
               setTimeout, setInterval
         Asynchr...
Test asynchronous implementations


         Asynchronous timeouts
               setTimeout, setInterval
         Asynchr...
Test asynchronous implementations


         Asynchronous timeouts
               setTimeout, setInterval
         Asynchr...
Asynchronous timeouts


      window . s e t T i m e o u t (
         function () { . . . } ,
         3000
      );

    ...
Asynchronous timeouts


      window . s e t T i m e o u t (
         function () { . . . } ,
         3000
      );

    ...
Asynchronous timeouts


      window . s e t T i m e o u t (
         function () { . . . } ,
         3000
      );

    ...
Asynchronous timeouts


      window . s e t T i m e o u t (
         function () { . . . } ,
         3000
      );

    ...
Asynchronous timeouts


      window . s e t T i m e o u t (
         function () { . . . } ,
         3000
      );

    ...
jsUnitMockTimeout example - Stopwatch

          Simple stopwatch example:

      1   Stopwatch . s t a r t = f u n c t i ...
jsUnitMockTimeout example - Test


          Test using jsUnitMockTimeout:

      1    StopwatchTest . pr o to t yp e . te...
Asynchronous callbacks


          Generalized callback mocks do not exist
          Mock the used function manually, call...
Asynchronous callbacks


          Generalized callback mocks do not exist
          Mock the used function manually, call...
Asynchronous callbacks


          Generalized callback mocks do not exist
          Mock the used function manually, call...
What comes next?




                          Debugging



 http://westhoffswelt.de    jakob@westhoffswelt.de   slide: 21 /...
Debugging

          Use whatever javascript debugging technique you like!
                Firebug (Firefox)
             ...
Debugging

          Use whatever javascript debugging technique you like!
                Firebug (Firefox)
             ...
Debugging

          Use whatever javascript debugging technique you like!
                Firebug (Firefox)
             ...
Debugging

          Use whatever javascript debugging technique you like!
                Firebug (Firefox)
             ...
Debugging

          Use whatever javascript debugging technique you like!
                Firebug (Firefox)
             ...
Debugging

          Use whatever javascript debugging technique you like!
                Firebug (Firefox)
             ...
Debugging - Using the console

         A lot of javascript debuggers provide a console object

      c o n s o l e . l o ...
Debugging - Using the console

         A lot of javascript debuggers provide a console object

      c o n s o l e . l o ...
Debugging - Using the console

         A lot of javascript debuggers provide a console object

      c o n s o l e . l o ...
Debugging - Using the console

         A lot of javascript debuggers provide a console object

      c o n s o l e . l o ...
Debugging - Using the console

         A lot of javascript debuggers provide a console object

      c o n s o l e . l o ...
Debugging - Using the console

         A lot of javascript debuggers provide a console object

      c o n s o l e . l o ...
Debugging - Live Demo




   Debugging example

                          Live Demo!




 http://westhoffswelt.de   jakob@w...
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 compatible
         test ...
Test automation and continuous integration


         --testOutput parameter generates JUnit XML compatible
         test ...
Test automation and continuous integration


         --testOutput parameter generates JUnit XML compatible
         test ...
Test automation and continuous integration


         --testOutput parameter generates JUnit XML compatible
         test ...
Test automation and continuous integration


         --testOutput parameter generates JUnit XML compatible
         test ...
Test automation and continuous integration




         --port and --tests can be combined to automate server
         sta...
Test automation and continuous integration




         --port and --tests can be combined to automate server
         sta...
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 ...
Code coverage



         Code coverage may be an indicator for untested code paths
         js-test-driver plugin allows ...
Code coverage



         Code coverage may be an indicator for untested code paths
         js-test-driver plugin allows ...
Code coverage



         Code coverage may be an indicator for untested code paths
         js-test-driver plugin allows ...
Code coverage



         Code coverage may be an indicator for untested code paths
         js-test-driver plugin allows ...
Code coverage - Plugin


          Download jar-file from js-test-driver homepage
          Put the coverage.jar file into s...
Code coverage - Plugin


          Download jar-file from js-test-driver homepage
          Put the coverage.jar file into s...
Code coverage - Plugin


          Download jar-file from js-test-driver homepage
          Put the coverage.jar file into s...
Using LCOV to generate HTML reports

         The --testOutput commandline parameter generates code
         coverage repo...
Using LCOV to generate HTML reports

         The --testOutput commandline parameter generates code
         coverage repo...
Code coverage - Live Demo




   Code coverage example

                          Live Demo!




 http://westhoffswelt.de  ...
Thanks for listening


          Questions, comments or annotations?


         Slides: http://westhoffswelt.de/portfolio.h...
Sources




         Breathe Icon Set:
         https://launchpad.net/breathe-icon-set, Licensed
         under Creative C...
Upcoming SlideShare
Loading in...5
×

Javascript Unittesting with js-test-driver

5,861

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,861
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
76
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Javascript Unittesting with js-test-driver"

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 22. What comes next? Architecture http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  23. 23. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  24. 24. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  25. 25. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  26. 26. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  27. 27. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  28. 28. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  29. 29. Architecture of js-test-driver http://westhoffswelt.de jakob@westhoffswelt.de slide: 6 / 31
  30. 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. 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. 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. 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. 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. 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. 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. 37. What comes next? Example http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
  38. 38. A simple example Javascript application/function Testcase js-test-driver configuration file http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
  39. 39. A simple example Javascript application/function Testcase js-test-driver configuration file http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
  40. 40. A simple example Javascript application/function Testcase js-test-driver configuration file http://westhoffswelt.de jakob@westhoffswelt.de slide: 8 / 31
  41. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 56. A simple example - Live Demo Hello World example Live Demo! http://westhoffswelt.de jakob@westhoffswelt.de slide: 14 / 31
  57. 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. 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. 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. 60. What comes next? Asynchronous tests http://westhoffswelt.de jakob@westhoffswelt.de slide: 16 / 31
  61. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 74. What comes next? Debugging http://westhoffswelt.de jakob@westhoffswelt.de slide: 21 / 31
  75. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 87. Debugging - Live Demo Debugging example Live Demo! http://westhoffswelt.de jakob@westhoffswelt.de slide: 23 / 31
  88. 88. What comes next? Automation and CI http://westhoffswelt.de jakob@westhoffswelt.de slide: 24 / 31
  89. 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. 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. 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. 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. 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. 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. 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. 96. What comes next? Code Coverage http://westhoffswelt.de jakob@westhoffswelt.de slide: 26 / 31
  97. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 107. Code coverage - Live Demo Code coverage example Live Demo! http://westhoffswelt.de jakob@westhoffswelt.de slide: 29 / 31
  108. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×