Month: July 2019

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