MetricsChart.test.tsx

Обзор

Файл MetricsChart.test.tsx содержит набор модульных тестов для React-компонентов, связанных с визуализацией метрик — в первую очередь для компонента MetricsChart и его специализированных вариантов: TPSChart, BlockTimeChart, NetworkHealthChart и ValidatorCountChart. Цель тестов — проверить корректность отображения данных, правильность рендеринга элементов интерфейса, обработку различных сценариев данных и взаимодействие с canvas API при отрисовке графиков.

Тесты написаны с использованием библиотеки @testing-library/react и фреймворка Jest. Они моделируют данные, имитируют контекст canvas, а также проверяют как поведение компонента, так и его визуальное представление.

Описание компонентов и тестируемой функциональности

Компонент MetricsChart

• Назначение: Отображает график метрики с заголовком, текущим значением, трендом, минимумом, максимумом, количеством точек данных и изменениями.

• Параметры (props):

  • title: string — заголовок графика.

  • data: Array<{ timestamp: number; value: number }> — массив данных с отметками времени и значениями.

  • color: string — цвет графика.

  • unit?: string — единица измерения (опционально).

  • showTrend?: boolean — показывать ли тренд изменений (опционально).

  • formatValue?: (value: number) => string — функция форматирования отображаемого значения (опционально).

• Функциональность:

  • Отображает заголовок и текущее значение.

  • Рассчитывает и показывает минимальное и максимальное значение.

  • Показывает количество точек данных.

  • При showTrend=true отображает процентное изменение тренда.

  • Отображает последнее изменение значения между последними двумя точками.

  • Отрисовывает график на canvas с использованием API 2D-контекста.

• Пример использования:

  <MetricsChart
    title="Test Metric"
    data={mockData}
    color="#ff0000"
    unit=" units"
    showTrend={true}
    formatValue={(value) => `$${value.toFixed(2)}`}
  />
  

Специализированные компоненты

Все ниже перечисленные компоненты являются обертками вокруг MetricsChart с предустановленными параметрами, специфичными для конкретных метрик.

• TPSChart

  • Отображает "Transactions Per Second".

  • Формат отображаемого значения — целое число с суффиксом TPS.

• BlockTimeChart

  • Отображает "Average Block Time".

  • Формат отображения — число с двумя знаками после запятой и суффиксом s (секунды).

• NetworkHealthChart

  • Отображает "Network Health".

  • Формат отображения — число с одним знаком после запятой и %.

• ValidatorCountChart

  • Отображает "Active Validators".

  • Формат отображения — целое число.

Тестовые сценарии

• Рендеринг компонента с базовыми параметрами:
  Проверяется наличие заголовка, текущего значения.

• Отображение тренда:
  При передаче showTrend=true проверяется корректность отображения процентного изменения или статуса "Stable".

• Использование кастомной функции форматирования:
  Проверяется, что значение отображается согласно переданной функции formatValue.

• Отображение минимальных и максимальных значений:
  Проверяется корректность отображения крайних значений из набора данных.

• Отображение количества точек данных:
  Проверяется, что число точек корректно отображается.

• Показ последнего изменения значения:
  Проверяется, что отображается разница между двумя последними значениями, с правильным знаком.

• Отрисовка графика на canvas:
  Проверяется, что методы 2D-контекста вызваны, что свидетельствует о попытке визуализации.

• Тесты специализированных компонентов:
  Проверяется корректный рендеринг с правильными заголовками и форматированными значениями.

• Обработка крайних случаев:

  • Пустой массив данных.

  • Один элемент в массиве.

  • Очень большие значения.

  • Отрицательные значения.

Важные детали реализации

• Для тестирования визуализации используется мок 2D-контекста canvas с имитацией всех вызовов методов — это позволяет убедиться, что компонент пытается нарисовать график.

• window.devicePixelRatio устанавливается в 1 для стабильности отображения.

• Данные для тестов генерируются динамически с использованием текущего времени Date.now() для имитации реальных временных меток.

• Используются селекторы по тексту для проверки наличия элементов интерфейса, что соответствует пользовательскому восприятию.

Взаимодействие с другими частями системы

• Компоненты импортируются из модуля ../MetricsChart, что указывает на наличие основного файла с реализацией MetricsChart и специализированных графиков.

• Тестируемые компоненты, вероятно, используются в интерфейсе для отображения ключевых метрик системы (например, производительность, здоровье сети, количество валидаторов).

• Тесты обеспечивают качество и надежность визуализации метрик, что критично для мониторинга состояния и производительности системы.

Диаграмма структуры файла

componentDiagram
    component MetricsChart.test.tsx {
        [Mocks]
        [Tests for MetricsChart]
        [Tests for TPSChart]
        [Tests for BlockTimeChart]
        [Tests for NetworkHealthChart]
        [Tests for ValidatorCountChart]
        [Edge Case Tests]
    }

Итог

MetricsChart.test.tsx — это комплексный набор тестов, гарантирующих корректную работу компонента визуализации метрик и его специализированных вариантов. Он покрывает основные сценарии использования, обработку граничных случаев и проверяет взаимодействие с canvas API для отрисовки графиков. Такой подход обеспечивает надежность интерфейса мониторинга и помогает своевременно выявлять регрессии при изменениях кода.