Как настроить проект Rails Angular для тестирования JS?

Ответ 1

Вы можете использовать teaspoon он запускает ваш любимый набор тестов (по умолчанию это жасмин), и у них есть wiki для интеграции с angular, Teaspoon интегрируется с конвейером активов, поэтому вы можете выбросить все драгоценные камни angular и потребовать их в чайной ложке, сгенерированной spec_helper.js.

Другая интересная вещь: у них есть защитный плагин.

Ответ 2

Я чувствую вашу боль, мне потребовалось немного проб и ошибок, чтобы все тесты выполнялись для моего приложения Rails. Я закончил использование Guard для непрерывного тестирования разработчиков для спецификаций, принятия и javascripts. Вот плоды моего труда.

Это фрагмент Gemfile, который вам нужно включить. Он имеет необходимые драгоценные камни для Guard, Jasmine, Rspec и Turnip. Эта настройка будет работать с MRI и JRuby, мы запускаем наши тесты на обоих.

group :test, :development do
  # Guard
  gem 'guard-jasmine'
  gem "guard-bundler", ">= 1.0.0"
  gem "guard-rails", ">= 0.4.0"
  gem "guard-rspec", ">= 2.5.2"
  gem "rb-inotify", ">= 0.9.0", :require => false
  gem "rb-fsevent", ">= 0.9.3", :require => false
  gem "rb-fchange", ">= 0.0.6", :require => false

  # Rspec
  gem "rspec-rails", '~> 2.12.2'

  # Jasmine
  gem "jasmine", '~> 1.3.1'
  gem "jasminerice"
end

group :test do
  # Turnip
  gem "turnip", '~> 1.1.0'
  gem "capybara", '~> 2.0.3'
end

Это полный файл Guardfile, который следит за Rspec, Turnip и Jasmine для запуска тестов:

guard 'rspec' do
  watch(%r{^spec/.+_spec\.rb$})
  watch(%r{^lib/(.+)\.rb$})     { |m| "spec/lib/#{m[1]}_spec.rb" }
  watch('spec/spec_helper.rb')  { "spec" }

  # Rails 
  watch(%r{^app/(.+)\.rb$})                           { |m| "spec/#{m[1]}_spec.rb" }
  watch(%r{^app/(.*)(\.erb|\.haml)$})                 { |m| "spec/#{m[1]}#{m[2]}_spec.rb" }
  watch(%r{^app/controllers/(.+)_(controller)\.rb$})  { |m| ["spec/routing/#{m[1]}_routing_spec.rb", "spec/#{m[2]}s/#{m[1]}_#{m[2]}_spec.rb", "spec/acceptance/#{m[1]}_spec.rb"] }
  watch(%r{^spec/support/(.+)\.rb$})                  { "spec" }
  watch('config/routes.rb')                           { "spec/routing" }
  watch('app/controllers/application_controller.rb')  { "spec/controllers" }

  # Turnip features and steps
  watch(%r{^spec/acceptance/(.+)\.feature$})
  watch(%r{^spec/acceptance/steps/(.+)_steps\.rb$})   { |m| Dir[File.join("**/#{m[1]}.feature")][0] || 'spec/acceptance' }
end

guard :jasmine do
  watch(%r{spec/javascripts/spec\.(js\.coffee|js|coffee)$}) { 'spec/javascripts' }
  watch(%r{spec/javascripts/.+_spec\.(js\.coffee|js|coffee)$})
  watch(%r{spec/javascripts/fixtures/.+$})
  watch(%r{app/assets/javascripts/(.+?)\.(js\.coffee|js|coffee)(?:\.\w+)*$}) { |m| "spec/javascripts/#{ m[1] }_spec.#{ m[2] }" }
end

Теперь все становится немного сложнее. Чтобы Jasmine правильно загрузил AngularJS для тестов, я загрузил angular -mocks.js 1.0.7 в каталог spec/javascripts/support/ angular -mocks.js. Это используется специальным помощником и конфигурацией жасмина для запуска спецификаций AnguljarJS.

Для spec/javascripts/spec_helper.js.coffee укажите его в javascript приложения Rails, angular -mocks.js и все спецификации javascript:

#=require ../../app/assets/javascripts/application
#=require ./support/angular-mocks
#=require_tree ./

Для конфигурации Jasmine, spec/javascripts/support/jasmine.yml, config необходимо будет указать на javascript приложения Rails и angular -mocks.js. Вот мы используем, но с комментариями, удаленными для краткости:

src_files:
  - assets/application.js
  - spec/javascripts/support/angular-mocks.js

stylesheets:
  - stylesheets/**/*.css

helpers:
  - helpers/**/*.js

spec_files:
  - '**/*[sS]pec.js'

src_dir:

spec_dir: spec/javascripts

При всех настройках вам просто нужно запустить bundle exec guard, и все тесты будут запущены и будут вызваны изменениями разработки.

Ответ 3

Я написал сообщение в блоге о очень простом способе настройки модульного тестирования AngularJS в приложении Rails, используя драгоценный камень Jasmine по умолчанию. Это потребовало небольшого изменения кода, чтобы заставить работу работать плавно, что было принято командой Jasmine.

http://pivotallabs.com/unit-testing-angularjs-using-jasmine/

В двух словах:

Добавьте жасмин и угловые рельсы к вашему Gemfile

gem "angularjs-rails"
gem "jasmine", github: "pivotal/jasmine-gem"

Установите драгоценные камни и запустите генератор Жасмин

$ bundle install
$ rails g jasmine:install

Добавьте angular к вашему application.js, перед остальной частью вашего кода приложения

//= require angular
//= require_tree .

Создайте файл с именем ./spec/javascripts/helpers/angular_helpers.js и добавьте эту строку

//= require angular-mocks

Теперь вы можете включить файлы реализации AngularJS в каталог app/assets и написать тесты, в которых используются предоставленные макеты. И когда вы обновляете драгоценный камень angularjs-rails, вы будете получать новые версии angular.js и angular-mocks.js одновременно.

Ответ 4

Возможно, вам удастся проверить проект angular, он использует grunt, поскольку система сборки, которая, как я понимаю, не рубится в любом случае, однако я думаю, что, пытаясь проверить вещи с помощью angular, ваша единственная надежда состоит в том, чтобы перейти по пути nodejs/karma.

Эта настройка отслеживает изменения в вашем коде и запускает тесты. Однако в моем ограниченном опыте я не смог заставить его показать результаты тестового прогона. Я не уверен, что я делаю что-то неправильно или если оно не поддерживается.

В любом случае надеюсь, что это поможет