Disable during acceptance tests

[poteto]

Currently, there is no option to disable liquid-fire transitions in a test environment, which slows down acceptance tests with unnecessary animations. It seems like the easiest way to do so is to set the duration of transitions to 0 at runtime, but it is not currently documented very well.

Possible ways to disable:

1. Set $.Velocity.mock = true (thanks to @mmun for this tip)

2. Import the app's config/environment into transitions.js (thanks @rwjblue):

   import config from '../config/environment';
   
   function getDuration() {
    config.environment === 'test' ? 0 : 3000
   }
   
   this.transition(
    this.withinRoute('foo'),
    this.use('fade', { duration: getDuration() })
   );

3. Have liquid-fire infer the app environment and disable itself during tests; or
4. Provide a method on the liquid-fire service that can toggle on/off transitions
5. Something else

@ef4 – what is the preferred way to disable transitions in tests? I'm happy to submit a PR to update the docs when we've decided on the best approach.

Thank you!

[ef4]

Option 2 is currently the most robust method. Velocity.mock also works, but it assumes nobody has used any non-velocity-backed custom animations.

I would like to establish a unified API for timing control. Right now it's entirely up to each animation if it accepts a duration argument and how to interpret it. This has some surprising effects, like the fact that fade can run twice as long as you think it will (because it spends a whole duration fading out and another fading in).

This would create a natural place to provide global speed adjustment factors to run everything instantly under tests, or run everything slowly when trying to debug an animation.

[youroff]

Thanks for the clue. Here's slightly improved version, to set it as default (not sure if it works for transitions, I use only modals this far):

import config from './config/environment';

function getDuration() {
  return config.environment === 'test' ? 0 : 250;
}

export default function() {
  this.setDefault({duration: getDuration()});
}

[GCorbel]

Sorry to wake up an old issue but $.Velocity is not set anymore. We have to do :

import Velocity from "velocity";
Velocity.mock = true;

I had to upgrade to the latest version because of an update to ember 2.10. It can be helpful for googlers (like me).

[lone-cloud]

On behalf of Googlers everywhere, I salute you good sir.

[tim-evans]

How could we get this working for selenium tests as well?

We have a QA group that runs selenium tests against our app- it would be nice for them to disable animations to make them run more quickly.

[ef4]

For selenium, you can use techniques like the ones above, but instead of checking for config.environment === 'test', you could check for a special parameter in the URL, or a special cookie. Then configure selenium to use that parameter or cookie.

[wagenet]

In my investigation, none of these correctly disable component animations. I tried using Velocity.mock, to disable a liquid-spacer. It partially works, except some of liquid-fire's added styles still remain. I'm trying to take snapshots for Percy and this is somewhat annoying.

[wagenet]

Ah, I take this back, Velocity.mock basically did what I want but there are issues with the scaled testing container.

[wagenet]

The issue is liquid-measured's use of getBoudingClientRect, which gets the transformed size in pixels, not the original size. Should this be considered a bug? I'm inclined to think it is.

[wagenet]

See #588 for my fix.