Часто описывается, как выполнять модульные тесты для веб-расширений, но почти не говорится, как выполнять интеграционные тесты. Здесь я представляю метод встраивания HTML-страницы Jasmine в страницу вашего веб-расширения.
Необходимость тестирования
Тестирование - основная стратегия разработки программного обеспечения. Это помогает разработчику сохранять знания о приложении и гарантировать, что код и функции сохранят свое участие.
Когда я запускал расширение Sync Tab Groups, я сначала тестировал его вручную. Пока это работало в течение первых недель, я быстро почувствовал, что теряю время и теряю уверенность в каждом выпуске. Сигналом стал день, когда я выпустил критическую ошибку.
Хотя тестировать React или Node довольно просто, экосистема веб-расширений моложе и менее богата. Лучший подход, который я нашел до сих пор, - это смоделировать тесты с помощью sinon и запустить их в эмуляции DOM (например, Jest).
Я отказываюсь от этого решения по 2 причинам:
1. Библиотека не является полной для Chrome и определенно не имеет некоторых специфических функций Firefox.
2. Мокированные тесты полезны и быстры, но не так безопасны, как интеграционные.
Наконец, просмотрев библиотеку Jasmine, я обнаружил, что могу встраивать свои тесты в HTML-страницу.
Как встроить тесты на страницу веб-расширения
В веб-расширении API расширения доступен в разных частях.
1. В фоновой задаче
2. На страницах расширений
Я запустил свою небольшую тестовую библиотеку в фоновой задаче. Я немедленно остановился. Мало того, что кодировать библиотеку сложно, но отсутствие приятного интерфейса затрудняет итерацию.
Я быстро перешел на страницы расширения с поддержкой библиотеки Жасмин. Я загрузил все файлы HTML, JS и CSS и добавил все свои тесты в блоки описать и оно в импортированные файлы JS.
Если вы используете Webpack для объединения вашего расширения, вы даже можете управлять зависимостью Jasmine. Webpack может создать тестовую страницу, получив ресурсы из node_modules/.
Как разработать свои тесты
Хотя концепция проста, я регулярно повторял ее, чтобы улучшить качество тестирования.
Привяжите веб-страницу к фоновому скрипту
По умолчанию веб-расширение не имеет доступа к API полного веб-расширения. Решение состоит в том, чтобы потребовать фоновое окно, в котором работает ядро расширения.
Будьте осторожны, функция асинхронная, поэтому перед выполнением каких-либо тестов следует подождать. Когда я добавил поддержку Chrome в Группы вкладок синхронизации, я сначала забыл подождать. Как следствие, тесты случайно проваливались.
Примечание: весь код, доступный в статье, взят из репозитория Sync Tab Groups.
Насмехайтесь над таймерами
Функции окна («setTimeout»…) на странице не совпадают с функциями в фоновом скрипте. Если вы хотите имитировать время, вам следует изменить те, что в фоновом объекте, с помощью имитированных функций Jasmine.
Улучшение опыта тестирования
Одна из первых проблем, с которыми я столкнулся, была вызвана автоматическим запуском тестов при каждой загрузке страницы. Решение состоит в том, чтобы перезаписать фильтр строкой, которая не будет соответствовать ни одному заголовку теста. Фильтр перезаписывается динамически, чтобы не было странных URL-адресов.
Вторая моя боль заключалась в том, чтобы перечислить все тесты. Используя предыдущее решение, которое останавливает выполнение теста, вы устанавливаете для параметра enable значение false. Если вы установили пустой параметр URL spec, то все тесты будут выделены светло-серым цветом. Если параметр spec не пустой, на странице будут перечислены только те тестовые заголовки, которые ему соответствуют.
Этот небольшой интерфейс в верхней части страницы Jasmine помогает контролировать тесты. При нажатии на кнопку «Включить» тесты выполняются при следующем обновлении страницы. В то время как кнопка «Просмотреть все тесты» отключает выполнение теста (параметр enable имеет значение false) и сбрасывает фильтр (параметр spec на пустое значение).
Автоматически открывать страницу
Страницы расширений часто имеют странные и непредсказуемые URL-адреса. Кроме того, они закрываются каждый раз, когда вы перезагружаете расширение. Хорошее решение - добавить систему автоматического открытия страниц при запуске расширения (конечно, в режиме разработки). API веб-расширения предоставляет функцию для открытия страницы по локальному пути без знания идентификатора расширения.
Легко определить, когда расширение находится в стадии разработки, благодаря «временному» свойству в Firefox. Для Chrome необходим альтернативный метод, основанный на значениях некоторых полей, поскольку «временное» поле отсутствует. Хотя это работает, это показывает реальность, Firefox усерднее работает, чтобы облегчить жизнь разработчикам расширений, чем с Chrome.
Используйте фиктивные вкладки
Когда я впервые проводил свои тесты, я использовал случайный пул реальных URL-адресов для вкладок в моих группах. Когда количество тестов значительно увеличилось, набор тестов занимал больше времени, и мой компьютер перевыполнял вычисления.
На самом деле загрузка вкладки в вашем браузере - дорогостоящая задача из-за графических ресурсов и скриптов (отслеживание, взаимодействие страниц…). Вдобавок ко всему, если они открываются к десяти, не давая времени компьютеру закончить, навигация становится ужасной.
Новое решение с использованием настраиваемой (пустой) страницы веб-расширения решает проблему. У него есть 2 преимущества:
- Вкладка легче загружается (без изображений, без JavaScript)
- Он является локальным для добавочного номера, поэтому нет сетевого времени.
Для некоторых тестов вы хотите различать страницы, чтобы знать, делает ли что-то конкретная страница. Поскольку расширение не может изменять содержимое HTML при открытии, вы можете использовать набор параметров URL со случайным числом. Будьте осторожны, это может привести к конфликту чисел, что приведет к случайному сбою тестов. Лучшим решением было бы сохранить номер, чтобы не использовать число больше единицы.
Поскольку макет вкладок не использует сеть, это позволяет разрабатывать расширение без подключения к Интернету. Отличное улучшение программирования даже в поезде!
Создайте набор инструментов для управления браузером
Поскольку тесты выполняются в браузере пользовательского интерфейса, может возникнуть проблема с отслеживанием текущего выполнения теста для отладки. Например, вы можете захотеть посмотреть на состояния тестов, чтобы узнать, не завершились ли уже какие-то тесты или насколько близки тесты к концу.
Другая проблема возникает, если вы тестируете функции, которые используют более одного окна браузера. Вы хотите визуализировать тест, запущенный во всех окнах браузера, чтобы проверить, все ли идет хорошо, пока вы его пишете.
Некоторые функции веб-расширений легко использовать для изменения размера окон браузера, чтобы они лучше вписывались в экран. Вы можете вручную изменить настройку, чтобы она соответствовала конфигурации с одним или двумя экранами.
И некоторые неразрешимые проблемы…
В то время как сейчас легко протестировать веб-расширение с помощью интеграционных тестов, некоторые варианты поведения по-прежнему проблематичны.
- Некоторые тесты не работают в полноэкранном режиме Mac (не знаю почему)
- Во время выполнения тестов вы не сможете использовать свой компьютер, так как изменение фокуса может привести к сбою тестов.
Идеи по улучшению
Я просто хочу поделиться с вами некоторыми улучшениями, которые я никогда не пробовал, потому что у меня не хватает времени.
Безголовый браузер
Боль, которая все еще остается, заключается в том, что во время тестов мой компьютер недоступен. Я читал кое-что о селене, кукловоде и режиме Firefox Headless. Однако я ни разу не пробовал! Кроме того, инструмент Firefox web-ext может даже быть решением для непрерывной интеграции.
Удаленное тестирование
Я изучил другое решение, которое так и не смог реализовать. Mocha - это сервер для публикации ваших тестов в браузере.
Он работает, открывая локальный сервер, который подключается браузером во вкладке. Постоянно обмениваясь, сервер Mocha отправляет тесты, ожидая ответов.
Причина, по которой я отказался от этого решения, заключалась в том, что страница вкладки была нацелена на локальный хост и, следовательно, не была страницей расширения. Это означает, что вы получили доступ только к ограниченной части API (не к фоновому скрипту).
Заключение
Встраивая тестовую страницу Jasmine в свое веб-расширение, вы можете использовать гибкость тестовой среды с полной мощностью API веб-расширения.
В моем проекте Sync Tab Groups я смог убедиться, что все мои функции действительно работают в новых выпусках. Независимо от того, менялось ли веб-расширение в браузере. Раньше я выпускал много раз в неделю, когда работал только над этим проектом без регресса.
Кстати, я все еще ищу участников, которые помогут мне разработать Группы вкладок синхронизации. :)
