rspec/capybara <li> not loading - ruby-on-rails

Question

I'm trying to test my AJAX with Rspec/Capybara.
My page (recruiter#dashboard) contains 3 columns.
It loads in candidates that applied for a certain vacancy and their state.
Column 1 => state==pending
Column 2 => state==matched
Column 3 ==> state=="sealed"
In my spec I'm creating a vacancy with 1 applicant that has state pending.
print "Amount of vacancies => #{Vacancy.count} "
print "Amount of candidates => #{Employee.count} "
print "Amount of candidates applied for vacancy => #{Matching.where(vacancy_id: Vacancy.first.id).count}"
print "State of #{Employee.first.name} for #{Vacancy.first.name} => #{Matching.where(vacancy_id: Vacancy.first.id, employee_id: Employee.first.id).first.state}"
returns
Amount of vacancies => 1
Amount of candidates => 1
Amount of candidates applied for vacancy => 1
State of foo1 Hintz for vacancy1 => pending
So that would mean that this candidate should be loaded in the li below:
<ul id="applied-desktop-dashboard-ajax">
<li>
CANDIDATES
</li>
</ul>
Yet, when I run my test:
page.all("#applied-desktop-dashboard-ajax li").count.should eql(1)
returns
expected: 1
got: 0
When I
save_and_open_page
I see the li is empty.
So I tried
sleep(5)
after
visit "dashboard"
But no success.
Does anyone have an idea why my li aren't loading in this test (but are working on localhost just fine.)?
Full test:
require 'rails_helper'
RSpec.feature "Creating vacancies" do
before do
create(:matching)
end
scenario "Ajax testing" do
visit "/recruiters/sign_in"
fill_in "Email", with: "bedrijf1#hotmail.be"
fill_in "Password", with: "bedrijf1bedrijf1"
within 'form#new_recruiter' do
find('input[name="commit"]').click
end
expect(current_path).to eq '/'
visit "/dashboard"
sleep(5)
print "Amount of vacancies => #{Vacancy.count} "
print "Amount of candidates => #{Employee.count} "
print "Amount of candidates applied for vacancy => #{Matching.where(vacancy_id: Vacancy.first.id).count}"
print "State of #{Employee.first.name} for #{Vacancy.first.name} => #{Matching.where(vacancy_id: Vacancy.first.id, employee_id: Employee.first.id).first.state}"
# save_and_open_page
page.all("#applied-desktop-dashboard-ajax li").count.should eql(1)
end
end

Answer 1

When performing js tests the app being tested runs in a different thread than the test, which means they no longer share the same database connection - see https://github.com/jnicklas/capybara#transactions-and-database-setup. Because of this you need to disable transactional testing and use truncation or deletion to manage the database state. The easiest way to do that is to use database_cleaner and setup a config that will swap to the needed strategy for each test - https://github.com/DatabaseCleaner/database_cleaner#rspec-with-capybara-example
Once you have that configured correctly then it's time to look at your test and make it less brittle with asynchronous testing.
expect(current_path).to eq '/' should be rewritten as expect(page).to have_current_path('/') so that Capybara will automatically wait for the page to change.
By default page.all doesn't wait for any elements to appear since 0 elements is a valid return. If you change page.all("#applied-desktop-dashboard-ajax li").count.should eql(1) to expect(page).to have_selector("#applied-desktop-dashboard-ajax li", count: 1) Capybara will wait for a little bit of time for the li to appear on the page rather than failing immediately because the ajax hadn't yet completed. You can also specify :minimum, :maximum, :between depending on what exactly you're verifying
Using the correct Capybara methods can remove the need for most if not all sleep()s in your testing.