动画按钮阻止排毒

时间：2017-11-20 11:30:47

标签： detox

这就是我对动画按钮的意思。我让它有一个ID，但排毒不能以某种方式找到它 animating_button

  

Detox通过自动将测试与应用程序同步来消除瑕疵。如果应用程序繁忙，则测试无法继续到下一行。只有当应用程序空闲时，测试才会恢复。 Detox会非常密切地监控您的应用程序，以便了解它何时处于空闲状态。它跟踪几个异步操作并等待它们完成。这包括：

     

跟踪当前正在进行中的所有网络请求，并等待它们完成   跟踪待处理的动画并等待它们完成   跟踪计时器（如setTimeout）并等待它们到期   跟踪携带异步消息的React Native网桥   跟踪异步React Native布局和影子队列   跟踪可能包含挂起的异步操作的JavaScript事件循环

显然有一条线说跟踪待定动画，所以如果按钮保持这样的动画效果。那它会继续等待吗？

因此，通常如何妥善处理这个问题？

由于

2 个答案:

答案 0 :(得分：6)

来自排毒文件：

  

无尽的循环动画

     

默认情况下，Detox将等到动画完成。如果你有   无限循环动画，这可能会导致Detox挂起。在这种情况下，   考虑关闭动画同步或删除   使用react-native-repackager进行E2E构建的无限循环。

https://github.com/wix/detox/blob/master/docs/Troubleshooting.Synchronization.md

  

一般性评论

     

无限动画（循环动画）可以让排毒等待永远。   请考虑关闭循环动画进行测试。它也是一个   加快测试所有动画的良好做法。

https://github.com/wix/detox/blob/master/docs/More.AndroidSupportStatus.md

Detox提供disableSynchronization() - 因此您可以暂时禁用同步以解决动画问题 然后在动画消失后再打开它。然而，这并不适用于所有情况。例如，如果您使用react-navigation并且按下按钮将新屏幕推送到导航堆栈，则该按钮仍将继续在后台设置动画，阻止您计划在新屏幕上运行的任何进一步测试。 / p>

理想情况下，您希望使用其他建议，并为您的E2E测试禁用这些类型的动画。以下是实现此目的的3种可能选择。

答

排毒作者建议使用react-native-repackager。目前它只支持RN 0.51，所以这对每个人来说可能并不理想。请在使用前检查支持的版本。

  

目前仅支持RN 0.51

<强> B：

设置React Native构建环境。根据环境配置变量，您可以在构建E2E测试时禁用连续动画。

https://blog.carbonfive.com/2016/09/29/setting-up-react-native-build-environments-using-nativemodules/

<强> C：

我找到的最简单的方法是使用react-native-config。以下是使用react-native-config的Managing Configuration in React Native上的一篇好文章，以及另一个相关问题how-to-tell-detox-is-running-tests。

安装包：

  

$ yarn add react-native-config

链接库：

  

$ react-native link react-native-config

为了测试此解决方案，我在根React Native应用程序目录中创建了2个文件.env.production和.env.testing。然后我使用 IS_ANIMATE 配置变量来根据构建环境切换动画。您需要将ENVFILE=.env.testing和ENVFILE=.env.production添加到排毒构建配置中。

<强> .env.production 

ENV_TYPE=Production
IS_ANIMATE=1

<强> .env.testing 

ENV_TYPE=Testing
IS_ANIMATE=0

<强> app.js 

import Config from 'react-native-config'

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Alert,
  Animated,
  View,
  TouchableOpacity,
  Text
} from 'react-native'

class example extends Component {
  constructor(props) {
    super(props)

    this.state = {
      radius: new Animated.Value(1)
    }
  }

  componentDidMount() {
    // only enable animation for production
    if (Config.IS_ANIMATE == true) {
      this.cycleAnimation()
    }
  }

  cycleAnimation() {
    Animated.loop(
      Animated.sequence([
        Animated.timing(this.state.radius, {
          toValue: 2,
          duration: 500,
          delay: 1000
        }),
        Animated.timing(this.state.radius, {
          toValue: 1,
          duration: 500
        })
      ])
    ).start()
  }

  render() {
    return (
      <View testID='container' style={styles.container}>
        <Text>{Config.ENV_TYPE}</Text>
        <TouchableOpacity
          testID='button'
          onPress={() => Alert.alert("I was pressed")}
        >
          <Animated.View
            style={[
              styles.button,
              {transform: [
                {scale: this.state.radius},
              ]}
            ]}
          >
            <Text>START DIARY</Text>
          </Animated.View>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 60,
    width: 120,
    height: 120,
    backgroundColor: 'green'
  },
  text: {
    padding: 5,
    fontSize: 14
  }
})

AppRegistry.registerComponent('example', () => example)

<强> example.spec.js 

it('Animated Button', async () => {
  const buttonElement = element(by.id('button'));
  await expect(buttonElement).toBeVisible();
  await buttonElement.tap();
});

<强>的package.json 

"detox": {
  "specs": "e2e",
  "configurations": {
    "ios.sim.release": {
      "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/example.app",
      "build": "ENVFILE=.env.production export RCT_NO_LAUNCH_PACKAGER=true && xcodebuild -project ios/example.xcodeproj -scheme example -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",
      "type": "ios.simulator",
      "name": "iPhone 5s, iOS 10.3"
    },
    "ios.sim.test": {
      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/example.app",
      "build": "ENVFILE=.env.testing xcodebuild -project ios/example.xcodeproj -scheme example -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -arch x86_64",
      "type": "ios.simulator",
      "name": "iPhone 5s, iOS 10.3"
    }
  }
}

发布版本将挂起：detox build --configuration ios.sim.release && detox test --configuration ios.sim.release

detox_hangs

测试版本将通过：detox build --configuration ios.sim.test && detox test --configuration ios.sim.test

detox_passes

答案 1 :(得分：0)

您可以通过使用来解决这个无限动画循环

await device.disableSynchronization();

在与动画元素交互之前放置这一行 然后你可以再次启用同步

await device.enableSynchronization();

此功能之前有一个错误，他们刚刚在此版本中修复了它：18.18.0

相关问题
最新问题