在排毒测试中画一条线

Question

我们在我们的 react-native 项目中使用 react-native-signature-capture 库，我们想测试签名是否正确发送。为此，用户使用他的手指绘制签名，有没有办法使用 detox 模拟一些绘图？即使是一行也行。

我尝试了 swipe 和 scroll 方法，但都没有用。

Answer 1

我想你想做的是模拟签名捕获组件。听起来您对签名捕获组件是否有效不感兴趣，而是希望它在您的流程中有效。您可以在此处找到有关如何开始的一些信息：https://github.com/wix/detox/blob/master/docs/Guide.Mocking.md

如果您只是直接在项目中使用签名捕获库。像这样：

import SignatureCapture from 'react-native-signature-capture';

很难模拟，因为它是直接从节点模块文件夹中获取的（然后库的作者需要制作一个排毒模拟）。但是如果你自己把它打包成一个文件：

...
import React, {Component} from 'react';
import SignatureCapture from 'react-native-signature-capture';

export default class CustomSignatureCapture extends Component {
  ...
  render() {
    return (
      <SignatureCapture
        onSaveEvent ={this.props.onSave}
      />
    );
  }
}

假设我们称该文件为 CustomSignatureCapture.js。然后你可以在它旁边创建你自己的模拟文件，CustomSignatureCapture。e2e.js（只有你遵循 detox 的指南才有效）。

import pngFile from './savedBase64EncodedString.js';

export default class CustomSignatureCaptureMock extends Component {
  ...
  render() {
    return (
      <TouchableWithoutFeedback
        testId='CustomComponentMock',
        onPress = {() => this.props.onSave(pngFile)}
      />
    );
  }
}

Answer 2

滑动操作适合我。我刚刚在 SignatureCapture 组件周围添加了一个 div。

<div testID="signatureBox">
   <SignatureCapture
   {...this.props}
   onDragEvent={this.handleDragEvent}
   onSaveEvent={this.props.onSave}
   key={this.state.signaturePadId}
   minStrokeWidth={8}
   maxStrokeWidth={13}
   showTitleLabel={false}
   square={true}
   style={styles.signaturePad}/>
</div>

在我的测试中，我通过Id获取div，然后向下和向左滑动以进行交叉签名。

it("should sign", async () => {
    await element(by.id("signatureBox")).swipe("down", "slow");
    await element(by.id("signatureBox")).swipe("left", "slow");
)};

在排毒测试中画一条线

Draw a line in a detox test

android

react-native

detox