Моки и стабы

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

Основная единица в Shepherd — шаг (step), который описывает, какой элемент страницы нужно выделить, что показать и как реагировать на действия пользователя.

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true
  }
});

tour.addStep({
  id: 'example-step',
  text: 'Это пример шага.',
  attachTo: { element: '#button', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

В этом примере создаётся тур с одним шагом, который привязан к элементу #button. Параметр scrollTo автоматически прокручивает страницу к элементу, если он не виден.

Конфигурация шагов

Каждый шаг может содержать следующие ключевые свойства:

  • id — уникальный идентификатор шага.
  • text — текст подсказки. Можно использовать HTML.
  • attachTo — объект с полями element и on, определяющий привязку к DOM-элементу.
  • buttons — массив кнопок с действиями (action) типа tour.next(), tour.back() или пользовательскими функциями.
  • classes — CSS-классы для стилизации.
  • when — объект для обработки событий шага (show, hide, complete).
tour.addStep({
  id: 'event-step',
  text: 'Шаг с событиями.',
  attachTo: { element: '#input', on: 'right' },
  when: {
    show: () => console.log('Шаг показан'),
    hide: () => console.log('Шаг скрыт')
  },
  buttons: [
    { text: 'Назад', action: tour.back },
    { text: 'Далее', action: tour.next }
  ]
});

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

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

Создание стаба для шагов

Stub-шаг может быть объектом с методами show, hide и destroy, которые имитируют поведение реального шага:

function createStepStub() {
  return {
    show: jest.fn(),
    hide: jest.fn(),
    destroy: jest.fn(),
    on: jest.fn()
  };
}

const stepStub = createStepStub();

Здесь используется jest.fn(), чтобы отслеживать вызовы методов. В тестах можно проверять, что show() был вызван при переходе к шагу:

tour.addStep(stepStub);
tour.start();
expect(stepStub.show).toHaveBeenCalled();

Моки для объекта Tour

Для тестирования логики тура удобно создать мок-тур:

function createTourStub() {
  return {
    addStep: jest.fn(),
    next: jest.fn(),
    back: jest.fn(),
    start: jest.fn(),
    cancel: jest.fn(),
  };
}

const tourStub = createTourStub();
tourStub.addStep(stepStub);
tourStub.start();
expect(tourStub.start).toHaveBeenCalled();

С помощью такого подхода можно проверять:

  • последовательность шагов;
  • правильность вызова действий кнопок;
  • обработку событий (show, hide, complete).

Интеграция с Jest и тестовыми фреймворками

Shepherd.js полностью поддерживает тестирование через Jest или аналогичные инструменты. Примеры тестов включают проверку:

  • порядок вызова методов шагов;
  • правильность передачи текста и привязки к элементам;
  • работу пользовательских колбеков.
test('Step shows on tour start', () => {
  const step = createStepStub();
  const tour = createTourStub();
  tour.addStep(step);

  tour.start();
  
  expect(step.show).toHaveBeenCalledTimes(1);
});

Эмуляция событий пользователя

Для более сложных тестов можно создавать стабы кнопок и событий:

const nextButton = {
  action: jest.fn()
};

stepStub.buttons = [nextButton];
stepStub.show();
nextButton.action();

expect(nextButton.action).toHaveBeenCalled();

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

Преимущества использования моков и стабов

  • Независимость от DOM, что ускоряет тесты;
  • Возможность изолированного тестирования логики туров;
  • Легкая проверка колбеков и событий;
  • Возможность тестировать комбинации шагов и сценарии ошибок.

Практические советы

  • Всегда стабывать методы show, hide и destroy для шагов;
  • Для туров использовать моки с методами addStep, next, back и start;
  • Проверять последовательность вызовов и правильность колбеков;
  • Не тестировать визуальное отображение, а сосредотачиваться на логике и событиях.

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

Оглавление