Toggling a Bootstrap collapsible is failing in Rails/Capybara feature tests

503 views Asked by At

I'm new to Capybara and feature testing. I've been trying test a minor feature on a Rails app that toggles comments on a post into and out of view. The first test for toggling the comments into view passes, but the second test for toggling them out of view doesn't. (I am using the headless-chrome webdriver).

context 'viewing comments', js: true do
  scenario 'toggling comments into view' do
    @post.comments.create(body: 'This is a comment.', user_id: @commenter.id)
    visit authenticated_root_path

    click_button 'Toggle comments'
    expect(page).to have_content('This is a comment')
  end

  scenario 'toggling comments out of view' do
    @post.comments.create(body: 'This is a comment.', user_id: @commenter.id)
    visit authenticated_root_path

    click_button 'Toggle comments'
    expect(page).to have_content('This is a comment')

    click_button 'Toggle comments'
    expect(page).to_not have_content('This is a comment')
  end
end

Initially, I had click_button 'Toggle comments' twice, back-to-back. Neither iteration of the test work. I also tried using sleep n in between the two actions, but to no avail.

Failures:

  1) Comment management viewing comments toggling comments out of view
     Failure/Error: expect(page).to_not have_content('This is a comment')
       expected not to find text "This is a comment" in "OdinFB PROFILE REQUESTS 0 LOG OUT The Feed Create post Luna Lovegood said... Body of post 0 Likes 1 Comments Like Comment Share Toggle comments This is a comment. Morfin Gaunt on Sep 18 2017 at 4:22PM"

The button itself works when the app is fired up locally. It appears to become inactive once activated the first time around in testing.

Any insight would be appreciated, and thanks for reading.

1

There are 1 answers

0
Thomas Walpole On BEST ANSWER

What's happening here is the second button click is occurring after the expected text becomes visible on the page but before the animation has completed. The bootstrap collapse code then gets confused and doesn't collapse the comments since it considers them not fully opened yet. A sleep for a second or so immediately before the second click_button will fix this since it delays long enough for the animation to complete. The other option (and better from a test time perspective) is to disable animations in test mode.