<a href="https://dtidigital.com.br/blog/por-que-automatizar-testes/">Automatizar processos de integração</a> (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.
<div id="toc_container" class="toc_white no_bullets">Sum&aacute;rio<ul class="toc_list"><li><a href="#Para-resolver-este-problema-precisamos-de-dois-passos">1 Para resolver este problema precisamos de dois passos:</a></li><li><a href="#Ao-final-do-processo-o-arquivo-karmaconfjs-deve-ficar-mais-ou-menos-da-seguinte-forma">2 Ao final do processo, o arquivo karma.conf.js deve ficar mais ou menos da seguinte forma:</a></li><li><a href="#Os-proximos-passos-estao-relacionados-as-configuracoes-do-VSTS-e-devem-ser-feitos-na-configuracao-da-pipeline-que-deseja-automatizar-o-processo-de-testes">3 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></li><li><a href="#O-passo-de-preparacao-da-analise-do-SonarQube-requer-configuracoes-a-mais">4 O passo de preparação da análise do SonarQube requer configurações a mais:</a></li><li><a href="#Precisamos-fazer-algumas-configuracoes-a-mais-neste-passo">5 Precisamos fazer algumas configurações a mais neste passo</a></li><li><a href="#Para-isso-precisamos-adicionar-dois-passos-a-mais-na-nossa-pipeline">6 Para isso, precisamos adicionar dois passos a mais na nossa pipeline:</a></li></ul></div>
<h2>Para resolver este problema precisamos de dois passos:</h2>
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 &#8211;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 &#8211;save-dev karma-junit-reporter) e alteramos o arquivo de configurações do Karma.
<h2>Ao final do processo, o arquivo karma.conf.js deve ficar mais ou menos da seguinte forma:</h2>
const process = require(&#8216;process&#8217;);
process.env.CHROME_BIN = require(&#8216;puppeteer&#8217;).executablePath();
&nbsp;
module.exports = function (config) {
   config.set({
       basePath: &#8221;,
       frameworks: [&#8216;jasmine&#8217;, &#8216;@angular/cli&#8217;],
       plugins: [
           require(&#8216;karma-jasmine&#8217;),
           require(&#8216;karma-chrome-launcher&#8217;),
           require(&#8216;karma-jasmine-html-reporter&#8217;),
           require(&#8216;karma-coverage-istanbul-reporter&#8217;),
           require(&#8216;@angular/cli/plugins/karma&#8217;),
           require(&#8216;karma-junit-reporter&#8217;)
       ],
       client:{
           clearContext: false
       },
       coverageIstanbulReporter: {
           reports: [ &#8216;html&#8217;, &#8216;lcov&#8217;, &#8216;cobertura&#8217; ],
           fixWebpackSourcePaths: true
       },
       angularCli: {
           environment: &#8216;dev&#8217;
       },
       reporters: [&#8216;progress&#8217;, &#8216;kjhtml&#8217;],
       port: 9876,
       colors: true,
       logLevel: config.LOG_INFO,
       autoWatch: true,
       browsers: [&#8216;ChromeHeadless&#8217;],
       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:
&#8220;scripts&#8221;: {
   &#8230;
   &#8220;test&#8221;: &#8220;ng test &#8211;code-coverage &#8211;single-run &#8211;browsers=ChromeHeadless &#8211;reporters=progress,junit -sm=false&#8221;,
  &#8230;
 }
<h2>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</h2>
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:
<img fetchpriority="high" decoding="async" class="aligncenter wp-image-3817 size-full" title="testes unitários" src="https://dtidigital.com.br/wp-content/uploads/2018/11/im1.png" alt="" width="544" height="236" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/im1.png 544w, https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/im1-300x130.png 300w" sizes="(max-width: 544px) 100vw, 544px" />
Feito isso, devemos adicionar os passos de build, de teste e de análise e publicação do SonarQube na nossa pipeline:
<img decoding="async" class="aligncenter wp-image-3818 size-full" title="testes unitários" src="https://dtidigital.com.br/wp-content/uploads/2018/11/img-2.png" alt="" width="405" height="361" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/img-2.png 405w, https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/img-2-300x267.png 300w" sizes="(max-width: 405px) 100vw, 405px" />
<h2>O passo de preparação da análise do SonarQube requer configurações a mais:</h2>
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:
<img decoding="async" class="aligncenter wp-image-3819 size-full" title="testes unitários" src="https://dtidigital.com.br/wp-content/uploads/2018/11/im3.png" alt="" width="574" height="426" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/im3.png 574w, https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/im3-300x223.png 300w" sizes="(max-width: 574px) 100vw, 574px" />
<h2>Precisamos fazer algumas configurações a mais neste passo</h2>
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.
<h2>Para isso, precisamos adicionar dois passos a mais na nossa pipeline:</h2>
<img loading="lazy" decoding="async" class="aligncenter wp-image-3820 size-full" title="testes unitários" src="https://dtidigital.com.br/wp-content/uploads/2018/11/im4.png" alt="" width="448" height="109" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/im4.png 448w, https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/im4-300x73.png 300w" sizes="(max-width: 448px) 100vw, 448px" />
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:
<img loading="lazy" decoding="async" class="aligncenter wp-image-3821 size-full" title="testes unitários" src="https://dtidigital.com.br/wp-content/uploads/2018/11/im5.png" alt="" width="571" height="369" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/im5.png 571w, https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/im5-300x194.png 300w" sizes="(max-width: 571px) 100vw, 571px" />
O segundo passo é a publicação dos resultados dos testes obtidos do relatório do JUnit. Deve ser feita como mostrado abaixo:
<img loading="lazy" decoding="async" class="aligncenter wp-image-3822 size-full" title="testes unitários" src="https://dtidigital.com.br/wp-content/uploads/2018/11/im6.png" alt="" width="576" height="387" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/im6.png 576w, https://www.cms.dtidigital.com.br/wp-content/uploads/2018/11/im6-300x202.png 300w" sizes="(max-width: 576px) 100vw, 576px" />
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

Chegou o momento de impulsionar os resultados da sua empresa! Para entrar em contato com a gente, clique no botão abaixo e preencha o formulário.

Testes unitários em Angular no VSTS + SonarQube

One-stop shop em tecnologia

Confira outros artigos