Install SonarQube

Instructions

Install SonarQube. This is a reporting tool.

$ brew install sonar

But it also requires Sonar-scanner in order to scan the code.

$ brew install sonar-scanner

Install Jest Sonar reporter

Jest sonar reporter is a plug-in that wi
jest-sonar-reporter is a custom results processor for Jest. The processor converts Jest’s output into Sonar’s generic test data format.

In other words we need this in order for SonarQube to to be able to process the result of Jest tests.

...
  "jest": {
    "setupFiles": [
      "./src/setupTests.js"
    ],
    "collectCoverageFrom": [
      "**/*.{js,jsx}",
      "!coverage/**",
      "!node_modules/**",
      "!src/index.js",
      "!src/setupTests.js",
      "!public/**",
      "!server-build/**"
    ],
    "moduleNameMapper": {
      "\\.(css|less|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
    },
    "coverageDirectory": "reports/coverage",
    "coverageReporters": [
      "json",
      "lcov",
      "text"
    ],
    "testResultsProcessor": "jest-sonar-reporter"
  },
  "jestSonar": {
    "reportPath": "reports",
    "reportFile": "test-reporter.xml"
  },
...

Add Sonar-project.properties file

This file is used to configure sonnar-scanenr.

./sonar-project.properties

sonar.projectKey="SparkJS-key"
sonar.projectName="SparkJS"
sonar.sourceEncoding=UTF-8
sonar.sources="./src"
sonar.tests="./src"
sonar.exclusions=**/*.test.js
sonar.test.inclusions=**/*.test.js
sonar.javascript.lcov.reportPaths=reports/coverage/lcov.info
sonar.testExecutionReportPaths=reports/test-reporter.xml

what we just did:
– projectKey – is the unique identifier of the project.
– projectName – is the name of the project.
– sources – describes which folders to scan
– tests – where the scanner will look for test files.
– exclusions – which files should be excluded from coverage.

Create SonarQube project

Run sonar-scanner inside the root of the project:

$ sonar-scanner

Navigate to SonarQube web UI at the projects section, and you will see the new project created.

Integrating SonarQube quality tests with Jenkins

Before you continue make sure that you have Jenkins installed locally and is configured to run tests and deploy your project. Detailed instructions are found here:

Adding continuous integration with Jenkins pipeline and Github webhooks

After you have Jenkins set up and configured, we could proceed to adding another two `stages` into the pipeline:

Adding SonarQube plug-in for Jenkins

Open Jenkins Web UI ->Manage Jenkins->Manage Plugins and add ‘SonarQube Scanner for Jenkins‘

Configuring Jenkins pipeline to runs Sonar-scanner and do Quality gate.

pipeline {
  agent any
    
  tools {nodejs "SparkJS"}
    
  stages {
        
    stage('Cloning Git Repo') {
      steps {
        git 'https://github.com/ToniNichev/projects-sparkjs.git'
      }
    }
    stage('Install dependencies') {
      steps {
        echo '#################################'              
        echo 'Building...'       
        echo '#################################'                      
        sh '/usr/local/bin/yarn install'
      }
    }   
     
    stage('Running Tests') {
      steps {
        echo '#################################'              
        echo 'Running tests ...'          
        echo '#################################'               
         sh '/usr/local/bin/yarn test'
      }
    }    

    stage('Running ESLint') {
      steps {
        echo '#################################'              
        echo 'Running ESLint ...'          
        echo '#################################'               
         sh '/usr/local/bin/yarn lint'
      }
    }       

    stage('Running SonarQube Scanner') {
       steps {
        script {
          // requires SonarQube Scanner 2.8+
          scannerHome = tool 'SonarScanner'
        }
        withSonarQubeEnv('Tonis SonarQube') { // If you have configured more than one global server connection, you can specify its name
          sh "${scannerHome}/bin/sonar-scanner"
        }
       }
    }
   
    // No need to occupy a node
    stage("Quality Gate"){
     steps {
         script {
            timeout(time: 2, unit: 'MINUTES') { // Just in case something goes wrong, pipeline will be killed after a timeout
              def qg = waitForQualityGate() // Reuse taskId previously collected by withSonarQubeEnv
              if (qg.status != 'OK') {
                error "Pipeline aborted due to quality gate failure: ${qg.status}"
              }
            }
         }
      }
    }

    stage('Deploy and run server') {
      steps { 
        echo 'Starting server ...'
        sh '/usr/local/bin/yarn clean; /usr/local/bin/yarn build-prod; /usr/local/bin/yarn build-prod-ssr;'
        sh '/usr/local/bin/pm2 start ./server-build/server-bundle.js -f'
      }
    }      
  }
}

Now make some code changes like for example ./env.production change the app name title i.e.

APP_NAME=Webpack React Tutorial Production 2

Push your changes and navigate back to Jenkins WEB UI. Now two new steps will be added to the pipeline:”Running SonarQube Scanner”and”Quality Gate”