在Rails中调试Cucumber + Capybara + PhantomJS中的jQuery Ajax

Question

I'm having a very difficult time wrapping my head around this issue, so any help will be greatly appreciated.

All I want to do is test a simple Ajax-based registration form on my project. If the form submission is successful, you get redirected to a welcome page. If it isn't, you get the appropriate validation errors associated with each offending field.

For some odd reason, Capybara isn't following the redirect. The Ajax call is being made and I see a new account registered in the database, but the onSuccess callback is either not being called at all, or the redirect is being ignored.

Here is what I'm trying to work with (for the sake of brevity, I have condensed the code):

Feature:

  Feature: Registration
    In order to obtain a new account
    As a prospective customer
    I must submit a valid registration form.

    @javascript
    Scenario: A valid registration attempt
      Given an account registration form
      When I complete the form with valid values
      Then I should be redirected to the welcome screen 

Test:

Given(/^an account registration form$/) do
  visit("/signup")
  assert current_path == "/signup"
end

When(/^I complete the form with valid values$/) do
  within("#signupForm") do
    fill_in("email",    :with => Faker::Internet.email)
    fill_in("name",     :with => Faker::Name.name)
    fill_in("password", :with => "11111111")

    click_link("signupFormSubmit")
  end
end

Then(/^I should be redirected to the welcome screen$/) do
  assert current_path == "/welcome"
end

JavaScript:

console.log('I am not yet inside you.')

$.post(url, form.serialize(), function(response) {
  // everything went well
  // let's redirect them to the given page
  window.location.replace(response.redirectUrl)
  console.log('I am inside you and it is good.')
}, function(response) {
  // collect error responses from API
  // apply error hints to associated fields
  console.log('I am inside you and something went wrong.')
})

Alright, so this particular test runs just fine up until we get to the point where we're supposed to redirect the user to the welcome screen. I have tried everything I possibly can to see what's going on inside the onSuccess , onFailure callbacks, but to no avail. It's like the code isn't even being executed.

I just get the following output from the test run:

Then I should be redirected to the welcome screen # features/step_definitions/registration.rb:51
  Failed assertion, no message given. (MiniTest::Assertion)
  ./features/step_definitions/registration.rb:52:in `/^I should be redirected to the welcome screen$/'
  features/registration.feature:15:in `Then I should be redirected to the welcome screen'

It doesn't matter if I raise an exception, it doesn't get picked up. Neither do the calls to console.log() within the callbacks.

Has anyone seen this? If so, is there a workaround? If you need more information, please just ask, I'll be more than happy to provide.

Answer 1

According to the robots at Thoughtbot and the people at Coderwall, you can do this with a helper method, put into spec/support . They named their module WaitForAjax :

# spec/support/wait_for_ajax.rb
module WaitForAjax
  def wait_for_ajax
    Timeout.timeout(Capybara.default_wait_time) do
      loop until finished_all_ajax_requests?
    end
  end

  def finished_all_ajax_requests?
    page.evaluate_script('jQuery.active').zero?
  end
end

from there, you just need to load it into your test framework; for Rspec, that can be done either in the spec/config file or by simply tacking a bit of code to the end of the module file:

RSpec.configure do |config|
  config.include WaitForAjax, type: :feature
end

Make sure to require spec/support/**/*.rb in your config file, but you probably should do this anyway.

http://www.elabs.se/blog/53-why-wait_until-was-removed-from-capybara

Of course, according to the above blog post, this may or may not be needed at all, depending how you structured your page, if you just look for a selector that's unique to your welcome page.