Разработка приложения на Javascript — это очень просто. В нем нет строгих проверок типов (свободная типизация), обширные библиотеки для использования, нет необходимости в настройке среды разработки, он может работать где угодно и многое другое. Но довольно скоро все может запутаться, если вы будете постоянно развивать его, добавляя логику день за днем.
Очень скоро приложение становится уродливым, и его обслуживание становится болезненной задачей. Вот отличный учебник по настройке проекта javascript на стороне клиента с использованием gulp.
Модульное тестирование Javascript
Существует несколько фреймворков для тестирования, и я предпочитаю Mocha и Chai, так как считаю их более выразительными.
Ниже приведена простая функция для создания объекта со строкой запроса заданного URL-адреса,
И простой тест для него,
Вы можете запустить этот тест с Mocha с помощью следующей команды:
$ mocha --compilers js:babel-core/register
Но javascript на стороне клиента включает в себя Dom. Вы вполне можете установить jsdom-global, чтобы решать зависимости документов в ваших функциях и тестировать их. Это нормально, но что, если мы хотим протестировать с использованием реальных браузеров и нескольких устройств?
Реальное тестирование браузера с использованием кармы
Karma — это средство запуска тестов, которое запускает тестовые случаи в реальных браузерах и на разных устройствах. Звучит потрясающе, не так ли? Его настройка также проста, что очень хорошо объяснено на их основном веб-сайте.
После установки и настройки вы можете установить необходимые вам пусковые установки браузера и обновить файл конфигурации.
Теперь запустите команду для запуска кармы, она откроет настроенные браузеры и выполнит тестовые случаи во всех.
$ ./node_modules/.bin/karma start karma.conf.js --log-level debug --single-run
Подключайте несколько устройств и автоматически выполняйте тестовые случаи при изменении кода
Крутая часть Karma заключается в том, что вы можете запустить ее и добавить к ней любое устройство, и тестовые случаи будут автоматически выполняться для этого устройства. Вы можете видеть ниже, я добавил свой Android-телефон к текущему тесту, просто открыв URL-адрес в своем мобильном браузере.
Установите autoWatch: true в файле karma.config.js, чтобы разрешить выполнение тестов при каждом изменении файлов. Кроме того, вы можете отлаживать код, добавляя строку debugger к четырем функциям и открывая Инструменты разработчика в браузере, чтобы запустить отладчик. Увлекательно, верно? Идите вперед и попробуйте сами.
Настройте шаблон в репозитории Git с некоторыми задачами Gulp, чтобы начать работу.
Эта статья изначально была размещена на моем собственном сайте.
