How to setup Jasmine Rails31 directory structure

Following are instructions on how to setup/configure jasmine for use with rails31. It’s mostly straight forward, just one gotcha with regards to how to tell jasmine where your source files are.

1. Add jasmine gem

http://asciicasts.com/episodes/261-testing-javascript-with-jasmine has a nice summary of how to setup and install the rails gem for jasmine.

Gemfile

gem 'jasmine', :group => [:development, :test]

> bundle install
> rails g jasmine:install
> rake jasmine

2. Create your test.

spec/javascripts/listings_model_spec.js

describe("ListingModelSpec", function() {

  beforeEach(function() {
    setFixtures('<input type="hidden" id="city_name" value="Calgary" />');
  });

  it("gets the city name", function() {
    var model = new ListingsModel();
  });

});

Here I am writing a test that verifies I can read a value from a hidden field. To do that, jasmine will need jquery, and another useful helper library called jasmine-jquery (for that setFixture method).

Download and place them both in the /spec/javascripts/helpers dir.

4. Tell jasmine where to find your javascript files.

jasmine knows where to find your src files via it’s jasmine.yml file.

Assuming you want your javascript files to live under apps (where rails31 like them)

Edit the jasmine.yml file to look something like this:

/spec/javascripts/support/jasmine.yml

# src_files
#
# Return an array of filepaths relative to src_dir to include before jasmine specs.
# Default: []
#
# EXAMPLE:
#
# src_files:
#   - lib/source1.js
#   - lib/source2.js
#   - dist/**/*.js
#
src_files:
  - public/javascripts/prototype.js
...
  - app/assets/javascripts/**/*.js

See that last line at he bottom? That’s the one you need to point to the rails3 javascript directory. The other files above it points to where rails used to share it’s javascript files but everything is now stored under apps so just point there.

With that you should now be able to run your own javascript tests by firing up the jasmine server:

> rake jasmine

Going to localhost:8888 and seeing your output there.

More resources

http://railscasts.com/episodes/261-testing-javascript-with-jasmine