AlertSystem.test.tsx

Обзор файла

Данный файл содержит набор unit-тестов для React-компонента AlertSystem, который предназначен для отображения и управления системными оповещениями (alerts) различного типа и категории. Тесты реализованы с использованием библиотеки @testing-library/react и покрывают основные функциональные возможности компонента: корректное отображение, фильтрацию, взаимодействие с кнопками, отображение подробностей и статистики оповещений.

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

Подробное описание содержимого

Импорты

• render, screen, fireEvent, waitFor — утилиты из @testing-library/react для рендеринга компонентов в тестовой среде и взаимодействия с DOM.

• AlertSystem — тестируемый React-компонент, расположенный на уровень выше.

• SystemAlert — тип данных, описывающий структуру оповещений, импортируется из аналитической службы.

Моковые данные

const mockAlerts: SystemAlert[] = [
  {
    id: 'alert_1',
    type: 'critical',
    title: 'Network Health Critical',
    message: 'Network health has dropped below 85%. Immediate attention required.',
    timestamp: Date.now() - 300000, // 5 минут назад
    resolved: false,
    category: 'network',
    severity: 9,
    affectedComponents: ['consensus', 'validators']
  },
  {
    id: 'alert_2',
    type: 'warning',
    title: 'High Transaction Queue',
    message: 'Transaction queue above 80% capacity. Consider scaling validators.',
    timestamp: Date.now() - 600000, // 10 минут назад
    resolved: false,
    category: 'network',
    severity: 6,
    affectedComponents: ['transaction-pool']
  },
  {
    id: 'alert_3',
    type: 'info',
    title: 'New Validator Joined',
    message: 'Validator 0x742d...8f3a has joined the network with 150K MANA stake.',
    timestamp: Date.now() - 900000, // 15 минут назад
    resolved: true,
    category: 'validator',
    severity: 3,
    affectedComponents: ['validator-network']
  }
];

• Представляют собой три тестовых оповещения с разным уровнем критичности, категорией, статусом (resolved) и другими параметрами.

• Используются для имитации реальных данных компонента.

Моковые функции

const mockOnResolveAlert = jest.fn();
const mockOnDismissAlert = jest.fn();

• Моки для коллбеков, передаваемых в AlertSystem — обработчики нажатия кнопок "Resolve" и "Dismiss".

Тесты

Все тесты сгруппированы в блок describe('AlertSystem', () => { ... }).

1. Рендеринг и отображение

• Проверяется присутствие заголовков карточек с типами оповещений и общей статистики.

• Проверяется правильное отображение количества неразрешенных оповещений по категориям и итого.

2. Фильтрация

• Тестируется фильтрация по типу оповещения (Critical, Warning, Info).

• Тестируется фильтрация по категории (Network, Validator).

• Проверяется переключение показа разрешенных оповещений через чекбокс.

3. Взаимодействия

• Проверяется вызов обработчика onResolveAlert при клике на кнопку "Resolve".

• Проверяется вызов обработчика onDismissAlert при клике на кнопку "Dismiss".

• Тестируется раскрытие детальной информации об оповещении при клике на кнопку "Toggle details".

4. Отображение деталей

• Проверяется, что отображаются затронутые компоненты (affectedComponents).

• Проверяется правильный формат отображения времени "X минут назад".

• Проверяется отображение уровней серьезности (severity).

5. Поведение при отсутствии данных

• При пустом массиве оповещений отображается сообщение "All Clear!" и что нет активных оповещений.

6. Статистика

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

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

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

• Тесты работают с UI-компонентом, который отображает сложную структуру оповещений с возможностью фильтрации и управления ими.

• Используются селекторы по тексту и атрибутам для имитации пользовательских действий и проверки UI.

• Проверяется вызов коллбеков с правильными параметрами — id оповещения.

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

• Компонент AlertSystem получает данные оповещений из сервиса аналитики (SystemAlert).

• Коллбеки onResolveAlert и onDismissAlert предполагают связь с бизнес-логикой или API для обновления статуса оповещений.

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

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

import { AlertSystem } from '../AlertSystem';
import { SystemAlert } from '../../services/analyticsService';

const alerts: SystemAlert[] = [...]; // полученные оповещения

function handleResolve(alertId: string) {
  // логика обработки разрешения оповещения
}

function handleDismiss(alertId: string) {
  // логика обработки закрытия оповещения
}

<AlertSystem 
  alerts={alerts}
  onResolveAlert={handleResolve}
  onDismissAlert={handleDismiss}
/>

Диаграмма структуры (компонент)

componentDiagram
    AlertSystem <|-- AlertSystem.test.tsx : Тестирует

    AlertSystem : +alerts: SystemAlert[]
    AlertSystem : +onResolveAlert(alertId: string): void
    AlertSystem : +onDismissAlert(alertId: string): void

    AlertSystem.test.tsx : -mockAlerts: SystemAlert[]
    AlertSystem.test.tsx : -mockOnResolveAlert: jest.fn()
    AlertSystem.test.tsx : -mockOnDismissAlert: jest.fn()
    AlertSystem.test.tsx : +renders alert system
    AlertSystem.test.tsx : +filters alerts by type
    AlertSystem.test.tsx : +filters alerts by category
    AlertSystem.test.tsx : +handles resolve and dismiss
    AlertSystem.test.tsx : +shows alert details
    AlertSystem.test.tsx : +checks statistics display

Итог

Файл AlertSystem.test.tsx — это набор комплексных тестов для React-компонента AlertSystem, обеспечивающих проверку визуализации, фильтрации, взаимодействия и корректной работы с данными оповещений. Он играет ключевую роль в гарантии качества пользовательского интерфейса системы мониторинга оповещений.