Obtén Cobertura de Pruebas Front-End con Cypress

Antecedentes

En el artículo "Entrega Estable de Productos con Cypress", discutimos por qué elegimos Cypress como nuestro marco de pruebas E2E. Después de pasar casi dos meses refinando los casos de prueba, necesitábamos cobertura de pruebas para cuantificar si la cobertura de pruebas era suficiente. Este artículo describirá cómo obtener la cobertura E2E del front-end de APISIX Dashboard utilizando Cypress.

¿Qué es la cobertura de código?

La cobertura de código es una métrica en las pruebas de software que describe la proporción y el alcance con el que se prueba el código fuente en un programa, y la proporción resultante se llama cobertura de código. La cobertura de código de prueba refleja en cierta medida la salud del código.

Instalación de Dependencias y Configuración

Para recopilar datos de cobertura de pruebas, necesitamos colocar algunas sondas en el código de negocio original para que Cypress pueda recopilar los datos.

Cypress recomienda oficialmente dos enfoques, el primero es generar un directorio temporal mediante nyc y ejecutar el código que ha sido escrito en la sonda para recopilar datos de cobertura de pruebas. La segunda forma es realizar la conversión de código en tiempo real a través de la tubería de conversión de código, lo que elimina la molestia de las carpetas temporales y hace que la recopilación de datos de cobertura de pruebas sea relativamente sencilla. Elegimos la segunda forma para recopilar la cobertura E2E del front-end.

1. Instalación de Dependencias

yarn add  babel-plugin-istanbul --dev

2. Instalación del plugin de Cypress

yarn add  @cypress/code-coverage --dev

3. Configuración de babel

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

4. Configuración del plugin de cobertura de código de 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. Obtención de la Cobertura de Pruebas

Una vez completada la configuración, necesitamos ejecutar los casos de prueba. Después de ejecutar los casos de prueba, Cypress generará las carpetas coverage y .nyc_output, que contienen los informes de cobertura de pruebas.

La información de cobertura de pruebas aparecerá en la consola después de ejecutar el siguiente comando.

npx nyc report --reporter=text-summary

En el directorio de cobertura, estará disponible una página de informe más detallada, como se muestra aquí.

• Statements indica si cada declaración fue ejecutada
• Branchs indica si cada bloque if fue ejecutado
• Functions indica si cada función fue llamada
• Lines indica si cada línea fue ejecutada

Resumen

La tasa de cobertura de pruebas refleja en cierta medida la calidad del proyecto. Actualmente, la cobertura E2E del front-end de APISIX Dashboard ha alcanzado el 71.57%. Continuaremos trabajando con la comunidad para mejorar la tasa de cobertura de pruebas y proporcionar productos más confiables y estables para los usuarios.