How do I set up a Rails Angular project to test JS? - ruby-on-rails

Question

I am trying to set up my Rails Angular project to provide JS tests. I have tried almost everything that I have found on Google:
Karma (formerly Testacular)
Jasmine + Jasmine-headless-WebKit
Jasminerice
some other tutorials
but I failed with all of them. I'm looking for a way to run unit and e2e tests in the most painless way (it can be in Guard or Karma, I don't care, but it must run it automatically in the background).
Does anyone have some nice article with a nice example of how to achieve this? In my research I have found this, but IMHO it is an example of how to NOT do this.
My actual 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:
It would be nice if I can create coverage reports in a simple way.

Answer 1

You can use teaspoon it runs your favorite test suite (default is jasmine) and they have a wiki to integrate with angular. Teaspoon integrates with the asset pipeline, so you can throw all the angular gems in there and require them in the teaspoon generated spec_helper.js.
The other cool thing is: they have a guard plugin available as well.

Answer 2

I feel your pain, it took me a bit of trial and error to get all tests running for my Rails app. I ended up using Guard for developer continuous testing for specs, acceptance, and javascripts. Here are the fruits of my labor.
This is the Gemfile snippet you will need to include. It has the required Gems for Guard, Jasmine, Rspec, and Turnip. This setup will work with MRI and JRuby, we run our tests on both.
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
This the full Guardfile that watches Rspec, Turnip, and Jasmine to trigger tests:
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
Now things get a little tricky. To get Jasmine to properly load up AngularJS for tests I downloaded angular-mocks.js 1.0.7 to the directory spec/javascripts/support/angular-mocks.js. This is used by the spec helper and the jasmine config to run the AnguljarJS specs.
For the spec/javascripts/spec_helper.js.coffee, point it at the Rails app javascript, the angular-mocks.js, and all the javascript specs:
#=require ../../app/assets/javascripts/application
#=require ./support/angular-mocks
#=require_tree ./
For the Jasmine config, spec/javascripts/support/jasmine.yml, the config will need to point at the Rails app javascript and the angular-mocks.js. Here is the we use, but with the comments removed for brevity:
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
With everything set up, you simply have to run bundle exec guard and all the tests will run and be triggered by development changes.

Answer 3

I've written a blog post about a very simple way to set up AngularJS unit testing on a Rails app using the default Jasmine gem. It took a small code change to get things working smoothly, which has been accepted by the Jasmine team.
http://pivotallabs.com/unit-testing-angularjs-using-jasmine/
In an nutshell:
Add jasmine and angularjs-rails to your Gemfile
gem "angularjs-rails"
gem "jasmine", github: "pivotal/jasmine-gem"
Install the gems and run the Jasmine generator
$ bundle install
$ rails g jasmine:install
Add angular to your application.js, before the rest of your application code
//= require angular
//= require_tree .
Create a file named ./spec/javascripts/helpers/angular_helpers.js and add this line
//= require angular-mocks
Now you can include AngularJS implementation files in your app/assets directory and write tests that use the provided mocks. And when you upgrade the angularjs-rails gem, you will get new versions of angular.js and angular-mocks.js at the same time.

Answer 4

You may have some luck checking out the angular boilerplate project it uses grunt as the build system which I realise is not ruby in anyway, however I think when trying to test things with angular your only hope is to go the nodejs/karma route.
This setup watches for changes in your code and runs the tests. However in my limited experience I haven't been able to get it to show the results of the test run. I am not sure whether I am doing something wrong or if it is not supported.
Anyway hope this helps