Javascript Unittesting with js-test-driver

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://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.de slide: 5 / 31

22. What comes next? Architecture http://westhoﬀswelt.de jakob@westhoﬀswelt.de slide: 6 / 31

23. Architecture of js-test-driver http://westhoﬀswelt.de jakob@westhoﬀswelt.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

37. What comes next? Example http://westhoﬀswelt.de jakob@westhoﬀswelt.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

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://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.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

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://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.de slide: 13 / 31

56. A simple example - Live Demo Hello World example Live Demo! http://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.de slide: 15 / 31

60. What comes next? Asynchronous tests http://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.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

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://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.de slide: 20 / 31

74. What comes next? Debugging http://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.de slide: 22 / 31

87. Debugging - Live Demo Debugging example Live Demo! http://westhoﬀswelt.de jakob@westhoﬀswelt.de slide: 23 / 31

88. What comes next? Automation and CI http://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.de slide: 25 / 31

96. What comes next? Code Coverage http://westhoﬀswelt.de jakob@westhoﬀswelt.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

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

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://westhoﬀswelt.de jakob@westhoﬀswelt.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://westhoﬀswelt.de jakob@westhoﬀswelt.de slide: 31 / 31

Javascript Unittesting with js-test-driver

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Javascript Unittesting with js-test-driver

Similar to Javascript Unittesting with js-test-driver (20)

Recently uploaded

Recently uploaded (20)

Javascript Unittesting with js-test-driver