0

We are using react-native-signature-capture library in our react-native project and we want to test that a signature is sent correctly. To do that the user draws the signature using his finger, is there a way to simulate some drawing using detox? Even a single line would work.

I tried swipe and scroll methods, but neither worked.

Khriz
  • 5,888
  • 6
  • 34
  • 39

2 Answers2

4

Swipe action works for me. I just added a div around the SignatureCapture component.

<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>

In my test, I get the div by Id, then swipe down and left to make a cross signature.

it("should sign", async () => {
    await element(by.id("signatureBox")).swipe("down", "slow");
    await element(by.id("signatureBox")).swipe("left", "slow");
)};
b1617
  • 162
  • 1
  • 2
  • 8
  • This worked for me as well. on iOS with react-native-sketch-canvas instead. Swiping on the container around the actual drawing surface did the trick. – timotgl May 24 '23 at 13:20
1

I think what you want to do is to mock the signature-capture component. It sounds like you are not interested if the signature-capture component works, but rather that it works in your flow. You can find some information here on how to get started here: https://github.com/wix/detox/blob/master/docs/Guide.Mocking.md

If you are just using the signature-capture library directly in your project. Like so: 

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

It will be hard to mock because it get fetched directly from the node modules folder (then the authors of the library need to make a detox mock). But if you wrap it into a file yourself:

...
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}
      />
    );
  }
}

And say we call that file CustomSignatureCapture.js. Then you can create your own mock file next to it, CustomSignatureCapture.e2e.js (will only work if you followed the guide from detox).

import pngFile from './savedBase64EncodedString.js';

export default class CustomSignatureCaptureMock extends Component {
  ...
  render() {
    return (
      <TouchableWithoutFeedback
        testId='CustomComponentMock',
        onPress = {() => this.props.onSave(pngFile)}
      />
    );
  }
}
Rasmus Knap
  • 258
  • 2
  • 13
  • Hey thanks for the answer, this is useful, but I'd really like to test the real features of the app, and signing is one of the process I'm testing. I'll try that but I hope to be able to draw something in the app screen. – Khriz Sep 28 '18 at 07:19
  • After a few tests your solution is the only I found working at this moment. I wish there were a method to make a free movement in the app screen so we can really test everything in the app. – Khriz Oct 03 '18 at 12:13
  • It should be mentioned that detox is an end-to-end testing library and mocking out a component violates the principle of simulating a real user's interaction. – timotgl May 24 '23 at 13:22