Testes unitários em Angular no VSTS + SonarQube

Automatizar processos de integração (via testes unitários) e de entrega com a ferramenta VSTS é um processo simples, mas que tem algumas peculiaridades. Neste artigo tratarei sobre a automatização da geração e exibição de relatórios de qualidade e cobertura de códigos de um sistema baseado em Angular 5 com o SonarQube na pipeline de integração contínua do VSTS.

O primeiro empecilho para o processo é que o Angular 5 utiliza o Karma + Jasmine para a construção e execução de testes. isto em si não é um problema para rodarmos o SonarQube em um ambiente local. Mas, se mostra um problema para as máquinas de build automatizado. Essas tecnologias requerem um navegador instalado para rodar os testes.

Para resolver este problema precisamos de dois passos:

Automatizar a instalação do navegador na máquina de build;
Configurar o navegador instalado para não ser necessário o uso da interface visual.

Neste ponto temos duas opções de navegadores para utilizarmos. O padrão costumava ser o PhantomJS, mas este foi descontinuado no começo deste ano. Então, vamos utilizar o Headless Chrome, uma versão do Chrome que pode ser utilizada sem a interface visual.

Para instalarmos automaticamente o Chrome na nossa máquina de build, vamos usar o pacote npm puppeteer (npm install –save-dev puppeteer) e inserir o mesmo nas configurações do Karma.

O próximo passo é configurar o Karma para gerar relatórios de cobertura de testes que o VSTS consiga ler e publicar no SonarQube. Para isso usaremos o JUnit (npm i –save-dev karma-junit-reporter) e alteramos o arquivo de configurações do Karma.

Ao final do processo, o arquivo karma.conf.js deve ficar mais ou menos da seguinte forma:

const process = require(‘process’);

process.env.CHROME_BIN = require(‘puppeteer’).executablePath();

 

module.exports = function (config) {

  config.set({

      basePath: ”,

      frameworks: [‘jasmine’, ‘@angular/cli’],

      plugins: [

          require(‘karma-jasmine’),

          require(‘karma-chrome-launcher’),

          require(‘karma-jasmine-html-reporter’),

          require(‘karma-coverage-istanbul-reporter’),

          require(‘@angular/cli/plugins/karma’),

          require(‘karma-junit-reporter’)

      ],

      client:{

          clearContext: false

      },

      coverageIstanbulReporter: {

          reports: [ ‘html’, ‘lcov’, ‘cobertura’ ],

          fixWebpackSourcePaths: true

      },

      angularCli: {

          environment: ‘dev’

      },

      reporters: [‘progress’, ‘kjhtml’],

      port: 9876,

      colors: true,

      logLevel: config.LOG_INFO,

      autoWatch: true,

      browsers: [‘ChromeHeadless’],

      singleRun: false

  });

};

Agora temos que alterar o comando npm test para rodar os testes com as configurações corretas do Headless Chrome e do JUnit.

A alteração deve ser feita da seguinte forma no arquivo package.json:

“scripts”: {

  …

  “test”: “ng test –code-coverage –single-run –browsers=ChromeHeadless –reporters=progress,junit -sm=false”,

 …

}

Os próximos passos estão relacionados às configurações do VSTS e devem ser feitos na configuração da pipeline que deseja automatizar o processo de testes

A primeira coisa a ser feita é adicionar os passos de instalação do npm, do typescript e da versão mais recente dos pacotes descritos no packages.json.

Isto pode ser feito com os passos de build abaixo:

Feito isso, devemos adicionar os passos de build, de teste e de análise e publicação do SonarQube na nossa pipeline:

O passo de preparação da análise do SonarQube requer configurações a mais:

Precisamos informar a url e o token do servidor que utilizaremos para publicar a análise, a chave e nome do projeto no servidor do SonarQube. Além disso, o caminho da pasta do controle de código em que se encontra o projeto Angular que queremos analisar:

Precisamos fazer algumas configurações a mais neste passo

Na aba Advanced devemos configurar os caminhos dos nossos relatórios, bem como os arquivos de teste e as exclusões dos nossos testes.

A configuração final deve ficar parecida com a abaixo:

sonar.sourceEncoding=UTF-8
sonar.exclusions=**/node_modules/**,**/*.spec.ts
sonar.tests=src
sonar.test.inclusions=**/*.spec.ts
sonar.ts.tslintconfigpath=tslint.json
sonar.typescript.lcov.reportPaths=$(Build.SourcesDirectory)/src/[CAMINHO DO SEU PROJETO]/lcov.info
sonar.typescript.exclusions=**/node_modules/**,**/typings.d.ts,**/main.ts,**/environments/environment*.ts,**/*routing.module.ts

Com isso já temos configurado o SonarQube para receber as informações de qualidade e cobertura de código. O que falta é só publicar essas informações dentro do próprio VSTS para fácil acesso depois.

Para isso, precisamos adicionar dois passos a mais na nossa pipeline:

O primeiro passo consiste em utilizar os resultados da ferramenta cobertura que configuramos no karma.conf.js para publicação dos resultados de cobertura de código. Devemos configurá-lo da seguinte forma:

O segundo passo é a publicação dos resultados dos testes obtidos do relatório do JUnit. Deve ser feita como mostrado abaixo:

Isso conclui o processo de configuração da pipeline no VSTS. Agora basta enfileirar este processo e conferir se deu tudo certo. Ao final do processo deverá ser possível ver os relatórios gerados no SonarQube e no VSTS.

Referências:
Pacote npm puppeteer: https://www.npmjs.com/package/puppeteer
Pacote npm Karma JUnit Reporter: https://www.npmjs.com/package/junit
Testes unitários no Angular: https://angular.io/guide/testing
Parâmetros de análise do SonarQube: https://docs.sonarqube.org/display/SONAR/Analysis+Parameters
Documentação do Headless Chome: https://developers.google.com/web/updates/2017/04/headless-chrome
Documentação do Karma: https://karma-runner.github.io/2.0/config/configuration-file.html
Catálogo de tasks disponíveis para pipelines no VSTS-TFS: https://docs.microsoft.com/en-us/vsts/pipelines/tasks/?view=vsts