SonarQube

Reducing SharePoint Framework Code Smells: 5 – Connecting Azure DevOps to SonarQube

Marky Roden AzureDevOps, SonarQube, SPFx , ,

This is a series on how to set up SonarQube as a Quality Gate in your SharePoint Framework development process. The end goal is to add SonarQube to your build and release process through DevOps. These articles will explain:

  1. How to set up a sample SonarQube server in Azure
  2. Setting up a unit test sample locally
  3. How to set up sonar-scanner and connect it to SonarQube
  4. Configuring Sonar Scanner to test only our code

Introduction

In the previous article we saw how to set up a sonar scanner to only scan the code we actually wanted to be tested. In this final article in  the series we will look at adding Sonarqube to Azure DevOps and then how to hook it into our Build process.

Adding SonarQube to Azure DevOps

The documentation for SonarQube and Azure DevOps can be found here

https://docs.sonarqube.org/latest/analysis/scan/sonarscanner-for-azure-devops/

Adding SonarQube to Azure DevOps can be done through the marketplace.

Once added by an administrator you can then add a “Service Connection” for Sonar Qube through the administrative section

Once added then Sonar Scanner and Sonarqube call can be added to your build process.

Adding Sonar Scanner to your build process

When adding a new step to the build process, searching for sonar brings up all the new capabilities and options.

We need to add Prep, run and publish to the build process.

When adding the prep analysis stage we are basically running sonar scanner. In the advanced box you would add all the configurations we talked about in the previous article (from the CLI)

  • sonar-scanner.bat
    -D”sonar.projectKey=IceCreamShop”
    -D”sonar.host.url=http://xominosonarqube.azurewebsites.net”
    -D”sonar.login=dba68d82c931efe82e8692c9a25bc7c31736b286″
    -D”sonar.sources=src/webparts/iceCreamShop”
    -D”sonar.tests=src/webparts/iceCreamShop”
    -D”sonar.typescript.lcov.reportPaths=jest/lcov.info”
    -D”sonar.exclusions=src/webparts/iceCreamShop/test”
    -D”sonar.test.inclusions=**test.ts,**test.tsx”

although in this case we are not passing them into the CLI the -D is unnecessary.

The run code analysis step actually runs the sonar-scanner, and the publish quality gate review step allows the response from SonarQube to be understood and processed as part o fhte build process.

For more information on the plugin you can find it here

https://docs.sonarqube.org/latest/analysis/scan/sonarscanner-for-azure-devops/

  • Prepare Analysis Configuration task, to configure all the required settings before executing the build.
    • This task is mandatory.
    • In case of .NET solutions or Java projects, it helps to integrate seamlessly with MSBuild, Maven and Gradle tasks.
  • Run Code Analysis task, to actually execute the analysis of the source code.
    • This task is not required for Maven or Gradle projects, because scanner will be run as part of the Maven/Gradle build.
  • Publish Quality Gate Result task, to display the Quality Gate status in the build summary and give you a sense of whether the application is ready for production “quality-wise”.
    • This tasks is optional.
    • It can significantly increase the overall build time because it will poll SonarQube until the analysis is complete. Omitting this task will not affect the analysis results on SonarQube – it simply means the Azure DevOps Build Summary page will not show the status of the analysis or a link to the project dashboard on SonarQube.

Conclusion

As we have seen in these series of articles, adding sonarqube to your build process can help inrease the quality of your code by providing insights through analysis which woudl not otherwise haev been apparent.

It’s free to use, so why not have a play. 🙂

 

Reducing SharePoint Framework Code Smells: 4 – Configuring Sonar Scanner to test only our code

Marky Roden AzureDevOps, SonarQube, SPFx , ,

This is a series on how to set up SonarQube as a Quality Gate in your SharePoint Framework development process. The end goal is to add SonarQube to your build and release process through DevOps. These articles will explain:

  1. How to set up a sample SonarQube server in Azure
  2. Setting up a unit test sample locally
  3. How to set up sonar-scanner and connect it to SonarQube
  4. Configuring Sonar Scanner to test only our code

Introduction

In the previous article we saw how to set up a sonar scanner locally and run a scan of our out of the box sample project. The code was a little smelly and there were some bugs found. In this article we are going to look at where those bugs come from and why they are not relevent to our solution. By the end we will have a working Sonar Scanner correctly scanning our code and running tests.

Looking at the bugs and smells

Part of the reason why I left this in here was to see some of the beauty of SonarQube and the information it provides us. How does it know there are bugs? What smells?

Looking at our report closer we can click on the project and then the Bugs and we see the following bugs.

There are a couple of important things to note here:

  1. The bugs are coming from the JEST folder
  2. It checked .css as well as .js

Clicking on the See Rule we can see why it decided this was a bug.

SonarQube runs off pre-built rules (like a linter does) and determines that the quality of the code is a “bug” because it breaks a rule. This is really interesting and drives us to create better code – which is ultimately to goal of using the capability!

looking at the bug shows you where in the code – pretty cool eh?

You can poke around with the code fails as well, that’s not why we are here – but it is fun to look around.

These two files are in the JEST folder which is not “our” code and therefore there is no need to test it. So let’s configure the scanner to look at “our” code.

Configuring sonar scanner via CLI

If you are running sonar-scanner locally you can change the sonar.properties file to add some of the default values. In this case we are going to coninue to pass the parmeters in through the CLI because we are not going to be able to do that when we go to the CI/CD pipeline in Azure DevOps.

We are adding new parameters

  1. updating sonar.sources to point to our code
  2. adding sonar.typescript.lcov.reportPaths so that SonarQube can use the coerage reports created by Jest
  3. adding sonar.tests so that we are specific as to where our test are located
  4. adding sonar.exclusions so that we are not assessed for coverage on our tests, which would be silly
  5. adding sonar.test.inclusions to identify which files are our “tests”
  • sonar-scanner.bat
    -D”sonar.projectKey=IceCreamShop”
    -D”sonar.host.url=http://xominosonarqube.azurewebsites.net”
    -D”sonar.login=dba68d82c931efe82e8692c9a25bc7c31736b286″
    -D”sonar.sources=src/webparts/iceCreamShop”
    -D”sonar.tests=src/webparts/iceCreamShop”
    -D”sonar.typescript.lcov.reportPaths=jest/lcov.info”
    -D”sonar.exclusions=src/webparts/iceCreamShop/test”
    -D”sonar.test.inclusions=**test.ts,**test.tsx”

Running the sonar-scanner.bat command again we get some slightly different results this time……

MUCH better 🙂

Loking at the code coverage section we can see that there are some additional files which have been added that are not really what I wanted to test.

What isn’t covered?

Looking into the files which failed is really helpful because you can visually see where the lines with no coverage are !!

Conclusion

In this article we have see how to configure sonar scanner to scan our files and not the dependancies. In the next article we will see how to connect to SonarQube from Azure DevOps

 

 

Reducing SharePoint Framework Code Smells: 3 – Setting up Sonar Scanner and connecting to SonarQube

Marky Roden SharePoint Framework, SonarQube, SPFx, SPFx PnP , , , , ,

This is a series on how to set up SonarQube as a Quality Gate in your SharePoint Framework development process. The end goal is to add SonarQube to your build and release process through DevOps. These articles will explain:

  1. How to set up a sample SonarQube server in Azure
  2. Setting up a unit test sample locally
  3. Setting up Sonar Scanner and connecting to SonarQube
  4. How to run a sonar-scanner review manually
  5. How to integrate the code review into your Azure DevOps build and release process.

Introduction

In the previous article we saw how to clone and load up the PnP react-jest-testing sample and run an initial test. I am not going to go into the advantages of unit testing your code – but if you want more information on how and why check out these excellent MVPs and their blog posts on the subject.

In this article we are going to set up Sonar Scanner to analyze the code locally and then connect it to our SonarQube server.

Setting up Sonar Scanner

Sonar Scanner can be downloaded and installed from here. You have to extract it and add the bin directory path to your environmental variable (way easier in Windows 10) to get it to work.

Once that is up and running there are a number of steps which we have to go through to turn our npm test into something which will create reportable files for SonarQube. The process of testing is the same, the only difference is the output and how it is handled.

Setting up a SonarQube Project Key

Within our SonaarQube server create a new project – in this case I called it IceCreamShop for the sake of simplicity

From that I get a the ability to generate a project key

and from there we can continue and get instructions on how to run the sonar scanner for this project.

The information at the bottom is the important part for us:

  • sonar-scanner.bat -D”sonar.projectKey=IceCreamShop” -D”sonar.sources=.” -D”sonar.host.url=http://xominosonarqube.azurewebsites.net” -D”sonar.login=dba68d82c931efe82e8692c9a25bc7c31736b286″

Put another way this is running the CLI for sonar-scanner and passing variables which are not directly configured in the sonar scanner properties config file (which we will come to later)

  • sonar-scanner.bat
    -D”sonar.projectKey=IceCreamShop” #projectKey
    -D”sonar.sources=.” #run the scan from the root directory
    -D”sonar.host.url=http://xominosonarqube.azurewebsites.net” #SonarQube server for the results to be posted to
    -D”sonar.login=dba68d82c931efe82e8692c9a25bc7c31736b286″ #the project key to associate the scan with

So let’s go ahead and run that in our project and see what happens…….

— NOTE —

On a windows machine you must run visual studio code as adminstrator – otherwise it may not be able to create and delete folders as part of the test running process.

If you see an error around – INFO: Sensor SonarCSS Rules [cssfamily] – you must have the sonarJS plugin 5.2.1 installed.

The result is not pretty – for many reasons but let’s look at what we have for now, for this article. As you can see from the output below there are a number of errors and issues reported.

If we look at our SonarQube server though we can see an analyzed project.

 

Looks like we have some smelly code, some bugs and some code debt – this is a really nice feature of SonarQube and why it is helpful in Code Quality reviews. We dont have any code coverage though which is odd……..

As we will come to see in the next article. The code is not all that smelly, it is actually our configuration. 🙂

 

 

 

 

Reducing SharePoint Framework Code Smells: 2 – Setting up a sample for unit testing

Marky Roden React, SPFx, SPFx PnP , , , ,

This is a series on how to set up SonarQube as a Quality Gate in your SharePoint Framework development process. The end goal is to add SonarQube to your build and release process through DevOps. These articles will explain:

  1. How to set up a sample SonarQube server in Azure
  2. Setting up a unit test sample locally
  3. How to run a sonar-scanner review manually
  4. How to integrate the code review into your Azure DevOps build and release process.

It is apparently going to take more blog posts than I expected. But I like to spread these things out – easier to maintain and easier to find what people are looking for.

Introduction

In the previous article we saw how to create a sample SonarQube server in Azure. In this article we will look at how to manually run a SonarQube scan linked to the server we created. The results might be smelly.

In this example we are going to use the SharePoint PnP example for creating unit test with React in SFPx

Setting up the repository locally

Create a new folder for the repo locally and then clone the repository through the terminal with “git clone https://github.com/SharePoint/sp-dev-fx-webparts”. We have to take the whole repo but are not going to use the whole of it – just the react unit testing section.

Then once that is complete navigate the ./samples/react-jest-testing folder

run an npm install and we are ready to go.

Initial npm test

Immediately after the install you can run and npm test and see how the sample code hang up under testing. You will get one intentional fail and some code which is not convered by tests. This is to be expected.

The reason we add unit tests to a project is ultimately to improve the quality of the code. This leads to reduction in maintenance costs, lifts the confidence of the development team and allows for continuous integration builds to identify where breaking code has been introduced into a build process within a team.

This project is a great place to start to learn how to unit test within React and the SharePoint Framework.

What we want to be able to do ultimately is collect all of this information on the SonarQube server. We will get to that 🙂

In the next article we will look at sonar scanner and how we hook that up to the SonarQube server.

 

 

 

 

 

 

 

Reducing SharePoint Framework Code Smells: 1 – Setting up SonarQube in Azure

Marky Roden Azure, DevOps, SharePoint Framework, SonarQube , , ,

This is a three part series on how to set up SonarQube as a Quality Gate in your SharePoint Framework development process. The end goal is to add SonarQube to your build and release process through DevOps. These three articles will explain:

  1. How to set up a sample SonarQube server in Azure
  2. How to run a code review manually
  3. How to integrate the code review into your Azure DevOps build and release process.

As part of a quality development process not only should developers be linting their code, running unit test and so forth, another step in the process which can be added is a “Code Quality” check using the open source project SonarQube.

In this article we will see how to create a stand alone sample SonarQube server in Azure (and locally if you really want as well).

Introduction

“SonarQube provides the capability to not only show health of an application but also to highlight issues newly introduced. With a Quality Gate in place, you can fix the leak and therefore improve code quality systematically.” 

In practice what it means is an additional tool which developers can use to write better, more maintainable code. This increases quality and reduces overall maintenace costs when implemented as part of a continuous build and deploy process.

There are plugins for JavaScript and TypeScript and thus makes this very applicable to SharePoint Framework development.

Setting up the server

The first step is to create a SonarQube server upon which your code can be reviewed. Some VERY nice person by the name of vanderby has created an ARM template to “Deploy Sonar Cube to Azure“. It is limited by using an embedded database, but it will at least show you the basics before you are ready to scale this properly.

As the github page states – it does take a while to get started but once it is up you can start to use it.

To log into the server I used admin/admin. As this is a sample setup it doesn’t really matter.

Creating a project

Once you are set up and running you can create a project and a key which can then be used to access the server from a command line interface (CLI).

Under the administration server create a new project and once that is complete generate a key for your project

Using these credentals we can test out code from the command line.

Conclusion

Setting up a sample SonarQube server in Azure is pretty simple. As it states though this will not scale and if you are going to use this in an enterprise it will need some better set up. But for the sake of demonstration, it’s just fine.

In the next article we will look at how to apply this to an Azure DevOps build and deploy process for SPFx.

 

Note

You can just as easily set up your own local SonarQube server by following the 2 minute set up installation instructions

Get Started in 2 minutes