Визуальное тестирование компонентов

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

Выбор инструментов

Для визуального тестирования компонентов Lit используются специализированные библиотеки и фреймворки:

  • @web/test-runner — современный тест-раннер, интегрирующийся с Lit и поддерживающий работу с браузерами.
  • Testing Library для Web Components — упрощает поиск элементов и взаимодействие с DOM.
  • Percy, Chromatic, Loki — инструменты для автоматизированного визуального тестирования, сравнивающие скриншоты компонентов между версиями.

Выбор зависит от требований проекта: локальное тестирование можно организовать с помощью Web Test Runner, интеграцию с CI/CD — через Percy или Chromatic.

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

  1. Установка зависимостей:
npm install @web/test-runner @web/test-runner-playwright @open-wc/testing
  1. Конфигурация Web Test Runner (web-test-runner.config.js):
import { playwrightLauncher } from '@web/test-runner-playwright';

export default {
  browsers: [
    playwrightLauncher({ product: 'chromium' }),
    playwrightLauncher({ product: 'firefox' }),
    playwrightLauncher({ product: 'webkit' })
  ],
  files: 'test/**/*.test.js'
};
  1. Создание тестов для компонентов Lit: Тесты оформляются через @open-wc/testing с использованием fixture для рендеринга компонентов.
import { fixture, html, expect } from '@open-wc/testing';
import './my-component.js';

describe('MyComponent', () => {
  it('отрисовывается с корректным текстом', async () => {
    const el = await fixture(html`<my-component text="Привет"></my-component>`);
    expect(el.shadowRoot.textContent).to.include('Привет');
  });
});

Сравнение визуальных состояний

Визуальные тесты строятся на принципе snapshot testing: создается эталонное изображение компонента и сравнивается с текущим состоянием после изменений.

  • Loki позволяет автоматизировать процесс:

    npx loki init
npx loki test

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

  • В Lit важно учитывать shadow DOM, так как многие стили инкапсулированы. Инструменты визуального тестирования должны поддерживать рендеринг Shadow DOM, иначе снимки будут неполными.

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

  1. Тестирование с различными свойствами и атрибутами: Проверка всех возможных комбинаций свойств позволяет убедиться, что компонент корректно реагирует на входные данные.
const states = [
  { disabled: true },
  { disabled: false },
  { highlighted: true },
];

for (const state of states) {
  it(`отрисовывается корректно с ${JSON.stringify(state)}`, async () => {
    const el = await fixture(html`<my-component ...=${state}></my-component>`);
    expect(el).shadowDom.to.equalSnapshot();
  });
}
  1. Тестирование слотов: Слоты позволяют вставлять динамический контент. Для визуального тестирования важно проверять как пустые, так и заполненные слоты:
const el = await fixture(html`
  <my-component>
    <span slot="label">Текст</span>
  </my-component>
`);
expect(el).shadowDom.to.equalSnapshot();

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

Автоматизация визуального тестирования в CI/CD гарантирует, что изменения интерфейса не сломают существующие компоненты. Для этого:

  • Настраиваются скрипты тестирования в package.json:
"scripts": {
  "test": "web-test-runner",
  "visual-test": "loki test"
}
  • Настраивается автоматическая загрузка эталонных снимков и отчётов в CI, чтобы при изменениях команда могла оперативно увидеть визуальные регрессии.

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

  • Всегда использовать фиксированные размеры контейнеров при скриншотах, чтобы избежать ложных срабатываний из-за адаптивной верстки.
  • Проверять компоненты в нескольких браузерах, так как рендеринг может различаться.
  • Разделять unit-тесты и визуальные тесты, чтобы быстрее локализовать ошибки.
  • Инкапсуляция стилей в Lit требует особого внимания при использовании глобальных CSS или тем, так как они могут не применяться в Shadow DOM по умолчанию.

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

Оглавление