JavaScript

Istanbul JavaScript Code Coverage

Nos últimos artigos mostrei como criar e rodar alguns testes com Jasmine e Karma.

Hoje vamos ver o Istanbul que é uma ferramenta Code Coverage que nos permite gerenciar quanto do nosso código esta sendo coberto pelo testes.

Atualmente rodamos os testes e verificamos se o resultado é o esperado, mas não verificamos se os testes passaram por todo código (Ex: Será que o teste cobriu esse IF?).

Para esse artigo vamos rodar o Istanbul junto com o Karma. Se você acompanhou os posts anteriores já deve ter o Karma instalado, senão recomendo a leitura do artigo Karma Test Runner

Instalação

Vamos fazer a instalação do módulo karma-coverage e salvar a referênciadevDependency no package.json

1
npm install karma-coverage --save-dev

Configuração

Precisamos adicionar ao arquivo karma.conf.js um novo relatório e informar quais os arquivos devem ser verificados pelo Istanbul.

language:javascript karma.conf.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = function(config) {
  config.set({
    //...

    //Arquivos testados pelo Karma
    files: [
      'bower_components/angular/angular.min.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'app/**/*.js',
      'test/spec/**/*spec.js'
    ],

    //Adiciona o relatório do coverage
    reporters: ['progress', 'coverage'],

    //Arquivos que devem ser verificados pelo coverage.
    preprocessors: {
      'app/**/*.js': ['coverage']
    },

    //...
  });
};

Devemos informar no preprocessors somente os arquivos do projeto, removendo arquivos de biblioteca (angularjs, jquery, etc).

Para o exemplo vamos testar a calculadora somente com a função Dividir

language:javascript calculadora.js
1
2
3
4
5
function Calculadora () {};

Calculadora.prototype.Dividir = function(a, b) {
  return a / b;
};

language:javascript calculadora-spec.js
1
2
3
4
5
6
7
8
9
10
describe('Calculadora', function() {

  beforeEach(function() {
    this.calc = new Calculadora();
  });

  it('Dividir 10 por 5 deve ser igual a 2', function() {
    expect(this.calc.Dividir(10,5)).toEqual(2);
  });
});

Rodando os testes

Ao executar o karma start podemos ver que os testes foram executados normalmente e que foi criado no projeto uma nova pasta chamada coverage e uma sub pasta de acordo com o browser usado no Karma. Usamos o PhantoJS então foi criada a pasta PhantomJS 1.9.8 (Linux).

Ao abrir o arquivo index.html no navegador, você pode ir navegando entre os arquivos do projeto e acompanhar as informações.


Nas imagens acima podemos ver que o teste passou por todos Statements, Branches, Functions e Lines.

Atenção: não é porque o código esta com 100% de cobertura que todas as funcionalidades foram testadas, 100% quer dizer que o teste passou por todas as partes do código (passou por todos os IF, ELSE, etc).

Vamos fazer uma alteração no código da calculadora verificando se é divisão por zero.

language:javascript calculadora.js
1
2
3
4
5
Calculadora.prototype.Dividir = function(a, b) {
  if(b === 0)
    return;
  return a / b;
};


Podemos ver que os valores caíram e que nenhum teste verificou o IF.

Agora que sabemos aonde os testes não estão cobrindo, podemos melhorar nossos testes e testar todas as funcionalidades do sistema.

Veja a documentação completa para mais detalhes: http://istanbul-js.org

Até os próximos artigos!