I made the title of this article a mouthful to show how many libraries you have to use to do some Javascript testing. I did what I’m about to do in this article recently in order to figure out where my Javascript tests were going wrong in a more complicated project.

What You Need to Have Installed In Your Rails Application

  1. Cucumber gem
  2. Capybara gem
  3. Poltergeist gem
  4. Twitter bootstrap (see http://railsapps.github.com/twitter-bootstrap-rails.html for a good resource on how to configure your app with bootstrap)
  5. PhantomJS installed on your system (I talk about how to install it on Ubuntu Linux here; in addition, there’s some nice installation instructions at the main PhantomJS site).

A Small Shortcut To Help You Get Up and Running

You can fork a copy of the application over at https://github.com/treble37/rails3-poltergeist-rspec-cucumber-capybara-devise-example.

The bootstrap-modal-dialog-test branch (not the master) has all the code I’m going to talk about in this upcoming tutorial. You may want to start on the master branch instead if you want to implement the changes yourself. Please note that I forked this application from someone else’s application skeleton in order to quickly prototype this test. Hooray for open source! Then install the required gems in your gemset (I’m assuming you’re using rvm) via the bundle install command.

What I actually changed in my forked repository

Change app/features/support/env.rb to use the poltergeist driver

Assets

Daniel’s tutorial tells you to do it, but you need to remember to include Bootstrap’s javascript via the require directive in your application.js file as follows:

Bootstrap stuff

After pasting in the code from Daniel Kehoe’s tutorial into app/views/layouts/_navigation.html.erb, I changed the “Login” and “Logout” links to “Sign in” and “Sign out” so they would be compatible with the Cucumber/Capybara integration tests.

Adding the Bootstrap Modal Dialog HTML Code

I just copied the “Launch demo modal” code from the Bootstrap site at http://twitter.github.com/bootstrap/javascript.html#modals and pasted it into application.html.erb. One thing I did do was encapsulate it into a Boostrap container class:

Cucumber Scenario

Since I forked a skeleton application with cucumber scenarios built in I only had to add the following scenario:

Cucumber Step(s)

I just added a simple step to make sure the user could see the home page content after the modal dialog box was closed:

Time to run the tests

At the command line, type bundle exec cucumber features/.

Hmm…an error…“undefined_method

bootstrap-modal-test

The hack

After some Googling, it seems that Capybara likes to have its input elements (like buttons and links) clicked inside a form element. So I then encapsulated the modal html code in a form tag as follows:

And now all your tests should be green.

Another Cucumber Scenario

Cucumber Step(s)

Add show.js.erb view

Time to run the tests

At the command line, type bundle exec cucumber features/.

Hmm…an error…(RSpec::Expectations::ExpectationNotMetError)

It turns out we need to add an @javascript tag before our scenario. This tells Capybara to use the poltergeist javascript driver so it can find the popup box that has a Javascript generated link to Google.com

Now our tests pass.

Recommended Posts