Os testes, se tratando de programação, são uma espécie de atestado de que tal lógica atende a tais requisitos de projeto, portanto, é muito imprescindível compor e levar seus métodos e classes para testes unitários.

O comando ng test --code-coverage é uma funcionalidade fundamental para projetos Angular, permitindo que você execute testes automatizados e visualize relatórios detalhados sobre a cobertura de código.

O que é ng test --code-coverage?

O ng test é o comando padrão para executar testes unitários em projetos Angular configurados com Karma como test runner. Quando você adiciona a flag --code-coverage, o Angular gera um relatório detalhado sobre quais partes do código foram exercitadas pelos testes.

Tipos de Projetos Compatíveis

O comando pode ser executado em qualquer projeto Angular que:

• Possua o ambiente configurado com Karma (test runner padrão do Angular CLI).
• Contenha especificações de testes (arquivos com extensão .spec.ts).
• Utilize TypeScript e tenha uma estrutura padrão Angular (módulos, componentes, serviços).

(Se o projeto Angular estiver configurado para usar test runners alternativos como Jest, o comando pode não funcionar de modo nativo, mas é possível configurar Jest para gerar relatórios de cobertura também)

Após a execução, um diretório coverage/ é gerado no projeto. Dentro desse diretório, você encontra um arquivo index.html, que pode ser aberto em qualquer navegador para visualizar o relatório.

Como Ler os Dados do Relatório?

Imaginemos agora que seu projeto exiba estes números no terminal ao rodar o comando de cobertura de testes:

All files / app/core/utils data-key.util.ts
61.66% Statements 37/60
42.85% Branches 9/21
81.81% Functions 9/11
61.01% Lines 36/59

Só este preview resumido do relatório já apresenta diversos indicadores importantes sobre a cobertura de seu código, mas vamos entender mais sobre o que são:

Statements (Declarações)

Indica a porcentagem de instruções executáveis cobertas pelos testes. Por exemplo:

Statements   : 61.66% (37/60)

Significa que, de 60 declarações possíveis, apenas 37 foram executadas durante os testes.

Branches (Ramificações)

Mede os caminhos condicionais testados, como if, else, switch:

Branches     : 42.85% (9/21)

Nesse caso, de 21 possíveis caminhos, apenas 9 foram exercitados.

Functions (Funções)

Mostra quantas funções ou métodos foram chamados durante os testes:

Functions    : 81.81% (9/11)

De 11 funções, 9 foram testadas.

Lines (Linhas)

Refere-se às linhas de código executadas:

Lines        : 61.01% (36/59)

Apenas 36 das 59 linhas foram cobertas.

Navegando pelo Relatório

O relatório também permite a navegação pelos blocos não cobertos, através do terminal:

• n ou j: Vai para o próximo bloco de código não coberto.
• b, p ou k: Volta ao bloco anterior de código não coberto.

A versão gerada na pasta coverage dentro de seu projeto vai conter o index.html com uma navegabilidade mais visual e muito mais reveladora sobre todas as áreas de seu sistema, vale a pena dar uma passeada por ela.

Insights para Melhorar a Cobertura

1. Statements: Adicione testes para cobrir todas as declarações críticas.
2. Branches: Certifique-se de testar todas as condições lógicas, incluindo cenários de exceção.
3. Functions: Verifique se todas as funções relevantes têm testes associados.
4. Lines: Analise linhas não cobertas e verifique se são realmente necessárias.

Conclusão

O ng test --code-coverage é uma ferramenta valiosa para garantir a qualidade do código em projetos Angular. Compreender e interpretar os relatórios permite identificar áreas que precisam de mais testes, garantindo aplicações mais robustas e confiáveis.

#ngtest #angular #codecoverage #testesunitarios #qualidadedecodigo #frontend #javascript #typescript #desenvolvimentoweb #ferramentasdeteste