Test animation progress #130

DanielMSchmidt · 2017-05-17T16:23:33Z

Thanks again, sorry that I open so many issues lately.

I was wondering how I might test animation progress in general. In my case I have an open state which is rendered. As I read through the docs I saw that detox waits for the idle state, e.g. not in the middle of the animation.

How can I overcome this feature? I would like to write tests like "after 100ms it is about half way through", may I use the expect without an await for that or is it just not possible?

LeoNatan · 2017-06-06T19:23:32Z

Currently, Detox synchronises so that it is blocked when animations are in progress. In the future, we plan to have API allowing the user to disable these synchronisations for a more hands on approach to testing.

rumax · 2017-06-12T08:20:30Z

@LeoNatan, @rotemmiz Let assume you have a component like this (The component can be some notification on the page, etc. It is actually the example from Animated API but with Animated.sequence, where the animation should be in the loop):

const animatedDelay = (duration) => Animated.timing(
  new Animated.Value(0),
  {
    duration,
    isInteraction: false,
    toValue: 0,
    useNativeDriver: true,
  }
);

class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),
  }

  startAnimation() {
    Animated.sequence([
      Animated.timing(
        this.state.fadeAnim,
        {
          toValue: 1,
          duration: 2000,
          useNativeDriver: true,
        }
      ),
      Animated.timing(
        this.state.fadeAnim,
        {
          toValue: 0,
          duration: 2000,
          useNativeDriver: true,
        }
      ),
      animatedDelay(5000)
    ]).start(({ finished }) => {
      if (finished) {
        this.startAnimation();
      }
    });
  }

  componentDidMount() {
    this.startAnimation();
  }

  render() {
    let { fadeAnim } = this.state;

    return (
      <Animated.View
        style={{
          ...this.props.style,
          opacity: fadeAnim,
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

Add this component to demo-react-native project

  <View testID='welcome' style={{flex: 1, paddingTop: 20, justifyContent: 'center', alignItems: 'center'}}>
          <Text style={{fontSize: 25, marginBottom: 30}}>
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
          <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
        </FadeInView>

And tests will never pass

Log:

detox-server info 10:12:24: server listening on localhost:50797...
detox verb ws onOpen [object Object]
detox verb ws send: {"type":"login","params":{"sessionId":"b051d9a3-e2fc-7a75-4fb1-c3b74274c4f9","role":"tester"},"messageId":0}
detox verb 1: fbsimctl --json "iPhone 7 Plus" --first 1 --simulators list 
detox info 1: Listing devices... 
detox verb 2: fbsimctl --json --state=shutdown --state=shutting-down 0464E565-A93C-4CA0-89AE-703259AB8B07 boot 
detox info 2: trying to boot device... 
detox info 2: device 0464E565-A93C-4CA0-89AE-703259AB8B07 booted 
detox verb 3: fbsimctl --json 0464E565-A93C-4CA0-89AE-703259AB8B07 uninstall com.wix.demo.react.native 
detox info 3: Uninstalling com.wix.demo.react.native... 
detox info 3: com.wix.demo.react.native uninstalled 
detox verb 4: fbsimctl --json 0464E565-A93C-4CA0-89AE-703259AB8B07 install /Users/max/projects/detox/examples/demo-react-native/ios/build/Build/Products/Release-iphonesimulator/example.app 
detox info 4: Installing /Users/max/projects/detox/examples/demo-react-native/ios/build/Build/Products/Release-iphonesimulator/example.app... 
detox info 4: /Users/max/projects/detox/examples/demo-react-native/ios/build/Build/Products/Release-iphonesimulator/example.app installed 
detox verb 5: export FBSIMCTL_CHILD_DYLD_INSERT_LIBRARIES="/Users/max/projects/detox/examples/demo-react-native/node_modules/detox/Detox.framework/Detox" && fbsimctl --json 0464E565-A93C-4CA0-89AE-703259AB8B07 launch --stderr com.wix.demo.react.native -detoxServer ws://localhost:50797 -detoxSessionId b051d9a3-e2fc-7a75-4fb1-c3b74274c4f9 
detox info 5: Launching com.wix.demo.react.native... 
detox info 5: com.wix.demo.react.native launched 
detox verb ws send: {"type":"isReady","params":{},"messageId":-1000}
detox verb ws onMessage: {"type":"ready","messageId":-1000,"params":{}}
detox verb ws  
  Example
detox verb ws send: {"type":"reactNativeReload","params":{},"messageId":-1000}
detox verb ws onMessage: {"type":"ready","messageId":-1000,"params":{}}
detox verb ws  
detox verb ws send: {"type":"invoke","params":{"target":{"type":"Invocation","value":{"target":{"type":"EarlGrey","value":"instance"},"method":"detox_selectElementWithMatcher:","args":[{"type":"Invocation","value":{"target":{"type":"Class","value":"GREYMatchers"},"method":"matcherForAccessibilityID:","args":["welcome"]}}]}},"method":"assertWithMatcher:","args":[{"type":"Invocation","value":{"target":{"type":"Class","value":"GREYMatchers"},"method":"matcherForSufficientlyVisible","args":[]}}]},"messageId":1}
detox verb ws send: {"type":"currentStatus","params":{},"messageId":2}
detox verb ws onMessage: {"type":"currentStatusResult","messageId":2,"params":{"state":"busy","resources":[{"name":"JavaScript Timers","info":{"javascriptTimerIDs":[[35]],"prettyPrint":[[35]]}},{"name":"Dispatch Queue","info":{"queue":"<OS_dispatch_queue_main: com.apple.main-thread[0x11532da80] = { xrefcnt = 0x80000000, refcnt = 0x80000000, target = com.apple.root.default-qos.overcommit[0x11532e1c0], width = 0x1, state = 0x000fffe000000403, in-flight = 0, thread = 0x403 }>","prettyPrint":"com.apple.main-thread"}}],"messageId":2}}
detox verb ws  
detox info Sync JavaScript Timers: 35
detox info Sync Dispatch Queue: com.apple.main-thread
detox verb ws send: {"type":"currentStatus","params":{},"messageId":3}
detox verb ws onMessage: {"type":"currentStatusResult","messageId":3,"params":{"state":"busy","resources":[{"name":"JavaScript Timers","info":{"javascriptTimerIDs":[[60]],"prettyPrint":[[60]]}},{"name":"Dispatch Queue","info":{"queue":"<OS_dispatch_queue_main: com.apple.main-thread[0x11532da80] = { xrefcnt = 0x80000000, refcnt = 0x80000000, target = com.apple.root.default-qos.overcommit[0x11532e1c0], width = 0x1, state = 0x000fffe000000403, in-flight = 0, thread = 0x403 }>","prettyPrint":"com.apple.main-thread"}}],"messageId":3}}
detox verb ws  
detox info Sync JavaScript Timers: 60
detox info Sync Dispatch Queue: com.apple.main-thread
detox verb ws send: {"type":"currentStatus","params":{},"messageId":4}
detox verb ws onMessage: {"type":"currentStatusResult","messageId":4,"params":{"state":"busy","resources":[{"name":"JavaScript Timers","info":{"javascriptTimerIDs":[[86]],"prettyPrint":[[86]]}},{"name":"Dispatch Queue","info":{"queue":"<OS_dispatch_queue_main: com.apple.main-thread[0x11532da80] = { xrefcnt = 0x80000000, refcnt = 0x80000000, target = com.apple.root.default-qos.overcommit[0x11532e1c0], width = 0x1, state = 0x000fffe000000403, in-flight = 0, thread = 0x403 }>","prettyPrint":"com.apple.main-thread"}}],"messageId":4}}
detox verb ws  
detox info Sync JavaScript Timers: 86
detox info Sync Dispatch Queue: com.apple.main-thread
detox verb ws send: {"type":"currentStatus","params":{},"messageId":5}
detox verb ws onMessage: {"type":"currentStatusResult","messageId":5,"params":{"state":"busy","resources":[{"name":"JavaScript Timers","info":{"javascriptTimerIDs":[[106]],"prettyPrint":[[106]]}},{"name":"Dispatch Queue","info":{"queue":"<OS_dispatch_queue_main: com.apple.main-thread[0x11532da80] = { xrefcnt = 0x80000000, refcnt = 0x80000000, target = com.apple.root.default-qos.overcommit[0x11532e1c0], width = 0x1, state = 0x000fffe000000403, in-flight = 0, thread = 0x403 }>","prettyPrint":"com.apple.main-thread"}}],"messageId":5}}
detox verb ws  
detox info Sync JavaScript Timers: 106
detox info Sync Dispatch Queue: com.apple.main-thread
detox verb ws send: {"type":"currentStatus","params":{},"messageId":6}
detox verb ws onMessage: {"type":"currentStatusResult","messageId":6,"params":{"state":"busy","resources":[{"name":"JavaScript Timers","info":{"javascriptTimerIDs":[[133]],"prettyPrint":[[133]]}},{"name":"Dispatch Queue","info":{"queue":"<OS_dispatch_queue_main: com.apple.main-thread[0x11532da80] = { xrefcnt = 0x80000000, refcnt = 0x80000000, target = com.apple.root.default-qos.overcommit[0x11532e1c0], width = 0x1, state = 0x000fffe000000403, in-flight = 0, thread = 0x403 }>","prettyPrint":"com.apple.main-thread"}}],"messageId":6}}
detox verb ws  
detox info Sync JavaScript Timers: 133
detox info Sync Dispatch Queue: com.apple.main-thread
detox verb ws send: {"type":"currentStatus","params":{},"messageId":7}
detox verb ws onMessage: {"type":"currentStatusResult","messageId":7,"params":{"state":"busy","resources":[{"name":"JavaScript Timers","info":{"javascriptTimerIDs":[[163]],"prettyPrint":[[163]]}},{"name":"Dispatch Queue","info":{"queue":"<OS_dispatch_queue_main: com.apple.main-thread[0x11532da80] = { xrefcnt = 0x80000000, refcnt = 0x80000000, target = com.apple.root.default-qos.overcommit[0x11532e1c0], width = 0x1, state = 0x000fffe000000403, in-flight = 0, thread = 0x403 }>","prettyPrint":"com.apple.main-thread"}}],"messageId":7}}

Systemlog:

Jun 12 10:13:20 --- last message repeated 9 times ---
Jun 12 10:13:20 Maksyms-MacBook-Pro example[15914]: ☣️☣️ DETOX:: JavaScript Timers -> busy (
	        (
	        1102
	    )
	)
Jun 12 10:13:20 --- last message repeated 2 times ---
Jun 12 10:13:20 Maksyms-MacBook-Pro example[15914]: ☣️ DETOX:: Removing observed timer 1102
Jun 12 10:13:20 Maksyms-MacBook-Pro example[15914]: ☣️ DETOX:: Observing timer: 1103 d: 0.001 r: 0
Jun 12 10:13:20 Maksyms-MacBook-Pro example[15914]: ☣️☣️ DETOX:: WXRunLoopIdlingResource -> busy <CFRunLoop 0x6080001714c0 [0x1116abdf0]>{wakeup port = 0x3507, stopped = false, ignoreWakeUps = true, 
	current mode = kCFRunLoopDefaultMode,
	common modes = <CFBasicHash 0x60800005d700 [0x1116abdf0]>{type = mutable set, count = 1,
	entries =>
		2 : <CFString 0x111683920 [0x1116abdf0]>{contents = "kCFRunLoopDefaultMode"}
	}
	,
	common mode items = <CFBasicHash 0x6000002412f0 [0x1116abdf0]>{type = mutable set, count = 6,
	entries =>
		0 : <CFRunLoopSource 0x600000169cc0 [0x1116abdf0]>{signalled = No, valid = Yes, order = 0, context = <CFRunLoopSource context>{version = 0, info = 0x60000000dd80, callout = __NSThreadPerformPerform (0x10fd9fd58)}}
		1 : <CFRunLoopTimer 0x60000016d800 [0x1116abdf0]>{valid = Yes, firing = No, interval = 315360000, tolerance = 0, next fire date = 518948000 (0.487245321 @ 7837051768821), callout = _ZN3JSC9HeapTimer12timerDidFireEP16__CFRunLoopTimerPv (0x112949100 / 0x112949100) (/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/Frameworks/JavaScriptCore.framework/JavaScriptCore), context = <CFRunLoopTimer context 0x127053000>}
		2 : <CFRunLoopTimer 0x608000171700 [0x1116abdf0]>{valid = Yes, firing = Yes, interval = 0.0166666667, tolerance = 0, next fire date = 518948000 (-0.0546224117 @ 7836509905095), callout = _ZN2CA7Display16TimerDisplayLink8callbackEP16__CFRunLoopTimerPv (0x11357eb72 / 0x11357eb72) (/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/Frameworks/QuartzCore.framework/QuartzCore), context = <CFRunLoopTimer context 0x6080002c3b10>}
		3 : <CFRunLoopTimer 0x60000016a5c0 [0x1116abdf0]>{valid = Yes, firing = No, interval = 315360000, tolerance = 0, next fire date = 518948039 (38.979888 @ 7875544516419), callout = _ZN3JSC9HeapTimer12timerDidFireEP16__CFRunLoopTimerPv (0x112949100 / 0x112949100) (/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/Frameworks/JavaScriptCore.framework/JavaScriptCore), context = <CFRunLoopTimer context 0x127053000>}
		4 : <CFRunLoopSource 0x60000016d380 [0x1116abdf0]>{signalled = No, valid = Yes, order = 0, context = <CFRunLoopSource context>{version = 0, info = 0x12708d660, callout = _ZN3WTF7RunLoop11performWorkEPv (0x112d5c070)}}
		5 : <CFRunLoopTimer 0x60000016d200 [0x1116abdf0]>{valid = Yes, firing = No, interval = 315360000, tolerance = 0, next fire date = 834307991 (315359991 @ 315367827807052705), callout = _ZN3JSC9HeapTimer12timerDidFireEP16__CFRunLoopTimerPv (0x112949100 / 0x112949100) (/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/Frameworks/JavaScriptCore.framework/JavaScriptCore), context = <CFRunLoopTimer context 0x127053000>}
	}
	,
	modes = <CFBasicHash 0x60800005d3a0 [0x1116abdf0]>{type = mutable set, count = 1,
	entries =>
		2 : <CFRunLoopMode 0x608000182220 [0x1116abdf0]>{name = kCFRunLoopDefaultMode, port set = 0x9e07, queue = 0x6080000f8e00, source = 0x608000144410 (not fired), timer port = 0xa00f, 
		sources0 = <CFBasicHash 0x608000249c30 [0x1116abdf0]>{type = mutable set, count = 3,
	entries =>
		0 : <CFRunLoopSource 0x608000171640 [0x1116abdf0]>{signalled = No, valid = Yes, order = 0, context = <CFRunLoopSource context>{version = 0, info = 0x0, callout = ??? (0x0)}}
		1 : <CFRunLoopSource 0x600000169cc0 [0x1116abdf0]>{signalled = No, valid = Yes, order = 0, context = <CFRunLoopSource context>{version = 0, info = 0x60000000dd80, callout = __NSThreadPerformPerform (0x10fd9fd58)}}
		2 : <CFRunLoopSource 0x60000016d380 [0x1116abdf0]>{signalled = No, valid = Yes, order = 0, context = <CFRunLoopSource context>{version = 0, info = 0x12708d660, callout = _ZN3WTF7RunLoop11performWorkEPv (0x112d5c070)}}
	}
	,
		sources1 = <CFBasicHash 0x608000242c40 [0x1116abdf0]>{type = mutable set, count = 0,
	entries =>
	}
	,
		observers = (
	    "<CFRunLoopObserver 0x6080005265e0 [0x1116abdf0]>{valid = Yes, activities = 0xe0, repeats = Yes, order = 0, callout = _runLoopObserverWithBlockContext (0x111392510), context = <CFRunLoopObserver context 0x608000244c80>}"
	),
		timers = <CFArray 0x6000000b28a0 [0x1116abdf0]>{type = mutable-small, count = 4, values = (
		0 : <CFRunLoopTimer 0x608000171700 [0x1116abdf0]>{valid = Yes, firing = No, interval = 0.0166666667, tolerance = 0, next fire date = 518948000 (0.0117676258 @ 7836576571759), callout = _ZN2CA7Display16TimerDisplayLink8callbackEP16__CFRunLoopTimerPv (0x11357eb72 / 0x11357eb72) (/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/Frameworks/QuartzCore.framework/QuartzCore), context = <CFRunLoopTimer context 0x6080002c3b10>}
		1 : <CFRunLoopTimer 0x60000016d800 [0x1116abdf0]>{valid = Yes, firing = No, interval = 315360000, tolerance = 0, next fire date = 518948000 (0.486905336 @ 7837051768821), callout = _ZN3JSC9HeapTimer12timerDidFireEP16__CFRunLoopTimerPv (0x112949100 / 0x112949100) (/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/Frameworks/JavaScriptCore.framework/JavaScriptCore), context = <CFRunLoopTimer context 0x127053000>}
		2 : <CFRunLoopTimer 0x60000016a5c0 [0x1116abdf0]>{valid = Yes, firing = No, interval = 315360000, tolerance = 0, next fire date = 518948039 (38.979584 @ 7875544516419), callout = _ZN3JSC9HeapTimer12timerDidFireEP16__CFRunLoopTimerPv (0x112949100 / 0x112949100) (/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/Frameworks/JavaScriptCore.framework/JavaScriptCore), context = <CFRunLoopTimer context 0x127053000>}
		3 : <CFRunLoopTimer 0x60000016d200 [0x1116abdf0]>{valid = Yes, firing = No, interval = 315360000, tolerance = 0, next fire date = 834307991 (315359991 @ 315367827807052705), callout = _ZN3JSC9HeapTimer12timerDidFireEP16__CFRunLoopTimerPv (0x112949100 / 0x112949100) (/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/Frameworks/JavaScriptCore.framework/JavaScriptCore), context = <CFRunLoopTimer context 0x127053000>}
	)},
		currently 518948000 (7836564655049) / soft deadline in: 0.487113752 sec (@ 7837051768821) / hard deadline in: 0.487113595 sec (@ 7837051768821)
	},
	
	}
	}
Jun 12 10:13:20 Maksyms-MacBook-Pro example[15914]: ☣️☣️ DETOX:: JavaScript Timers -> busy (
	        (
	        1103
	    )
	)
Jun 12 10:13:21 --- last message repeated 3 times ---
Jun 12 10:13:21 Maksyms-MacBook-Pro example[15914]: ☣️☣️ DETOX:: JavaScript Timers -> busy (
	        (
	        1132
	    )
	)
Jun 12 10:13:22 --- last message repeated 9 times ---
Jun 12 10:13:22 Maksyms-MacBook-Pro example[15914]: ☣️☣️ DETOX:: JavaScript Timers -> busy (
	        (
	        1164
	    )
	)
^C

Twinski · 2018-01-25T10:59:18Z

@LeoNatan
await device.disableSynchronization(); is now part of Detox but how do I use it?
If I put it after device.launchApp, the test will fail immediately saying it cannot find UI element.
So how do we bypass a certain page where you have a infinite loop of Animated-animations?
The documentation doesn't say much. Looking forward to your answer.

PS. Great work. Detox is best test-tool I've used for React Native 👍

zhaocaih · 2018-03-02T07:42:06Z

I have the similar question:
I have two tests, with await device.disableSynchronization(), each test can pass when running them individually, but when run them together, the second always hang.

PS. I added await device.enableSynchronization() in the end of the each test, or else the second test will fail immediately with cannot find UI element.

DanielMSchmidt mentioned this issue May 17, 2017

E2E Tests with detox rnc-archive/react-native-drawer-layout#37

Closed

7 tasks

DanielMSchmidt changed the title ~~Test animation progress~~ [feature] Test animation progress May 18, 2017

LeoNatan added the synchronisation label Jun 6, 2017

LeoNatan closed this as completed Jun 6, 2017

LeoNatan changed the title ~~[feature] Test animation progress~~ Test animation progress Nov 21, 2017

LeoNatan added type: enhancement ⚡️ and removed c: synchronisation labels Nov 21, 2017

wix locked and limited conversation to collaborators Jul 23, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Test animation progress #130

Test animation progress #130

DanielMSchmidt commented May 17, 2017

LeoNatan commented Jun 6, 2017

rumax commented Jun 12, 2017 •

edited

Loading

Twinski commented Jan 25, 2018

zhaocaih commented Mar 2, 2018 •

edited

Loading

Test animation progress #130

Test animation progress #130

Comments

DanielMSchmidt commented May 17, 2017

LeoNatan commented Jun 6, 2017

rumax commented Jun 12, 2017 • edited Loading

Twinski commented Jan 25, 2018

zhaocaih commented Mar 2, 2018 • edited Loading

rumax commented Jun 12, 2017 •

edited

Loading

zhaocaih commented Mar 2, 2018 •

edited

Loading