Efficient JavaScript Unit Testing, JavaOne China 2013

This material is presented by Hazem Saleh in JavaOne Shanghai (22-25) July 2013.

Transcript

1. Efficient JavaScript Unit Testing Hazem Saleh
2. O U T Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration Developers Life without Unit testing. L I N E JsTestDriver Architecture & Configuration JsTestDriver Eclipse plugin. Writing a JavaScript TestCase. JsTestDriver common constructs. Writing asynchronous JavaScript TestCase. Generating reports from test cases. JsTestDriver Compatibility
3. Developers Life without Unit testing Complex integration between the system components.
4. Unmanaged number of new/regression defects especially when the system complexity increases. Developers Life without Unit testing
5. Low application quality. Developers Life without Unit testing Longer testing cycle. test fix test fix fix test fix test fix test fix test fix test fix test
6. O U T L Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration What is unit testing? and why? L I N E JsTestDriver Architecture & Configuration JsTestDriver Eclipse plugin. Writing a JavaScript TestCase. JsTestDriver common constructs. Writing asynchronous JavaScript TestCase. Generating reports from test cases. JsTestDriver Compatibility
7. What is unit testing and why? A unit testing is a piece of code (usually a method) that invokes another piece of code and later checks the correctness of some assumptions Unit testing helps in detecting BUGGY components in the early Unit testing helps in detecting BUGGY components in the early stages of the project. A test suite is a set of test cases, and a test case is a set of tests which verifies the system components.
8. Good Unit Test Characteristics Automated Repeatable Fast Easy to run. Easy to understand Incremental
9. What is unit testing and why? Integration is much simplified. Defects are managed. Regression defects should not happen if the defect is resolved by creating a new test case. Application quality increases. Testing cycle is reduced. Test cases can be a good reference for system documentation. Test cases can improve the system design and be the basis of code refactoring.
10. O U T L Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration Current Complexities in testing JavaScript code. L I N E JsTestDriver Architecture & Configuration JsTestDriver Eclipse plugin. Writing a JavaScript TestCase. JsTestDriver common constructs. Writing asynchronous JavaScript TestCase. Generating reports from test cases. JsTestDriver Compatibility
11. Current Complexities in testing JavaScript code Requires a lot of time to test on all the browsers. JavaScript code that runs on a specific browser does not necessarily Slow JavaScript code that runs on a specific browser does not necessarily mean that it will work on other browsers. Supporting a new browser means allocating a new budget for testing the system again on this new browser and for the new/regression defects fixes. Inflexible
12. O U T L Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration Requirements of a good JavaScript unit testing tool. L I N E JsTestDriver Architecture & Configuration JsTestDriver Eclipse plugin. Writing a JavaScript TestCase. JsTestDriver common constructs. Writing asynchronous JavaScript TestCase. Generating reports from test cases. JsTestDriver Compatibility
13. Good JavaScript Unit Testing Tool Requirements JavaScript unit testing tool Can execute across all the browsers over all the platforms. Fast Test case execution. all the platforms. Easy setup. Easy configuration. execution. Integration with IDEs. Integration with build management tools.
14. O U T L Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration What is JsTestDriver. L I N E JsTestDriver Architecture & Configuration JsTestDriver Eclipse plugin. Writing a JavaScript TestCase. JsTestDriver common constructs. Writing asynchronous JavaScript TestCase. Generating reports from test cases. JsTestDriver Compatibility
15. What is JsTestDriver One of the best Open source JavaScript testing tools. Meets all of the previous requirements and more: Supports all the browsers / all platforms. ✓ Easy setup and configuration. ✓ Fast Test case execution. ✓ Integration with IDEs and build management tools. ✓
16. O U T L Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration JsTestDriver Architecture & Configuration. L I N E JsTestDriver Architecture & Configuration JsTestDriver Eclipse plugin. Writing a JavaScript TestCase. JsTestDriver common constructs. Writing asynchronous JavaScript TestCase. Generating reports from test cases. JsTestDriver Compatibility JsTestDriver Architecture & Configuration.
17. JsTestDriver Architecture
18. JsTestDriver configuration 1 Separate Source files from Test files
19. JsTestDriver configuration 1 Download the jsTestDriver latest jars from 2 driver/downloads/list - test - http://code.google.com/p/js
20. JsTestDriver configuration 1 Create the jsTestDriver.conf file (under the JS folder) with the following initial content: 2 3 server: http://localhost:9876 server: http://localhost:9876 load: js /*. src - js - js test/*. - js -
21. JsTestDriver configuration 1 Start the server using the following command line 2 3 4 java -jar JsTestDriver-1.3.2.jar Optional parameters [--port 9876] [--browser “{PATH}\firefox.exe","{PATH}\iexplore.exe","{P ATH}\Safari.exe"]
22. JsTestDriver configuration 1 Run the test cases using the following command line 2 3 4 5 java -jar JsTestDriver-1.3.2.jar --tests all java -jar JsTestDriver-1.3.2.jar --tests all ......... Total 9 tests (Passed: 9; Fails: 0; Errors: 0) (16.00 ms) Firefox 9.0.1 Windows: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (3.00 ms) Safari 534.52.7 Windows: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (4.00 ms) Microsoft Internet Explorer 7.0 Windows: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (16.00 ms)
23. O U T L Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration L I N E JsTestDriver Architecture & Configuration Writing a JavaScript TestCase. JsTestDriver common constructs. Writing asynchronous JavaScript TestCase. Generating reports from test cases. JsTestDriver Compatibility JsTestDriver Eclipse plugin. JsTestDriver Eclipse plugin.
24. JsTestDriver Eclipse plugin Instead of using command lines for starting the server and running the test cases, you can directly use the jsTestDriver Eclipse plugin. To install the JsTestDriver Eclipse plugin install the plugin from the following To install the JsTestDriver Eclipse plugin install the plugin from the following driver.googlecode.com/svn/update/ - test - http://js URL :
25. JsTestDriver Eclipse plugin
26. JsTestDriver Eclipse plugin
27. O U T L Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration L I N E JsTestDriver Architecture & Configuration JsTestDriver Eclipse plugin. JsTestDriver common constructs. Writing asynchronous JavaScript TestCase. Generating reports from test cases. JsTestDriver Compatibility Writing a JavaScript TestCase. Writing a JavaScript TestCase.
28. Writing a JavaScript TestCase ApplicationUtilTest = TestCase("ApplicationUtilTest"); ApplicationUtilTest.prototype.setUp = function () { /*:DOC += ...HTML fragment code goes here (single root) ...*/ }; ApplicationUtilTest.prototype.testMethod1 = function () { ApplicationUtilTest.prototype.testMethod1 = function () { … validate using the jsTestDriver constructs … } ApplicationUtilTest.prototype.testMethod2 = function () { … validate using the jsTestDriver constructs … } ...
29. O U T L Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration L I N E JsTestDriver Architecture & Configuration JsTestDriver Eclipse plugin. Writing asynchronous JavaScript TestCase. Generating reports from test cases. JsTestDriver Compatibility Writing a JavaScript TestCase. JsTestDriver common constructs. JsTestDriver common constructs.
30. JsTestDriver common constructs fail("msg") assertTrue("msg", actual) assertFalse("msg", actual) assertSame("msg", expected, actual) assertNotSame("msg", expected, actual) assertNull("msg", actual) assertNotNull("msg", actual)
31. DEMO DEMO Let’s write synchronous JS Let’s write synchronous JS Let’s write synchronous JS Let’s write synchronous JS Test cases … Test cases …
32. O U T L Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration L I N E JsTestDriver Architecture & Configuration JsTestDriver Eclipse plugin. Generating reports from test cases. JsTestDriver Compatibility Writing a JavaScript TestCase. JsTestDriver common constructs. Writing asynchronous JavaScript TestCase. Writing asynchronous JavaScript TestCase.
33. Writing asynchronous JavaScript TestCase AsyncTest = AsyncTestCase("AsynchronousTesting"); AsyncTest.prototype.setUp = function () { /*:DOC += <!-- Initialization code -->*/ }; AsyncTest.prototype.testOperationOne = function(queue) { queue.call('Step1', function(callbacks) { var asyncObject = new AsyncObject (); var successCallBack = callbacks.add(function(successData) { // validate (successData) if possible .... }); var failureCallBack = callbacks.addErrback('Error Message'); var failureCallBack = callbacks.addErrback('Error Message'); // call asynchronous API asyncObject.operationOne(inputData, successCallBack, failureCallBack); }); };
34. Every inline function provides a callbacks parameter for testing the Ajax APIs. There are two types of callbacks: • Success callback: Represents the success path. It MUST be called in order to pass the test. • Error callback: Represents the error path. If it is called, then the test fails. Writing asynchronous JavaScript TestCase The test runner does not move to the next queue until the current queue executes all of its success callbacks. If a specific success callback is not called for a specific amount of time (30 seconds), the test fails.
35. DEMO DEMO Let’s write Asynchronous JS Let’s write Asynchronous JS Let’s write Asynchronous JS Let’s write Asynchronous JS Test cases … Test cases …
36. O U T L Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration L I N E JsTestDriver Architecture & Configuration JsTestDriver Eclipse plugin. Writing a JavaScript TestCase. JsTestDriver common constructs. Writing asynchronous JavaScript TestCase. JsTestDriver Compatibility Generating reports from test cases. JsTestDriver Compatibility
37. JsTestDriver is not only a JavaScript unit testing framework BUT it is a test runner for many other JavaScript unit testing frameworks. JsTestDriver Compatibility JsTestDriver is compatibility with the following JavaScript unit testing frameworks through adapters: • Jasmine • YUI Test • QUnit
38. In order to run the previous unit testing frameworks on the top of the JSTD test runner. You need to configure the framework adapter and source before the test files as follows: JsTestDriver Compatibility server: http://localhost:9876 load: /jasmine.js 0 . 1 . 1 - jasmine / lib / jasmine - /adapter/JasmineAdapter.js lib / jasmine - /Basics.js src - js - test/BasicsSpec.js - js -
39. DEMO DEMO Running Jasmine Test cases Running Jasmine Test cases Running Jasmine Test cases Running Jasmine Test cases on the top of JSTD on the top of JSTD
40. O U T L Developers Life without Unit testing. What is unit testing? and why? Current Complexities in testing JavaScript code. Requirements of a good JavaScript unit testing tool. What is JsTestDriver. JsTestDriver Architecture & Configuration L I N E JsTestDriver Architecture & Configuration JsTestDriver Eclipse plugin. Writing a JavaScript TestCase. JsTestDriver common constructs. Writing asynchronous JavaScript TestCase. JsTestDriver Compatibility Generating reports from test cases. Generating reports from test cases.
41. JSTD can generate code coverage files. Code coverage describes how much the source code is tested. Generating reports from test cases Coverage Criteria: Function coverage Statement coverage Branch coverage
42. JsTestDriver can generate code coverage for your JavaScript code using the code coverage plugin.
43. Configuring the plugin: Download the Add the coverage plugin declaration to the Specify the -- Generating reports from test cases Download the “coverage.jar”. Add the coverage plugin declaration to the configuration file: : plugin - name: "coverage" jar: "plugins/coverage.jar" module: "com.google.jstestdriver.coverage.Coverage Module" Specify the -- testOutput <<output_folder>> flag in the test running command.
44. Unfortunately JsTestDriver does not generate HTML reports directly, JsTestDriver generates the test coverage files in LCOV and XML formats. You can generate the HTML test reports using the LCOV Generating reports from test cases You can generate the HTML test reports using the LCOV visualizer tool: http://ltp.sourceforge.net/coverage/lcov.php
45. The JsTestDriver LCOV file name is usually: <config filename>-coverage.dat (jsTestDriver.conf- coverage.dat) To generate the report from the LCOV file using the LCOV Generating reports from test cases To generate the report from the LCOV file using the LCOV visualizer tool: genhtml jsTestDriver.conf-coverage.dat
46. Conclusion Conclusion
47. Conclusion Testing JavaScript code is important for increasing the application quality and for speeding up fixing defects and minimizing the number of regression defects. Good JavaScript tool should be configurable, easy to use, and working with all the browsers. JsTestDriver is one of the most powerful JavaScript unit testing tools that can be used for testing both synchronous and asynchronous JavaScript code on all the browsers.
48. Question of the session (Free book copy) <script> (function() { var x = 10, y = 20, z = x+++y; z = x+++y; alert(x); //? alert(y); //? alert(z); //? })(); </script> / 1782160620 http://www.amazon.com/dp/ JavaScript Unit Testing Book
50. Contact me Twitter: http://www.twitter.com/hazems LinkedIn: http://eg.linkedin.com/in/hazemsaleh Blog: http://www.technicaladvices.com Email: hazems@apache.org