Testing Twitter Typeahead with RSpec/Capybara

562 views Asked by At

I have Twitter Typeahead working in development mode, but I just can't seem to get it to run the select callback in automated testing. Here's my an excerpt from my testing code:

name = 'Jackalous'
user = create :user, first_name: name, approval_status: 'approved', access: true
visit plan_plan_contacts_path(plan)
page.driver.execute_script %Q{ $('#add-user').typeahead('val', '#{name}').focus(); }
find('.tt-suggestion:first-child').click
expect(PlanContact.count).to eq(1)

Here's the javascript:

var users = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: { url: '#{search_plan_plan_contacts_path}?s=%SEARCH', wildcard: '%SEARCH' }
});
var $au = $('#add-user');
$au.typeahead({ minLength: 2}, { name: 'users', display: 'value', source: users });
$au.on('typeahead:select typeahead:autocomplete', function(e, obj) {
  $.ajax({
    url: "#{plan_plan_contacts_path}",
    dataType: 'script',
    method: 'POST',
    data: { plan_contact: { user_id: obj.id } }
  });
  $au.typeahead('val', '');
});

I believe that I am getting the dropdown to actually appear as the find('.tt-suggestions:first-child') call succeeds. The click call doesn't seem to be doing it's job and I haven't been able to get it to work by calling trigger('mouseenter').click() on the jQuery tt-suggestions object either.

I have also tried this for the RSpec test in hopes that it will trigger the callback, to no avail:

# ... 
au = find('#add-user').native
au.send_keys name
find('.tt-suggestion:first-child') # Make sure it pops up
au.send_keys :key_down
au.send_keys :enter
#... 
0

There are 0 answers