排毒:如何测试多行TextInput

时间:2017-11-29 14:28:00

标签: react-native keyboard hide detox

我正在尝试使用排毒方法在我的本机应用程序中测试表单。

表单中的一个输入有multiline={true}

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

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%的可见性标准,因为键盘隐藏了提交按钮。

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

为了在排毒中通过此测试,我该怎么办?

1 个答案:

答案 0 :(得分:3)

首先,我们需要能够使用multiline={true}解除TextInput的键盘。

为此,我们将使用来自react-native的键盘模块。

import {Keyboard} from 'react-native'

现在用TouchableWithoutFeedback包装你的表单,然后按下调用Keyboard.dismiss()。

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

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

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();

detox running the test