[FIXED] Draw a line in a detox test

Issue

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.

Solution

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

Answered By - Rasmus Knap