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.

Nowadays, Unit Testing tools are a basic part of the development cycle as they improve the quality of the projects by quickly finding defects in the code, if the new JavaScript Unit Test Tools are combined with the existing JavaScript Code Coverage capabilities in Rational Application Developer (RAD) 9.6 introduced back in the Beta 2 release (May 2016), this provides a comprehensive set of Code Quality tools for any JavaScript application.

The Unit Testing process involves the smallest atomic parts of an application (called "units") and a battery of tests, these units are individually inspected to verify they work properly. By repeating this process continually during the development cycle, we can assure the quality of the product.

Rational Application Developer 9.6 Beta 3 includes a set of tools for JavaScript Unit Test based on the Jasmine framework, using this tools, new unit tests can be created and conveniently use them to test your projects without leaving the workbench.

Let’s put this tools to test by using a sample application, first we need to create a new project with JavaScript Unit Test capabilities by going to File > New > Web Project and making sure to select the JavaScript Code Quality template:

If you want to modify the configuration of the Unit Test framework, go to the next page of the wizard and click on Test Library:

Otherwise click Finish, this will create the new project and the required files will be automatically copied to the project:

Now that we have the project, we will need 3 things:

A function to test.

A Jasmine Spec File.

A Jasmine Spec Runner.

Let’s create the function we want to test, for this, create a new JavaScript file by clicking on File > New> Other… > JavaScript > JavaScript Source File, enter a “Multiply” as the file name and click Finish, this will create a new Multiply.js file inside the selected project. Now we will add a simple function that will receive two numbers, multiply them and return the result:

Now we will create the Jasmine Spec File, to do this, right click the project > New > Jasmine Spec File, enter “MultiplySpec” as the file name and select the tests folder to create the new file in that location:

Click Next. In this page of the wizard you can select the file that contains the function we want to test, in this case the Multiply.js file we created before:

Click Finish, this will create the skeleton of the test:

We need to modify this code, to actually test the function:

As you can see, we have three tests (defined by the it function), in the last one we are passing a string to the Multiply() function, therefore this test will fail as it expects only numbers.

Finally, we will create the Jasmine Spec Runner, this file is used to run the tests in the server. To create this file, right click the project > New > Web Page, select Jasmine Spec Runner from the Templates list, then click on the Options… button.

Here we need to add the two files we created before, click on the JavaScript Files option and then click on Add…, select the Multiply.js and MultiplySpec.js files and click OK:

Both files will be added to the list:

Now we have everything ready to execute the test, to do this, right click the MultiplyRunner.html file > Run As > JavaScript Unit Test, select a server and click Finish.

The JavaScript Unit Test view will be automatically opened, as you can see, it displays the three tests grouped in a test suite:

This view contains information about the results of the tests, in this case, the progress bar is red, meaning that, one or more tests failed, at the top-left corner you have the total executing time, right below, the overall execution status is displayed. At the bottom left, you can quickly identify which tests passed or failed by looking at the icons, in this case, the last test failed, so, if you click the failed tests, the Failure Trace section will be populated with the stack trace of the problem:

You can double click on the entries in the stack trace to open the associated files.

Once you have found and fix all the problem, the view will look like this:

A green progress bar indicates no errors were detected.

How to integrate Code Coverage?

Rational Application Developer 9.6 Beta 2 introduced Code Coverage tools for JavaScript, which are designed to work together with the new JavaScript Unit Test tools. To do this, we need to enable Code Coverage in the project. First, right click the project > Configure > Add JavaScript Code Coverage Support, select the MultiplyRunner.html file and click Finish:

That’s all, we just need to run the test again (right click the MultiplyRunner.html file > Run As > JavaScript Unit Test, select a server and click Finish). After the execution is completed, the Code Coverage Results view will be automatically opened (you can double click the result to get more details, i.e: exactly which lines of code are covered by the unit tests):

When should you perform unit tests?

Short answer, as often as possible. Long answer, as writing unit tests might be a time-consuming process it is not easy to prepare a good battery of tests, but in the long run, the benefits overcome the problems, i.e:

Problems are detected early in the development cycle.

Write code that is easy to test.

Confidence in the finished product.

Making sure that new functionality doesn’t break the existing one.

Ultimately, all this benefits point to the same goal, to increase the quality of the applications.

Console Integration

Back in February 2016, Rational Application Developer (RAD) v9.6 Beta 1 introduced the Command line Interface (CLI) tooling for developers to integrate any command line tool into RAD. In this new beta release, the existing tools were extended to support the integration with the Console view, meaning that, the output of the commands can be reviewed without leaving the workbench, this console also allows inputting data to enable communication with interactive commands.

This new functionality can be accessed from the first page of the Command Mapping wizard when creating or editing commands:

This option is selected by default, so all commands will be created with this functionality.

