Problems with capybara/rspec finding an angular link on the page

Question

Me and some fellow students are building a Rails/Angular clone of AirBNB, and I seem to be having some rspec/capybara issues!

I have the following test...

context 'users are able to add a space' do scenario 'adding a space' do visit '/' click_link 'Post a space' fill_in 'Name', with: 'my hotel' fill_in 'Location', with: 'London' fill_in 'Price', with: '100' attach_file "Image", "spec/asset_specs/photo/Elephant.jpg" fill_in 'Details', with: 'single bedroom with ensuite' fill_in 'Available from', with: Date.new(2016,03,15) fill_in 'Available to', with: Date.new(2016,03,15) click_button 'Create Space' within 'ul#spaces' do expect(page).to have_content 'Location: London' expect(page.find('.space_thumb')['src']).to have_content 'Elephant.jpg' end end end end

My view is as follows...

 <input id='search' ng-model='query'></br> 
 <section ng-if='spaces == false'>
   <p>no spaces yet...</p>
 </section>

 <a ng-href='/spaces/new' id='post_space'>Post a space</a>

 <section>
   <ul id='spaces' ng-repeat='space in spaces | filter:query'>
     <li>
       <h5>{{space.name}}</h5>
       <img class='space_thumb' ng-src={{space.image_url}}/>
       <p>Location: {{space.location}}</p>
       <p>Price: {{space.price}}</p>
       <p>Details: {{space.details}}</p>
       <p>Available from: {{space.available_from}}</p>
       <p>Available to: {{space.available_to}}</p>
     </li>
   </ul>
 </section>

However when I use the default driver to run the tests, I get the following error...

Capybara::ElementNotFound:
Unable to find link "Post a space"

It however works when I use selenium, but then my test to check the image src, it fails as it returns a default missing.png file. Im guessing just because selenium does not allow capybara enough time to upload an image...

Is there an angular friendly driver I can use or should I just scrap this and test in protractor or similar...

Thanks!

Answer 1

The default rack_test driver doesn't process JS at all, so using it with an Angular site is going to be a waste of time (since everything is JS driven). The reason it doesn't find the link is a link has to have an href attribute, which your markup doesn't but is added by the angular JS once it runs (hence why testing an angular driven site with rack_test is useless)

For your image test - by finding the element, grabbing the src attribute and then comparing it you're disabling the waiting behavior (because you're extracting a string that can't be automatically reloaded). Instead you should do something like

expect(page).to have_selector('.space_thumb[src$="Elephant.jpg"]')

which can retry for matching elements up to Capybara.default_max_wait_time seconds for the matching element to appear. You might need to adjust the type of attribute selector in the css depending on what the src in the real page looks like ( for instance *= (contains) if the image src has a cache busting query parameter or anything )