Corey Gibson
Corey Gibson

Reputation: 343

Using Rails RSpec and Capybara and Selenium how can I test to make sure a modal is being displayed

I have a necessary modal that displays when a user has not yet excepted the Terms of Service for a site. I need to test to make sure the bootstrap modal is being displayed after looking through a lot of documentation I am still lost with how to perform this.

# application.html.haml
.container-fluid
  - if user_has_not_accepted_terms?
    = render 'parts/terms_modal'

my modal

.modal#terms_modal{'tabindex': "-1", role: "dialog", 'data- 
    keyboard':false, 'data-backdrop': "static"}
  .modal-dialog{role: "document"}
    .modal-content
      .modal-header
        %h5.modal-title
          Our Terms of Service have changed
      .modal-body
        %p
          Please take a minute and review our updated BLAH
      .modal-footer
        = link_to 'Accept Terms of Service', accept_terms_user_profile_path(current_user.id, current_user), method: :patch, class: 'btn btn-primary mx-auto'

Js making sure that modal opens on page load

$(document).on('turbolinks:load', ->
  $('#terms_modal').modal('show')
)

$(document).on('page:load', ->
  $('#terms_modal').modal('show')
)

I know the user I am testing against has not yet accepted the terms and the conditional returns true, also when I run call save_and_open_page in my test I get back the html with the modal in it

so far I have tried testing like

# accepting_terms_spec.rb
...
scenario 'user can accept terms of service', js: true do
  ... #user sign in and visit '/'

  within('.modal#terms_modal) do
    click_on('Accept Terms of Service')
  end

  expect(page).to have_content('Success')
end

I get the return from the test the states the .modal is not visible.

Upvotes: 0

Views: 461

Answers (1)

Thomas Walpole
Thomas Walpole

Reputation: 49890

Since the modal isn't opening in the browser Capybara is correctly failing the test.

Most likely an error in one of your JS files is causing the issue. The biggest difference between the test and dev environments is that in the test (and production) environment all your JS assets are concatenated into one file. This allows an error in one to prevent JS in other files from being processed. In the dev environment this doesn't happen because each file is served separately. Check your browsers developer console for JS errors and fix them and the error will probably go away.

A less likely possibility is that your asset pipeline has hung and is no longer combining new JS changes into the files served in test mode. You should be able to force a recompile with rails assets:precompile although that may still not pick up future changes to your assets depending on exactly what's causing the hang. In that case doing rails assets:clobber will usually reset the pipeline to working properly (may need to do RAILS_ENV=test rails assets:clobber/precompile to ensure the correct things get cleared/built depending on your exact setup)

Upvotes: 2

Related Questions