OnChainNotifications.test.tsx

Обзор файла

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

Файл использует библиотеку @testing-library/react для рендеринга компонента и взаимодействия с DOM-элементами, а также Jest для мокирования зависимостей и определения тест-кейсов.

Детальное описание

Мок GameProvider

jest.mock('../../providers/GameProvider', () => ({
  useGame: () => ({
    recentActions: [ ... ]
  })
}));

• Назначение: Подмена реального провайдера данных GameProvider фиктивной реализацией, возвращающей набор тестовых действий.

• Возвращаемые данные: Массив recentActions, содержащий два объекта:

  • action_1: действие с типом CRAFT_ITEM, подтверждённое в блокчейне (status: 'CONFIRMED'), содержит txHash и blockNumber.

  • action_2: действие с типом PVP_BATTLE, ещё в состоянии ожидания подтверждения (status: 'PENDING').

Тестовый блок describe('OnChainNotifications', ...)

Группа тестов для компонента OnChainNotifications.

Тест 1: Проверка уведомлений для подтверждённых действий

it('creates notifications for confirmed actions with blockchain data', async () => {
  render(<OnChainNotifications />);
  
  await screen.findByText('Action Confirmed On-Chain');
  expect(screen.getByText('Crafted Iron Sword for 100 MANA has been confirmed on the blockchain')).toBeInTheDocument();
  expect(screen.getByText(/Tx: 0x123456...abcdef/)).toBeInTheDocument();
  expect(screen.getByText('Block: #18450123')).toBeInTheDocument();
});

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

• Что проверяется:

  • Появление текста заголовка уведомления "Action Confirmed On-Chain".

  • Отображение описания действия с подтверждённым статусом.

  • Наличие ссылки (или отображения) хеша транзакции и номера блока.

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

Тест 2: Проверка отсутствия уведомлений для ожидающих действий

it('does not create notifications for pending actions', () => {
  render(<OnChainNotifications />);
  expect(screen.queryByText('PvP Battle Won - Player123 has been confirmed on the blockchain')).not.toBeInTheDocument();
});

• Цель: Убедиться, что действия со статусом PENDING не вызывают появление уведомлений.

• Что проверяется: Отсутствие текста уведомления для неподтверждённого действия.

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

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

• Мокирование useGame: Позволяет изолировать тесты компонента от реального состояния приложения и внешних сервисов.

• Асинхронное ожидание: Использование await screen.findByText() для ожидания асинхронного рендера уведомления.

• Тестирование UI: Взаимодействие основано на поиске текста в DOM, что имитирует поведение конечного пользователя.

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

• OnChainNotifications компонент: Является частью UI, отображает уведомления о действиях, связанных с блокчейном.

• GameProvider: Провайдер, который предоставляет актуальные игровые действия и их статусы; замещён мок-реализацией в тестах.

• Блокчейн: Компонент зависит от данных о транзакциях (хэш и номер блока), что показывает связь с бекендом, отслеживающим состояние блокчейна.

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

import { OnChainNotifications } from '../OnChainNotifications';

function App() {
  return (
    <>
      {/* Другие компоненты приложения */}
      <OnChainNotifications />
    </>
  );
}

Компонент будет автоматически показывать уведомления о подтверждённых on-chain действиях, опираясь на данные из GameProvider.

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

componentDiagram
    component OnChainNotifications
    component GameProviderMock
    component TestingLibrary
    
    OnChainNotifications <-- TestingLibrary : render & screen
    OnChainNotifications <-- GameProviderMock : useGame() mock
    TestingLibrary --> OnChainNotifications : render()

Итог

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