How to test Ajax functionality


I have ‘Ajaxified’ some functionality that hides a resource in my Rails app (

the ‘Hide’ controller action just toggles the visible property of a Researcher object.

In the view, when an administrator clicks the show link of a Researcher object, the visible property of the Researcher object will be set to ‘true’ and the link label text will change to ‘Hide’. When and administrator clicks the ‘Hide’ link, the visible property of the Researcher will be set to ‘false’ and the link label text will change to false.

My controller ‘Hide’ action looks like this:

def hide
  @researcher = Researcher.find(params[:id])
  render "hide.js.erb"

the toggle_visibility helper method looks like this:

def toggle_visibility!
  if visible?
    update_attribute(:visible, false)
    update_attribute(:visible, true)

In my View, I implement the Hide link like this:

<%= link_to toggle_visibility(researcher), hide_admin_researcher_path(researcher), method: :patch, remote: true, id: dom_id(researcher) %>

The Javasscript Template looks like this:

$("#researcher_<%= %>").text("<%= toggle_visibility(@researcher) %>");

This all works fine, but I also would like to write a test for this, for instance to test that when an administrator clicks the Hide link, the link label text effectively changed to ‘Show’ and vice verse.

I’m not proficient in testing Javascript though, so I could use some guidance in setting up this test in Rspec.

Thanks for your help,


Seem that my test are just running fine:

  scenario 'Admin hides researcher' do
    click_link "Hide"
    expect(page).to have_css 'p', text: "The researcher #{ } is now hidden"
    expect(@researcher.visible).to be_false

The only thing I needed to change was the way that my Flash message is set, as a controller can’t send a Flash notice, as no redirect is happening.

So I set the Flash message in my Javascript template:

$("#researcher_<%= %>").text("<%= toggle_visibility(@researcher) %>");
if (<%= @researcher.visible %>) {
  $(".messages").empty().append("<p class='notice'>The researcher <%= %> is now      visible</p>");
else {
  $(".messages").empty().append("<p class='notice'>The researcher <%= %> is now   hidden</p>");

my tests are working fine now