В этой короткой статье я покажу, как можно легко автоматизировать тестирование веб-компонентов (т.е. пользовательских элементов) и при этом почувствовать себя Чаком.
Быстрое кодирование
Давайте создадим наши первые веб-компоненты. В этом примере я выбрал очень простой ванильный веб-компонент, поскольку тестовой платформе не важно, как он реализован: все веб-компоненты взаимодействуют через один и тот же собственный API-интерфейс браузера.
Давай протестируем
Наши тестовые спецификации:
- Исключено отображение сообщения при изменении атрибута message, в окружении сердечек
- Ожидается отправка события message-changed при изменении атрибута message.
Мы будем использовать мокко как средство запуска тестов и демонстрационный зал как платформу для тестирования веб-компонентов.
npm install --save-dev mocha showroom
Давайте создадим первый файл дескриптора выставочного зала в папке .showroom.
Это сообщает выставочному залу о компоненте и пути его загрузки, ожидаемых событиях и атрибутах (+ значение по умолчанию). component, events и path являются обязательными для правильного выполнения теста.
Теперь создадим тестовый файл в test папке:
Объяснение тестового кода
Прежде всего - платформу выставочного зала нужно запустить, а после всего - выставочный зал можно остановить.
Перед каждым - подготавливаем и выбираем «my-component» для тестирования. Каждый вызов setTestSubject создает новый экземпляр нашего компонента.
Результаты теста:
Теперь тесты довольно простые. Устанавливаем атрибут «сообщение» и ожидаем результатов. С помощью getEventList метода выставочного зала стало проще получать информацию о событиях. Все коммуникации с компонентом, включая глубокий селектор запросов в теневых корнях, применимы с использованием showroom.find. Установка свойств, атрибутов, получение значений также выполняется с помощью API выставочного зала.
Простой.
Если вы хотите визуально протестировать свои компоненты, просто запустите npx showroom в своей папке, перейдите к localhost: 3000 и посмотрите, что видит исполнитель тестов. Вы также можете запускать свои тесты в браузере с заголовком (в отличие от безголового), если вы передаете аргументы функции инициализации демонстрационного зала. const showroom = require('showroom/puppeteer')({headless:false})
Подробнее о репо проекта смотрите на github.
Вывод
Тестирование веб-компонентов не должно быть сложным. Это может быть очень просто и легко запускать и автоматизировать, если вы сохраняете базовое разделение задач.
Теперь пойдите и проверьте свои собственные компоненты!
