NetworkStatusIndicator.test.tsx

Общий обзор

Данный файл содержит набор юнит-тестов для React-компонента NetworkStatusIndicator. Его основная задача — проверить корректность отображения различных статусов сети в зависимости от пропсов, переданных компоненту. Тесты охватывают разные состояния сети: подключение, отключение, загрузка, ошибки, а также взаимодействия пользователя, такие как раскрытие детальной информации и закрытие модального окна.

Файл использует библиотеку @testing-library/react для рендеринга компонента и симуляции пользовательских действий, а также @testing-library/jest-dom для удобных матчеров в проверках.

Подробное описание тестов

Тестовый блок: describe('NetworkStatusIndicator', () => {...})

Группа тестов, посвящённая компоненту NetworkStatusIndicator.

Тесты

1. it('shows connected status when connected', () => {...})

• Цель: Проверить, что при параметре isConnected={true} компонент отображает статус "Connected" с правильным CSS-классом.

• Параметры:

  • isConnected: boolean — true

• Проверки:

  • Текст "Connected" присутствует в документе.

  • Элемент с текстом "Connected" содержит класс text-green-400.

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

  <NetworkStatusIndicator isConnected={true} />
  

2. it('shows offline status when disconnected', () => {...})

• Цель: Проверить отображение статуса "Offline" при отсутствии подключения.

• Параметры:

  • isConnected: boolean — false

• Проверки:

  • Текст "Offline" отображается.

  • Класс text-red-400 применён к тексту "Offline".

3. it('shows connecting status when loading', () => {...})

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

• Параметры:

  • isConnected: false

  • isLoading: true

• Проверки:

  • Текст "Connecting..." отображается.

  • Класс text-yellow-400 применён к тексту "Connecting...".

4. it('shows error status when there is an error', () => {...})

• Цель: Проверить отображение статуса ошибки, если передан параметр error.

• Параметры:

  • isConnected: false

  • error: string — сообщение об ошибке ("Connection failed")

• Проверки:

  • Отображается текст "Connection Error".

  • Применён класс text-red-400.

5. it('shows time since last update when connected', () => {...})

• Цель: Проверить отображение времени с последнего обновления состояния сети.

• Параметры:

  • isConnected: true

  • lastUpdate: number — метка времени (например, 30 секунд назад)

• Проверки:

  • Текст с указанием времени, прошедшего с последнего обновления, например "30s ago", присутствует.

6. it('shows detailed status when clicked', () => {...})

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

• Действия:

  • Рендер компонента с isConnected: true.

  • Клик по кнопке (элемент с ролью button).

• Проверки:

  • Отображаются заголовки "Network Status", "Game Server", "Gasless Architecture Status".

7. it('shows gasless architecture components status', () => {...})

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

• Действия:

  • Клик по кнопке раскрытия.

• Проверки:

  • Появляются тексты: "Validator Network", "Off-chain Processing", "Batch Settlement".

8. it('shows error details in expanded view', () => {...})

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

• Параметры:

  • isConnected: false

  • error: "Network timeout"

• Действия:

  • Клик по кнопке раскрытия.

• Проверки:

  • Отображается текст с ошибкой "Network timeout".

9. it('shows gasless benefit explanation', () => {...})

• Цель: Проверить отображение пояснения о преимуществах газлесс-архитектуры.

• Действия:

  • Клик по кнопке раскрытия.

• Проверки:

  • Отображается текст, содержащий "Gasless Benefit:" и пояснение, например, "Even during connection issues".

10. it('closes details when close button is clicked', () => {...})

• Цель: Проверить закрытие расширенного вида при нажатии на кнопку закрытия.

• Действия:

  • Клик по кнопке раскрытия.

  • Клик по кнопке с текстом "×" (закрыть).

• Проверки:

  • Текст "Network Status" отсутствует после закрытия.

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

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

• Используется имитация пользовательских событий (fireEvent.click), что позволяет тестировать интерактивность компонента.

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

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

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

• Тестируемый компонент NetworkStatusIndicator импортируется из файла ../NetworkStatusIndicator.

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

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

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

componentDiagram
    component "NetworkStatusIndicator.test.tsx" {
        [describe('NetworkStatusIndicator')]
        [it('shows connected status when connected')]
        [it('shows offline status when disconnected')]
        [it('shows connecting status when loading')]
        [it('shows error status when there is an error')]
        [it('shows time since last update when connected')]
        [it('shows detailed status when clicked')]
        [it('shows gasless architecture components status')]
        [it('shows error details in expanded view')]
        [it('shows gasless benefit explanation')]
        [it('closes details when close button is clicked')]
    }
    [describe('NetworkStatusIndicator')] --> [it('shows connected status when connected')]
    [describe('NetworkStatusIndicator')] --> [it('shows offline status when disconnected')]
    [describe('NetworkStatusIndicator')] --> [it('shows connecting status when loading')]
    [describe('NetworkStatusIndicator')] --> [it('shows error status when there is an error')]
    [describe('NetworkStatusIndicator')] --> [it('shows time since last update when connected')]
    [describe('NetworkStatusIndicator')] --> [it('shows detailed status when clicked')]
    [describe('NetworkStatusIndicator')] --> [it('shows gasless architecture components status')]
    [describe('NetworkStatusIndicator')] --> [it('shows error details in expanded view')]
    [describe('NetworkStatusIndicator')] --> [it('shows gasless benefit explanation')]
    [describe('NetworkStatusIndicator')] --> [it('closes details when close button is clicked')]

Резюме

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