Impossible to test Angular UI Typeahead with Poltergeist and PhantomJS

Question

I'm having a problem testing my typeahead inputs. I'm using Rails, RSpec, Capybara, Angular UI 0.10, AngularJS, Poltergeist. This is my test:

create(:user, name: "Test User")
fill_in 'User', with: "Test"
find('#delegations').find('li.active').click

If I run it using the Chrome driver, it runs successfully. However, when running with Poltergeist, the suggestion box is not showed, although the server receives the request and returns the users accordingly.

I think that the fill_in is triggering blur on the field, making the box disappear. I used Capybara::Screenshot to see if there was any suggestion showing up, but there wasn't. The input field doesn't even get the focus.

Answer 1

I found out it really was because Poltergeist triggers the blur in fill_in. All I had to do was, before filling the typeahead field, execute this script:

page.execute_script "$('input[typeahead]').unbind('blur')"

This way, UI Typeahead's blur event doesn't get called and it thinks it has the focus on the field, rendering the suggestions box accordingly.

In case you are not using JQuery, this script works with AngularJS:

elements = document.getElementsByTagName('input');
for (var i = 0; i < elements.length; i++) {
  if (elements[i].hasAttribute('typeahead')) {
    angular.element(elements[i]).unbind('blur');
  }
}