Тестирование событий

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

Типы событий

Shepherd.js предоставляет события на уровне тура и на уровне отдельных шагов:

На уровне тура:

  • start — срабатывает при запуске тура.
  • complete — возникает при успешном завершении тура.
  • cancel — срабатывает при принудительной отмене тура.
  • show — срабатывает при отображении любого шага.
  • hide — срабатывает при скрытии шага.
  • inactive — возникает при деактивации тура (например, пользователь покинул страницу).

На уровне шага:

  • show — шаг стал видимым.
  • hide — шаг скрыт.
  • complete — шаг успешно пройден.
  • cancel — шаг отменён.
  • active — шаг активирован.

Подключение слушателей событий

Shepherd.js использует паттерн EventEmitter, что позволяет подписываться на события через метод on. Пример подключения событий к туру:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

tour.on('start', () => {
  console.log('Тур запущен');
});

tour.on('complete', () => {
  console.log('Тур завершён');
});

tour.on('cancel', () => {
  console.log('Тур отменён');
});

Для шагов события подключаются аналогично:

const step = tour.addStep({
  id: 'intro',
  text: 'Добро пожаловать!',
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

step.on('show', () => console.log('Шаг показан'));
step.on('hide', () => console.log('Шаг скрыт'));

Проверка последовательности событий

При тестировании важно убедиться, что события срабатывают в правильной последовательности. Обычно используют автоматизированные тесты с фреймворками типа Jest или Cypress.

Пример проверки последовательности событий в Jest:

test('Тур вызывает события в правильной последовательности', () => {
  const events = [];
  
  tour.on('start', () => events.push('start'));
  tour.on('show', () => events.push('show'));
  tour.on('complete', () => events.push('complete'));
  
  tour.start();
  tour.next(); // Переход к следующему шагу
  tour.complete();
  
  expect(events).toEqual(['start', 'show', 'complete']);
});

Тестирование пользовательских действий

Shepherd.js позволяет реагировать на нажатия кнопок и другие действия пользователя через методы action. Для тестирования можно эмулировать клики и проверять срабатывание событий:

const step = tour.addStep({
  id: 'action-step',
  text: 'Нажмите кнопку',
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

const button = document.querySelector('.shepherd-button');
button.click();

step.on('hide', () => console.log('Шаг скрыт после клика'));

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

Асинхронные события и задержки

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

tour.on('show', async () => {
  await fetchData();
  console.log('Данные загружены, шаг показан');
});

При тестировании используют async/await или таймеры Jest (jest.useFakeTimers) для контроля времени и последовательности.

Валидация пользовательских хэндлеров

Shepherd.js позволяет добавлять пользовательские обработчики событий. Для тестирования важно убедиться, что они вызываются корректно и не нарушают логику тура:

step.on('show', () => {
  customFunction();
});

function customFunction() {
  console.log('Выполняется кастомная логика');
}

В автоматизированных тестах проверяют вызов функции через jest.fn():

const spy = jest.fn();
step.on('show', spy);
tour.start();
expect(spy).toHaveBeenCalled();

Логирование и отладка

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

tour.steps.forEach(step => {
  step.on('show', () => console.log(`Показан шаг: ${step.id}`));
  step.on('hide', () => console.log(`Скрыт шаг: ${step.id}`));
});

Советы по организации тестов

  • Разделять тесты на проверку отдельных шагов и всего тура.
  • Использовать mock-функции для отслеживания вызовов обработчиков.
  • Эмулировать пользовательские действия (клики, закрытие модальных окон) для проверки корректного срабатывания событий.
  • Проверять как стандартные события Shepherd (show, hide, complete), так и пользовательские обработчики.

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

Оглавление