Documentação Teste de Cobertura Front

Projeto entregou teste de cobertura nos projetos ppov-front-vue3 e ppov-api . Documento fala como foi implementado o teste de cobertura dos projetos ppov-front-vue3 e ppov-api .

ppov-front-vue3

Para o front o projeto de implementação de teste de cobertura tem duas entregas, a visualização dos trechos não testados no Merge Request do Gitlab e a crítica de percentual mínimo. Vamos documentar cada um dos pontos

Visualização de código não coberto Gitlab

Para conseguirmos visualizar o trecho do novo código não coberto por testes de unidade (imagem acima), foi preciso utilizar uma lib responsável por gerar report com integração com o gitlab, essa lib é a `“coverage-istanbul”. Repositório: https://github.com/istanbuljs Site: https://istanbul.js.org/ Doc Gitlab: https://docs.gitlab.com/ee/ci/testing/test_coverage_visualization/cobertura.html

Para configurar é bem simples, basta informar no arquivo vitest.config.ts o objeto coveragecomo no exemplo abaixo:

coverage: {
	provider: 'istanbul',
    reporter: ['cobertura', 'text'],
    exclude: ['node_modules', 'dist'],
    lines: 60
}

Para que tudo possa funcionar precisamos informar o provider que será o instanbul , o tipo de report que será dois cobertura e text já veremos mais sobre o text pois para funcionar com o Gitlab basta o cobertura.

para executar e validar se o report foi criado com sucesso na pasta /coverage na raiz do projeto basta executar o comando:

vitest run --coverage

Visualização de código não coberto NO TERMINAL

Também foi habilitado outra forma de visualizar a taxa de cobertura do código que é via terminal em “tempo de desenvolvimento”

Como mostra na imagem acima, podemos entender como está o andamento da cobertura de cada arquivos do projeto, separando por coluna, hoje no projeto o que importa é a coluna Lines pois é nela que precisamos focar para aumentar a taxa de cobertura do projeto como todo.

Criticando cobertura mínima

Para critic ar a taxa mínima de cobertura por linha do projeto, precisamos voltar no arquivo vitest.config.ts no objeto coverage e configurar o atributo lines informando nele o percentual mínimo que cada arquivo deve ter, em nosso caso foi configurar o percentual mínimo de 60%.