How do I resolve this race condition with knockout and capybara?

Question

I have a page that's rendering a wijmo combobox via the wijcombobox knockout binding ( http://wijmo.com/wiki/index.php/Using_Wijmo_with_Knockout ). I'm having difficulty testing this using capybara because of a race condition between the tests running and the click event being bound. There are possibly other race conditions as well, but this is the current one tripping me up. This is what I have as a current workaround:

def click_on_combobox_till_options_appear
  wait_until(10) do
    page.find('.wijmo-wijcombobox-trigger').click
    page.has_css?('.wijmo-wijlist-item')
  end
end

I'm using 'kb-inject' to setup my ViewModel bindings.

Is there a javascript event I can hook up to or property I can test to indicate that applyBindings has finished executing, so that I can avoid workarounds like the one above?

Answer 1

In terms of waiting for applyBindings to be called, we came up with the following workaround. It's not great, but should serve as a basis for solving similar problems (replace App with a namespace that makes sense):

def wait_for_ko_bindings
  js = <<END_JS
$(function() {
  ko.bindingHandlers.isLoadedForTests = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
      App.ko_bindings_loaded_for_tests = true;
    }
  };
  var viewModel = {};

  var testNode = document.createElement('div');
  testNode.innerHTML = '<div data-bind="isLoadedForTests:1"></div>';
  document.body.appendChild(testNode);
  kb.applyBindings(viewModel, testNode);
});
END_JS
  page.execute_script(js)
  wait_until do
    page.evaluate_script('App.ko_bindings_loaded_for_tests === true')
  end
end

Specifically for the wijcombobox, we found the following to work:

def click_combobox
  wait_until(10) do
    page.find('.wijmo-wijcombobox-trigger').click
    page.all('.wijmo-wijlist-item').length > 0
  end
end