Menu icon Foundation
In Test, Reveal Modal Not working properly

Using Rails 4, Capybara 2.2.1, Rspec 2.14

I am unable to run integration tests on elements that are inside of the 'reveal-modal' because it is never visible in the headless browser. (js: true is present in the test block)

The following markup (sanitized) appears in the browser, and the modal appears and disappears properly in development.

<!-- My link -->
<a data-reveal-id="earlyUnpauseModal" data-reveal="" href="#">
My Text
</a>

<!-- My modal -->
<div class="reveal-modal small text-center" data-reveal="" id="earlyUnpauseModal">
  <div>
     <a class='click-this'>Click for tests</a>
  </div>
</div>
            

         

the clicks do not make the modal appear in test.

Line 2 fails with the following error -
Capybara::ElementNotFound:
Unable to find css "a.click-this"

page.find("[data-reveal-id='earlyUnpauseModal").click 
page.find('a.click-this').click



         

Any gotchas I'm not accounting for?

Also - I took a mid-test screenshot before and after the 'click' event on the data-reveal element, and the screenshot showed that the modal was still not visible.

rspecreveal-modalmodal

Using Rails 4, Capybara 2.2.1, Rspec 2.14

I am unable to run integration tests on elements that are inside of the 'reveal-modal' because it is never visible in the headless browser. (js: true is present in the test block)

The following markup (sanitized) appears in the browser, and the modal appears and disappears properly in development.

<!-- My link -->
<a data-reveal-id="earlyUnpauseModal" data-reveal="" href="#">
My Text
</a>

<!-- My modal -->
<div class="reveal-modal small text-center" data-reveal="" id="earlyUnpauseModal">
  <div>
     <a class='click-this'>Click for tests</a>
  </div>
</div>
            

         

the clicks do not make the modal appear in test.

Line 2 fails with the following error -
Capybara::ElementNotFound:
Unable to find css "a.click-this"

page.find("[data-reveal-id='earlyUnpauseModal").click 
page.find('a.click-this').click



         

Any gotchas I'm not accounting for?

Also - I took a mid-test screenshot before and after the 'click' event on the data-reveal element, and the screenshot showed that the modal was still not visible.

Chris Peters over 5 years ago

I am actually very surprised that this line isn't causing an error because you're not passing it a valid CSS selector:

page.find("[data-reveal-id='earlyUnpauseModal").click

Try it like this:

page.find("[data-reveal-id='earlyUnpauseModal']").click

Also, why not code it like this? The more CSS selectors you use in your feature specs, the less UI-focused your tests become.

click_link 'My Text'
click_link 'Click for tests'

Rafi Benkual over 5 years ago

Hmm works in codepen http://codepen.io/rafibomb/pen/jALae

Is any other JS working on the page? What do the scripts at the bottom look like?

Isaac Elias over 5 years ago

@Chris - Thanks for looking at this issue.

My test is actually written with the properly closed apostrophes and brackets. Sorry I didn't copy and edit that correctly.

@Rafi - It behaves properly in the browser, but not in my Rspec/Capybara Webkit headless tests .

Chris Peters over 5 years ago

I'm surprised you're having issues. My Capybara/Selenium-powered specs involving Foundation modals work just fine. What version of Selenium Webdriver are you using? I know it's a pain to update RSpec and Capybara, but that would probably be worth investing in too.

One thing is try is to sleep for a little bit to give the modal time to load. I always do something like this as a last resort:

page.find("[data-reveal-id='earlyUnpauseModal']").click
sleep 0.5 # Adjust this value to the minimum possible to get the test to pass
page.find('a.click-this').click

Reinier Korth about 5 years ago

I have the same problem. Rspec/Capybara doesn't see the modal. Not with have_content and not with have_css. The strange thing is that when I use save_and_open_page (launchy gem) it's actually there and opened.

Dimitri Jorge about 5 years ago

Hi,

I have the same issue and investigated it a little bit.

Rails 4.1.4
Capybara 2.4.1
Rspec 2.99

My spec looks like this:

visit some_path
page.find('#triggerMyModal').click
page.should have_selector('#someModal')

I have the following template (with some debug on it):

:javascript
  function debug() {
    console.log("DEBUG GOT CALLED")
    // When I uncomment the following, the modal appears correctly
    // $('#someModal').foundation('reveal', 'open')
  }

%a#triggerMyModal(href="javascript:debug()" data-reveal-id="someModal")
  %i.fa.fa-plus
   Add

#someModal.reveal-modal(data-reveal)
  .reveal-body= render 'some_content'

When I click on the link through rspec, the debug gets printed correctly however the modal does not open (I use save_and_open_screenshot to check it). When I uncomment the section in the "debug" function, everything works correctly. I guess the listener on "[data-reveal-id]" does not get correctly plugged.

Anyone has an idea on how I can run my test without an ugly fix? Thanks