Skip to Content
Author's profile photo Former Member

Configuring Jenkins to run Unit tests and Lint checks using Karma and Eslint

This document is part of a series of documents covering Continuous Integration setup for a UI5

application

  1. Setting up Jenkins with GitHub                                             
  2. Setting up Jenkins with GitHub (on Linux – Ubuntu 14.04)
  3. Configuring Jenkins to run Unit tests and Lint checks using Karma and Eslint                                      ( You are currently here )

  4. Configuring Jenkins to run Build Automatically on Code Push


Jenkins is used as continuous integration server. In the previous article, we already touched on Setting up Jenkins with GitHub.

Now, we will show how to configure our Jenkins project build to run unit tests and lint checks on a project that is hosted on GitHub. Jenkins is then responsible for running all the tests you specify in the build. If the build fails, it notifies all the developers so that they fix the error that caused the build to fail as soon as possible. Once the build passes after a previous failure, all the developers are notified again that the build is now fine and new code can be pushed to the repository.

perfect.PNG

Figure 1: Continuous Integration setup with Jenkins

For Unit Tests we are using Jasmine framework for test driven development. Let’s understand briefly what Lint Checks are:


Linting is the process of checking the source code for programmatic, syntactic, stylistic errors. It makes the whole program in a uniform format. It can be achieved by writing some rules. There are so many linters are available like JSLint, JSHint, ESlint.


In this we are configuring Jenkins with ESlint. The reason is,

— JSLint we should follow all the rules strictly.

— JSHint is customizable. We can enable or disable the existing rule

— But in ESlint we can write our own rules. It is completely customizable.


Eslint is written using Node.js to provide a fast run time environment and easy installation.


Now I would explain what steps need to be followed for configuring Jenkins.


1. Install Node.js on your Jenkins server and configure in your project

/wp-content/uploads/2015/12/img1_851395.png


2. Configuring dependencies in your package.json

Specify all the dependencies in package.json. So that we need not to install manually.


We have to specify the commands as scripts.

/wp-content/uploads/2015/12/img2_851405.png

We use Karma test runner, for actually running the unit tests and to format the results we use junit reporter.


3. Make these changes in your karma.conf.js

  1. Specifythe junit in reporters
  2. Make singleRun as true so that it will run once and exit
  3. Specify the output directory to store the results

karma.PNG

When you run “npm install”, it will install all the dependencies in package.json

This will store linting errors in eslint.xml and unit tests in TESTS*.xml in TEST_RESULTS folder.


Here * will be replaced by the name of the browsers where the tests are running


Eg : TESTS-Chrome_46.0.2490_(Windows_8.1_0.0.0).xml


4. Execute this shell script

/wp-content/uploads/2015/12/img3_851410.png

5. Configure path for “Publish JUnit test result report” plugin

/wp-content/uploads/2015/12/img4_851411.png

6. CheckStyle plugin to display the test results in a Graph Format:

  • Install checkstyle plugin
  • Specify the linting results file to the checkstyle which is in junit format

img5.PNG

     By default, this plug-in runs only for stable or unstable builds, but not for failed builds. If this plug-in should run even for failed builds then activate this check     box.


7. Notifying the Developers whenever build fails

Open Jenkins Dashboard

Go to: Manage Jenkins > Configure System > Email Notification

/wp-content/uploads/2015/12/img6_851413.png

In your project configuration, under E-mail Notification. Specify the emails of the recipients to whom mail has to be sent when builds fails.

img4.PNG

After you build your project with the above configuration, you will able to see the test results in this graph format with build number and time taken to compute them.

/wp-content/uploads/2015/12/img7_851416.png

Conclusion

In this article we have shown how to run unit tests and linting checks using karma and eslint.

In the next article, we will talk about how to trigger the build automatically whenever the code is pushed to GitHub and also we will explain what is the need of automatic builds.


This article was written with the contribution of :  RAVI SURESH MASHRU

Setting up Jenkins with GitHub

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Very nice.

      Can we use Sonar instead of Lint for Javascript project builds?

      Author's profile photo Amit Agrawal
      Amit Agrawal

      Hi Mounika,

      Nice article.

      One Question. SAP is using QUnit framework but they have customized it and now all qunits are run from a single html page, which loads the required SAP qunits library and Qunits js file. I am referring to nw.epm.refapps.ext.po.apv reference application created using WebIDE. How did you run the qunit tests in this case? Also, were you able to run OPA5 tests also?

      Regards,

      Amit

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Amit,

      We used Jasmine to run unit tests. We didn't use qunit for unit tests.

      But in open sap course (Developing webapps using SAP UI5) they explained about qunit test cases. I think you can refer that once.

      Thank you.

      Regards,

      Mounika.