Web Component Tester

Polymer — это JavaScript-фреймворк для создания веб-компонентов, использующий спецификации Web Components: Custom Elements, Shadow DOM, HTML Templates и HTML Imports. Он позволяет создавать повторно используемые компоненты с инкапсулированной логикой и стилями. Одной из ключевых задач при работе с компонентами является их тестирование, для чего используется Web Component Tester (WCT).

Установка и настройка Web Component Tester

Для использования WCT проект должен иметь структуру npm-пакета. Установка производится через командную строку:

npm install --save-dev web-component-tester

После установки создается конфигурационный файл wct.conf.json, где указываются параметры тестирования:

{
  "plugins": {
    "local": {},
    "sauce": false
  },
  "suites": ["test/**/*-test.html"]
}
  • plugins: подключение плагинов (например, для локального тестирования или интеграции с Sauce Labs).
  • suites: путь к HTML-файлам с тестами.

Структура теста

Тестирование компонентов в Polymer ведется через Mocha и Chai, интегрированные в WCT. Стандартная структура HTML-теста выглядит следующим образом:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="../bower_components/web-component-tester/browser.js"></script>
  <link rel="import" href="../my-element.html">
</head>
<body>
  <script>
    suite('my-element tests', function() {
      test('should have a default property value', function() {
        var element = document.createElement('my-element');
        assert.equal(element.someProperty, 'default');
      });

      test('should reflect property changes', function(done) {
        var element = document.createElement('my-element');
        element.someProperty = 'newValue';
        flush(function() {
          assert.equal(element.someProperty, 'newValue');
          done();
        });
      });
    });
  </script>
</body>
</html>

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

  • suite используется для группировки связанных тестов.
  • test описывает отдельный сценарий проверки.
  • flush применяется для ожидания завершения рендеринга и обновления привязок Polymer.

Типы тестов

  1. Unit-тесты – проверяют внутреннюю логику компонента, свойства, методы и события.
  2. Integration-тесты – оценивают взаимодействие нескольких компонентов и их рендеринг на странице.
  3. End-to-end тесты – полностью имитируют пользовательские действия через браузер (часто с использованием Selenium или Sauce Labs).

Асинхронное тестирование

Компоненты Polymer активно используют асинхронные операции (например, async, события). WCT поддерживает асинхронные тесты через Mocha, используя done() или промисы:

test('should handle async operation', function(done) {
  var element = document.createElement('my-element');
  element.asyncMethod().then(result => {
    assert.equal(result, 42);
    done();
  });
});

flush используется для ожидания изменений, вызванных data-binding или рендерингом:

flush(function() {
  assert.equal(element.shadowRoot.querySelector('p').textContent, 'Hello');
});

Запуск тестов

WCT позволяет запускать тесты локально или в удаленных браузерах:

wct

Дополнительные флаги:

  • --local – тестирование в локальном окружении.
  • --remote – тестирование в облачных сервисах (Sauce Labs).
  • --skip-selenium-install – пропуск установки Selenium, если он уже настроен.

Взаимодействие с DOM и Shadow DOM

Polymer компоненты используют Shadow DOM для инкапсуляции стилей и структуры. WCT предоставляет удобные методы для доступа к shadowRoot и проверки содержимого:

var element = document.createElement('my-element');
document.body.appendChild(element);
var shadowContent = element.shadowRoot.querySelector('span').textContent;
assert.equal(shadowContent, 'Shadow Text');

Мокирование и тестовые данные

Для имитации поведения компонентов можно использовать мок-объекты и подставные данные. Это особенно важно для асинхронных вызовов и API:

test('should call API and update property', function(done) {
  var element = document.createElement('my-element');
  element.apiCall = function() {
    return Promise.resolve('mockData');
  };
  element.fetchData().then(() => {
    assert.equal(element.data, 'mockData');
    done();
  });
});

Плагины и расширения

WCT поддерживает плагины для расширения функционала:

  • local – для работы с локальными браузерами.
  • sauce – интеграция с Sauce Labs для тестирования в разных браузерах.
  • karma – возможность интеграции с Karma для CI/CD процессов.

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

Для автоматизации тестирования на сервере Continuous Integration WCT легко интегрируется с Travis CI, Jenkins, GitHub Actions. Достаточно добавить команду wct --local в скрипт сборки и обеспечить наличие браузеров на сервере.

Отладка тестов

При неудачных тестах можно использовать следующие подходы:

  • Вывод результатов через console.log внутри flush.
  • Использование --verbose для подробного логирования.
  • Проверка Shadow DOM через инструменты разработчика браузера.

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

  • Все свойства, участвующие в data-binding, должны проверяться на корректность после flush.
  • Асинхронные тесты требуют корректного использования done или промисов.
  • Мокирование внешних зависимостей делает тесты стабильными и изолированными.
  • HTML Import компонентов должен быть корректно указан в тестовых HTML-файлах.

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

Оглавление