Acceptance Testing with Async Content

[alexlafroscia]

I've been trying to acceptance test part of my app that uses a Promise to populate the multi-select. However, I can't seem to get it all working; it seems like when using click and fillIn, the dropdown with the selection options doesn't appear. Do you have any suggestions on how to get this working? I looked through all the test examples in the repo, but couldn't find anything that really matched my use case.

[lan0]

+1, have you found a solution yet?

[alexlafroscia]

Nope, still haven't worked out a way to do this 😦

[lan0]

We think about switching to miguelcobain/ember-cli-selectize. Tests are a big deal!

[alexlafroscia]

Oh cool, that does look good. Does it support testing in an easier way?

[lan0]

Yes, a test now looks like this:

visit('/select');
andThen(function() {
  find('.selectize-control').click();
  equal(find('.selectize-dropdown-content div:eq(0)').text(), 'Item 1');
  equal(find('.selectize-dropdown-content div:eq(1)').text(), 'Item 2');
});

And ember-select-2 uses a very similar API to ember-cli-selectize, so integration was straightforward.

[alexlafroscia]

That's great, I'll definitely look into that then. Thanks!

[jniechcial]

I managed to test in acceptance most of used behaviour. However, I did not used multiple option. Maybe these snippets will help you somehow.

Opening a dropdown with search input:

click(".select2-choice")
andThen ->
  # ready to go

Entering some content to search query:

searchInput = Ember.$(".select2-search:last input")
triggerEvent(searchInput, 'keydown')
fillIn(searchInput, "Some query")
triggerEvent(searchInput, 'keyup')
andThen ->
  # ready to go

Of coure, it is worth to wrap this code in some kind of helpers to reuse. The results from async API are obtainer by mocking the backend with proper payloads. Hope that helps.