# Testing ember-animated apps

**URL:** <https://discuss.emberjs.com/t/testing-ember-animated-apps/17535>\
**Category:** Questions\
**Created:** [February 19, 2020, 5:50pm UTC](https://discuss.emberjs.com/t/testing-ember-animated-apps/17535 "2020-02-19T17:50:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![balint](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/balint/32/12521_2.png) [@balint](https://discuss.emberjs.com/u/balint)\
**Post date:** [February 19, 2020, 5:51pm UTC](https://discuss.emberjs.com/t/testing-ember-animated-apps/17535/1 "2020-02-19T17:51:04Z")

</div>

Hi,

We recently had intermittent test failures in a fairly big Ember app that uses ember-animated transitions in a few places.

(I’m going to go into details below but I’m also interested to hear how you test parts of your app where you have ember-animated transitions, so feel free to chime in even if you don’t have answers for my specific questions below.)

Digging down into the problem I came across an `ember-animated` test helper called [`animationsSettled`](https://github.com/ember-animation/ember-animated/blob/master/addon-test-support/index.js#L12-L22). It seems to be the ember-animated aware equivalent of the `settled` helper for built-in test helpers. It waits for all ember-animated transitions to finish before moving on to the next line in the test.

The test failures were only produced if tests (integration and acceptance) were run in a certain order. The fix was to add `await animationsSettled()` everywhere where an action (like `click`) triggered an animation. So we managed to overcome the problem but it left me with a few questions that I’d like to understand better.

1. Is it possible for animations to “linger” between tests? In our case, each of the tests passed when run in isolation. However, if we missed to insert an `animationsSettled` in one test, it seemed to have broken a next one run after it (and possibly, though I’m not 100% sure about this, breaking it by hanging the next `animationsSettled`).
2. It seems a bit too much to ask of the developer to know exactly which actions can trigger animations. In our case, even a `visit` could trigger it because a component also animated when it was first inserted. This makes someone relatively new to that part of the code having to spend quite some time figuring this out. Maybe that’s just how things are, but I wonder if there’s an easier way around this. (see next point)
3. To address the previous point, would it make sense for all the built-in test helpers (`click`, `visit`, `triggerEvent`, etc.) to detect if a project uses ember-animated and then have `settled` also wait for animations (= call `animationsSettled`) behind the scenes? It’d add some overhead but the previous point would be vastly improved.
4. ember-animated alls add a hook, [`setupAnimationTest`](https://github.com/ember-animation/ember-animated/blob/master/addon-test-support/index.js#L107-L138) which adds a bunch of useful assertions. Should this function still be called if a test doesn’t need those assertions? The only other thing it seems to do is speed up animations by calling `time.runAtSpeed(40)` but I wasn’t quite able to figure out if that’s needed (and if that’s what it really does 🙂 ).

Thanks a bunch for answering these.

Balint

---

<div class="post-metadata">

**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\
**Post date:** [February 20, 2020, 2:48pm UTC](https://discuss.emberjs.com/t/testing-ember-animated-apps/17535/2 "2020-02-20T14:48:19Z")

</div>

I had no idea these helpers existed. Really need this documented in the official docs.

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [February 20, 2020, 3:45pm UTC](https://discuss.emberjs.com/t/testing-ember-animated-apps/17535/3 "2020-02-20T15:45:25Z")

</div>

> [@balint](#):
>
> it possible for animations to “linger” between tests?

It shouldn’t be, if you can reproduce please file a bug. A component that gets destroyed while it’s animating should clean everything up safely.

> [@balint](#):
>
> It seems a bit too much to ask of the developer to know exactly which actions can trigger animations.

Agreed, for the case where you’re not specifically trying to test the animations, it should be enough to tell ember-animated to just run the animations super fast. `setupAnimationTest` does that, if you don’t use any of its other features. But I can see how its name is confusing, since it can support both tests where you want to effectively skip the animations and also tests where you want to use assertions to control the animations.

> [@balint](#):
>
> would it make sense for all the built-in test helpers ( `click` , `visit` , `triggerEvent` , etc.) to detect if a project uses ember-animated and then have `settled` also wait for animations

This is how it used to work, and it’s how liquid-fire still works. It’s convenient when you don’t want to test animations, but when you do want to test them it makes things much harder. For example, if you want to assert about what’s in DOM half way through a transition, you need to `await click()` to ensure that the animation has truly started, then `await time.advance(duration / 2)`, then assert. If `settled` waits for animations to finish, `await click()` will wait for the transition to end, when you really want to wait for it to start.

But I think your questions have given me an idea for clarifying these APIs. We should really offer two different test setup functions. One that works like the current `setupAnimationTest` for when you actually want to assert about the animations, and a separate one for when you just want animations to not get in the way at all.

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [February 20, 2020, 3:48pm UTC](https://discuss.emberjs.com/t/testing-ember-animated-apps/17535/4 "2020-02-20T15:48:10Z")

</div>

> <https://github.com/ember-animation/ember-animated/issues/199>
>
> Right now we have \`setupAnimationTest\`, which is good for when you want to actua…lly assert about animations.
> 
> We should add a second test setup function for when you just want the animations to not effect your tests at all. It can do the same \`runAtSpeed(40)\` that \`setupAnimationTest\` does by default, but it would also use \`registerWaiter\` to make Ember \`settled\` wait for transitions to finish, so they never affect what your tests are seeing.

---

<div class="post-metadata">

**Author:** ![balint](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/balint/32/12521_2.png) [@balint](https://discuss.emberjs.com/u/balint)\
**Post date:** [February 21, 2020, 1:24pm UTC](https://discuss.emberjs.com/t/testing-ember-animated-apps/17535/5 "2020-02-21T13:24:04Z")

</div>

That makes a lot of sense, I commented on the Github issue you created. Thanks!
