Sign up for the Testim Dev Kit beta. Sign up now

Measure Quality and Coverage: Using SonarQube With JavaScript

SonarQube was first designed to provide developers with a tool to scan their code for bugs, code smells, or security…

By Testim,

SonarQube was first designed to provide developers with a tool to scan their code for bugs, code smells, or security vulnerabilities. However, the goal of SonarQube has changed over the years. SonarQube attempts to provide developers with early security feedback for the code they’ve written, thereby powering the agile movement in software development. Besides that, the idea is that developers write more secure code in order to reduce the cost of doing intensive bug fixing at the end of a project.

This article will teach you about the SonarQube JavaScript features available to you. You’ll find out how to install SonarQube and run the SonarQube scanner on a JavaScript project. Then we’ll explore the analysis results.

Let’s get started by exploring SonarQube JavaScript features

SonarQube JavaScript Features

SonarQube performs static code analysis for almost any type of project. It provides you as a developer with a detailed report about bugs, code smells, security vulnerabilities, and code duplications.

Besides these core functionalities, SonarQube offers many other interesting features.

Feature 1: Multi-Language Support

By default, SonarQube supports 27 programming languages. These include Java, JavaScript, C#, Python, Golang, HTML5, CSS3, PL/SQL, and many more. Besides scanning code and finding bugs in your code, it also helps you to understand those issues by providing meaningful descriptions. The idea is that you can take immediate action to solve the bug based on the description.

Feature 2: Detection of Tricky Issues

SonarQube helps you spot complex issues that are hard to notice by just looking at your code. For example, SonarQube can help you find incorrect code or code that causes unintended effects. It does this by navigating code paths and combining information from multiple code locations. SonarQube uses path-sensitive dataflow engines in combination with static code analyzers to detect such bugs.

Besides bugs, it helps you to find code smells. The official SonarQube documentation defines a code smell as: “Smelly” code does (probably) what it should, but it will be difficult to maintain. In the worst cases, it will be so confusing that maintainers can inadvertently introduce bugs. Examples include duplicated code, uncovered code by unit tests, and too complex code.”

Also, SonarQube looks for security vulnerabilities. Examples include hard-coded passwords, badly managed errors, or even SQL injection opportunities.

Feature 3: Continuous Integration Abilities

Instead of manually executing SonarQube as part of your development routine, it makes much more sense to automate code analysis. Therefore, SonarQube offers integrations into your continuous integration workflows like Jenkins, Azure DevOps, Bamboo, TeamCity, and AppVeyor.

If you aren’t using any of these continuous integration tools, you can still integrate SonarQube into your workflow using the SonarQube WebAPI and its webhooks.

You can learn more about test automation best practices at Testim.io.

Feature 4: Quality Gate

Finally, every project will receive an overall quality label based on elements such as the number of bugs, code smells, test coverage, and code duplication. You can use the quality gate label to determine if the quality of your code is high enough to be released. Indirectly, SonarQube helps you protect your reputation by releasing safe code only. You can read more about quality gates here.

Install SonarQube With Docker

Let’s install SonarQube. To keep things simple, we’ll opt for a straightforward install using a SonarQube Docker image.

You can pull the Docker image from Docker Hub, where you can find all instructions as well. We’ll be using the open source Community Edition of SonarQube. Let’s get started!

Step 1: Pull Image

First of all, pull the Docker image to your local machine with:

docker pull sonarqube:latest

Step 2: Start SonarQube Server

Next, create an instance of the SonarQube image you just pulled. The following command will start the SonarQube server.

docker run -d --name sonarqube -p 9000:9000 sonarqube

The command creates the server and exposes the SonarQube GUI on port 9000 on your host machine.

Step 3: Access SonarQube GUI

To access the SonarQube graphical user interface, navigate to localhost:9000 in your web browser.

sonarqube exampe

You’ll find a login button to authorize yourself. By default, you can log in as admin with password admin.

sonarqube example 2

After you log in, you’ll see the full GUI and be able to create a new project.

Create a SonarQube JavaScript Project

In this section, we want to configure a SonarQube JavaScript project. To get started with a new project, hit the Create new project button.

sonarqube example 3

Next, you need to input your project name. It’s OK to use the same name for the display name field. Once you’re finished, hit the Set Up button.

sonarqube example 4

In the next step, you have to generate a unique token that will be used later on for uploading the analysis results to the SonarQube GUI. You can input any string for generating a token.

example 5

The token will display in your browser, but you don’t have to do anything with it yet.

Next, you need to set up the multi-language scanner for analyzing your JavaScript project.

sonarqube example 6

Set Up the Multi-Language Scanner

It’s time to set up the multi-language scanner.  As you can see in the image below, you have to select the type of project you want to analyze. Select the “Other” option as you want to scan JavaScript code. After that, select the operating system you’re using. In my case, this is MacOS.

You’ll see a download button that directs you to a download page where you can download the SonarQube Scanner.

sonarqube javascript example 7

To be able to use the sonar-scanner command, you have to add the path to the executable to the PATH environment variable. You’ll find the bin folder after unzipping the scanner. This full path needs to be added.

Here’s an example for MacOS:

export PATH=$PATH:/Users/michiel/projects/sonar-scanner-4.2.0.1873-macosx/bin

You’ve finished the setup! Let’s continue by running the scanner.

Running the Sonar-Scanner

Notice the command at the bottom of the image in the black box. This command needs to be executed inside your project folder. The command holds the generated token (Dsonar.login field) to access the SonarQube GUI to upload the results.

sonarqube javascript example 8

I’ve prepared a sample project that holds two bugs in the code. You can clone the code locally through this link or use your own project.

Next, navigate inside your project, and run the command inside your terminal.

sonarqube javascript example 9

Once the command has finished, head over to your SonarQube GUI at localhost:9000.

Analyzing Scanner Results

The scanner results page shows the overall quality label. It’s set to “failed” because the code contains two bugs. This means the code isn’t ready for release.

Let’s explore some elements of the report.

Bugs

When you enter your project, notice that the scanner found two bugs. It didn’t find any security vulnerabilities.

example 10

It’s possible to expand the bugs and examine the affected lines.

example 12

If you examine the first bug, you’ll see that you’ve created a function that accepts only three arguments. However, you call the function with four arguments, which is incorrect. Here, SonarQube comes in handy to find such bugs.

Let’s discuss some of the metrics SonarQube displays.

Metrics

SonarQube measures code quality based on different metrics. The most important metric is the code coverage metric. In this case, no tests have been written, which means you have no code coverage.

The cool thing about SonarQube is that it indicates the number of lines that aren’t covered by tests. If you take a look at the index.js file (below image displays code for index.js) of your sample project, you’ll find that seven lines of code need test coverage.

 

SonarQube measures many other metrics as well. Feel free to explore further! You may want to check out metrics such as reliability or maintainability, which help you determine the quality of your project. You can also find more information about software quality challenges in the following blog.

Concluding Words on SonarQube

SonarQube is a great tool for statically analyzing your code in order to detect bugs, code smells, or security vulnerabilities. The tool is easy to set up for a JavaScript project and can integrate with continuous integration/continuous delivery tools.

For me, the Quality Gate provides a lot of value, as it tells the project owner if the code should be released or not.

You can learn much more about SonarQube:

This post was written by Michiel Mulders. Michiel is a passionate blockchain developer who loves writing technical content. Besides that, he loves learning about marketing, UX psychology, and entrepreneurship. When he’s not writing, he’s probably enjoying a Belgian beer!

Testim's latest articles, right in your inbox.

From our latest feature releases, to the way it impacts the businesses of our clients, follow the evolution of our product

Blog Subscribe