All encodings supported by RAD are available to be selected and used by the console when a command is executed, the encoding being used at the moment is selected by default. In the following example, a simple Ping command will be executed to show the results in the console:

As previously mentioned, the console also works with interactive commands, the same way it works on the operating system terminal. In the following example we are going to execute a command that compares two given files:

User input is displayed in a different color to distinguish it from the output of the command. Colors and other parameters can be configured from the preferences page (Window > Preferences):

Command Scopes

In the previous v9.6 Beta release, all commands were saved at the product location, so they were available for all of your workspaces created by RAD, now, in Beta 2, you can choose the scope of the commands you create to limit their visibility depending on your needs.

In the same Command Mapping wizard, one of the following three scopes can be selected:

Product

Workspace

Project

Commands in the Product scope will be available to all workspaces created by RAD, if Workspace scope is selected, commands will be available only to projects inside the current workspace, and finally, if Project scope is selected, commands will be visible to the selected projects, this is especially useful if you need to share the commands with a peer by exporting the project or uploading it to a Source Control Management (SCM) system as the commands will be stored inside the project.

Code coverage comes from the idea of measuring how much of your code is actually covered in automated tests. This way you can ensure the quality of your software product by knowing exactly which parts of the code are actually covered and which are not.

IBM Rational Application Developer for WebSphere Software v9.6 Beta 2 now ships a set of tools for adding code coverage capabilities to web projects that have JavaScript files. With these new tools you can:

Add code coverage support to new or existing web projects.

Configure your HTML pages to act as code coverage runners.

Launch JavaScript unit tests targeting a server.

Show coverage results within the workbench allowing you to see, in the JavaScript editor, those lines that are covered and those who are not.

Double click on the launch, it will bring up the associated File Level Code Coverage Results report with detailed code coverage results statistics.

Double click(or Right click > Open) on any of the file in the report, it will link to the JavaScript source file (if exists on the workspace) and open the source in the editor. In the source editor, you can see the line covered rulers (in green/red color) on the left hand side.

Rational Application Developer (RAD) v9.6 Beta2 is now available! This Beta release offers continued support for WebSphere Application Server traditional V9 Beta, improvements in the new Command-line Interface (CLI) features, new JavaScript Code Coverage tool among other updates and enhancements. IBM encourages users to download RAD v9.6 Beta2, explore new features and share your thoughts with development team. You can start at Rational Application Developer for WebSphere Software Open Beta

Here the most notably features and updates available in RAD v9.6 Beta2:

Based on pre-release Eclipse 4.6 (Neon M6).

Development and server tools that support the beta version of WAS Traditional application servers versions 9.0. This now includes support for J2C on WAS 9. For WAS traditional 9 details see WebSphere Application Server Open Beta.

A new framework for integrating your favorite Command Line Interface (CLI) tools into the IDE user experience. For IBM's point of view on why this matters see Why CLI. For details on how to use this new capability see Integrating Command-Line tools in RAD. This framework was made available in the first beta drop. New enhancements delivered in drop #2 include:

integration with the Console view (the outputs of commands can be reviewed without leaving the workbench, and you can input data via the console to work with interactive commands).

JavaScript Code Coverage tools. Similar to Java Code Coverage, these tools help developers assure and measure JavaScript initial code quality by analyzing what code is covered by automated tests. These tools can help to:

Configure projects and HTML pages to run JavaScript code coverage.

Run enabled HTML pages as JavaScript tests.

Integrate the code coverage results into the JavaScript editors, when covered JavaScript files are opened.

Since announced by Apple in the Mobile World Congress in 2015, Swift has taken an interesting twist, going from front-end programming language to full-stack runtime, kind of what Node.js does for JavaScript. Also, in the MWC, Apple announced Swift will be open source. Both came true in past December 2015.

As of now, Swift can be installed on Mac and Ubuntu and is growing rapidly. Also, many major participants like IBM are coming in the game to make it a more stable and mature runtime for the Enterprise.

On the other hand, IBM Rational Application Developer has a comprehensive set of tools for web development and since RAD 9.6 Beta 1 came out in February 2016, it also supports running Command-Line Interface (CLI) commands.

This is a perfect scenario where developers would want to use CLI commands in an environment that offers tools to speed up development.

Disclaimer

IBM Rational Application Developer for WebSphere Software (herein RAD) does not support Swift runtime at all. The purpose of this blog post is to demonstrate how to use command-line interface commands within the context of RAD.

Prerequisites.

The sample.

The sample is a swift server-side application that contains HTML pages. While the swift development is done in a plain text editor, the HTML development is done using RAD's web tools. Moreover, swift commands will be used from inside RAD demonstrating that it's not needed to leave the IDE to perform such commands.

The project.

The project contains the standard artifacts required by a Swift application

Zoo

