Obtenha Cobertura de Testes Front-End com Cypress

Contexto

No artigo "Stable Product Delivery with Cypress", discutimos por que escolhemos o Cypress como nossa estrutura de teste E2E. Após passar quase dois meses refinando os casos de teste, precisávamos de cobertura de teste para quantificar se a cobertura de teste era suficiente. Este artigo descreverá como obter a cobertura E2E do front-end do APISIX Dashboard usando o Cypress.

O que é cobertura de código

A cobertura de código é uma métrica em testes de software que descreve a proporção e a extensão em que o código-fonte de um programa é testado, e a proporção resultante é chamada de cobertura de código. A cobertura de código de teste reflete, até certo ponto, a saúde do código.

Instalação de Dependências & Configuração

Para coletar dados de cobertura de teste, precisamos colocar algumas sondas no código de negócios original para que o Cypress colete os dados.

O Cypress recomenda oficialmente duas abordagens: a primeira é gerar um diretório temporário via nyc e executar o código que já foi escrito na sonda para coletar dados de cobertura de teste. A segunda maneira é fazer a conversão de código em tempo real através do pipeline de conversão de código, o que elimina o incômodo de pastas temporárias e torna a coleta de dados de cobertura de teste relativamente mais simples. Escolhemos a segunda maneira para coletar a cobertura E2E do front-end.

1. Instalando Dependências

yarn add  babel-plugin-istanbul --dev

2. Instalando o plug-in do Cypress

yarn add  @cypress/code-coverage --dev

3. Configurando o babel

// web/config/config.ts
extraBabelPlugins: [
    ['babel-plugin-istanbul',  {
      "exclude": ["**/.umi", "**/locales"]
    }],
  ],

4. Configurando o plug-in de cobertura de código do Cypress

// web/cypress/plugins/index.js
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config);
  return config;
};

// web/cypress/support/index.js
import '@cypress/code-coverage/support';

5. Obtendo a Cobertura de Teste

Após a configuração, precisamos executar o caso de teste. Após a execução do caso de teste, o Cypress gerará as pastas coverage e .nyc_output, que contêm os relatórios de cobertura de teste.

As informações de cobertura de teste aparecerão no console após executar o seguinte comando.

npx nyc report --reporter=text-summary

No diretório de cobertura, haverá uma página de relatório mais detalhada, como mostrado aqui.

• Statements indica se cada instrução foi executada
• Branchs indica se cada bloco if foi executado
• Functions indica se cada função foi chamada
• Lines indica se cada linha foi executada

Resumo

A taxa de cobertura de teste reflete, até certo ponto, a qualidade do projeto. Atualmente, a cobertura E2E do front-end do APISIX Dashboard atingiu 71,57%. Continuaremos trabalhando com a comunidade para aumentar a taxa de cobertura de teste e fornecer produtos mais confiáveis e estáveis para os usuários.