31

我正在尝试设置我的 Rails Angular 项目以提供 JS 测试。我几乎尝试了在 Google 上找到的所有内容：

但我都失败了。我正在寻找一种以最轻松的方式运行单元和 e2e 测试的方法（它可以在 Guard 或 Karma 中，我不在乎，但它必须在后台自动运行）。

有没有人有一些不错的文章，其中有一个很好的例子来说明如何实现这一点？在我的研究中，我发现了这一点，但恕我直言，这是一个如何不这样做的例子。

我的实际Gemfile：

source 'https://rubygems.org'

# Use Ruby 1.9.3 instead default Heroku's 1.9.2
# for development I suggest https://gist.github.com/1688857
ruby '1.9.3'

gem 'rails', '3.2.12'

# Use PostgreSQL, which is quite awesome, fast and easy
gem 'pg'

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails', '~> 3.2.3'
  gem 'bootstrap-sass', '~> 2.3.1'

  # I heard that you like Compass
  gem 'compass'

  # Angular.js
  gem 'angularjs-rails'
  gem 'angularjs-rails-resource'
  gem 'angular-ui-rails'

  # Assets should be minified before production
  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

# Serve static pages like a boss
gem 'high_voltage'

# Some user management will be nice
gem 'devise' # User management
# gem 'cancan' # And they privileges

# To use Jbuilder templates for JSON
gem 'jbuilder'

# Be fast and deadly as Puma
#gem 'puma'

# We need also some administration panel, don't we?
gem 'rails_admin'

# Some helpers
gem 'andand'

group :development do
  # IRb is ugly. Use Pry for the God's sake
  gem 'pry-rails'

  # Deploy with Capistrano
  # gem 'capistrano'
  # or Vlad the Deployer
  # gem 'vlad'

  # Why bother yourself with rerunning tests? Use Guard
  gem 'guard'
  gem 'guard-rspec'
  gem 'guard-spork'
  gem 'guard-livereload'
  gem 'guard-jasmine'
  gem 'rb-fsevent', require: false
  gem 'rb-inotify', require: false

  # Who like ugly error pages? We don't.
  gem 'better_errors'
  gem 'binding_of_caller'

  # Prettier documentation
  gem 'yard'
end

group :development, :test do
  # Use RSpec for testing
  gem 'rspec-rails', '~> 2.12.0'

  # Test JS using Jasmine
  gem 'jasmine'
  gem 'jasmine-headless-webkit'

  # Some DB table generator
  gem 'factory_girl_rails', '~> 4.1.0'

  # And fake data generator
  gem 'ffaker'
end

group :test do
  # Some Gherkins will be also good (to vodka of course)
  gem 'turnip', '~> 1.1.0'

  # Aww, an of course some web browser will be also apprised
  gem 'capybara', '~> 2.0.1'

  # Clean DB after tests
  gem 'database_cleaner'

  # Some nice matchers
  gem 'shoulda-matchers'

  # Extend your mocks
  gem 'bourne', '~> 1.2.1'

  # Coverage reports will be nice
  gem 'simplecov', require: false
end

PS： 如果我能以简单的方式创建覆盖率报告，那就太好了。

4

4 回答 4

6

您可以使用teaspoon它运行您最喜欢的测试套件（默认为 jasmine），并且他们有一个与 angular 集成的 wiki。Teaspoon 与资产管道集成，因此您可以将所有 angular gem 放入其中，并在 teaspoon 生成的 spec_helper.js 中使用它们。

另一个很酷的事情是：他们也有一个可用的保护插件。

于 2013-08-08T14:53:01.733 回答
6

我感受到了你的痛苦，我花了一些试验和错误来让我的 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

这是监视 Rspec、Turnip 和 Jasmine 以触发测试的完整Guardfile：

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。规范助手和 jasmine 配置使用它来运行 AnguljarJS 规范。

对于spec/javascripts/spec_helper.js.coffee，将其指向 Rails 应用程序 javascript、angular-mocks.js 和所有 javascript 规范：

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

对于 Jasmine 配置spec/javascripts/support/jasmine.yml，该配置需要指向 Rails 应用程序 javascript 和 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，所有测试都会运行并由开发更改触发。

于 2013-06-14T13:35:13.260 回答
2

我写了一篇关于使用默认 Jasmine gem 在 Rails 应用程序上设置 AngularJS 单元测试的非常简单的方法的博客文章。Jasmine 团队已经接受了一个小的代码更改以使事情顺利进行。

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

简而言之：

将 jasmine 和 angularjs-rails 添加到您的 Gemfile

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

安装 gems 并运行 Jasmine 生成器

$ bundle install
$ rails g jasmine:install

在您的应用程序代码的其余部分之前，将 Angular 添加到您的 application.js

//= require angular
//= require_tree .

创建一个名为./spec/javascripts/helpers/angular_helpers.js并添加此行的文件

//= require angular-mocks

现在您可以在您的app/assets目录中包含 AngularJS 实现文件，并使用提供的模拟编写测试。并且当您升级angularjs-railsgem 时，您将同时获得angular.js和的新版本angular-mocks.js。

于 2014-05-19T21:42:02.447 回答
0

您可能有一些运气检查它使用 grunt 作为构建系统的angular 样板项目，我意识到它无论如何都不是 ruby​​，但是我认为在尝试使用 angular 测试事物时，您唯一的希望是走 nodejs/karma 路线。

此设置监视代码中的更改并运行测试。但是，在我有限的经验中，我无法让它显示测试运行的结果。我不确定我做错了什么或者它是否不受支持。

无论如何希望这会有所帮助

于 2013-05-09T15:06:10.683 回答