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

Driver.js позволяет создавать интерактивные пошаговые гиды по интерфейсу веб-приложения. Каждое действие пользователя или переход между шагами сопровождается событиями, которые можно использовать для тестирования или интеграции с логикой приложения. События делятся на несколько категорий: глобальные события, события отдельных шагов и пользовательские обработчики.

Глобальные события

Глобальные события относятся ко всей последовательности шагов. Основные из них:

  • start — срабатывает при запуске Driver.js (driver.start()).
  • stop — срабатывает при завершении гидa (driver.stop()).
  • reset — срабатывает при сбросе текущей последовательности шагов (driver.reset()).
  • next — срабатывает при переходе к следующему шагу.
  • previous — срабатывает при возврате к предыдущему шагу.

Эти события регистрируются через метод on объекта Driver:

const driver = new Driver();

driver.on('start', () => {
    console.log('Гид запущен');
});

driver.on('next', step => {
    console.log('Переход к шагу:', step);
});

Параметр step содержит объект текущего шага с такими ключами, как element, popover, description и position.

События отдельных шагов

Каждый шаг можно конфигурировать с собственными коллбэками:

  • onNext — вызывается при переходе к следующему шагу после данного.
  • onPrevious — вызывается при возврате к предыдущему шагу.
  • onShow — срабатывает при показе шага.
  • onHide — срабатывает при скрытии шага.

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

driver.defineSteps([
    {
        element: '#button',
        popover: {
            title: 'Кнопка',
            description: 'Нажмите на кнопку, чтобы продолжить',
            position: 'bottom'
        },
        onShow: () => console.log('Показан шаг с кнопкой'),
        onNext: () => console.log('Переход с шага кнопки')
    },
    {
        element: '#input',
        popover: {
            title: 'Поле ввода',
            description: 'Введите текст сюда',
            position: 'top'
        },
        onShow: () => console.log('Показан шаг с полем ввода')
    }
]);

Использование событий шагов позволяет отслеживать пользовательские действия и тестировать их корректность. Это особенно важно при автоматизированном тестировании UI.

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

Для проверки событий в Driver.js используют подход с имитацией действий пользователя:

  1. Программный запуск и переход между шагами Метод driver.start() инициирует старт гидa. Для перехода к следующему шагу используют driver.next(), для возврата — driver.previous(). В тестах это позволяет эмулировать последовательность действий и проверять вызовы обработчиков.
driver.start();
driver.next(); // проверка события next
driver.previous(); // проверка события previous
  1. Проверка событий шагов Коллбэки шагов (onShow, onNext) можно обернуть в функции с утверждениями (assert) для тестирования:
let showCalled = false;

const steps = [
    {
        element: '#button',
        popover: { title: 'Button', description: '', position: 'bottom' },
        onShow: () => { showCalled = true; }
    }
];

const driverTest = new Driver({ steps });
driverTest.start();

console.assert(showCalled === true, 'Событие onShow не сработало');
  1. Отслеживание глобальных событий Для глобальных событий применяют аналогичный подход. Тест проверяет, что событие срабатывает при соответствующем действии:
let started = false;
driver.on('start', () => started = true);
driver.start();
console.assert(started === true, 'Глобальное событие start не сработало');
  1. Тайминги и асинхронные события Если шаг содержит анимации или задержки, коллбэки можно проверять через промисы:
driver.defineSteps([{
    element: '#animated',
    popover: { title: '', description: '', position: 'top' },
    onShow: () => new Promise(resolve => setTimeout(() => {
        console.log('Шаг отображен после анимации');
        resolve();
    }, 500))
}]);

Асинхронное тестирование обеспечивает корректность отображения элементов и последовательности шагов.

Логирование и отладка событий

Для комплексного тестирования важно логировать события:

  • Встроенный console.log для быстрой отладки.
  • Сбор статистики вызовов обработчиков (onShow, onNext) в объект или массив.
  • Проверка последовательности срабатывания глобальных и локальных событий.

Пример сбора логов:

const eventLog = [];

driver.on('start', () => eventLog.push('start'));
driver.on('next', step => eventLog.push(`next: ${step.element.id}`));

driver.start();
driver.next();

console.table(eventLog);

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

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

Driver.js легко интегрируется с Jest, Mocha или Cypress:

  • В Jest используют моки и шпионы для проверки вызовов коллбэков.
  • В Cypress можно симулировать клики и переходы между шагами и проверять, что шаги отображаются корректно.
  • Для асинхронных действий применяют await driver.start() и await driver.next() в сочетании с cy.wrap или expect.

Практические рекомендации

  • Всегда регистрировать события для шагов, особенно onShow и onNext, чтобы убедиться, что гид отображается корректно.
  • Для сложных интерфейсов проверять глобальные события, чтобы контролировать старт, остановку и сброс гидa.
  • Использовать асинхронные коллбэки при наличии анимаций или задержек, чтобы тесты не выдавали ложные срабатывания.
  • В логах сохранять идентификаторы элементов шагов, чтобы быстро находить ошибки последовательности.

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

Оглавление