Реактивные кнопки заголовка React-Navigation testID

Question

Есть ли способ, с помощью которого мы можем добавить testID и accessibilityLabel к кнопкам заголовка, таким как кнопка возврата заголовка, чтобы иметь возможность писать автоматические тесты?

Answer 1

В зависимости от того, как вы устанавливаете кнопки в заголовке, будет зависеть от того, как вы установили testID и т. Д.

Кнопка возврата

Для кнопки <Back. Он использует компонент HeaderBackButton.js, у него уже установлены accessibilityLabel, accessibilityTraits и testID.

https://github.com/react-navigation/react-navigation-stack/blob/master/src/views/Header/HeaderBackButton.js#L110

accessibilityLabel={title ? `${title}, back` : 'Go back'}
accessibilityTraits="button"
testID="header-back"

Реактивно-родная кнопка

Если вы используете компонент <Button /> из Reaction-native, вы можете просто передать нужные testID и accessibilityLabel.

static navigationOptions = {
  headerTitle: 'Title',
  headerRight: (
    <Button
      onPress={() => alert('This is a button!')}
      title="Right"
      color="#000"
      testID='headerRightButton'
      accessibilityLabel="Right button!"
    />
  ),
  headerLeft: (
    <Button
      onPress={() => alert('This is a button!')}
      title="Left"
      color="#000"
      testID='headerLeftButton'
      accessibilityLabel="Left button!"
    />
  )
};

Ваши собственные кнопки

Если вы создали свои собственные кнопки для использования, вам придется обрабатывать их самостоятельно и передавать реквизиты в Touchable часть вашего компонента, см. Документацию для получения дополнительной информации https://facebook.github.io/react-native/docs/accessibility#accessibilitylabel-ios-android

Вот базовый пример того, что вы могли бы сделать

class MyButton extends Component {
  render() {
    return (
      <TouchableOpacity onPress={() => {}}
       testID={this.props.testID}
       accessibilityLabel={this.props.accessibilityLabel}
      >
        <View>  
         // style your awesome button here
        </View>
      </TouchableOpacity>
    );
  }
}

Который вы могли бы затем назвать как

<MyButton
 testID={'mybutton'}
 accessibilityLabel={'tap my button'} />

Вы можете / должны установить значения по умолчанию для testID и т. Д.