Использование в юнит-тестах

Библиотека aria-query предназначена для работы с ARIA-ролями, состояниями и свойствами в контексте веб-разработки и тестирования. Она предоставляет структурированные данные о допустимых ролях, их свойствах и отношениях между ними. Основными модулями являются:

  • roles – информация о доступных ролях, их свойствах и обязательных атрибутах.
  • elementRoles – сопоставление HTML-элементов с ARIA-ролями.
  • properties – описание возможных ARIA-свойств и их значений.

Эти структуры данных используются для проверки правильного применения ARIA в интерфейсах и для построения динамических валидаторов в тестах.

Работа с ролями

Каждая роль представлена объектом с ключевыми полями:

  • name – уникальное имя роли (button, checkbox, dialog).
  • abstract – флаг, определяющий, является ли роль абстрактной и не может применяться напрямую.
  • requiredProps – список обязательных ARIA-свойств.
  • superClass – наследование от других ролей, формирующее иерархию.
  • props – все свойства, которые можно назначать элементу с данной ролью.

Пример извлечения информации о роли button:

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(buttonRole.requiredProps); // []
console.log(buttonRole.props); // Set { 'aria-pressed', 'aria-expanded', ... }

Таким образом можно динамически проверять соответствие элементов заявленным требованиям ARIA.

Сопоставление элементов с ролями

elementRoles позволяет определить, какие роли допустимы для конкретного HTML-элемента, и наоборот, какие элементы могут принимать заданную роль. Структура объекта следующая:

  • Ключ – имя HTML-элемента (div, button, a).
  • Значение – множество ролей, применимых к этому элементу.

Пример проверки, может ли элемент <span> быть кнопкой:

import { elementRoles } from 'aria-query';

const spanRoles = elementRoles.get('span');
console.log(spanRoles.has('button')); // true или false

Это особенно полезно при юнит-тестировании, когда нужно убедиться, что компоненты используют корректные ARIA-атрибуты в зависимости от их HTML-тегов.

Проверка ARIA-свойств

Каждая роль имеет набор свойств (props), которые можно использовать для валидации компонентов:

import { roles } from 'aria-query';

const checkboxRole = roles.get('checkbox');

if (checkboxRole.props.has('aria-checked')) {
  console.log('Элемент с ролью checkbox поддерживает aria-checked');
}

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

Применение в юнит-тестах

  1. Проверка соответствия ролей HTML-элементам
import { elementRoles } from 'aria-query';
import { render } from '@testing-library/react';

test('span не должен иметь недопустимую роль', () => {
  const { container } = render(<span role="menuitem">Item</span>);
  const spanRoles = elementRoles.get('span');
  const assignedRole = container.querySelector('span').getAttribute('role');
  
  expect(spanRoles.has(assignedRole)).toBe(true);
});
  1. Валидация обязательных ARIA-свойств
import { roles } from 'aria-query';

test('checkbox должен иметь aria-checked', () => {
  const checkbox = document.createElement('div');
  checkbox.setAttribute('role', 'checkbox');
  checkbox.setAttribute('aria-checked', 'true');
  
  const roleInfo = roles.get(checkbox.getAttribute('role'));
  roleInfo.requiredProps.forEach(prop => {
    expect(checkbox.hasAttribute(prop)).toBe(true);
  });
});
  1. Автоматическая проверка компонентов библиотеки UI

Использование roles и elementRoles позволяет создавать универсальные функции для тестирования всех компонентов:

function validateComponentRole(element) {
  const role = element.getAttribute('role');
  if (!role) return true;

  const roleData = roles.get(role);
  const tagName = element.tagName.toLowerCase();
  const validRoles = elementRoles.get(tagName);

  return validRoles.has(role) && [...roleData.requiredProps].every(prop => element.hasAttribute(prop));
}

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

Совмещение с React Testing Library

При работе с компонентами React aria-query помогает:

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

Пример:

import { render } from '@testing-library/react';
import { roles } from 'aria-query';
import Checkbox from './Checkbox';

test('Checkbox компонент корректно обновляет aria-checked', () => {
  const { getByRole } = render(<Checkbox checked={true} />);
  const checkbox = getByRole('checkbox');
  
  expect(checkbox.getAttribute('aria-checked')).toBe('true');
});

Выводы по использованию в тестах

Использование aria-query в юнит-тестах позволяет:

  • Централизованно хранить данные о ролях и свойствах.
  • Снижать вероятность ошибок доступности при разработке компонентов.
  • Автоматизировать проверки соответствия элементов стандартам ARIA.
  • Интегрировать с любыми библиотеками тестирования, включая React Testing Library и Jest.

Библиотека обеспечивает высокий уровень уверенности в корректности доступности интерфейсов за счет строгой типизации ролей и свойств, что делает её незаменимым инструментом при разработке современных веб-компонентов.

Оглавление