Support for rerender() with DOM interaction helpers in acceptance tests

[nwhittaker]

In acceptance tests, it'd be useful to have some way to verify interstitial states while some asynchronous operation occurs.

For example, using the click() helper to click a save button. While the save operation is running, the button is disabled:

<button disabled={{this.isSaving}} {{on 'click' this.save}} />

async save() {
  this.isSaving = true
  await this.save()
  this.isSaving = false
}

In the test, calling click('button') returns before this.save() runs. Calling await click('button') returns after this.save() runs. So the test currently looks something like:

click('button')
await waitFor('button:[disabled]')
await settled()
assert.dom('button').isEnabled()

There's no actual assertions for the expected states, and it sometimes times out for no clear reason. With rerender() I was expecting to be able to do something like the following, but it doesn't work because rerender() runs before this.save() runs:

click('button')
await rerender()
assert.dom('button').isDisabled()
await settled()
assert.dom('button').isEnabled()

Admittedly this is a contrived example and better suited for an integration test. However, in cases where interaction in one component updates the state in another either via an action or service, an acceptance test is easier since it'd likely need less mocking.

[rwjblue]

I think you might need/want to use await waitFor('#some-element')

[nwhittaker]

I'm using waitFor() in the workaround example, but it ends up timing out sometimes.

I think what I'm asking is if/can/should DOM interaction helpers (e.g. click()) not return until after they've at least triggered their event (e.g. "click")? Or otherwise having rerender() wait until all pending helper events are triggered?