20
In blog post JavaScript Unit Test Tools in Rational Application Developer 9.6 Beta 3, my buddy Cesar showed you how you can easily create unit tests for your JavaScript API and gather metrics about the code coverage to ensure the quality of your code using the JavaScript tools in RAD. Here I'm going to show you some tips that will help you while developing these tests.
Add support.
You already have a web project that contains a bunch of of script files and you want to develop unit tests for them but you want to use the same project for it. You can easily configure your project with JavaScript code quality features.
-
Right-click on your web project and select Properties.
-
Select the Project Facets category.
-
Check the JavaScript Code Quality facet.
-
Click Finish.
This is the easiest way to configure your project for JS code quality. If you want to add more details to this configuration, like libraries destination within the project or project references, use the Further configuration available... link that appears in th bottom of the facets table.
If your project already has the JavaScript Code Quality facet, which means you already have Jasmine support in your project, and you want to add code coverage capabilities just right-click on the project and select Configure > Add JavaScript Code Coverage support and follow the pop-up wizard to configure the blanket files destination and test runners configuration to support code coverage right away.
Order matters.
Like in any HTML page, the test runners created in RAD have the tests, API's and libraries required by the web browser to run such tests, and as in any HTML page the order where they appear matter. If while running your tests you notice that they're not being executed or some sort of problem at booting them, look at the source code of the HTML and make sure the structure is similar to the following:
-
The Jasmine-specific files
-
Your API script files.
-
Your unit test script files.
-
The blanket script, if code coverage support is desired.
When configured properly, the scripts order should look like this.
Deployment patterns.
There are different ways to deploy your web projects for testing purposes, but each of them has advantages and disadvantages.
One single web project.
In a single web project you have all your script files: API, test library (a.k.a. Jasmine), and unit test. This is the simplest, so for educational purposes is the best option to choose and as a best practice, keep your files in different folders for an organized layout. The proposed layout is:
- YourProject
- WebContent
- js (folder)
- Your API (folder)
- libs (where the jasmine files are)
- tests (your unit tests)
Just right-click on the HTML runner and select Run As > JavaScript Unit Test and RAD will deploy the project and launch the test.
One more benefit about this pattern is that you don't need to worry for Cross-Origin Resource Sharing problems, as everything is in the same server and context root.
Different projects, same server.
A more modular pattern. This helps to have the main web application code apart from the test code, which means that when the test results are satisfactory, you can then move the web application right to your production server or whatever stage server comes next in your pipeline. You only need to make sure you are referencing your target web project using the Project References in the project properties page so that you can see the JavaScript files and can create unit tests based on them. When you deploying, make sure you select both web projects and RAD will do the rest.
Different projects, different servers.
This is the most complex pattern. Since this pattern involves having two different servers, it means that you will load the remote API scripts (because they're in a different server) into the test application. This is a common pattern in web development called Cross-Origin Resource Sharing (CORS) and you will need to handle it manually in your test scripts to allow CORS calls, otherwise the remote scripts will not be loaded at all.
Debugging tests.
A neat feature in RAD for JavaScript code quality is the fact that you can debug your tests. To achieve this just enable the debug flag.
-
Go to Window > Preferences.
-
Expand General > Tracing.
-
Check the Enable checkbox.
-
Search the string com.ibm.etools.webtools.javascript.unittest.ui/debug.
-
Change the flag to true.
-
Click OK.
After you run your HTML runner as a JavaScript Unit Test, the JavaScript Unit Test view will be shown and will load a light version of Firebug allowing you to debug the tests from within the view.
Something to note here, whatever change you do in the debug session will not be reflected in the actual file in RAD. You need to make changes in there too.
