Получите покрытие тестами Front-End с помощью Cypress

API7.ai

March 2, 2021

Technology

Предыстория

В статье "Стабильная доставка продукта с использованием Cypress" мы обсудили, почему выбрали Cypress в качестве фреймворка для E2E-тестирования. После почти двух месяцев доработки тестовых сценариев нам потребовалась метрика покрытия тестами, чтобы оценить, достаточно ли оно. В этой статье будет описано, как получить покрытие E2E для фронтенда APISIX Dashboard с использованием Cypress.

Что такое покрытие кода

Покрытие кода — это метрика в тестировании программного обеспечения, которая описывает долю и степень тестирования исходного кода программы, а полученная доля называется покрытием кода. Покрытие тестового кода в определенной степени отражает качество кода.

Установка зависимостей и настройка

Для сбора данных о покрытии тестами нам нужно разместить некоторые зонды в исходном бизнес-коде, чтобы Cypress мог собирать данные.

Cypress официально рекомендует два подхода: первый — создание временного каталога через nyc и запуск кода, в который уже встроены зонды, для сбора данных о покрытии тестами. Второй способ — выполнение преобразования кода в реальном времени через конвейер преобразования кода, что устраняет необходимость во временных папках и делает сбор данных о покрытии тестами более удобным. Мы выбираем второй способ для сбора покрытия E2E для фронтенда.

  1. Установка зависимостей
yarn add  babel-plugin-istanbul --dev
  1. Установка плагина Cypress
yarn add  @cypress/code-coverage --dev
  1. Настройка Babel
// web/config/config.ts
extraBabelPlugins: [
    ['babel-plugin-istanbul',  {
      "exclude": ["**/.umi", "**/locales"]
    }],
  ],
  1. Настройка плагина 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';
  1. Получение покрытия тестами

После завершения настройки нам нужно запустить тестовые сценарии. После выполнения тестов Cypress создаст папки coverage и .nyc_output, которые содержат отчеты о покрытии тестами.

1.png

Информация о покрытии тестами появится в консоли после выполнения следующей команды.

npx nyc report --reporter=text-summary

2.png

В каталоге coverage будет доступна более детальная страница отчета, как показано здесь.

3.png

  • Statements указывает, был ли выполнен каждый оператор.
  • Branchs указывает, был ли выполнен каждый блок if.
  • Functions указывает, была ли вызвана каждая функция.
  • Lines указывает, была ли выполнена каждая строка.

Итог

Покрытие тестами в определенной степени отражает качество проекта. В настоящее время покрытие E2E для фронтенда APISIX Dashboard достигло 71,57%. Мы продолжим работать с сообществом, чтобы повысить уровень покрытия тестами и предоставлять пользователям более надежные и стабильные продукты.

Tags:
APISIX Basics
Testing
Plugin