-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #150 from wix/animations_issue
Animations issue
- Loading branch information
Showing
10 changed files
with
282 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| // | ||
| // WXAnimatedDisplayLinkIdlingResource.h | ||
| // Detox | ||
| // | ||
| // Created by Sergey Ilyevsky on 22/05/2017. | ||
| // Copyright © 2017 Wix. All rights reserved. | ||
| // | ||
|
|
||
| #import <Foundation/Foundation.h> | ||
| #import <EarlGrey/EarlGrey.h> | ||
|
|
||
| @interface WXAnimatedDisplayLinkIdlingResource : NSObject <GREYIdlingResource> | ||
|
|
||
| @end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| // | ||
| // WXAnimatedDisplayLinkIdlingResource.m | ||
| // Detox | ||
| // | ||
| // Created by Sergey Ilyevsky on 22/05/2017. | ||
| // Copyright © 2017 Wix. All rights reserved. | ||
| // | ||
|
|
||
| #import "WXAnimatedDisplayLinkIdlingResource.h" | ||
| #import "ReactNativeHeaders.h" | ||
|
|
||
| @implementation WXAnimatedDisplayLinkIdlingResource { | ||
| id<RN_RCTBridge> _bridge; | ||
| } | ||
|
|
||
| - (NSString *)idlingResourceName | ||
| { | ||
| return NSStringFromClass([self class]); | ||
| } | ||
|
|
||
| - (NSString *)idlingResourceDescription | ||
| { | ||
| return @"Monitors CADisplayLink objects created by React Native Animated"; | ||
| } | ||
|
|
||
| - (BOOL)isIdleNow | ||
| { | ||
| id<RN_RCTBridge> bridge = [NSClassFromString(@"RCTBridge") valueForKey:@"currentBridge"]; | ||
| id animatedModule = [bridge moduleForClass:NSClassFromString(@"RCTNativeAnimatedModule")]; | ||
| id displayLink = [animatedModule valueForKeyPath:@"_nodesManager._displayLink"]; | ||
| return displayLink == nil; | ||
| } | ||
|
|
||
| @end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| let _ = require('lodash'); | ||
|
|
||
| describe('Animations', () => { | ||
| beforeEach(async () => { | ||
| await device.reloadReactNative(); | ||
| await element(by.label('Animations')).tap(); | ||
| }); | ||
|
|
||
| async function _startTest(driver, options = {}) { | ||
| let driverControlSegment = element(by.text(driver).withAncestor(by.id('UniqueId_AnimationsScreen_useNativeDriver'))); | ||
| await driverControlSegment.tap(); | ||
|
|
||
| if(options.loops !== undefined) { | ||
| let loopSwitch = element(by.id('UniqueId_AnimationsScreen_enableLoop')); | ||
| await loopSwitch.tap(); | ||
| await expect(loopSwitch).toHaveValue('1'); | ||
| await element(by.id('UniqueId_AnimationsScreen_numberOfIterations')).replaceText(String(options.loops)); | ||
| } | ||
|
|
||
| if(options.duration !== undefined) { | ||
| await element(by.id('UniqueId_AnimationsScreen_duration')).replaceText(String(options.duration)); | ||
| } | ||
|
|
||
| if(options.delay !== undefined) { | ||
| await element(by.id('UniqueId_AnimationsScreen_delay')).replaceText(String(options.delay)); | ||
| } | ||
|
|
||
| await element(by.id('UniqueId_AnimationsScreen_startButton')).tap(); | ||
| } | ||
|
|
||
| _.forEach(['JS', 'Native'], (driver) => { | ||
| it(`should find element (driver: ${driver})`, async () => { | ||
| await _startTest(driver); | ||
| await expect(element(by.id('UniqueId_AnimationsScreen_afterAnimationText'))).toBeVisible(); | ||
| }); | ||
|
|
||
| it(`should detect loops with final number of iterations (driver: ${driver})`, async () => { | ||
| await _startTest(driver, {loops: 4}); | ||
| await expect(element(by.id('UniqueId_AnimationsScreen_afterAnimationText'))).toBeVisible(); | ||
| }); | ||
|
|
||
| it.skip(`should not wait for infinite animations (driver: ${driver})`, async() => { | ||
| await _startTest(driver, {loops: -1}); | ||
| await expect(element(by.id('UniqueId_AnimationsScreen_afterAnimationText'))).toBeVisible(); | ||
| }); | ||
|
|
||
| it(`should not wait during delays longer than 1.5s (driver: ${driver})`, async () => { | ||
| await _startTest(driver, {delay: 1600}); | ||
| await expect(element(by.id('UniqueId_AnimationsScreen_afterAnimationText'))).toNotExist(); | ||
| }); | ||
|
|
||
| it(`should wait during delays shorter than 1.5s (driver: ${driver})`, async () => { | ||
| await _startTest(driver, {delay: 500}); | ||
| await expect(element(by.id('UniqueId_AnimationsScreen_afterAnimationText'))).toExist(); | ||
| }); | ||
|
|
||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| import React, { Component } from 'react'; | ||
| import { | ||
| Text, | ||
| View, | ||
| Animated, | ||
| Button, | ||
| SegmentedControlIOS, | ||
| Switch, | ||
| TextInput | ||
| } from 'react-native'; | ||
| import _ from 'lodash'; | ||
|
|
||
|
|
||
| class AnimationsComponent extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this._faidInValue = new Animated.Value(0); | ||
|
|
||
| this.state = { | ||
| showAfterAnimationText: false | ||
| }; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| let fadeInAnimation = Animated.timing(this._faidInValue, { | ||
| toValue: 1, | ||
| duration: this.props.duration, | ||
| delay: this.props.delay, | ||
| useNativeDriver: this.props.useNativeDriver | ||
| }); | ||
| var animation; | ||
| if(this.props.loops === undefined) { | ||
| animation = fadeInAnimation; | ||
| } else { | ||
| animation = Animated.loop( | ||
| Animated.sequence([ | ||
| fadeInAnimation, | ||
| Animated.timing(this._faidInValue, { | ||
| toValue: 0.5, | ||
| duration: 0, | ||
| useNativeDriver: this.props.useNativeDriver | ||
| }) | ||
| ]), | ||
| { | ||
| iterations: this.props.loops | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| animation.start(() => this.setState({ showAfterAnimationText: true })); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <View style={{ flex: 1, paddingTop: 20, justifyContent: 'center', alignItems: 'center' }}> | ||
| <Animated.Text testID='UniqueId_AnimationsScreen_animatedText' style={{ | ||
| opacity: this._faidInValue, | ||
| backgroundColor: 'green' | ||
| }} | ||
| > | ||
| Fading in text | ||
| </Animated.Text> | ||
| {(() => { | ||
| if (this.state.showAfterAnimationText) return ( | ||
| <Text testID='UniqueId_AnimationsScreen_afterAnimationText' style={{ marginTop: 20 }}> | ||
| After-animation-text | ||
| </Text> | ||
| ) | ||
| })()} | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| export default class AnimationsScreen extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| useNativeDriver: undefined, | ||
| enableLoop: false, | ||
| numberOfIterations: -1, | ||
| duration: 400, | ||
| delay: 0, | ||
| testStarted: false | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| if (this.state.testStarted) { | ||
| return ( | ||
| <AnimationsComponent | ||
| useNativeDriver={this.state.useNativeDriver} | ||
| loops={this.state.enableLoop ? this.state.numberOfIterations : undefined} | ||
| duration={this.state.duration} | ||
| delay={this.state.delay} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| let numOfIterationsColor = this.state.enableLoop ? 'black' : 'grey'; | ||
| return ( | ||
| <View style={{ flex: 1, paddingTop: 20, paddingLeft: 20, paddingRight: 20, justifyContent: 'center', alignItems: 'stretch' }}> | ||
| <View> | ||
| <Text>Driver:</Text> | ||
| <SegmentedControlIOS | ||
| testID="UniqueId_AnimationsScreen_useNativeDriver" | ||
| values={['JS', 'Native']} | ||
| selectedIndex={-1} | ||
| onValueChange={(value) => this.setState({ useNativeDriver: value === 'Native' })} | ||
| /> | ||
| </View> | ||
| <View style={{paddingTop: 20}}> | ||
| <Text>Loop:</Text> | ||
| <Switch | ||
| testID="UniqueId_AnimationsScreen_enableLoop" | ||
| value={this.state.enableLoop} | ||
| onValueChange={(value) => this.setState({enableLoop: value})} | ||
| /> | ||
| <Text style={{color: numOfIterationsColor}}>Number of iterations:</Text> | ||
| <TextInput style={{color: numOfIterationsColor, height: 20}} | ||
| testID="UniqueId_AnimationsScreen_numberOfIterations" | ||
| editable={this.state.enableLoop} | ||
| onChangeText={(value) => this.setState({numberOfIterations: Number(value)})} | ||
| placeholder={String(this.state.numberOfIterations)} | ||
| /> | ||
| </View> | ||
| <View style={{paddingTop: 20}}> | ||
| <Text>Duration:</Text> | ||
| <TextInput style={{height: 20}} | ||
| testID="UniqueId_AnimationsScreen_duration" | ||
| onChangeText={(value) => this.setState({duration: Number(value)})} | ||
| placeholder={String(this.state.duration)} | ||
| /> | ||
| </View> | ||
| <View style={{paddingTop: 20}}> | ||
| <Text>Delay:</Text> | ||
| <TextInput style={{height: 20}} | ||
| testID="UniqueId_AnimationsScreen_delay" | ||
| onChangeText={(value) => this.setState({delay: Number(value)})} | ||
| placeholder={String(this.state.delay)} | ||
| /> | ||
| </View> | ||
| <Button | ||
| style={{paddingTop: 20}} | ||
| title="Start" | ||
| testID="UniqueId_AnimationsScreen_startButton" | ||
| disabled={this.state.useNativeDriver === undefined} | ||
| onPress={() => this.setState({ testStarted: true })} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters