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

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

Привязка событий

События в Slim.js привязываются через атрибуты компонента, используя синтаксис on:event. Например:

class MyComponent extends Slim {
  constructor() {
    super();
    this.message = 'Нажми кнопку';
  }

  handleClick() {
    this.message = 'Кнопка была нажата';
  }

  get template() {
    return `
      
      
{{message}}

    `;
  }
}

customElements.define('my-component', MyComponent);

Ключевой момент: метод, указанный в on:event, вызывается с контекстом компонента, что позволяет безопасно изменять свойства через this.

Пользовательские события

Slim.js поддерживает генерацию собственных событий через метод dispatch. Пример:

this.dispatch('custom-event', { detail: { value: 42 } });

Эти события можно слушать как внутри компонента, так и извне:

Метод handleCustom получит объект события с доступом к event.detail.

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

Тестирование событий в Slim.js можно проводить несколькими способами:

  1. Подключение к DOM и проверка реакции. Создаётся экземпляр компонента, событие инициируется через метод dispatchEvent, а затем проверяется изменение состояния компонента.
const element = document.createElement('my-component');
document.body.appendChild(element);

element.querySelector('button').click();

console.assert(element.message === 'Кнопка была нажата', 'Сообщение обновлено после клика');
  1. Тестирование пользовательских событий. Для проверки, что событие было вызвано с правильными данными, используется слушатель:
let eventReceived = null;

element.addEventListener('custom-event', (e) => {
  eventReceived = e.detail.value;
});

element.dispatch('custom-event', { detail: { value: 42 } });

console.assert(eventReceived === 42, 'Пользовательское событие сработало корректно');
  1. Мокирование и шпионы. При использовании Jest или Mocha удобно создавать функции-шпионы для проверки вызова обработчиков:
const spy = jest.fn();
element.addEventListener('custom-event', spy);

element.dispatch('custom-event', { detail: { value: 99 } });

expect(spy).toHaveBeenCalled();
expect(spy.mock.calls[0][0].detail.value).toBe(99);

Важные детали

  • Пропуск обновлений реактивных свойств: иногда событие инициируется до обновления DOM. В Slim.js можно использовать this.update() для синхронизации шаблона перед тестом.
  • Отмена событий: event.stopPropagation() и event.preventDefault() работают стандартным образом, их влияние можно тестировать через имитацию взаимодействий.
  • Асинхронные события: Slim.js поддерживает асинхронные методы в качестве обработчиков. Для их тестирования нужно использовать async/await или промисы.
async handleAsync() {
  await fetch('/api/data');
  this.dataLoaded = true;
}

// В тесте
await element.handleAsync();
console.assert(element.dataLoaded, 'Асинхронное событие завершено');

События и реактивность

События тесно связаны с реактивными свойствами Slim.js. Любое изменение свойства через событие автоматически обновляет DOM в компоненте. Это упрощает тестирование: проверка события обычно сводится к проверке состояния свойств.

Практические советы для тестирования

  • Для кнопок и простых событий достаточно имитации клика через .click().
  • Для пользовательских событий лучше использовать dispatch с контролем detail.
  • Асинхронные операции требуют ожидания обновления состояния компонента.
  • Всегда проверять состояние DOM и свойства, чтобы убедиться, что событие полностью обработано.
Оглавление