Rails 5 Capybara not founding already clicked button - capybara

Question

I have the following test:
it 'shows the current quantity of items inside cart' do
item = create(:item)
visit root_path
click_link("add-item-#{item.id}")
wait_for_ajax
page.find('#notice-modal-ok').click
click_link("add-item-#{item.id}")
wait_for_ajax
page.find('#notice-modal-ok').click
expect(page).to have_selector('#cart-item-count', text: '2')
end
It's basically a button with ajax thats show a success modal when return status 200. But, when the second ajax happens, for reason that I can't understand, the modal doesn't shows up. I can do this normally in dev environment.
Thanks for help!
Edit #1
I added a save_and_open_screenshot to try to debug this. The code in the end looked this way:
it 'shows the current quantity of items inside cart' do
item = create(:item)
visit root_path
click_link("add-item-#{item.id}")
page.find('#notice-modal-ok', wait: 10).click
expect(page).not_to have_selector('#notice-modal-ok')
click_link("add-item-#{item.id}")
save_and_open_screenshot # image
page.find('#notice-modal-ok', wait: 10).click # this fails
expect(page).to have_selector('#cart-item-count', text: '2', wait: 10)
end
Imagem number 1
As the images shows, the modal isn't appering on the second call. Here is the javascript thats shows it:
$(document).ready(function() {
$("a:regex(id,add-item-[0-9]+)").click(function(event) {
event.preventDefault();
var link = $(this).attr("href");
$.ajax({
url: link,
method: "GET",
dataType: "json",
success: function(data) {
$('#notice-modal').modal('show');
if(data.quantity) {
$("#cart-item-count").css('display', 'block');
$("#cart-item-count").html(data.quantity);
} else {
$("#cart-item-count").hide()
}
}
});
})
});
And in development mode, it works normally. Hope this new infos help!

Answer 1

Firstly, if the element with id of 'notice-modal-ok' is only appearing after the ajax request has completed then wait_for_ajax isn't required. Beyond that, assuming that clicking the modal doesn't affect the behavior of the add item link there are a few possibilities. One is that the modal hasn't actually disappeared before the link click happens and that suppresses link behavior. Another would be that `Capybara.default_max_wait_time' isn't set high enough for the hardware you're running on. To test for these you can wait for the modal to be gone before clicking the link for the second time and also temporarily increase the max wait time
Update: the root cause of the issue is that semantic-ui thinks the modal is still active (even though it has been closed) if you click the 'ok' button to close it before it has fully animated into place. The way around this in the tests is to make sure the modal has class 'active' before clicking the ok button. An alternate solution would be to disable all animations in semantic-ui when testing (if it has that option) which would also speed up tests.
it 'shows the current quantity of items inside cart' do
item = create(:item)
visit root_path
click_link("add-item-#{item.id}")
page.find('#notice-modal.active #notice-modal-ok').click
expect(page).not_to have_selector('#notice-modal') #verify/wait for the modal to disappear
click_link("add-item-#{item.id}")
page.find('#notice-modal.active #notice-modal-ok').click
expect(page).to have_selector('#cart-item-count', text: '2')
end