Làm thế nào để thiết lập dự án Rails-Angular để kiểm tra JS?

Question

Tôi đang cố gắng thiết lập dự án Rails-Angular để cung cấp các bài kiểm tra JS. Tôi đã thử gần như tất cả những gì tôi đã tìm thấy trong Google:

• Karma (trước đây là Testacular)
• Jasmine + Jasmine-headless-WebKit
• Jasminerice
• một số tuts khác

nhưng tôi thất bại với tất cả của họ. Tôi đang tìm cách để chạy đơn vị và kiểm tra e2e theo cách không đau nhất (nó có thể là trong Guard hoặc Karma, tôi không quan tâm, nhưng nó phải chạy nó tự động trong nền).

Có ai trong số bạn một số bài viết hay với ví dụ hay về cách đạt được điều này không? Trong nghiên cứu của tôi, tôi đã tìm thấy this, nhưng IMHO nó là ví dụ làm thế nào để KHÔNG làm điều này.

My thực tế 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: Nó sẽ được tốt đẹp nếu tôi có thể tạo các báo cáo bảo hiểm theo cách đơn giản.

Answer 1

Bạn có thể sử dụng teaspoon nó chạy bộ kiểm tra yêu thích của bạn (mặc định là hoa nhài) và chúng có một wiki để tích hợp với góc cạnh. Teaspoon tích hợp với các đường ống tài sản, vì vậy bạn có thể ném tất cả các đá quý góc trong đó và yêu cầu chúng trong teaspoon tạo ra spec_helper.js.

Điều thú vị khác là: họ cũng có plugin bảo vệ.

Answer 2

Bạn có thể có một số may mắn kiểm tra các angular boilerplate project nó sử dụng grunt như xây dựng hệ thống mà tôi nhận ra không phải là ruby ​​trong anyway, tuy nhiên tôi nghĩ rằng khi cố gắng để thử nghiệm những điều với góc của bạn hy vọng duy nhất là đi các nodejs/nghiệp .

Thiết lập này theo dõi các thay đổi trong mã của bạn và chạy thử nghiệm. Tuy nhiên trong kinh nghiệm hạn chế của tôi, tôi đã không thể có được nó để hiển thị các kết quả của chạy thử nghiệm. Tôi không chắc mình có làm gì sai hay không được hỗ trợ.

Dù sao hy vọng điều này sẽ giúp

Answer 3

Tôi cảm thấy nỗi đau của bạn, nó đã cho tôi một chút thử và sai để có được tất cả các test chạy cho ứng dụng Rails của tôi. Tôi đã kết thúc bằng cách sử dụng Guard cho các nhà phát triển thử nghiệm liên tục cho thông số kỹ thuật, chấp nhận và javascripts. Đây là thành quả lao động của tôi.

Đây là đoạn mã Gemfile bạn sẽ cần bao gồm. Nó có các Đá quý cần thiết cho Guard, Jasmine, Rspec và Turnip. Thiết lập này sẽ làm việc với MRI và JRuby, chúng tôi chạy thử nghiệm của chúng tôi trên cả hai.

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 

này đầy đủ Guardfile rằng đồng hồ RSpec, củ cải, và Jasmine để kích hoạt thử nghiệm:

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 

Bây giờ mọi thứ trở nên một chút khéo léo. Để có được Jasmine tải đúng AngularJS cho các bài kiểm tra tôi đã tải xuống angular-mocks.js 1.0.7 vào thư mục spec/javascripts/support/angular-mocks.js. Điều này được sử dụng bởi trình trợ giúp đặc tả và cấu hình hoa nhài để chạy các thông số AnguljarJS.

Đối với số spec/javascripts/spec_helper.js.coffee, trỏ nó vào ứng dụng Rails javascript, ang-mocks.js, và tất cả các thông số kỹ thuật javascript:

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

Đối với cấu hình Jasmine, đặc tả/Javascripts/support/jasmine.yml, cấu hình sẽ cần phải trỏ vào ứng dụng Rails javascript và góc-mocks.js . Dưới đây là việc sử dụng chúng, nhưng với sự nhận xét bị xóa cho ngắn gọn:

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 

Với tất cả những gì thiết lập, bạn chỉ cần có để chạy bundle exec guard và tất cả các bài kiểm tra sẽ chạy và được kích hoạt bởi những thay đổi phát triển.

Answer 4

Tôi đã viết một bài đăng blog về một cách rất đơn giản để thiết lập thử nghiệm đơn vị AngularJS trên ứng dụng Rails bằng cách sử dụng đá quý Jasmine mặc định. Phải mất một sự thay đổi mã nhỏ để làm cho mọi thứ hoạt động suôn sẻ, đã được nhóm Jasmine chấp nhận.

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

Trong một nutshell:

Thêm nhài và angularjs-ray để Gemfile bạn

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

Cài đặt đá quý và chạy máy phát điện Jasmine

$ bundle install 
$ rails g jasmine:install 

Thêm góc vào application.js của bạn, trước phần còn lại của ứng dụng của bạn ion đang

//= require angular 
//= require_tree . 

Tạo một file có tên ./spec/javascripts/helpers/angular_helpers.js và thêm dòng

//= require angular-mocks 

này Bây giờ bạn có thể bao gồm các file thực thi AngularJS trong thư mục app/assets của bạn và viết bài kiểm tra mà sử dụng mocks cung cấp. Và khi bạn nâng cấp đá quý angularjs-rails, bạn sẽ nhận được phiên bản mới của angular.js và angular-mocks.js cùng một lúc.