Пагинация и её тестирование

Пагинация — ключевая составляющая в пользовательских интерфейсах, позволяющая эффективно управлять большим объёмом данных, разбивая их на страницы. В контексте тестирования React-приложений, пагинация требует особого внимания, поскольку её поведение часто зависит от состояния и взаимодействия с пользователем. Тестирование компонентов пагинации с использованием React Testing Library позволяет гарантировать правильную работу интерфейса и обработку событий.

Структура компонента пагинации

Типичный компонент пагинации состоит из набора элементов управления, таких как кнопки для перехода на следующую или предыдущую страницу, индикаторы текущей страницы и ссылки на конкретные страницы. Например:

import React from 'react';

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  return (
    <div>
      <button 
        onCl ick={() => onPageChange(currentPage - 1)} 
        disabled={currentPage === 1}>
        Prev
      </button>
      <span>Page {currentPage} of {totalPages}</span>
      <button 
        onCl ick={() => onPageChange(currentPage + 1)} 
        disabled={currentPage === totalPages}>
        Next
      </button>
    </div>
  );
};

export default Pagination;

Здесь компонент принимает три пропса:

  • currentPage — текущая страница.
  • totalPages — общее количество страниц.
  • onPageChange — функция, вызываемая при изменении страницы.

Подходы к тестированию пагинации

Тестирование компонента пагинации в React требует внимания к следующим аспектам:

  • Проверка отображения правильных значений (например, текущей страницы).
  • Проверка работы кнопок “Next” и “Prev” (правильное изменение страницы).
  • Проверка деактивации кнопок в случае, если пользователь находится на первой или последней странице.

Проверка отображения текущей страницы

Первый шаг — проверить, что компонент корректно отображает текущую страницу и общее количество страниц. Для этого можно использовать getByText или getByRole, чтобы убедиться, что отображаемая информация соответствует переданным пропсам.

Пример теста:

import { render, screen } from '@testing-library/react';
import Pagination from './Pagination';

test('отображает правильный номер текущей страницы и общее количество страниц', () => {
  render(<Pagination currentPage={1} totalPages={5} onPageCha nge={() => {}} />);
  expect(screen.getByText(/Page 1 of 5/i)).toBeInTheDocument();
});

В этом тесте проверяется, что компонент отображает текст “Page 1 of 5”, что подтверждает правильную работу компонента при передаче пропсов currentPage и totalPages.

Проверка кнопок “Prev” и “Next”

Следующий шаг — тестирование логики кнопок “Prev” и “Next”. Эти кнопки должны быть деактивированы, если пользователь находится на первой или последней странице, соответственно.

Пример теста:

test('кнопка "Prev" деактивируется на первой странице', () => {
  render(<Pagination currentPage={1} totalPages={5} onPageCha nge={() => {}} />);
  const prevButton = screen.getByText(/Prev/i);
  expect(prevButton).toBeDisabled();
});

test('кнопка "Next" деактивируется на последней странице', () => {
  render(<Pagination currentPage={5} totalPages={5} onPageCha nge={() => {}} />);
  const nextButton = screen.getByText(/Next/i);
  expect(nextButton).toBeDisabled();
});

Здесь проверяется, что на первой странице кнопка “Prev” деактивирована, а на последней — кнопка “Next”. Для этого используется метод toBeDisabled(), который проверяет, что элемент недоступен для взаимодействия.

Проверка вызова функции изменения страницы

Необходимо также убедиться, что при клике на кнопки “Prev” или “Next” вызывается переданная функция onPageChange с правильным аргументом. В этом случае можно использовать jest mock-функции для отслеживания вызовов.

Пример теста:

test('вызывает onPageChange с правильным значением при клике на "Next"', () => {
  const onPageCha nge = jest.fn();
  render(<Pagination currentPage={1} totalPages={5} onPageCha nge={onPageChange} />);
  const nextButton = screen.getByText(/Next/i);
  nextButton.click();
  expect(onPageChange).toHaveBeenCalledWith(2);
});

В этом тесте проверяется, что при клике на кнопку “Next” вызывается функция onPageChange с аргументом, равным следующей странице.

Тестирование с использованием событий

React Testing Library предоставляет инструменты для симуляции пользовательских взаимодействий, такие как fireEvent. Для более сложных тестов можно использовать fireEvent для эмуляции кликов и других действий.

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

import { fireEvent, render, screen } from '@testing-library/react';
import Pagination from './Pagination';

test('кнопка "Next" работает при клике', () => {
  const onPageCha nge = jest.fn();
  render(<Pagination currentPage={1} totalPages={5} onPageCha nge={onPageChange} />);
  
  const nextButton = screen.getByText(/Next/i);
  fireEvent.click(nextButton);
  
  expect(onPageChange).toHaveBeenCalledWith(2);
});

Здесь используется fireEvent.click(), чтобы смоделировать клик по кнопке “Next” и проверить, что функция onPageChange была вызвана с правильным аргументом.

Пагинация с большими данными

Когда количество страниц и элементов на странице становится большим, важно тестировать производительность компонента пагинации. Хотя React Testing Library в первую очередь ориентирована на тестирование функциональности, можно также удостовериться, что пагинация правильно отображается и работает с большим количеством данных.

Для этого можно тестировать сценарии с большими пропсами:

test('работает с большим количеством страниц', () => {
  const onPageCha nge = jest.fn();
  render(<Pagination currentPage={1} totalPages={1000} onPageCha nge={onPageChange} />);
  const nextButton = screen.getByText(/Next/i);
  fireEvent.click(nextButton);
  expect(onPageChange).toHaveBeenCalledWith(2);
});

Здесь тестируется работа пагинации с 1000 страниц, чтобы убедиться, что компонент корректно обрабатывает большие данные и не вызывает ошибок.

Использование тестов на основе пользовательских сценариев

При тестировании пагинации важно учитывать реальные пользовательские сценарии, такие как:

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

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

Заключение

Тестирование пагинации в React с использованием React Testing Library требует комплексного подхода, включая проверку отображения данных, правильности взаимодействия с пользователем и функциональности кнопок. С помощью инструментов библиотеки можно легко симулировать клики, проверять состояния элементов и убедиться в правильности работы логики компонента, что является неотъемлемой частью обеспечения качества в React-приложениях.

Оглавление