ValidatorDashboard.test.tsx

Обзор файла

Данный файл содержит модульные тесты для React-компонента ValidatorDashboard. Его основное назначение — проверить корректность рендеринга дашборда валидаторов, отображения сетевых метрик и переключения между вкладками. Используется библиотека @testing-library/react для имитации взаимодействия пользователя с компонентом и проверки отображаемого содержимого.

В тестах замокан (подменён) провайдер GameProvider, который предоставляет данные о состоянии сети валидаторов. Это позволяет тестам работать с предсказуемыми значениями и проверять логику компонента без реального подключения к данным.

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

Импортируемые модули

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

• ValidatorDashboard — тестируемый React-компонент.

• jest.mock — функция для подмены импорта GameProvider.

Мокирование useGame из GameProvider

jest.mock('../../providers/GameProvider', () => ({
  useGame: () => ({
    validators: [],
    networkStatus: {
      totalValidators: 12,
      activeValidators: 11,
      totalStake: 2500000,
      currentEpoch: 1847,
      avgBlockTime: 2.1,
      tps: 450,
      pendingActions: 23,
      processedToday: 15420
    }
  })
}));

• Создаёт фиктивный хук useGame, возвращающий фиксированные значения для валидаторов и сетевых метрик.

• Это изолирует компонент и позволяет тестировать его без внешних зависимостей.

Тесты

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

Тест 1: Рендеринг дашборда с обзором сети по умолчанию

it('renders the dashboard with network overview by default', () => {
  render(<ValidatorDashboard />);
  
  expect(screen.getByText('Under the Hood Dashboard')).toBeInTheDocument();
  expect(screen.getByText('Real-time view of the Symbiotic validator network powering gasless gaming')).toBeInTheDocument();
  expect(screen.getByText('Active Validators')).toBeInTheDocument();
  expect(screen.getByText('11/12')).toBeInTheDocument();
});

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

• Убеждается, что показывается количество активных валидаторов в формате "11/12".

Тест 2: Переключение между вкладками

it('switches between tabs correctly', () => {
  render(<ValidatorDashboard />);
  
  fireEvent.click(screen.getByText('Validators'));
  expect(screen.getByText('Validator Network')).toBeInTheDocument();
  
  fireEvent.click(screen.getByText('Batch Processing'));
  expect(screen.getByText('Batch Processing Queue')).toBeInTheDocument();
  
  fireEvent.click(screen.getByText('Consensus'));
  expect(screen.getByText('Consensus Formation')).toBeInTheDocument();
});

• Имитирует клики по вкладкам: "Validators", "Batch Processing", "Consensus".

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

Тест 3: Корректное отображение сетевых метрик

it('displays network metrics correctly', () => {
  render(<ValidatorDashboard />);
  
  expect(screen.getByText('2.5M MANA')).toBeInTheDocument();
  expect(screen.getByText('450')).toBeInTheDocument(); // TPS
  expect(screen.getByText('23')).toBeInTheDocument(); // Pending actions
  expect(screen.getByText('#1847')).toBeInTheDocument(); // Current epoch
});

• Проверяет, что ключевые показатели — общий стейк, TPS (транзакций в секунду), количество ожидающих действий и текущий эпоха — корректно отображаются на экране.

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

• Использование моков позволяет изолировать компонент от реального состояния приложения.

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

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

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

Взаимодействие с другими частями приложения

• ValidatorDashboard получает данные из GameProvider через хук useGame. В тестах этот провайдер замокан.

• Компонент, вероятно, содержит несколько вкладок, каждая из которых отображает разные аспекты работы валидаторов и состояния сети.

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

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

В реальном приложении ValidatorDashboard будет импортирован и использован в UI:

import { ValidatorDashboard } from './ValidatorDashboard';

function App() {
  return (
    <div>
      <ValidatorDashboard />
    </div>
  );
}

Тесты из файла ValidatorDashboard.test.tsx обеспечивают, что при этом компонент корректно отобразит данные и будет реагировать на переключение вкладок.

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

flowchart TD
    A[ValidatorDashboard.test.tsx] --> B[Mock GameProvider.useGame]
    A --> C[describe('ValidatorDashboard')]
    C --> D[it('renders the dashboard with network overview by default')]
    C --> E[it('switches between tabs correctly')]
    C --> F[it('displays network metrics correctly')]
    
    B --> |provides| G[Mocked networkStatus data]
    D --> |checks| H[Default rendering elements]
    E --> |simulates| I[Tab clicks]
    E --> |verifies| J[Tab content changes]
    F --> |checks| K[Network metrics displayed]

Итог

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