Статьи

Как включить покрытие кода JavaScript при использовании Rails, CircleCI, AngularJS, Jasmine и Teaspoon

Я большой поклонник кода. Достаточно было написано о необходимости того же. Это помогает повысить уверенность в командах разработчиков, укрепляет процесс модульного тестирования и снижает некоторые риски, которые скрываются, когда нет ресурсов для обеспечения качества. Когда это сочетается с хорошей практикой проверки и проверки кода, например, Git Pull Requests или Atlassian Crucible , вы можете быть в значительной степени уверены, что функциональность, по крайней мере на уровне подразделений, не является хрупкой. Несмотря на то, что это метрики против инспекций, я считаю, что инвестиции в отслеживание метрик покрытия кода лучше, чем проведение инспекций Фагана или чтение кода построчно, когда вся команда сидит за столом во время нескольких перерывов на кофе.

Я играл с Эммой и Кобертурой ранее. Но недавно я оказался в ситуации, когда мне нужно было просмотреть показатели покрытия кода для ресурсов JavaScript в приложении на основе Rails. Возможно, это было сделано раньше, но комбинация показалась мне уникальной. Приложение представляет собой сложный Ruby on Rails, JavaScript основан на AngularJS , модульные тесты определены с использованием Jasmine, и мы выполняем использование Teaspoon в качестве тестового прогона . Сборки развернуты на CircleCI . Покрытие должно выполняться локально и как часть непрерывной интеграции. Если настройка вашего приложения не является полностью нестандартной, вам необходимо выполнить следующие шаги, чтобы включить покрытие кода. Конечно, вы можете использовать другую библиотеку Javascript или Карму вместо чайной ложки.

Обратите внимание, что я работаю с сексуальным MacbookPro. Так что, если вы используете компьютер с Windows (благословите ваше сердце), команды могут не сильно отличаться. Пожалуйста, не стесняйтесь добавлять их в качестве комментариев, если в итоге вы попробуете это в Windows.

Теперь давайте сначала пройдемся по шагам, которые вам понадобятся, чтобы начать работать на местном уровне.

1. Установите  Node.js . Нам нужно, чтобы запустить Стамбул , двигатель, который на самом деле будет инструментарий кода.

2. Чайная ложка зависит от Стамбула для покрытия. Установите его как:

npm install -g istanbul

3. Отредактируйте  Gemfile  вашего приложения Rails и включите   гем phantomjs как:

group :development, :test do
  ...
  gem 'phantomjs'
  ...
end

phantomjs — это безголовый браузер WebKit.

4. Теперь запустите пакетную установку, чтобы убедиться, что phantomjs установлен.

bundle

Возможно, вам придется запустить Teaspoon, чтобы убедиться, что phantomjs установлен.

bundle exec teaspoon

5. Отредактируйте teaspoon_env.rb и включите хотя бы эти строки в зоне покрытия:

#...
config.use_coverage = nil
config.coverage do |coverage|
  coverage.reports = ["html"]
  #Which coverage reports Istanbul should generate...

Теперь для локального тестирования и создания отчета о конфигурации по умолчанию выполните:

bundle exec teaspoon --coverage=default

Отчет создается в папке покрытия в папке <App_Home> по имени указанной конфигурации. Там вы найдете index.html , откройте его и альт!

Теперь, чтобы получить тот же эффект, что и для сборки CircleCI (то есть cloud baby!), Сначала вы должны сообщить среде CircleCI, что покрытие включено. Это делается через circle.yml

Поэтому отредактируйте этот файл и добавьте следующую строку в раздел зависимости / предварительный раздел. Это установит Стамбул как часть сборки CI, если это не было сделано на более высоком уровне.

- npm install -g istanbul

Также в разделе «Тест / публикация» включите покрытие, а затем скопируйте артефакты в расположение артефактов CIRCLE по умолчанию. Обратите внимание, что это может отличаться для вас. Нет смысла делать это  параллельной задачей, поскольку тесты чайной ложки (если они хорошо написаны) выполняются очень быстро. Но обратите внимание, что копирование должно быть сделано после выполнения тестов чайной ложки. Другими словами, команды являются последовательными.

- bundle exec teaspoon --coverage=default
- cp -r ./coverage/default $CIRCLE_ARTIFACTS

Запустите сборку. После успешного запуска откройте вкладку «Артефакты» и прокрутите файл index.html вниз .

Дополнительные параметры конфигурации и параметры могут быть установлены в teaspoon_env.rb . Вы можете проверить сайт драгоценного камня чайной ложки для большего количества параметров настройки.


Ура!