Visibility и accessibility testing

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

Зачем проверять видимость и доступность?

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

Тестирование видимости с React Testing Library

Для проверки видимости элементов можно использовать такие методы, как getBy, queryBy, и findBy. Они позволяют искать элементы на странице с различными уровнями строгости.

  1. getBy – этот метод ищет элемент синхронно и выбрасывает ошибку, если элемент не найден. Это подходящий вариант, когда элемент обязательно должен присутствовать на странице.

    Пример:

    const button = screen.getByRole('button');
expect(button).toBeInTheDocument();

    Этот код проверяет, что кнопка присутствует на странице и доступна для взаимодействия.

  2. queryBy – метод для поиска элемента с возможностью возврата null, если элемент не найден. Используется для проверки, что элемент не присутствует на странице.

    Пример:

    const errorMessage = screen.queryByText(/ошибка/i);
expect(errorMessage).not.toBeInTheDocument();

    В данном случае проверяется, что сообщение об ошибке не отображается на странице.

  3. findBy – используется для поиска элементов асинхронно. Этот метод подходит для элементов, которые могут появляться позже, например, после загрузки данных.

    Пример:

    const loadingSpinner = await screen.findByRole('status');
expect(loadingSpinner).toBeInTheDocument();

Проверка доступности элементов

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

  1. Роли элементов HTML-атрибут role определяет роль элемента для вспомогательных технологий. Например, кнопка должна иметь роль button, форма — form, а поле ввода — textbox. React Testing Library позволяет искать элементы по их ролям с помощью метода getByRole.

    Пример:

    const button = screen.getByRole('button');
expect(button).toBeInTheDocument();

    Также можно проверить, что кнопка является активной:

    expect(button).toBeEnabled();

  2. Атрибуты aria Атрибуты ARIA (Accessible Rich Internet Applications) предназначены для улучшения доступности веб-приложений. В React можно использовать различные атрибуты ARIA, такие как aria-label, aria-hidden, aria-live, чтобы указать экранным читалкам дополнительные инструкции о роли и состоянии элемента.

    Пример:

    const closeButton = screen.getByRole('button', { name: /закрыть/i });
expect(closeButton).toHaveAttribute('aria-label', 'Закрыть окно');

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

  3. Фокусировка элементов Правильная работа с фокусом крайне важна для доступности, особенно для пользователей, которые управляют приложением с клавиатуры. React Testing Library предоставляет методы для проверки фокуса элементов.

    Пример:

    const input = screen.getByLabelText(/имя/i);
input.focus();
expect(input).toHaveFocus();

    В этом примере проверяется, что поле ввода с меткой “Имя” получает фокус.

Асинхронные элементы и доступность

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

Пример асинхронной загрузки с доступностью:

const asyncButton = await screen.findByRole('button', { name: /загрузить/i });
expect(asyncButton).toBeInTheDocument();

Если элемент загружается с задержкой, важно использовать findBy или waitFor, чтобы убедиться, что элемент станет доступным для взаимодействия.

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

Для более глубокой проверки доступности можно использовать дополнительные инструменты, такие как axe-core и jest-axe, которые выполняют автоматические проверки доступности в процессе тестирования. Это позволяет выявить потенциальные проблемы с доступностью, которые могут не быть очевидны на первый взгляд.

Пример использования jest-axe для проверки доступности:

import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

test('проверка доступности', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Этот тест выполняет автоматическую проверку доступности с помощью axe и убеждается, что компонент не нарушает стандарты доступности.

Проверка состояний доступности

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

Пример проверки состояния кнопки:

const button = screen.getByRole('button', { name: /отправить/i });
expect(button).toBeEnabled();

fireEvent.click(button);
expect(button).toBeDisabled();

Здесь проверяется, что кнопка сначала активна, а после клика становится неактивной.

Итог

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

Оглавление