Detox - Enter on Numpad

Question

I wonder how to enter the number using native keyboard and then enter it in just like typeText on a normal string on Detox using "\n"

// await typeText('${screen_id}_screen_question_${question_id}_answer_input_', '\n');

How can I achieve this with number?

Whenever I do the typeText ('n') it will give me GREYKeyboard: No known SHIFT key was found in the hierarchy..

In my assumption, because the numpad key doesn't have Enter key. But still not sure why it look for a Shift key.

Thanks

Answer 1

Use Keyboard module from react-native to hide the keyboard.

It's a similar problem to this one: detox-how-to-test-multiline-textinput

Example:

import {Keyboard} from 'react-native'

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Alert,
  TouchableWithoutFeedback,
  TouchableOpacity,
  View,
  Text,
  TextInput
} from 'react-native'

class example extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <TouchableWithoutFeedback 
        onPress={Keyboard.dismiss}
        style={styles.container}
      >
        <View style={styles.form}>
          <View style={styles.input}>
            <TextInput
              testID='input'
              style={styles.inputText}
              keyboardType="numeric"
            />
          </View>
          <TouchableOpacity
            testID='next'
            style={styles.button}
            onPress={() => Alert.alert("Button pressed")}
          >
            <Text>Next</Text>
          </TouchableOpacity>
        </View>
      </TouchableWithoutFeedback>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  form: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  input: {
    height: 20,
    width: 200,
    borderColor: 'gray',
    borderWidth: 1
  },
  inputText: {
    flex: 1
  },
  button: {
    margin: 20,
    padding: 5,
    borderColor: 'gray',
    borderWidth: 1
  }
})

AppRegistry.registerComponent('example', () => example)

Test:

it('Hide num keyboard', async () => {
  const inputElement = element(by.id('input'));
  await expect(inputElement).toBeVisible();    
  await inputElement.typeText('1234567890');
  // click somewhere outside the input
  await inputElement.tapAtPoint({x: 0, y: -1});
  const buttonElement = element(by.id('next'));
  await expect(buttonElement).toBeVisible();
  await buttonElement.tap();
});

Result: