Интеграционные тесты

Интеграционные тесты охватывают взаимодействие нескольких компонентов FAST Element, проверяя корректность связей между пользовательскими элементами, шаблонами, стилями и инфраструктурой приложения. Такой уровень тестирования позволяет выявлять ошибки, возникающие на стыках: при обмене событиями, работе с данными, обновлении DOM и интерпретации реактивных свойств.

Интеграционные проверки ориентированы на следующие аспекты:

Согласованность поведения. Несколько элементов могут работать корректно по отдельности, но нарушать логику в связке. Например, компонент таблицы инициирует событие выбора строки, а компонент формы обновляется по этому событию.

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

Актуальность DOM. FAST применяет шаблоны и директивы для двустороннего связывания. При интеграционном тесте фиксируется не только модель данных, но и актуальное состояние DOM-дерева после всех обновлений.

Подходы к интеграционному тестированию

Тестирование через реальные пользовательские события

Наиболее надёжный способ — эмуляция реальных действий. Библиотека запускается в тестовом окружении, создаются экземпляры пользовательских элементов, затем генерируются события клика, ввода данных, выбора, фокусировки. В результате проверяется итоговое состояние DOM и данные компонентов.

Ключевые моменты:

события создаются при помощи стандартных API браузера, например new MouseEvent("click");
обновления FAST Element часто асинхронны, поэтому используется await или специальные хелперы синхронизации;
проверке подлежат как свойства элемента, так и его визуальное представление в HTML.

Тестирование связки шаблон + реактивные свойства

FAST опирается на шаблоны (html) и реактивность (@observable). В интеграционном тесте обеспечивается совместная проверка: изменение свойства запускает обновление шаблона, приводящее к корректному отображению в DOM.

При такой проверке важно учитывать:

шаблоны FAST компилируются в инструкции обновления DOM;
реактивное обновление запускается при изменении свойства и может срабатывать батчировано;
тест фиксирует правильность генерации текста, атрибутов, классов, стилей и вложенных компонентов.

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

FAST Element активно применяется в составе дизайн-систем. Компоненты могут слушать события друг друга или обмениваться данными через внешнее состояние. В интеграционном тесте создаётся небольшая сцена: несколько элементов подключаются к общему контейнеру, события инициируются последовательно, затем проверяются итоговые изменения.

Такой подход необходим для компонентов, зависящих от состояния общей формы, списка, модели данных или темы (стилей).

Выбор тестового окружения

Интеграционное тестирование FAST Element затрагивает DOM, поэтому важно выбирать окружение с поддержкой веб-компонентов:

jsdom. Позволяет тестировать в Node.js, но не реализует всё поведение браузера, особенно Shadow DOM и события, связанные с рендерингом. Подходит для базовой проверки связок.

Браузерные раннеры. Использование Playwright, Puppeteer или Web Test Runner позволяет воспроизвести полную модель браузера. Поддерживается Shadow DOM, динамический рендеринг, фокусировка и ввод данных.

Комбинированный подход. jsdom для быстрой проверки логики и браузерные раннеры для полноценных тестов интеграции.

Работа с Shadow DOM

FAST Element использует Shadow DOM по умолчанию, что влияет на интеграционные тесты:

селекторы применяются внутри shadowRoot, например element.shadowRoot.querySelector(...);
события могут всплывать через границу теневого дерева, но не все;
стилизация в Shadow DOM изолирована, поэтому проверка классов и вычисленных стилей становится важной частью интеграционного сценария.

Shadow DOM повышает реалистичность тестирования, но требует корректной работы с API браузера и уточнения селекторов.

Асинхронность и ожидания обновлений

Обновления FAST Element выполняются реактивно и не всегда синхронно. Интеграционный тест должен учитывать задержки обновления DOM и свойства:

изменение @observable свойства запускает фазу обновления;
шаблон пересчитывается и обновляет DOM после завершения реактивного цикла;
иногда используется await DOM.nextUpdate() или аналогичные механизмы в тестовом раннере.

Для надёжности Assertions выполняются только после завершения всех асинхронных обновлений.

Проверка обмена событиями

Компоненты FAST Element часто используют события для связи:

кастомные события на базе CustomEvent;
события ввода для синхронизации данных;
события жизненного цикла: подключение и отключение элемента.

Интеграционный тест фиксирует факт генерации события, содержимое event.detail, а также реакцию компонентов на это событие.

Проверка стилей и теминга

FAST поддерживает стили через CSS и дизайн-токены. В интеграционном тесте может потребоваться проверка:

применения CSS-классов и computed styles;
корректности темы при переключении;
реактивного изменения класса или атрибута по данным свойства;
наследования стилей в Shadow DOM.

Тестирование стилей важно для компонентов UI, кнопок, форм, навигации и таблиц.