Rails Cucumber Testing AJAX using Capybara

Question

I am using Rspec, Capybara, and Cucumber to test a feature of my site. Essentially, I have a fashion e-commerce site. I have the shop page which displays all the the items, and when you click on a specific item, it takes you to the detail page for that item, lets say a sweater. For this sweater, as the shopper, you have the option of selecting the size and color that you want. The last option is the quantity that you want of a selected size and color. However, I have JS code that triggers an AJAX call to update the total available quantity if a shopper selects a different size or color. So if you start with a small, blue sweater, and you change the size to medium, the AJAX call will retrieve the total available medium, blue sweaters. So if there are 10 available, then the select option for quantity will go from 1 to 10. Now to test this functionality I have the following:

# first create the items for the test db:
Given /^there are four total items and three unique item names$/ do
  create(:product, size: 'M', color: 'Black')
  create(:product, size: 'M', color: 'Black')
  create(:product, size: 'S', color: 'Black')
  create(:product, size: 'S', color: 'White')
  create(:product, size: 'S', color: 'White', available: false)
  create(:product, name: 'Alicia Dress', size: 'L', color: 'black', order: 3)
  create(:product, name: 'Cleopatra Dress', size: 'L', color: 'blue', order: 2)
end

Then I have my cucumber test (note the starting options are small and black, which only has a quantity of 1, but when you change the size option to M, it should go to 2 since there are two M black coats):

Scenario: If a shopper selects a different size or color
  Given the shopper is on the "shop" page
  When the shopper clicks on "Master Coat"
  And the shopper selects a size "M"
  Then the total quantity should change to "2"

And my test steps:

When /^the shopper selects a size "(.+)"$/ do |size|
  find('.select-size').find(:option, size).click
end

Then /^the total quantity should change to "(.+)"$/ do |quantity|
  expect(page).to have_css('option', :text => quantity)
end

Note, I left out the steps for the Given and When since I know those work. My main issue, is that after the "And the shopper selects a size M" the AjAX call is supposed to fire and change the quantity, but in my last step the quantity stays 1 and does not change to 2, as its supposed and as it does when I test it manually. My guess is that either the AJAX isn't firing or its firing after the last test step, and therefore not finishing before the test checks the result.

Am I setting this up correctly? And if so, how can I make my matcher test for the AJAX response? I tried several things but it wasn't working.

Answer 1

I would normally goes with selenium driver with @javascript tag to test Ajax calls.

In your features/support/capybara.rb

Capybara.default_driver = :selenium

Or try @javascript tag above the scenario

@javascript
Scenario: If a shopper selects a different size or color
Given the shopper is on the "shop" page
  When the shopper clicks on "Master Coat"
  And the shopper selects a size "M"
  Then the total quantity should change to "2"

Answer 2

Maybe you should try selecting the option with .select_option rather than .click .

When /^the shopper selects a size "(.+)"$/ do |size|
   find('.select-size').find(:option, size).select_option
end

( How to select option in drop down using Capybara )