Моки и стабы для aria-query

aria-query — это библиотека для работы с спецификациями ARIA в среде JavaScript. Она предоставляет структурированные данные о ролях, свойствах и состояниях ARIA, что позволяет создавать тесты, валидацию разметки и моки для компонентов интерфейса. Основные объекты библиотеки:

  • roles — карта всех стандартных ролей ARIA с их атрибутами и поддержкой.
  • elementRoles — отображение HTML-элементов на возможные ARIA-роли.
  • aria — словарь всех ARIA-атрибутов и их допустимых значений.

Каждый объект является коллекцией immutable-структур данных, оптимизированной для быстрой проверки соответствия ролей и атрибутов.

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

Объект roles представлен как Map<string, RoleDefinition>, где ключ — имя роли, а значение — объект с полями:

  • name — строка с названием роли.
  • requiredProps — массив обязательных ARIA-атрибутов для роли.
  • props — все доступные свойства роли.
  • abstract — булево значение, указывающее, является ли роль абстрактной (не используется напрямую в DOM).
  • superClass — массив родительских ролей, наследующих свойства.

Пример получения информации о роли:

import { roles } from 'aria-query';

const buttonRole = roles.get('button');
console.log(buttonRole.requiredProps); // []
console.log(buttonRole.props.has('aria-pressed')); // true

Использование roles позволяет строить валидацию соответствия ролей и атрибутов без обращения к DOM. Это особенно полезно для unit-тестов и генерации mock-компонентов.

Моки и стабы для тестирования

Основная задача моков — имитировать структуры данных ARIA без необходимости создавать реальный DOM. С aria-query это делается через:

  1. Стабы ролей: создаются объекты, содержащие минимальный набор свойств роли.

    import { roles } from 'aria-query';

const stubButton = {
  role: 'button',
  'aria-pressed': false
};

// Проверка через aria-query
const roleDef = roles.get(stubButton.role);
const isValid = Object.keys(stubButton).every(attr =>
  roleDef.props.has(attr)
);
console.log(isValid); // true

  2. Стабы атрибутов: имитируют отдельные ARIA-атрибуты. Это полезно при тестировании компонентов, где интерес представляет только поведение определённых свойств.

  3. Моки HTML-элементов: с помощью elementRoles можно определить, какие роли допустимы для конкретного HTML-тега. Это позволяет создавать мок-элементы с правильными комбинациями ролей и тегов.

import { elementRoles } from 'aria-query';

const divRoles = elementRoles.get('div');
console.log([...divRoles]); // Set { 'button', 'region', ... }

Моки создаются как обычные объекты JavaScript с нужными свойствами и могут быть подставлены в тестовые функции вместо реального DOM-элемента.

Генерация моков на основе спецификации

aria-query позволяет автоматически генерировать тестовые данные:

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

Пример генерации мока для кнопки:

import { roles } from 'aria-query';

function createRoleMock(roleName) {
  const roleDef = roles.get(roleName);
  const mock = { role: roleName };
  roleDef.requiredProps.forEach(prop => {
    mock[prop] = null; // или дефолтное значение
  });
  return mock;
}

const buttonMock = createRoleMock('button');
console.log(buttonMock); // { role: 'button' }

Такой подход позволяет избегать ручного определения атрибутов и минимизирует ошибки при тестировании ARIA-компонентов.

Валидация моков и стаба

Для тестов важно проверять корректность созданных моков. С aria-query это делается через сопоставление:

  1. Роль элемента с допустимыми ролями для тега (через elementRoles).
  2. Атрибуты элемента с доступными для роли свойствами (через roles).

Пример функции проверки мока:

function validateMock(elementTag, mock) {
  const allowedRoles = elementRoles.get(elementTag);
  if (!allowedRoles.has(mock.role)) return false;

  const roleDef = roles.get(mock.role);
  return Object.keys(mock).every(attr => attr === 'role' || roleDef.props.has(attr));
}

console.log(validateMock('div', buttonMock)); // true

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

Преимущества использования aria-query для моков

  • Снижение зависимости от DOM: мок-объекты не требуют рендеринга элементов.
  • Стабильность тестов: структура ролей и атрибутов основана на официальной спецификации.
  • Упрощение генерации данных: автоматическое создание минимальных объектов с нужными свойствами.
  • Интеграция с тестовыми фреймворками: легко использовать вместе с Jest, Mocha или Cypress.

Использование aria-query для моков и стабов делает тестирование доступности и компонентов с ARIA предсказуемым, структурированным и соответствующим стандартам спецификации.

Оглавление