Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save saidbouhmouch/920402d0ce92ce0ef6223f9b677732b1 to your computer and use it in GitHub Desktop.
Save saidbouhmouch/920402d0ce92ce0ef6223f9b677732b1 to your computer and use it in GitHub Desktop.
sonarqube setup with angular

SONAR Configuration - Angular

1) Install sonarqube-scanner -

npm install sonarqube-scanner --save-dev

2) Need to install few npm packages as a devDependencies

"devDependencies": {
"karma-sonarqube-unit-reporter": "0.0.21", 
"karma-phantomjs-launcher": "^1.0.4"
}

3) npm install

4) Need to configure karma.conf.js

  • What's need to be add look at the comments.
module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
      // ! start sonar reports configuration
      require('karma-phantomjs-launcher'),
      require('karma-sonarqube-unit-reporter'),
      // ! end sonar reports configuration
    ],
    client: {
      clearContext: false, // leave Jasmine Spec Runner output visible in browser
    },
    // ! start sonar reports configuration
    sonarQubeUnitReporter: {
      sonarQubeVersion: 'LATEST',
      outputFile: 'reports/ut_report.xml',
      useBrowserName: false,
    },
    // ! end sonar reports configuration
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/{project-name}'),
      reports: ['html', 'lcovonly', 'text-summary'], // ! sonarqube can only read lcov files.
      fixWebpackSourcePaths: true,
    },
    port: 9876,
    reporters: ['progress', 'kjhtml', 'sonarqubeUnit'], // ! Add sonarqubeUnit in array
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    // browsers: ["Chrome"],
    // ! start sonar reports configuration
    browsers: ['PhantomJS', 'ChromeHeadless', 'Chrome'],
    customLaunchers: {
      ChromeHeadlessCI: { base: 'ChromeHeadless', flags: ['--no-sandbox'] },
    },
    // ! end sonar reports configuration
    singleRun: false,
    restartOnFileChange: true,
  });
};

5) Create a sonar-project.js file in the root of your project with the following code

const sonarqubeScanner = require('sonarqube-scanner');
sonarqubeScanner(
  {
    serverUrl: 'server-url',
    options: {
      'sonar.sources': '.',
      'sonar.inclusions': 'src/**', // Entry point of your code
      'sonar.exclusions': 'src/assets/**', // Entry point of your code which you want to exclude
      // "sonar.exclusions": "src/assets/**,**/*.spec.ts,encryption.service.ts", // Entry point of your code which you want to exclude
      'sonar.language': 'ts',
      'sonar.testExecutionReportPaths': 'reports/ut_report.xml', // Entry point of test report xml file 'sonar.'sonar.
      'typescript.lcov.reportPaths': 'coverage/{project-name}/lcov.info', // Entry point of coverage report lcov file also added project 'coverage/project-name/lcov.info
    },
  },
  () => {}
  // () => process.exit()
);

6) To support phantomJS which needs ES5 to be add in tsconfig.spec.json

src/tsconfig.spec.json

  • What's need to be add look at the comments.
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "baseUrl": "./", // ! Add this line also
    "target": "es5", // ! (Added for sonar reports) Not required if target is already es5 in tsconfig.json
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

7) For run the project you have add property in inside script object in package.json file

Below properties needs to be add inside script object in package.json file

"sonar": "node sonar-project.js",
"coverage": "ng test --codeCoverage=true --browsers=Chrome --watch=false && node sonar-project.js"

like below

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "sonar": "node sonar-project.js",
    "coverage": "ng test --codeCoverage=true --browsers=Chrome --watch=false && node sonar-project.js"
  },

8) To generage test report and coverage you need run below cmd

npm run coverage

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment