Getting Rails 3 Edge with jQuery, RSpec and Cucumber using RVM

2010-05-09 22:08:27 +0000

Here are the simple (?) steps to get Rails 3 running with the above technologies.

Install Rails

You know, this is pretty obvious, but before you get into any other hoo ha you are going to have to get a version of Rails installed into your system gems so that you will have access to the rails command.

So:

$ gem install rails --version "3.0.0.beta3"
Successfully installed i18n-0.3.7
Successfully installed tzinfo-0.3.20
Successfully installed builder-2.1.2
Successfully installed memcache-client-1.8.3
Successfully installed activesupport-3.0.0.beta3
Successfully installed activemodel-3.0.0.beta3
....

Should do the trick.

Setup the Rails app

Now we have Rails install our app using the standard rails g command.

$ rails my_app -JT
     create  
     create  README
     create  .gitignore
     create  Rakefile
     create  config.ru
     create  Gemfile
     ....

The -J parameter, tells Rails not to install the Prototype Javascript libraries. The -T tells it to skip generating the Test::Unit files, together they order Cheese Royals

Setting up RVM

Now change into the my_app directory and add the line rvm ruby-1.8.7@my_app to the .rvmrc file

$ echo "rvm ruby-1.8.7@my_app" > .rvmrc

This will make a clean gemset for our Rails app to play in.

But we need to create the gemset first:

$ rvm gemset create 'my_app'
Gemset 'my_app' created.

Nice.

Now whenever we cd into the my_app directory, RVM will auto detect the .rvmrc file and switch our gemset to the my_app Gemset.

Or we can do it manually:

$ rvm ruby-1.8.7@my_app
$ gem list

*** LOCAL GEMS ***

rake (0.8.7)

Awesome.

House Keeping

$ cd my_app/
$ rm public/index.html
$ rm public/images/rails.png

Notice I deleted the index.html and rails.png above. You don’t have to do this right now, if you want to see the nice happy message telling you that daisies are going to bloom and butterflies are fluttering about because your Rails App is now working, please don’t remove it yet, wait and fire up your rails app with rails s and browse to http://127.0.0.1:3000 and bask in your RailsFuNess…

But for the rest of us, nuke it.

Getting jQuery installed

Next, we need to install jQuery. Just go to the website and download it and place it into your javascripts directory. For cut and fiends out there, this curl command should handle it as well:

$ mkdir public/javascripts/jquery
$ curl http://code.jquery.com/jquery-1.4.2.min.js > public/javascripts/jquery/jquery-1.4.2.min.js

Note I have put this into a jQuery folder. I have done this so that the javascript_include_tag :all command I will use further down does not pickup the jQuery source files.

Getting the Rails jQuery Driver

Now that we have destroyed prototype, we need to replace it with jQuery, two steps to this.

First, download the jQuery driver and over write your rails.js file that lives in public/javascripts/, I usually do this by going to the Rails jQuery-UJS page and clicking raw and cut and pasting it into the public/javascripts/rails.js file. Feel free to use a submodule if you wish, or

$ curl http://github.com/rails/jquery-ujs/raw/59dd91d945570391f905b1e40444e5921dbc2b8f/src/rails.js > public/javascripts/rails.js

Will do it as well… note, this will most likely not be the most recent version in the future. To get the latest, go to the Rails jQuery-UJS page and click on the RAW link to the right of the source code div.

Wiring up jQuery and the Rails driver

Now that we have jQuery and the Rails jQuery UJS drivers installed, we need to wire them up to the app, so open up app/views/layouts/application.html.erb make it look like the following:

<!DOCTYPE html>
<html>
<head>
  <title>MyApp</title>
  <%= stylesheet_link_tag :all %>
  <%= csrf_meta_tag %>
</head>
<body>

<%= yield %>

<%= javascript_include_tag 'jquery/jquery-1.4.2.min' %>
<%= javascript_include_tag :all, :cache => true %>
</body>
</html>

OK, couple of things here. Firstly, we remove the javascript_include_tag :all from the header. Then we put the two tags at the bottom of the document.

Why do we separate out the jquery/jquery-1.4.2.min from the javascript_include_tag :all line? This is because the :all directive will just grab all the javascript files in the order it finds them and bundle them all together, which means that your javascript files, may be trying to init javascript classes from your jQuery library that do not exist yet.

So we get around this by loading jQuery first.

OK. So that is jQuery sorted, now onto the specifications side.

Installing RSpec & Friends

Best way to go about this, is to modify your Gemfile and make it look something like this:

source 'http://rubygems.org'

## Bundle edge rails:
gem "rails",  :git => "git://github.com/rails/rails.git"
gem "sqlite3-ruby"

group :test do
  gem "rspec"
  gem "rspec-rails",      ">= 2.0.0.beta"
  gem "machinist",        :git => "git://github.com/notahat/machinist.git"
  gem "faker"
  gem "ZenTest"
  gem "autotest"
  gem "autotest-rails"
  gem "cucumber",         :git => "git://github.com/aslakhellesoy/cucumber.git"
  gem "database_cleaner", :git => 'git://github.com/bmabey/database_cleaner.git'
  gem "cucumber-rails",   :git => "git://github.com/aslakhellesoy/cucumber-rails.git"
  gem "capybara"
  gem "capybara-envjs"
  gem "launchy"
  gem "ruby-debug"
end

This is going to install everything you need to get RSpec, Cucumber, Machinist, autotest and even throwing in the Ruby Debugger at the bottom.

Save this, and then we need to install it. But remember, we are on a clean gemset, so we need to install bundler first:

 $ gem install bundler
Successfully installed bundler-0.9.25
1 gem installed
Installing ri documentation for bundler-0.9.25...
Installing RDoc documentation for bundler-0.9.25...

mikel@baci.lindsaar.net ~/Code/my_app
 $ gem list

*** LOCAL GEMS ***

bundler (0.9.25)
rake (0.8.7)

Good to go, so now we are just a bundle install away from launching:

 $ bundle install
Fetching source index from http://rubygems.org/
Using rake (0.8.7) from system gems 
Installing abstract (1.0.0) from .gem files at /Users/mikel/.rvm/gems/ruby-1.8.7-p249@my_app/cache 
...

And we are away!

Initializing RSpec and Cucumber

Now that we have all our dependencies done, we need to tell RSpec and Cucumber to get a move on:

$ rails g rspec:install
      exist  lib
     create  lib/tasks/rspec.rake
      exist  config/initializers
     create  config/initializers/rspec_generator.rb
     create  spec
     create  spec/spec_helper.rb
     create  autotest
     create  autotest/discover.rb

And then for cucumber, we will use capybara (because we installed it in the Gemfile above) and pass —rspec because I like being complete!

$ rails g cucumber:skeleton --capybara --rspec
     create  config/cucumber.yml
     create  script/cucumber
      chmod  script/cucumber
     create  features/step_definitions
     create  features/step_definitions/web_steps.rb
     create  features/support
     create  features/support/paths.rb
     create  features/support/env.rb
      exist  lib/tasks
     create  lib/tasks/cucumber.rake
       gsub  config/database.yml
       gsub  config/database.yml
      force  config/database.yml

OK good.. so that is our skeleton app.

One last thing, we are using Rails with sqlite, so it will expect our databases to exist before it will run any tests, so let’s make them:

$ rake db:create

Getting our first feature to run

Now that we have our app installed and everything wired up, we should be able to get an initial feature working, so go ahead and make a features/the_home_page.feature file, and whack something like this in it:

Feature: Manage app_should_boots
  In order to see what my app is about
  a user
  wants to be able to land on a home page
  
  Scenario: Visiting the site for the first time
    Given I am on the home page
    Then I should see "Welcome" within "h1"

This should fail:

Using the default profile...
.F

(::) failed steps (::)

scope '//h1' not found on page (Capybara::ElementNotFound)
./features/step_definitions/web_steps.rb:14:in `with_scope'
./features/step_definitions/web_steps.rb:108:in `/^(?:|I )should see "([^\"]*)"(?: within "([^\"]*)")?$/'
features/the_home_page.feature:8:in `Then I should see "Welcome" within "h1"'

Failing Scenarios:
cucumber features/the_home_page.feature:6 # Scenario: Visiting the site for the first time

Which is saying that the default rails “Not Found” page does not have “Welcome” within a “h1” tag… which I guess is true!

Lets fix this:

First we’ll generate the welcome controller:

$ rails g controller welcome
     create  app/controllers/welcome_controller.rb
     invoke  erb
     create    app/views/welcome
     invoke  rspec
     create    spec/controllers/welcome_controller_spec.rb
     create    spec/views/welcome
     invoke  helper
     create    app/helpers/welcome_helper.rb
     invoke    rspec

Then we’ll edit the config/routes.rb file to wire up the root url to the welcome controllers index action:

MyApp::Application.routes.draw do |map|
  root :to => "welcome#index"
end

Note, if you haven’t already deleted the public/index.html file, now is a good time to do it!

Now we make an app/views/welcome/index.html.erb file and put in it our welcome message:

<h1>Welcome</h1>

And now we will re-run our cucumber feature and all should be good:

 $ rake cucumber
Using the default profile...
..

1 scenario (1 passed)
2 steps (2 passed)
0m0.214s

Cool! We are now on the Rails with Cucumber and everything else that is good in the world.

Enjoy!

blogLater

Mikel

  1. Sohan Says:
    2010-05-10 06:16:33 +0000

    The Drink Rails blog linked to your post as one of the top ruby on rails blogs of the day.

  2. John Says:
    2012-08-08 03:09:07 +0000

    Where else could anyone get that kind of information in such a perfect way of writing.Do you want
    dishwashers?

  3. iphone spy Says:
    2012-08-08 03:06:21 +0000

    It’s so tough to encounter right information on the blog

  4. Dark Says:
    2012-08-08 03:10:46 +0000

    You really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand dishwashers

  5. muddetoy Says:
    2011-11-08 19:41:08 +0000

    Hey ! Thanks for the tutorial but you mentioned to provide information about testing javascript .
    I didn’t found it. Can you please add it.
    Thanks !!!!!

  6. Gaurav Saini Says:
    2010-10-24 22:42:00 +0000

    Hey ! Thanks for the tutorial but you mentioned to provide information about testing javascript .
    I didn’t found it. Can you please add it.
    Thanks !!!!!

  7. Gaurav Saini Says:
    2010-10-24 22:16:59 +0000

    Hey ! Thanks for the tutorial but you mentioned to provide information about testing javascript .
    I didn’t found it. Can you please add it.
    Thanks !!!!!

  8. Logan Leger Says:
    2010-05-26 23:02:59 +0000

    I created a rails template for jQuery, because I was tired of repeating the process over and over again. It has the added benefit of creating an initializer to add the new jQuery files as the defaults of the javascript_include_tag instead of the old prototype stuff.

    It’s up on github: http://github.com/lleger/Rails-3-jQuery

  9. Fernando Brito Says:
    2010-06-14 13:37:44 +0000

    Wow, perfect guide to setting up a really nice environment to BDD. Thank you very much!

    I would only add “HAML” to the list :D

  10. Rohit Arondekar Says:
    2010-06-17 19:09:41 +0000

    Hey,

    Shouldn’t this,
    rails g cucumber:skeleton —capybara —rspec

    be,

    rails g cucumber:install —capybara —rspec

  11. Kirk Says:
    2010-06-30 13:34:44 +0000

    Hey thank you very much for such a great bootstrapping tutorial. It helped alot!

    Kirk

  12. elberon5 Says:
    2010-07-09 10:33:03 +0000

    Awesome article thanks!

    As of today i had to do the following:
    gem install bundler —pre

  13. ferrisoxide Says:
    2010-09-06 05:10:59 +0000

    Hey Mikel

    Thanks for the heads up on this.. very handy. Now have the bare bones of a JQuery-based Rails app. Rockin’

    Bizarre to come across you via Ruby – remember you as a young lad mad keen on computers in Adelaide.. glad to see you kept it real :) Will drop you a line some time.

    Cheers

  14. ferrisoxide Says:
    2010-09-07 02:04:02 +0000

    Hey Mikel

    Thanks for the heads up on this.. very handy. Now have the bare bones of a JQuery-based Rails app. Rockin’

    Bizarre to come across you via Ruby – remember you as a young lad mad keen on computers in Adelaide.. glad to see you kept it real :) Will drop you a line some time.

    Cheers

  15. cdunn Says:
    2011-01-07 11:46:27 +0000

    Why did you move the javascript_include_tags after the ‘yield’? Won’t embedded javascript using jquery work only when the javascript is loaded before the HTML which contains the script? Maybe your way works for .js.erb, but not for embedded scripts?

  16. wheeee Says:
    2011-05-29 18:40:00 +0000

    hello

  17. Brad Says:
    2012-05-15 00:20:43 +0000

    Rails 3.0 is ponies and rainbows! It’s going to cook you dinner and fold your laundry. You’re going to wonder how life was ever possible before it arrived. It’s the Best Version of Rails We’ve Ever Done!extreme q vaporizer review

  18. jibran Says:
    2012-09-12 03:39:06 +0000

    the page should make a browser’s alert pop-up, before leaving to go to the main jQuery page. great site

  19. tanned Says:
    2012-06-24 12:37:42 +0000

    The method are very usefull and i think a lot of website are using this method for their menu!

  20. japon Says:
    2012-05-19 17:32:04 +0000

    Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser’s alert pop-up, before leaving to go to the main jQuery page.

  21. Business Directory Says:
    2012-05-25 21:41:59 +0000

    This is truly a great read for me. I am looking forward to reading new articles. Keep up the good work!
    Business Directory

  22. Business Directory Says:
    2012-05-25 21:42:19 +0000

    This is truly a great read for me. I am looking forward to reading new articles. Keep up the good work!
    Business Directory

  23. Fishing Lodges Alaska Says:
    2012-02-20 10:54:26 +0000

    Most of websites are using that method for some small menus. So they will not take any long process for it.

  24. Movers in Virginia beach Says:
    2012-03-03 06:47:14 +0000

    Installing rails is enough to make me dizzy, a process that you include here a very long even though you already gave a pretty clear picture. Do you not have a shorter way to install this application?

  25. James Says:
    2012-04-28 13:24:33 +0000

    Great post. Recently I had to do the same thing and decided to go just with an ATOM feed.
    name tapes

  26. Brad Says:
    2012-05-15 00:21:01 +0000

    Rails 3.0 is ponies and rainbows! It’s going to cook you dinner and fold your laundry. You’re going to wonder how life was ever possible before it arrived. It’s the Best Version of Rails We’ve Ever Done!extreme q vaporizer review

  27. Sandra Kauffman Says:
    2012-06-30 00:19:25 +0000

    Very effective jquery coding . You’re explaining very detailed manner. First, I want to say big hats off to you..Recently I had to do the same thing and decided to go just with an ATOM feed.
    By,
    Sandra Kauffman

  28. retail system Says:
    2012-09-06 02:28:52 +0000

    Nice Article, I feel strongly that love and read more on this topic. it’s very spectaculer.

    Mesin Kasir | Komputer Kasir | Jual Barcode | Printer Kasir

    Printer Kartu

  29. barcode system Says:
    2012-09-06 02:35:53 +0000

    I realy like this article. This is a hash of default values for any email you send, in this case we are setting from the header to a value for all messages in this class, this can be overridden on a per email basis..

    Mesin Kasir | Komputer Kasir | Jual Barcode | Printer Kasir

    Printer Kartu

  30. asdsdsd Says:
    2012-11-03 06:39:47 +0000

    This is very educational content and written well for a change. It’s nice to see that some people still understand how to write a quality post.!
    Relationships by Mre Marine

  31. New Jersey Relationships with APS Says:
    2012-11-05 06:50:14 +0000

    I admit, I have not been on this web page in a long time… however it was another joy to see It is such an important topic and ignored by so many, even professionals. professionals. I thank you to help making people more aware of possible issues.

  32. Ronny Saborido Says:
    2013-01-04 09:47:09 +0000

    upon seeing those families having a trail, I envy because I never got a chance to have to. However, I am still happy that the parents are spending much of their time for the kids.PS3 Emulator

  33. Paul Says:
    2013-01-08 04:30:42 +0000

    I guess it does make sense when you think about it like that. This was a good read by the way – hostgator discount code

  34. MrEmo Says:
    2013-01-19 10:04:01 +0000

    This is my first time at your blog and I’ve really enjoyed looking around. I will come back again in the future to check out some of the other articles.Xbox Emulator

  35. sean1 Says:
    2013-05-11 02:09:33 +0000

    Great post. bean bags It’s good to see you to verbalize your heart and your clarity on this important issue can be easily detected. chairs Looking forward to read more. furniture beanbagnerd.com sofa

Leave a Reply