Мокирование зависимостей

В контексте разработки на Lit, мокирование зависимостей играет ключевую роль при тестировании компонентов. Компоненты Lit часто взаимодействуют с внешними сервисами, хранилищами данных или другими компонентами через свойства и события. Мокирование позволяет изолировать тестируемый компонент, заменяя реальные зависимости управляемыми имитациями.

Работа с зависимостями через свойства

В Lit компоненты обычно получают внешние зависимости через свойства. Например:

import { LitElement, html, css } from 'lit';

class UserProfile extends LitElement {
  static properties = {
    userService: { type: Object }
  };

  async connectedCallback() {
    super.connectedCallback();
    this.user = await this.userService.getUser();
  }

  render() {
    return html`
${this.user?.name}
`;
  }
}

customElements.define('user-profile', UserProfile);

Здесь userService является внешней зависимостью. Для тестирования без обращения к реальному сервису можно создать мок:

const mockUserService = {
  getUser: async () => ({ name: 'Тестовый пользователь' })
};

const element = document.createElement('user-profile');
element.userService = mockUserService;
document.body.appendChild(element);

Использование моков позволяет контролировать возвращаемые данные и проверять рендеринг компонента в разных сценариях.

Мокирование зависимостей через события

Lit поддерживает событийную коммуникацию между компонентами. Мокирование можно применить к обработчикам событий. Например:

class SubmitButton extends LitElement {
  handleClick() {
    this.dispatchEvent(new CustomEvent('submit', { detail: { status: 'ok' } }));
  }

  render() {
    return html``;
  }
}

customElements.define('submit-button', SubmitButton);

В тестах:

const element = document.createElement('submit-button');
element.addEventListener('submit', (event) => {
  console.log('Событие с моком:', event.detail);
});
document.body.appendChild(element);

// Симуляция клика
element.shadowRoot.querySelector('button').click();

Такой подход позволяет проверять взаимодействие компонентов без реальной реализации логики обработчиков.

Интеграция с Jest и sinon

Для сложных сценариев используется Jest или sinon для создания моков и шпионов:

import { jest } from '@jest/globals';

const mockService = {
  getUser: jest.fn().mockResolvedValue({ name: 'Иван' })
};

const element = document.createElement('user-profile');
element.userService = mockService;
document.body.appendChild(element);

// Проверка вызова
expect(mockService.getUser).toHaveBeenCalled();

Sinon позволяет контролировать вызовы и возвращаемые значения более гибко:

import sinon from 'sinon';

const mockService = { getUser: sinon.stub().resolves({ name: 'Анна' }) };

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

Мокирование сложных зависимостей

Для компонентов, которые используют несколько сервисов или библиотек, рекомендуется создавать фейковые контейнеры зависимостей. Например:

const mockDependencies = {
  userService: { getUser: async () => ({ name: 'Тест' }) },
  authService: { isAuthenticated: () => true },
  apiService: { fetchData: async () => [] }
};

const element = document.createElement('dashboard-component');
Object.assign(element, mockDependencies);
document.body.appendChild(element);

Такой подход позволяет тестировать компонент изолированно, минимизируя влияние внешних сервисов.

Тестирование рендеринга с моками

Lit предоставляет мощные возможности рендеринга через shadow DOM, что позволяет проверять DOM после применения моков:

const element = document.createElement('user-profile');
element.userService = { getUser: async () => ({ name: 'Петр' }) };
document.body.appendChild(element);

await element.updateComplete;

console.assert(element.shadowRoot.innerHTML.includes('Петр'), 'Рендеринг имени пользователя');

Асинхронные операции с моками требуют ожидания updateComplete, чтобы корректно проверить DOM после обновления.

Практика инъекции моков через DI-подход

Lit не имеет встроенного механизма dependency injection, но можно использовать паттерн инъекции через конструктор или свойства:

class AnalyticsButton extends LitElement {
  constructor(analyticsService) {
    super();
    this.analyticsService = analyticsService;
  }

  handleClick() {
    this.analyticsService.track('click');
  }

  render() {
    return html``;
  }
}

const mockAnalytics = { track: jest.fn() };
const element = new AnalyticsButton(mockAnalytics);

Такой подход упрощает замену сервисов на мок-объекты в тестах и повышает модульность компонентов.

Оглавление