Статьи

Тестирование JavaScript с помощью Jasmine, Travis и Karma

Некоторые люди говорят, что устаревший код – это любой код, написанный без тестов, и я один из них. Но я также сторонний разработчик, а это значит, что для тестирования моего кода часто требуется браузер. Это делает тестирование немного сложнее, или, по крайней мере, я так думал. На самом деле, все довольно просто, и в этой статье я покажу вам, что нужно, чтобы начать!

GitHub и Travis CI

Чтобы протестировать наш код, мы собираемся использовать GitHub и Travis CI . GitHub будет размещать наш код, а Travis CI будет служить платформой для тестирования. Это все совершенно бесплатно для общедоступных репозиториев, и есть много документации, которая поможет вам использовать оба этих продукта. Первое, что нужно сделать, это создать репозиторий на GitHub. Для этого урока я создал репозиторий, который вы можете найти здесь .

Следующим шагом является посещение страницы по адресу https://travis-ci.org/ и вход в GitHub. После этого вам нужно будет добавить репозиторий для Travis для выполнения тестов, как показано на рисунке ниже.

добавить новый репозиторий

Нажав на значок «плюс», вы попадете на консоль, где мы сможем синхронизироваться с нашей учетной записью GitHub и выбрать репозиторий.

выбор хранилища

Панель инструментов нашего репозитория будет пустой, поскольку мы не настроили ни одного теста. Давайте теперь перейдем к следующему этапу.

Делать вещи с Node.js

Точно так же, как Митохондрия является электростанцией ячейки, так и Node.js станет электростанцией нашей сладкой тестовой установки. Если вы еще не установили Node.js, посетите его веб-сайт и установите его. После этого клонируйте репозиторий, который вы создали в предыдущем разделе, чтобы у вас были все файлы на вашем локальном компьютере. На данный момент мы готовы установить Карму!

Karma – это среда тестирования, изначально созданная командой AngularJS. Мы собираемся использовать его, чтобы помочь нам запустить Jasmine на Travis CI в Firefox. Я знаю, это звучало ошеломляюще, но не волнуйтесь! Вскоре у нас будут действительно крутые тесты, и все это будет того стоить.

Если у вас еще нет файла package.json и папки node_module в вашем хранилище, запустите npm init и завершите настройку. Предыдущая команда поможет вам в создании файла package.json . Далее выполните следующую команду:

 npm install karma --save-dev 

Мы также собираемся установить несколько необходимых плагинов для Karma: karma-jasmine и karma-firefox-launcher. Так что давай и беги

 npm install karma-jasmine karma-firefox-launcher --save-dev 

Теперь, когда у нас установлены все необходимые плагины, мы хотим рассказать Karma о нашем проекте, чтобы он мог запускать тесты против него. Запустите команду:

 karma init my.conf.js 

Это проведет вас через управляемую настройку, задавая вопросы о вашем проекте и его среде. На следующем снимке экрана показаны все необходимые вопросы и ответы для простой настройки Karma:

карма иници

Мы еще не создали наш тестовый каталог. Поэтому, когда нас спросят о расположении наших исходных и тестовых файлов, мы будем предупреждены, что tests/*.js не существует. Что касается dist/*.js , это файл, с которым я планирую запустить свои тесты, который может отличаться для вашего проекта.

Это оно! Карма хороша, чтобы идти!

Конфигурирование Трэвис

До сих пор Трэвис понятия не имеет, что делать с нашим хранилищем. Давайте это исправим. Нам нужно создать файл .travis.yml со следующим кодом:

 language: node_js node_js: - "0.10" script: node_modules/karma/bin/karma start my.conf.js --single-run before_install: - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start before_script: - npm install 

Это говорит Трэвису, что мы используем Node.js для тестирования JavaScript и используем Firefox в качестве браузера. Кроме того, мы указываем, что перед началом тестирования необходимо запустить npm install чтобы получить все необходимые плагины.

Написание тестов с жасмином

До этого момента мы правильно настроили Карму и Трэвиса. Итак, мы готовы написать несколько тестов для нашего кода JavaScript. Для моего примера репозитория у меня есть файл coolLibrary.js который добавляет coolLibrary.js квадрат к элементу body и присваивает ему атрибут data . Вы можете увидеть это в действии на CodePen .

Чтобы протестировать этот код, я создал каталог tests упомянутый в файле my.conf.js , и оттуда я добавлю тестовые файлы jasmine. Моим первым тестом будет простая проверка, чтобы убедиться, что на странице есть div с классом box . Жасмин делает это очень простым с простым для понимания синтаксисом функции. Вот как выглядит первый тест ( checkIfDivExists.js ):

 describe('getDiv', function() { var d = document.querySelector('.box'); it('Should exist', function() { expect(d.nodeName).toBe('DIV'); }); }); 

Это создает пакет, который ищет элемент с классом box и ожидает, что его имя узла будет DIV . Синтаксис довольно прост.

В дополнение к предыдущему тесту я также создам еще два теста, которые вы можете найти в репозитории GitHub для этого проекта и которые будут скопированы ниже для вашего товара:

 describe('getDivBg', function() { var d = document.querySelector('.box'); it('Should be teal', function() { expect(d.style.backgroundColor).toBe('teal'); }); }); describe('getDivAttribute', function() { var d = document.querySelector('.box'); it('Should be bar', function() { expect(d.getAttribute('foo')).toBe('bar'); }); }); 

Выполнение тестов

С тестами для нашего кода, наш последний шаг – зафиксировать наш код. Это добавит всю нашу логику тестирования и вызовет сборку на Travis. Не забудьте иметь файл .gitignore который гарантирует, что ваша папка node_modules не будет node_modules в репозиторий! После того, как вы подтвердите и отправите свой код, Travis автоматически обнаружит изменения и запустит ваши тесты. Процесс может занять несколько минут, но вы получите уведомление по электронной почте, как только сборка будет завершена.

Успех!

успешная сборка

Вы можете создать столько тестов, сколько вам нужно, и GitHub обязательно проверит входящие пул-запросы на соответствие этим тестам.

Вывод

В этом уроке мы узнали, как настроить простую среду тестирования для нашего кода JavaScript с использованием Karma, Jasmine и Travis. Не стесняйтесь видеть окончательный результат на https://github.com/sitepoint-editors/FEJStesting и озвучивать любые вопросы или проблемы в комментариях! Вы можете просмотреть последний тест на Travis по адресу https://travis-ci.org/tevko/FEJStesting