Settledness in Tests

Test helpers

We have used a few of the test helpers, like visit, click, and fillIn. There are way more DOM helpers we haven’t used, but what all helpers have in common is that they wait for all async operations to finish before they resolve. We have to put await in front of them to make sure all effects of an action, like clicking a button, have been fully reflected in the DOM before we move on.

So, what can those async operations that the DOM helpers wait for be? Examples include route transitions, ajax requests, timers, and a few more.

Most of the time, we get away with using the DOM test helpers with await without worrying too much about async actions they trigger in the background. However, in some cases, we need to manually tell the test to wait until a certain condition is fulfilled. That’s why Ember provides lower-level, non-DOM test helpers, in the same package. The one that catches our attention is called waitFor. It will wait for a DOM element to be rendered on screen, and it has a timeout so that it doesn’t hang the test.

One element we can target this way is the text that is displayed when a band has no songs yet. This way, we know the empty songs page has been rendered for the new band, and we expect the band to appear in the band list by that time: