HTML reporter

HTML Reporter в Karma — это один из встроенных репортеров, который позволяет визуально отображать результаты тестирования в браузере в виде удобной и читаемой HTML-страницы. Он используется для генерации подробных отчётов о прохождении тестов, что особенно важно при интеграции с CI/CD или при необходимости анализа результатов вручную.

Подключение HTML Reporter

Для использования HTML Reporter необходимо убедиться, что пакет karma-html-reporter установлен:

npm install karma-html-reporter --save-dev

После установки в конфигурационном файле Karma (karma.conf.js) репортер добавляется следующим образом:

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],
    reporters: ['progress', 'html'], // подключение HTML репортера
    htmlReporter: {
      outputFile: 'tests/units.html', // путь к файлу отчёта
      pageTitle: 'Unit Tests',       // заголовок HTML-страницы
      subPageTitle: 'Application Unit Test Results', // подзаголовок
      groupSuites: true,             // группировка тестов по сьютам
      useCompactStyle: true,         // компактный стиль отчёта
      useLegacyStyle: false          // использование нового стиля
    },
    browsers: ['ChromeHeadless'],
    singleRun: true
  });
};

Ключевые параметры конфигурации HTML Reporter:

  • outputFile — путь к создаваемому HTML-файлу отчёта.
  • pageTitle — заголовок страницы, отображаемый в браузере.
  • subPageTitle — подзаголовок страницы, полезный для уточнения контекста тестов.
  • groupSuites — объединяет тесты по сьютам, что делает отчёт более структурированным.
  • useCompactStyle — упрощённый стиль для быстрого просмотра.
  • useLegacyStyle — выбор между современным и устаревшим CSS-оформлением.

Структура отчёта

HTML Reporter формирует страницу, разделённую на несколько секций:

  1. Сводка тестов Отображает общее количество тестов, количество успешных и упавших, а также процент успешности. Эта информация находится в верхней части отчёта и позволяет сразу оценить результат тестирования.

  2. Список сьютов и тестов Каждый сьют раскрывается с тестами, входящими в него. Успешные тесты отмечаются зелёным цветом, упавшие — красным. При нажатии на упавший тест отображается подробный стек-трейс ошибки, что облегчает отладку.

  3. Дополнительная информация Включает в себя логи тестов и временные показатели выполнения каждого теста. В HTML Reporter возможна настройка отображения времени выполнения для выявления медленных тестов.

Варианты использования

Локальное тестирование: HTML Reporter позволяет быстро получить визуальный отчёт в браузере, что удобно для разработчиков, которые хотят видеть результаты тестов в понятной форме без необходимости анализировать консольные логи.

Интеграция с CI/CD: Сгенерированный HTML-файл можно сохранять как артефакт сборки, что позволяет команде тестировщиков и менеджерам просматривать результаты без установки среды для запуска тестов.

Настройка кастомных стилей: HTML Reporter позволяет подключать собственные CSS для отчётов. Это полезно, если требуется согласование визуального оформления с корпоративными стандартами. Пример:

htmlReporter: {
  outputFile: 'tests/units.html',
  pageTitle: 'Unit Tests',
  cssClass: 'custom-style' // можно добавить кастомный CSS класс
}

Расширенные возможности

  • Группировка по модулям или компонентам: Использование опции groupSuites помогает структурировать отчёт по модулям приложения, что упрощает анализ больших проектов.

  • Сортировка по статусу тестов: В некоторых версиях HTML Reporter доступна сортировка тестов по статусу — успешные идут первыми или последними, что ускоряет поиск проблемных участков.

  • Интеграция с другими репортерами: HTML Reporter можно комбинировать с junit или coverage, чтобы одновременно получать визуальный отчёт и XML-данные для CI.

Практические советы

  1. Использовать Headless браузер для CI При запуске тестов на сервере предпочтительно использовать ChromeHeadless или FirefoxHeadless. Это позволяет создавать HTML-отчёты без GUI.

  2. Разделять отчёты по окружениям Для разных окружений (development, staging, production) лучше генерировать отдельные HTML-отчёты, чтобы избежать путаницы.

  3. Оптимизировать для больших проектов Для проектов с сотнями тестов стоит включать useCompactStyle и groupSuites, чтобы отчёт оставался читабельным и не перегружал браузер.

  4. Автоматическая генерация при каждом запуске Настройка Karma на автоматическое создание HTML-отчёта при каждом запуске тестов упрощает контроль за качеством кода.

HTML Reporter в Karma сочетает простоту использования и визуальную информативность, делая тестирование JavaScript-проектов более прозрачным и наглядным. Его гибкая настройка позволяет адаптировать отчёты под любые требования проекта, от локального анализа до интеграции с CI/CD.

Оглавление