Rails/Capybara- Test that form does not submit

Question

In my Rails app, I used the following jQuery to disable the ability to submit a form by pressing 'enter' in an input field:

$('input').on('keydown', function(e) {
  if(e.which == '13') {
    return false;
  }
})

I wanted to test this with Capybara, but can't figure out how. For example:

# the form being tested creates a new Shift object: 
test "enter does not submit form" do
  shift_count = Shift.count
  # fill in form, etc...
  page.driver.browser.execute_script "var e = jQuery.Event('keydown'); e.which = 13; $('#shift_employee').trigger( e );"
  assert Shift.count == shift_count
end

This test passes even when the jQuery function is commented out, presumably because it calculates Shift.count before ActiveRecord has had time to save the new the record to the database.

I also tried having the jQuery function do a custom $.get() request, to which the controller responds with simple text, thinking that this would build in enough time for all server-side work to be completed. But this still doesn't work, and I think it's because, no matter how I set up the jQuery function, the submission of the form and saving of the new record will always occur after any AJAX stuff I build in.

Any ideas on how I can reliably test that the form was not submitted?

Answer 1

I got it to work by having Capybara revisit the page, and then checking Shift.count. The test now fails when the jQuery function is commented out, and passes when the function is uncommented. I'd still like to know if there's a better way, though.

Answer 2

So the form submission is done via AJAX? This is a common problem that testers run in to with Capybara. What you need to do is wait for the AJAX to complete.

There are two ways to do this. One is very specific and is the preferred method, the other is generic and should only be used if the first method can't be done.

The first way is to wait for content to change on the DOM. In your case nothing might change, but if, for example, you had a warning come up saying "You cannot press Enter, you must click the Save button!" then you could wait for that to come up by doing something like:

page.driver.browser ... # your code
page.should have_css(".info", :text => "You cannot ...etc...")

Of course you don't have to use the :text option though.

The other way is to make a helper method, like wait_for_ajax, that does a generic wait until AJAX is complete.

def wait_for_ajax
  start = Time.now
  while true
    break if (page.evaluate_script('$.active') == 0)
    if Time.now > start + Capybara.default_wait_time.seconds
      fail "AJAX did not register as complete after #{Capybara.default_wait_time} seconds!"
    end
    sleep 0.1
  end
end

This is based off the old way that people used to check for AJAX, but this new script is preferred for Capybara 2.0.

Then your step would do:

page.driver.etc
wait_for_ajax

That wait_for_ajax method can go in to any file Cucumber will load.