How to have capybara see page change after ajax call to rails?

Question

I am writing a feature spec:

the steps are:

• List item
• I add a new record
• I overwrite its verification_date to be nil
• This makes it list with a 'verify' link
• I click the verify link
• If the url is valid the screen should (via ajax) update the 'verify' link to be '2014' text.

This is current working fine in the actual application, the problem is in trying to add some tests that will replicate the behaviour and reflect a working process. I can't seem to get the test to recognize changed text from the ajax call. I can do the steps manually but when I use the spec it doesn't see an updated page. I make sure (in the spec) that I only have (and have added only) 1 record.

Whatever I do I get

1) verification lets me verify a link
  Failure/Error: expect(page).to have_content(this_year)
    expected to find text "2014" in "Test Linker Links New Link Gr...

The spec is:

...
describe "verification", :type => :feature do

  before :all do
    User.create(:username => 'x@google.com', :password => 'xyz')
  end

  before :each do
    visit '/ladmin/login'
    fill_in 'username', :with => 'x@google.com'
    fill_in 'password', :with => 'xyz'
    find('input[value="Login"]').click
  end

  it "lets me verify a link" do
    Link.delete_all
    expect(Link.count).to eq 0
    this_year=Time.now.strftime('%Y') # This is what the screen gets after verification
    visit links_path
    expect(page).to_not have_content(this_year) # true
    l=FactoryGirl.create(:valid_url_link)
    l.save
    l.update_column(:verified_date, nil) # Force condition that makes 'verify' appear
    expect(Link.count).to eq 1
    visit links_path
    find('a', text: "verify") # This seems to work.  The one record has a 'verify' link
    click_link("verify", match: :first) # This should change the text to 2014
    sleep(7)
    expect(page).to have_content(this_year)
  end

end

the link factory is:

FactoryGirl.define do

  factory :link do
    group {FactoryGirl.create(:group)} #:group
    url_address {"http://test.com"+SecureRandom.uuid}
    alt_text "examples of common situations amnd solutions"
  end

  factory :valid_url_link, parent: :link do
    group {FactoryGirl.create(:group)} #:group
    url_address {"http://www.google.com"}
    alt_text "valid url"
  end
  ...    
end

The js (though probably not where the issue is imho) is:

$ cat app/assets/javascripts/verifying_link.js 
$(function(){
  $("a[data-verifying-link]='yes'").click(function(event){
    event.preventDefault();
    a=$(this).parent();
    a.html('<img src="assets/ajax-loader.gif">');
    var id= $(this).data("id");
    var row = $(this).data("tableRow");
    $.ajax({
      url: "/verify_link/"+id+"&table_row="+row,
       type: 'GET',
       success: function(r) {
                $("span#verify_link_"+row).html('<span class="done">Verified</span>');
             },
       error: function(r) {
           $("span#verify_link_"+row).html('<span class="undone">Unverified</span>');
        }
    });
  });
});

The code for the actual display of the field is a bit messy (but has worked for 378 links so far...) is:

    %td.column_align
      %span{id: "verify_link_#{index}"}
        - if link.verified_date
          - link_text = session[:full_details] == 'true' ? long_form(link.verified_date) : short_form(link.verified_date)
          = render :partial => 'link_toggle', :locals => { :content => [long_form(link.verified_date), short_form(link.verified_date)], :url => verify_link_path(id: link.id, table_row: index) }
        - else
          - if session[:user_id]
            %a{href: "#", :data => {verifying_link: 'yes', id: link.id, table_row: index}}
              verify
          - else
            No

The partial involved is:

- if session[:full_details] == 'true'
  %span{class: "show_hide shown"}
    = link_to content[0], url, title: 'Reverify this link', remote: true
  %span{class: "show_hide hidden"}
    = link_to content[1], url, title: 'Reverify this link', remote: true
- else
  %span{class: "show_hide shown"}
    = link_to content[1], url, title: 'Reverify this link', remote: true
  %span{class: "show_hide hidden"}
    = link_to content[0], url, title: 'Reverify this link', remote: true

That needs work but has been working that way for a while in the live app.

Why does the test keeps showing the page with the links added but not verified and showing 2014?

Answer 1

The spec shown does not have the required :js => true

e.g.

describe "verification", :js => true, :type => :feature do

This will then require you (via an error) to add capybara-webkit to your Gemfie, e.g.

gem 'selenium-webdriver'#  For rspec capybara javascript tests

and of course

bundle