Skip to content

Commit

Permalink
Mock Animated for testing
Browse files Browse the repository at this point in the history
Summary:
Animated views can cause flakiness in snapshot tests. This mock replaces all provided Animated transforms with a blank animation.

This could potentially break some tests which animate in elements and then verify their existence. I can deal with that fallout in follow up diffs. One option is making all animations take 0 seconds when testing.

Reviewed By: cpojer

Differential Revision: D13811035

fbshipit-source-id: cc6b13c7d6bad29b125d35ef759a269bb0372e67
  • Loading branch information
Peter Argany authored and facebook-github-bot committed Feb 5, 2019
1 parent f370933 commit 45686c8
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 1 deletion.
6 changes: 5 additions & 1 deletion Libraries/Animated/src/Animated.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@

'use strict';

const AnimatedImplementation = require('AnimatedImplementation');
import Platform from 'Platform';

const AnimatedImplementation = Platform.isTesting
? require('AnimatedMock')
: require('AnimatedImplementation');

module.exports = {
get FlatList() {
Expand Down
2 changes: 2 additions & 0 deletions Libraries/Animated/src/AnimatedImplementation.js
Original file line number Diff line number Diff line change
Expand Up @@ -514,6 +514,8 @@ const event = function(argMapping: Array<?Mapping>, config?: EventConfig): any {
* easy to build and maintain. `Animated` focuses on declarative relationships
* between inputs and outputs, with configurable transforms in between, and
* simple `start`/`stop` methods to control time-based animation execution.
* If additional transforms are added, be sure to include them in
* AnimatedMock.js as well.
*
* See http://facebook.github.io/react-native/docs/animated.html
*/
Expand Down
117 changes: 117 additions & 0 deletions Libraries/Animated/src/AnimatedMock.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
* @format
*/
'use strict';

const AnimatedImplementation = require('AnimatedImplementation');
const AnimatedValueXY = require('./nodes/AnimatedValueXY');
const AnimatedValue = require('./nodes/AnimatedValue');

import type {EndCallback} from './animations/Animation';
import type {TimingAnimationConfig} from './animations/TimingAnimation';
import type {DecayAnimationConfig} from './animations/DecayAnimation';
import type {SpringAnimationConfig} from './animations/SpringAnimation';
import type {Mapping, EventConfig} from './AnimatedEvent';

/**
* Animations are a source of flakiness in snapshot testing. This mock replaces
* animation functions from AnimatedImplementation with empty animations for
* predictability in tests.
*/
type CompositeAnimation = {
start: (callback?: ?EndCallback) => void,
stop: () => void,
reset: () => void,
_startNativeLoop: (iterations?: number) => void,
_isUsingNativeDriver: () => boolean,
};

const emptyAnimation = {
start: () => {},
stop: () => {},
reset: () => {},
_startNativeLoop: () => {},
_isUsingNativeDriver: () => {
return false;
},
};

const spring = function(
value: AnimatedValue | AnimatedValueXY,
config: SpringAnimationConfig,
): CompositeAnimation {
return emptyAnimation;
};

const timing = function(
value: AnimatedValue | AnimatedValueXY,
config: TimingAnimationConfig,
): CompositeAnimation {
return emptyAnimation;
};

const decay = function(
value: AnimatedValue | AnimatedValueXY,
config: DecayAnimationConfig,
): CompositeAnimation {
return emptyAnimation;
};

const sequence = function(
animations: Array<CompositeAnimation>,
): CompositeAnimation {
return emptyAnimation;
};

type ParallelConfig = {
stopTogether?: boolean,
};
const parallel = function(
animations: Array<CompositeAnimation>,
config?: ?ParallelConfig,
): CompositeAnimation {
return emptyAnimation;
};

const delay = function(time: number): CompositeAnimation {
return emptyAnimation;
};

const stagger = function(
time: number,
animations: Array<CompositeAnimation>,
): CompositeAnimation {
return emptyAnimation;
};

type LoopAnimationConfig = {iterations: number};

const loop = function(
animation: CompositeAnimation,
{iterations = -1}: LoopAnimationConfig = {},
): CompositeAnimation {
return emptyAnimation;
};

const event = function(argMapping: Array<?Mapping>, config?: EventConfig): any {
return null;
};

module.exports = {
...AnimatedImplementation,
decay,
timing,
spring,
delay,
sequence,
parallel,
stagger,
loop,
event,
};

0 comments on commit 45686c8

Please sign in to comment.