Снэпшот-тестирование

Снэпшот-тестирование представляет собой метод проверки корректности визуального и структурного состояния веб-компонентов, создаваемых с помощью SkateJS. Основная цель — фиксировать «снимок» DOM-компонента в определённый момент и сравнивать его с эталонной версией при последующих изменениях кода. Это позволяет быстро выявлять нежелательные изменения в разметке, стилях или поведении компонентов.

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

Для снэпшот-тестирования компонентов SkateJS часто используют Jest в связке с инструментами для рендеринга виртуального DOM, например @testing-library/dom или @web/test-runner. Основные шаги настройки:

  1. Установка зависимостей:
npm install --save-dev jest @testing-library/dom @testing-library/jest-dom
  1. Конфигурация Jest: В package.json или отдельном файле jest.config.js задаётся среда jsdom для имитации браузера:
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};
  1. Подключение SkateJS компонентов: Компоненты должны быть импортированы и зарегистрированы через customElements.define или функцию define() из SkateJS, чтобы тестовый рендеринг корректно их обрабатывал.

Создание и регистрация компонента

Пример простого компонента с SkateJS:

import { define, component, h } from 'skatejs';

class MyButton extends component() {
  static get props() {
    return {
      label: String
    };
  }

  render() {
    return h('button', null, this.label);
  }
}

define('my-button', MyButton);

Такой компонент готов для снэпшот-тестирования: DOM-структура предсказуема, легко фиксируется и сравнивается.

Написание снэпшот-теста

Снэпшот-тест состоит из трёх этапов:

  1. Рендеринг компонента
  2. Фиксация состояния DOM
  3. Сравнение с эталоном

Пример теста с Jest:

import { render } from '@testing-library/dom';
import './MyButton';

test('MyButton snapshot', () => {
  const container = document.createElement('div');
  document.body.appendChild(container);

  const button = document.createElement('my-button');
  button.label = 'Click me';
  container.appendChild(button);

  expect(container.innerHTML).toMatchSnapshot();
});

В этом примере:

  • container.innerHTML захватывает текущую разметку компонента.
  • toMatchSnapshot() сравнивает её с ранее сохранённым снэпшотом.
  • Если структура изменилась, тест падает, сигнализируя о возможных регрессионных ошибках.

Поддержка динамического состояния

Снэпшот-тесты не ограничиваются статическим рендерингом. SkateJS поддерживает реактивные свойства, что позволяет тестировать динамическое поведение:

test('MyButton updates label', () => {
  const button = document.createElement('my-button');
  button.label = 'Start';
  document.body.appendChild(button);

  expect(button).toMatchSnapshot();

  button.label = 'Stop';
  expect(button).toMatchSnapshot();
});

Таким образом фиксируются изменения DOM при обновлении свойств компонента.

Организация тестовой структуры

Для крупных проектов рекомендуется:

  • Разделять тесты по компонентам, создавая отдельные файлы ComponentName.test.js.
  • Хранить снэпшоты в папке __snapshots__, автоматически создаваемой Jest.
  • Использовать утилиты для очистки DOM после каждого теста:
afterEach(() => {
  document.body.innerHTML = '';
});

Это предотвращает влияние предыдущих тестов на последующие проверки.

Работа с Shadow DOM

Компоненты SkateJS часто используют Shadow DOM. Для снэпшот-тестирования важно правильно захватывать его содержимое:

test('MyButton shadow DOM', () => {
  const button = document.createElement('my-button');
  document.body.appendChild(button);

  expect(button.shadowRoot.innerHTML).toMatchSnapshot();
});

Такой подход позволяет проверять внутреннюю структуру компонента без вмешательства в глобальный DOM.

Рекомендации по поддержке снэпшотов

  • Регулярно пересматривать снэпшоты при обновлении компонентов.
  • Использовать читаемые имена файлов снэпшотов, отражающие состояние или сценарий.
  • Не игнорировать падения тестов: они чаще всего сигнализируют о непреднамеренных изменениях в UI.
  • Комбинировать снэпшот-тесты с unit-тестами методов компонента для полной проверки функциональности.

Интеграция с CI/CD

Снэпшот-тесты удобно интегрируются в pipeline CI/CD:

  • Каждый pull request запускает проверку на соответствие эталонным снэпшотам.
  • Несовпадение автоматически выделяется, предотвращая случайное нарушение визуальной целостности компонентов.
  • В случае легитимного изменения компонента можно обновить снэпшоты командой:
jest --updateSnapshot

Снэпшот-тестирование в SkateJS обеспечивает надёжную проверку визуальной и структурной целостности веб-компонентов, особенно в сочетании с Shadow DOM и реактивными свойствами. Оно помогает поддерживать стабильность интерфейсов и упрощает работу с крупными проектами.

Оглавление