排毒:如何测试多行TextInput [英] Detox: how to test multiline TextInput

问题描述

我正在尝试使用排毒功能来测试我的本机应用程序中的表单.

I'm trying to use detox to test a form in my react-native app.

表单中的输入之一为multiline={true}.

我正在尝试运行以下测试:

I am trying to run the following test:

const inputElement = element(by.id('input_multiline'));
await expect(inputElement).toBeVisible();
await inputElement.typeText('line1\n');
await inputElement.typeText('line2\n');
await inputElement.typeText('line3\n');

const submitElement = element(by.id('submit'));
await submitElement.toBeVisible();
await submitElement.tap();

该测试未能通过75％的可见性条件，因为键盘隐藏了提交"按钮.

This test fails to pass 75% visibility criteria, because the keyboard is hiding the submit button.

通常对于带有multiline={false}的TextInput，您只需将\n附加到输入字符串即可自动移至下一个阶段，但是对于多行输入\n只需添加新行.

Normally for TextInput with multiline={false} you can just append \n to the input string automatically moving to the next stage, but for multiline input \n just adds a new line.

我该怎么做才能通过排毒测试?

What can I do in order to pass this test in detox?

推荐答案

首先，我们需要使用multiline={true}取消TextInput的键盘.

First we need to be able to dismiss the keyboard for TextInput with multiline={true}.

为此，我们将使用react-native的Keyboard模块.

For this we are going to make use of Keyboard module from react-native.

import {Keyboard} from 'react-native'

现在使用TouchableWithoutFeedback包装表单，并在按下时调用Keyboard.dismiss().

Now wrap your form with TouchableWithoutFeedback and call Keyboard.dismiss() on press.

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
  { /* your form goes here */ }
</TouchableWithoutFeedback>

现在修改排毒测试以关闭键盘.

Now modify your detox test to dismiss the keyboard.

const inputElement = element(by.id('input'));
await expect(inputElement).toBeVisible();
await inputElement.typeText('line1\n');
await inputElement.typeText('line2\n');
await inputElement.typeText('line3\n');
// click somewhere outside the input
await inputElement.tapAtPoint({x: 0, y: 1});

const submitElement = element(by.id('submit'));
await submitElement.toBeVisible();
await submitElement.tap();

这篇关于排毒:如何测试多行TextInput的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！