MonitoringDashboard.test.tsx

Обзор

Файл MonitoringDashboard.test.tsx содержит набор модульных тестов для компонента React MonitoringDashboard. Основная цель этого файла — проверить корректность рендера, взаимодействия и отображения различных вкладок и метрик в дашборде мониторинга системы. Тесты написаны с использованием библиотеки @testing-library/react и используют мок-сервисы для имитации внешних зависимостей, таких как аналитический сервис.

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

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

MockGameProvider

Тип: React Functional Component
Параметры:

• children: React.ReactNode — дочерние компоненты, оборачиваемые в провайдер.

Назначение:
Обертка для компонента MonitoringDashboard, предоставляющая контекст игры через GameProvider. Используется для имитации реальной среды приложения в тестах.

Использование:

render(
  <MockGameProvider>
    <MonitoringDashboard />
  </MockGameProvider>
);

jest.mock('../../services/analyticsService')

Мокирование сервиса аналитики для изоляции тестируемого компонента от реальных API вызовов.

Методы мок-сервиса:

• subscribe — мок-функция для подписки на события.

• unsubscribe — мок-функция для отписки.

• getSystemHealth — возвращает фиктивные показатели здоровья системы (overall, network, economic, validators).

• exportMetrics — возвращает фиктивные метрики в виде JSON-строки.

• resolveAlert — мок-функция для обработки оповещений.

Тестовые кейсы

Файл содержит блок describe('MonitoringDashboard', () => {...}) с множеством тестов:

1. renders monitoring dashboard with all tabs
   Проверяет, что все основные вкладки дашборда корректно отображаются:

   • "Under the Hood Dashboard"

   • "Network Overview"

   • "Validators"

   • "Batch Processing"

   • "Consensus"

2. switches between tabs correctly
   Проверяет смену активной вкладки при клике пользователем и отображение соответствующего содержимого.

3. displays network metrics correctly
   Проверяет отображение ключевых сетевых метрик:

   • Active Validators

   • Total Stake

   • Current TPS

   • Pending Actions

4. shows validator information in validators tab
   Проверяет наличие заголовков таблицы валидаторов:

   • Validator

   • Status

   • Stake

   • Uptime

5. displays batch processing information
   Проверяет отображение информации по очереди пакетной обработки при переключении на соответствующую вкладку.

6. shows consensus information
   Проверяет отображение данных консенсуса:

   • Consensus Formation

   • Economic Security

   • Live Consensus Activity

7. updates metrics in real-time
   Проверяет, что метрики обновляются в реальном времени (имитируется через waitFor и таймеры).

8. handles validator status colors correctly
   Проверяет корректное отображение цветов статуса валидаторов.

9. formats addresses correctly
   Проверяет, что адреса валидаторов форматируются в сокращённый вид (например, 0x1234...abcd).

10. calculates time ago correctly
    Проверяет корректность отображения временных меток в формате "X секунд/минут/часов назад".

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

• Используется мок-сервис аналитики для имитации API без необходимости реального подключения.

• Тесты используют @testing-library/react для рендера компонентов и взаимодействия с DOM.

• Взаимодействие с вкладками реализовано через события клика fireEvent.click.

• Проверки асинхронных обновлений метрик реализованы с помощью waitFor.

• Мок-провайдер MockGameProvider обеспечивает контекст игры для корректной работы компонента в тестах.

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

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

• Импортируется и тестируется компонент MonitoringDashboard из родительской директории.

• Используется провайдер GameProvider из модуля ../../providers/GameProvider для передачи игрового контекста.

• Мокируется analyticsService из ../../services/analyticsService, который отвечает за получение и обновление метрик мониторинга.

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

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

В рамках тестов компонент MonitoringDashboard рендерится внутри MockGameProvider для обеспечения необходимого контекста. Далее проверяются видимость вкладок и элементов дашборда, а также взаимодействие с пользовательским интерфейсом:

render(
  <MockGameProvider>
    <MonitoringDashboard />
  </MockGameProvider>
);

// Проверка, что вкладка "Validators" отображается и содержит таблицу валидаторов
fireEvent.click(screen.getByText('Validators'));
expect(screen.getByText('Validator')).toBeInTheDocument();
expect(screen.getByText('Status')).toBeInTheDocument();

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

Ниже представлена диаграмма компонентов и основных функций, участвующих в тестах:

componentDiagram
    direction LR
    MonitoringDashboard <|-- TestedComponent
    TestedComponent -->|Uses context| MockGameProvider
    TestedComponent -->|Uses service| analyticsServiceMock
    MockGameProvider --> GameProvider
    analyticsServiceMock : subscribe()
    analyticsServiceMock : unsubscribe()
    analyticsServiceMock : getSystemHealth()
    analyticsServiceMock : exportMetrics()
    analyticsServiceMock : resolveAlert()
    TestingLibrary --> TestedComponent
    TestingLibrary --> MockGameProvider

Итог

Файл MonitoringDashboard.test.tsx обеспечивает качественное покрытие юнит-тестами для ключевого компонента мониторингового дашборда. Тесты охватывают рендеринг, пользовательские взаимодействия и обработку данных метрик, что помогает гарантировать стабильность и корректность интерфейса при развитии и изменениях системы.