emberjs / emberjs/ember-test-helpers

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

Open
#1,245 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
188
Forks
254
PR merge metrics
No merged PRs in 30d

Description

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:

```hbs

```

```ts
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:

```ts
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:

```ts
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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.