Юнит-тестирование компонентов

Юнит-тестирование в контексте Slim.js предполагает проверку отдельных компонентов, их методов и реактивного поведения без необходимости рендеринга всего приложения. Основной целью является изоляция компонента и контроль его логики, свойств и событий.

Настройка окружения для тестирования

Для тестирования компонентов Slim.js обычно используются стандартные инструменты Jav * aScript: Jest, Mocha, Chai, а для работы с DOM — jsdom. В Slim.js компоненты создаются как классы с наследованием от Slim, что позволяет напрямую тестировать методы и свойства экземпляров.

Пример базовой настройки:

import { Slim } from 'slim-js';
import { JSDOM } from 'jsdom';

const dom = new JSDOM(`<!DOCTYPE html><body></body>`);
global.document = dom.window.document;
global.window = dom.window;

Это позволяет создавать компоненты и работать с их DOM в Node.js без браузера.

Создание экземпляра компонента

Для тестирования важно уметь создавать компонент изолированно:

class MyComponent extends Slim {
  constructor() {
    super();
    this.message = 'Hello';
  }

  updateMessage(newMessage) {
    this.message = newMessage;
  }
}

const instance = new MyComponent();
instance.connectedCallback(); // Инициализация реактивности

Методы компонента можно вызывать напрямую, а реактивные свойства проверять через геттеры и сеттеры.

Проверка реактивных свойств

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

instance.message = 'World';
console.assert(instance.message === 'World', 'Свойство message обновлено корректно');

Для проверки обновления DOM можно использовать innerHTML или textContent:

instance.render = function() {
  this.innerHTML = `<span>${this.message}</span>`;
};
instance.updateMessage('Slim.js');
console.assert(instance.innerHTML.includes('Slim.js'), 'DOM обновился корректно');

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

Методы компонентов Slim.js должны быть покрыты тестами на корректность выполнения и побочные эффекты. Если компонент генерирует события, их можно отследить с помощью addEventListener.

instance.addEventListener('custom-event', e => {
  console.assert(e.detail === 42, 'Событие передает правильные данные');
});

instance.dispatchEvent(new CustomEvent('custom-event', { detail: 42 }));

Организация тестов

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

  • Свойства и реактивность — проверка геттеров/сеттеров и реактивного обновления DOM.
  • Методы — тестирование бизнес-логики.
  • События — проверка генерации и обработки пользовательских событий.
  • Интеграционные проверки — минимальные сценарии взаимодействия с другими компонентами без полной загрузки приложения.

Пример структуры теста с Jest:

describe('MyComponent', () => {
  let instance;

  beforeEach(() => {
    instance = new MyComponent();
    instance.connectedCallback();
  });

  test('Инициализация свойства', () => {
    expect(instance.message).toBe('Hello');
  });

  test('Обновление свойства', () => {
    instance.updateMessage('Test');
    expect(instance.message).toBe('Test');
  });

  test('Обновление DOM', () => {
    instance.render();
    expect(instance.innerHTML).toContain('Hello');
  });

  test('Событие custom-event', () => {
    const handler = jest.fn();
    instance.addEventListener('custom-event', handler);
    instance.dispatchEvent(new CustomEvent('custom-event', { detail: 100 }));
    expect(handler).toHaveBeenCalledWith(expect.objectContaining({ detail: 100 }));
  });
});

Изоляция компонентов

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

  • Создание нового экземпляра для каждого теста (beforeEach).
  • Мокирование зависимостей (например, внешних сервисов или других компонентов).
  • Минимальное взаимодействие с DOM, используя jsdom или контейнерные элементы.

Советы по тестированию Slim.js компонентов

  • Проверка реактивности ключевых свойств должна быть первостепенной, так как она обеспечивает правильное обновление DOM.
  • Методы должны тестироваться как чистые функции, если это возможно, без привязки к DOM.
  • События и коллбэки проверяются через слушатели и jest.fn() или аналоги.
  • Для сложных компонентов создаются отдельные тестовые контейнеры в DOM, чтобы избежать влияния других тестов.

Юнит-тестирование компонентов Slim.js позволяет убедиться, что логика и реактивность работают независимо от остальной части приложения, минимизируя ошибки при интеграции и масштабировании интерфейсов.

Оглавление