The name of the root folder. Here all the artifacts are placed and will be used by the application.

Resources

This folder contains the resources that are required by Vapor, the server module used by this sample, are going to be public, such as the HTML page.

Sources

All source files and folders. This one contains the Zoo folder to create the Zoo module in this application. This Zoo folder contains the main.swift file which is the main file for the Zoo module.

Package.swift

The package descriptor used by Swift Package Manager. Two dependencies are declared here: Vapor, the server module, and Vapor-Stencil, the HTML template parser module. Also, this file declares the modules for this application, which is Zoo in this case.

Cloning the project.

The project is hosted in IBM Bluemix DevOps Services. Import the zooswift project from this Git repo.

Mapping the Swift command in RAD.

Follow instructions in this post to map the runApplication.sh shell script in CLI folder to a context menu action in RAD. Just keep in mind to use the ${string_prompt} variable in the arguments section as follows:

That will allow you to map the command as well as will prompt you for a String that will be the name of the executable Swift binary, which is Zooin this scenario.

Building the web page.

Use the Palette in RAD to make a view that looks similar to this one. Use index.html file in Resources folder.

Make sure of the following:

The text box associated to Animal type has the name animalType.

The text box associated to Animal count has the name animalCount.

The message is inside a <div> element and that you use the {{animalType}} and {{animalCount}} with braces.

Now, click on the Source tab and modify the following element with {{animalAdded}} and save.

These special notations are going to be used to parse the HTML document in Swift and change them when rendering the view. This is done by Vapor-Stencil and is similar to what Angular, Handlebars or other JavaScript frameworks do for HTML templating.

Running the application.

Now that web page is complete, you can test the Swift server within RAD. Righ-click on the zooswift project and select Commands > Run Swift Application, where “Run Swift Application” is the name of the command you used in section Mapping the Swift command in RAD. A window will prompt you for a String, use the work Zoo and click OK.

At the end of the compiling, a HTTP server will be launched as well as the default browser showing the index.html file.

Add a animal and a count number to add it to the registry (in fact the values are not stored, so any update will replace the previous one).

Rational Application Developer (RAD) v9.6 Beta1 is now available ! This Beta release offers WebSphere Application Server traditional V9 Beta support and Command-line Interface (CLI) features among other updates and enhancements. IBM encourages users to download RAD v9.6 Beta1, explore new features and share your thoughts with development team. You can start at Rational Application Developer for WebSphere Software Open Beta

Introduction

The Command line Interface (referred to as CLI in this article) tooling is new function in Rational Application Developer for WebSphere Software 9.6 Beta 1 (referred to as RAD in this article) intended to allow a developer to integrate any command line tool as a menu action in the product. In the following example, you will see how you can use this functionality to integrate eslint, a node package for linting JavaScript, as a menu action for any JavaScript file.

Pre-requisites

Example CLI Integration

The beta version of the product does not currently support the new language constructs introduced in ECMAScript 6, so if you create an application that uses them you will get various errors and warnings in the Problems view. Using a tool like eslint, which does support ECMAScript 6, will ensure that any JavaScript file can be checked for any problem. This process will make use of the IBM SDK for Node.js which has been included in the product for use by the Cordova tools since version 9.1.

To start off, a Cordova project is created targeting the Android platform using the New > Project > Cordova project wizard. Once the Cordova project is created the eslint package needs to be added to the IBM SDK for Node.js installation. This can be accomplished quickly by using the Cordova terminal, as it sets the Operating System PATH with the necessary values. The Cordova terminal can be opened by opening the context menu on a Cordova project and selecting Cordova > Open in Terminal.

Once the package is installed, eslint needs to be configured for ECMAScript 6 support by running eslint –init. Now eslint is ready for use in the product.

The CLI tools provide a means of mapping any command line tool to a menu action in the product. To create this you first need to create a command mapping, by selecting File > New > Other… > Command-line Interface > Command Mapping.

The first page of this wizard (Command details) is for specifying the command details for running eslint, such as the process to run and the arguments for this process. In addition to the command details a label will be defined for displaying in the context menu (which will be shown later). If you use a variable for accessing the location of an artifact then make sure to escape it (surrounded with quotation marks) as the path could contain a space.

The next page of the wizard (Environment settings) is for configuring the environment of this command.

Note: The eslint package assumes that the node process will available on the Operating System PATH; therefore, it must be added to the PATH for this action if it is not already included in your Operating System PATH variable.

The next page (User interface modifications) is for describing how this command should integrate into the product context menu.

In this scenario, add a menu action for this command to appear on any JavaScript file.

Click Add File to add a file context.

Specify *.js as the file name, click OK.

Click Finish.

The Commands Explorer view now appears and will show a list of all the commands available to this instance of the product.

The ‘Analyze’ command will now appear in the Commands menu found on the context menu under of any file matching *.js