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
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
fixtest
fix
fix
test
fix
test
fix
testfix
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 earlyUnit 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 & ConfigurationJsTestDriver 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.
20. JsTestDriver configuration
1 Create the jsTestDriver.conf file (under the JS folder)
with the following initial content:2 3
server: http://localhost:9876server: http://localhost:9876
load:
js/*.src-js-
jstest/*.-js-
21. JsTestDriver configuration
1 Start the server using the following command
line2 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 line2 3 4 5
java -jar JsTestDriver-1.3.2.jar --tests alljava -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 followingTo install the JsTestDriver Eclipse plugin install the plugin from the following
driver.googlecode.com/svn/update/-test-http://jsURL :
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.
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.
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.js0.1.1-jasmine/lib/jasmine-
/adapter/JasmineAdapter.jslib/jasmine-
/Basics.jssrc-js-
test/BasicsSpec.js-js-
39. DEMODEMO
Running Jasmine Test casesRunning Jasmine Test casesRunning Jasmine Test casesRunning Jasmine Test cases
on the top of JSTDon 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
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
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>
/1782160620http://www.amazon.com/dp/
JavaScript Unit Testing Book
Without unit testing, the developers life is difficult: The integration between the components is complex because we can have buggy components that are not unit tested at all. This means that the developers will stay nights and work hard for making these components working together.
The number of defects are un-manageable. One resolved defect can occur many times because there is no repeatable test case that ensures that the defect will not happen again.
This leads to low application quality.
Here after applying unit testing: <<Say it as is>> Adding to this; Test cases can be a good reference for system documentation because they contain the test scenarios of the system use cases .
Generally speaking, Testing JavaScript code has the following complexities: 1. Slow. Requires a lot of time to test on all the browsers. JavaScript code that runs on a specific browser does not necessarily mean that it will work on other browsers. 2. Inflexible. Supporting a new browser that was not considered in the system development means allocating a new budget for testing the system again on this new browser and for the new/regression defects fixes. All of these complexities form the requirements of JavaScript Unit Testing tool.
From these complexities we can conclude that the requirements of good JavaScript unit testing tool which are: The unit testing tool should execute across all the browsers. It should have an easy setup and configuration. It should be fast and integrated with IDEs and build management tools.
JsTestDriver is an example of an efficient JavaScript unit testing tool. It is actually one of the best open source JavaScript unit testing tools. It …
The server is responsible for loading the JavaScript test cases runner code in the different browsers once they are captured. The browser can be captured through the command line or by pointing the browser to the server URL. Once the browser is captured, it is then called a slave browser. The server loads the JavaScript code, executes the test cases on every browser, and returns the results to the client. The client (command line) needs two main items: JavaScript files — source files and test files, and Configuration file — for organizing the loading of the source files and the testing files. This architecture is flexible, allowing a single server to capture any number of browsers from other machines in the network. For example, it can be useful if your code is running on Linux and you want to run your test cases against Microsoft Internet Explorer on another Windows machine.
Before going into the details of the JSTD configurations. one of the best practices of JavaScript unit testing is to separate the testing code from the application code so it is recommended to create two separate folders for them in the web applications.
Download the JsTestDriver from the following URL.
In the configuration file, we need to specify 1. In the server attribute specifies the JsTestDriver server HTTP URL (usually we are using port 9876). 2. In the load attribute which tells the JsTestRunner the loading order of the JavaScript files. In our case, we specify the path of both the JavaScript source and test files.
The next step is to start the JsTestDriver server using the following command. There are some optional parameters: The port parameter which specifies the server port. The browser parameter which specifies the browser path to load for executing the tests.
Finally to run the test cases, we use the following command.
Instead of using command line, you can start work directly with the JsTestDriver using the JsTestDriver Eclipse plugin, you can install it from the following URL.
In the JsTestDriver Eclipse plugin, you can create a new test configuration: You select the project you want to test, and the configuration file of the test cases.
You can start and stop the testing server from the plug-in adding to this you can also run the test cases and see the results of the test cases in the plug-in view
To be able to create a JavaScript testcase object, you should use the jsTestDriver TestCase method. In the setUp method of the testcase object, you can add the HTML fragment that you will refer to inside your test methods. In the test methods, you can use the jsTestDriver constructs to control the test case. I recommend to have a single testcase object per the JavaScript object.
Now, Let’s move to the example. We have a login form with two fields (UserName and password) and a submit button. There is a simple JavaScript validator that checks if the UserName and the password are entered. If these fields are not entered, the following error messages appear. Now, Let’s write the assertions which tests if the validation component is behaving correctly in three test scenarios: Empty userName and password. Empty userName and Non-Empty password. Non-Empty userName and empty password.
Now, Let’s see how we can execute the Jasmine test cases on the top of JSTD. As we are seeing here, this is a simple Jasmine test case that tests another JavaScript object which adds two numbers. This test case ensures that the JavaScript addition operation is working properly.
JSTD allows generating code coverage reports. Code coverage is one of the software testing measurements. Code coverage represents how much the source code is tested. It has three coverage criteria: Function coverage represents the percentage of the program functions that have been executed Statement coverage represents the percentage of the program statements that have been executed. Branch coverage represents the percentage of the program branches that have been executed.
It is better to specify the testOutput flag in the test running command to get the test coverage files in your specified folder.