Using during acceptance tests

[wayne-o]

HI

In my acceptance test I want to provide the first 3 chars of a search and then select from the suggestions - the tests use Mirage for fetching remote data. My UI only has one power select.

So far I have tried:

click('.ember-basic-dropdown-trigger');
fillIn('.ember-power-select-trigger-multiple-input', 'pyr');

However that doesn't seem to trigger the power select to fetch suggestions?

Whats the correct way to do this in tests?

Cheers :)

[cibernox]

fillIn It works out of the box in ember 2.0 but not in 1.13, and this is because of a bug in Ember I fixed myself here: emberjs/ember.js#11708

The tl;dr is that this component listens for the input event (available in IE9+) because it's ideal for this use-case. Unlike keydown, it only fires when the content of an input changes (pressing arrows by example doesn't trigger it), and it also works when copy-pasting. But fillIn in ember 1.13 doesn't fire this event.

I created that function for myself in the tests to cover the test suite in 1.13: https://github.com/cibernox/ember-power-select/blob/master/tests/integration/components/power-select-test.js#L73-L76

Not ideal, but this situation shouldn't last much longer.

[wayne-o]

Hi

So I upgraded to ember 2> and still not getting the results in the drop down - I guess this is something to do with the fact that my results are not local? They're the result of an ajax call... is there anything I can do to wait for the results? I am using mirage so it should be quick responding.

[cibernox]

If you are using methods on the store like store.query and in your tests (acceptance tests I assume), if you use an andThen the instrumentation should be able to wait for the response.

In integration tests I added an explicit wait myself: https://github.com/cibernox/ember-power-select/blob/master/tests/integration/components/power-select-test.js#L1915-L1920

Another trick you can use in tests to see if the search is actually being performed is add server.logging = true somewhere in the test to log requests and be sure that the problem is that the component is not triggering the action.

If the event is not being triggered, I must revisit this because I don't want to force people to use anything special in Ember 2.0+ for testing.

[wayne-o]

Actually using Ember.$.get

Would it know to wait for that?
On Thu, 5 Nov 2015 at 09:29, Miguel Camba notifications@github.com wrote:

If you are using methods on the store like store.query and in your tests
(acceptance tests I assume), if you use an andThen the instrumentation
should be able to wait for the response.

In integration tests I added an explicit wait myself:
https://github.com/cibernox/ember-power-select/blob/master/tests/integration/components/power-select-test.js#L1915-L1920

Another trick you can use in tests to see if the search is actually being
performed is add server.logging = true somewhere in the test to log
requests and be sure that the problem is that the component is not
triggering the action.

If the event is not being triggered, I must revisit this because I don't
want to force people to use anything special in Ember 2.0+ for testing.

—
Reply to this email directly or view it on GitHub
#98 (comment)
.

[cibernox]

Ember's andThen will wait until the runloop is exhausted. I think that jquery's ajax is not instrumented, but ic-ajax is. It is included in all ember-cli apps by default precisely because using Ember.$ is not runloop-aware and basically untestable.

[cibernox]

This is an example of how ic-ajax is used: https://github.com/komsit37/ember-bnb-dash/blob/56c3f8335efd15844367c0116fbf2ab1da45b29f/app/samples/dc-ajax/route.js

[wayne-o]

OK so moved the code to use ic-ajax and still getting the same issue:

  fillIn('.ember-power-select-trigger-multiple-input', 'pyr');

  andThen(function(){
     assert.equal($('.ember-power-select-dropdown').length, 2, 'Dropdown is not rendered');
  });

Stepping through the test I can see that there are results returned from the 'pyr' query...

[wayne-o]

Using setTimeout works btw :)

[cibernox]

In that case perhaps it's the component the one doing something outside the instrumentation. I will check it.

[wayne-o]

Actually that was a red herring - I didn't call done at the end. this test still fails:

  Ember.run(() => typeInSearch('pyr'));

  setTimeout(function() {
    assert.equal($('.ember-power-select-dropdown').length, 3, 'Dropdown is rendered');
    done();
  }, 3000);

Even with 3000 :p

[wayne-o]

Hey - slack isn't loading on the train so trying here:

I now have

  Ember.run(() => $('.ember-power-select-trigger').click());
  fillIn('.ember-power-select-trigger-multiple-input', 'pyr');
  setTimeout(function() {
    assert.equal($('.ember-power-select-dropdown').length, 3, 'Dropdown is rendered');
    done();
  }, 3000);

And still do not see the drop down :/

[cibernox]

Following slack conversation, will close this and add another issue to investigate behavior in acceptance test to make sure all promises are instrumented and the user doesn't need to make tests async.