Help with `await`


#1

Hello, I want to know which is the right way to wait a template update based on a computed property on my test. If i use settled the test will wait the template being updated after the computed changed or i will have to use something else like waitFor?

I will try to explain the test case in more detail:

  • My component.js:
export default Component.extend({
  showHello: gt('data.length', 0),

  actions: {
    buttonClick() {
      return this.getDataFromServer().then(data => set(this, 'data', data));
    }
  }
});
  • My component.hbs
{{#if showHello}}
  <span data-test-hello>Hello</span> 
{{/if}}

<button {{action "buttonClick"}} data-test-button>Button</button>
  • My component-test.js (I mock the data so the getDataFromServer always return an array with two values.)
module('Acceptance | component', function (hooks) {
  setupApplicationTest(hooks);

  test('Test component', async function (assert) {
    await visit(`/`);
    await click('[data-test-button]');

    assert.dom('[data-test-hello]').exists('The hello exists');
  });
});

#2

Hey @Raphael_Nunes with which error does your test case currently fail? Do you get an error that the data-test-hello element you’re looking for doesn’t exist or is it rather a test timed out error?


#3

Hey @jessica in my case the data-test-hello doesn’t exists. My real app is very more complex than the example, but the ideia is the same: the button’s click trigger an action, the action use a service to get data outside (using native Promise), the result sets the data, a computed property use the data and for the last the template respondes to the computed state.


#4

Seems to me that Ember might not know how to track your getDataFromServer.

How is that implemented? Are you doing any non-RSVP stuff there? You might need to look into registerWaiter.


#5

I tried they both with RSVP and native Promises, but accordling with this post (Readers' Questions: "Why does Ember still use RSVP?") the native promise it is now working with ember 3.4 and you can use it with tests. This is very annoying because the tests pass in the most of the times, but sometimes not.


#6

When tests sometimes pass and sometimes don’t it means you have leaks between tests and the most common is rouge async code that Ember was unable to monitor and wait for. My original comment is, therefor, still relevant.