Установите Testid на нативный компонент

Question

Я тестирую интеграцию с пакетом tipsi-stripe с использованием Detox, используя следующий интерфейс:

Мой тест выглядит следующим образом:

    ...
    await expect(element(by.text('10'))).toBeVisible()
    await expect(element(by.text('Give $10'))).toBeNotVisible()
    await element(by.text('10')).tap()
    await expect(element(by.text('Give $10'))).toBeVisible()
    await expect(element(by.id('cc-card-input'))).toBeVisible()
    await element(by.id('cc-card-input')).typeText("4242424242424242")
    ...

Последняя строка завершается с:

  ● Signin › allows the person to make a payment

    Error performing 'Click to focus & type text (4242424242424242)' on view '(with tag value: is "cc-card-input" and view has effective visibility=VISIBLE)'.
    > 28 |     await element(by.id('cc-card input')).typeText("4242424242424242")

Ошибка указывает на то, что ввод с карты cc не может быть введен.

Вот компонент из рассматриваемой библиотеки:

import React, { Component } from 'react'
import {
  requireNativeComponent,
  findNodeHandle,
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  ViewPropTypes,
  Platform,
  Text,
} from 'react-native'
import PropTypes from 'prop-types'
import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState'

const FieldStylePropType = PropTypes.shape({
  ...ViewPropTypes.style,
  color: PropTypes.string,
})

/**
 * @typedef {Object} PaymentCardTextFieldNativeEventParams
 * @property {string} number -- card number as a string
 * @property {number} expMonth
 * @property {number} expYear
 * @property {string} cvc
 */

/**
 * @typedef {Object} PaymentCardTextFieldNativeEvent
 * @property {boolean}  valid
 * @property {PaymentCardTextFieldNativeEventParams} params
 */

/**
 * @callback OnChangeCallback
 * @param {PaymentCardTextFieldNativeEvent} params
 */

/**
 * // TODO: Get a more precise type here, not sure how to JSDoc react-native Style Types
 * @typedef {Object} PaymentComponentTextFieldStyleProp
 */

/**
 * A Component that collects the CardNumber, ExpirationDate, and CVC all in one.
 * @typedef {Object} PaymentCardTextFieldProps
 *
 * @property {string} expirationPlaceholder
 * @property {string} numberPlaceholder
 * @property {string} cvcPlaceholder
 * @property {boolean} disabled
 * @property {OnChangeCallback} onChange
 * @property {PaymentComponentTextFieldStyleProp} style
 *
 * @property {string} cursorColor iOS-only!
 * @property {string} textErrorColor iOS-only!
 * @property {string} placeholderColor iOS-only!
 * @property {"default"|"light"|"dark"} keyboardAppearance iOS-only!
 *
 * @property {boolean} setEnabled Android-only!
 * @property {string} backgroundColor Android-only!
 * @property {string} cardNumber Android-only!
 * @property {string} expDate Android-only!
 * @property {string} securityCode Android-only!
 */

const NativePaymentCardTextField = requireNativeComponent('TPSCardField', PaymentCardTextField, {
  nativeOnly: {
    borderColor: true,
    borderWidth: true,
    cornerRadius: true,
    textColor: true,
    fontFamily: true,
    fontWeight: true,
    fontStyle: true,
    fontSize: true,
    enabled: true,
    onChange: true,
    params: true, // Currently iOS only
    keyboardAppearance: true, // iOS only
  },
})

/**
 * @type {import('react').ComponentClass<PaymentCardTextFieldProps>}
 */
export default class PaymentCardTextField extends Component {
  static propTypes = {
    ...ViewPropTypes,
    style: FieldStylePropType,

    // Common
    expirationPlaceholder: PropTypes.string,
    numberPlaceholder: PropTypes.string,
    cvcPlaceholder: PropTypes.string,
    disabled: PropTypes.bool,
    onChange: PropTypes.func,

    ...Platform.select({
      ios: {
        cursorColor: PropTypes.string,
        textErrorColor: PropTypes.string,
        placeholderColor: PropTypes.string,
        keyboardAppearance: PropTypes.oneOf(['default', 'light', 'dark']),
      },
      android: {
        setEnabled: PropTypes.bool,
        backgroundColor: PropTypes.string,
        cardNumber: PropTypes.string,
        expDate: PropTypes.string,
        securityCode: PropTypes.string,
      },
    }),
  }

  static defaultProps = {
    ...View.defaultProps,
  }

  valid = false // eslint-disable-line react/sort-comp
  params = {
    number: '',
    expMonth: 0,
    expYear: 0,
    cvc: '',
  }

  componentWillUnmount() {
    if (this.isFocused()) {
      this.blur()
    }
  }

  isFocused = () => TextInputState.currentlyFocusedField() === findNodeHandle(this.cardTextFieldRef)

  focus = () => {
    TextInputState.focusTextInput(findNodeHandle(this.cardTextFieldRef))
  }

  blur = () => {
    TextInputState.blurTextInput(findNodeHandle(this.cardTextFieldRef))
  }

  handlePress = () => {
    this.focus()
  }

  handleChange = (event) => {
    const { onChange, onParamsChange } = this.props
    const { nativeEvent } = event

    this.valid = nativeEvent.valid
    this.params = nativeEvent.params

    if (onChange) {
      // Send the intended parameters back into JS
      onChange({ ...nativeEvent })
    }

    if (onParamsChange) {
      onParamsChange(nativeEvent.valid, nativeEvent.params)
    }
  }

  setCardTextFieldRef = (node) => {
    this.cardTextFieldRef = node
  }

  // Previously on iOS only
  setParams = (params) => {
    this.cardTextFieldRef.setNativeProps({ params })
  }

  render() {
    const {
      style,
      disabled,
      expDate,
      cardNumber,
      securityCode,
      cursorColor,
      textErrorColor,
      placeholderColor,
      numberPlaceholder,
      expirationPlaceholder,
      cvcPlaceholder,
      keyboardAppearance,
      ...rest
    } = this.props

    const {
      borderColor,
      borderWidth,
      borderRadius,
      fontFamily,
      fontWeight,
      fontStyle,
      fontSize,
      overflow,
      backgroundColor,
      color,
      ...fieldStyles
    } = StyleSheet.flatten(style)

    const viewStyles = {
      overflow,
      width: fieldStyles.width,
    }

    const commonStyles = {
      borderColor,
      borderWidth,
      borderRadius,
      backgroundColor,
    }

    return (
      <View style={[commonStyles, viewStyles]}>
        <TouchableWithoutFeedback
          style={{ borderWidth: 2, borderColor: 'red'}}
          rejectResponderTermination
          testID={rest.testID}
          onPress={this.handlePress}
          accessible={rest.accessible}
          accessibilityLabel={rest.accessibilityLabel}
          accessibilityTraits={rest.accessibilityTraits}
        >
          <NativePaymentCardTextField
            ref={this.setCardTextFieldRef}
            style={[styles.field, fieldStyles]}
            borderColor="transparent"
            borderWidth={0}
            cornerRadius={borderRadius}
            textColor={color}
            fontFamily={fontFamily}
            fontWeight={fontWeight}
            fontStyle={fontStyle}
            fontSize={fontSize}
            enabled={!disabled}
            numberPlaceholder={numberPlaceholder}
            expirationPlaceholder={expirationPlaceholder}
            cvcPlaceholder={cvcPlaceholder}
            onChange={this.handleChange}
            // iOS only
            cursorColor={cursorColor}
            textErrorColor={textErrorColor}
            placeholderColor={placeholderColor}
            keyboardAppearance={keyboardAppearance}
            // Android only
            cardNumber={cardNumber}
            expDate={expDate}
            securityCode={securityCode}
          />
        </TouchableWithoutFeedback>
      </View>
    )
  }
}

Вы можете видеть, что testID назначен компоненту TouchableWithoutFeedBack, а не компоненту, который вводится.

Я пробовал

• установка testID в NativePaymentCardTextField
• установка accessible={true}, с accessibilityId, установленным в родительском компоненте

Просмотр иерархии из Detox

Я получаю одинаковую ошибку на обоих.

Что мне нужно сделать, чтобы иметь возможность ввести номер кредитной карты в этот компонент (если это возможно)

Заранее спасибо.

Answer 1

Судя по иерархии, похоже, что идентификатор теста cc-card-input назначен оболочке, а не самому текстовому полю. В частности, в этом разделе показано, что:

    +----------->CreditCardForm{id=243, visibility=VISIBLE, width=787, height=115, has-focus=true, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=true, is-selected=false, layout-params=android.view.ViewGroup$LayoutParams@ad170a6, tag=cc-card-input, root-is-layout-requested=false, has-input-connection=false, x=3.0, y=3.0, child-count=2} 
    |
    +------------>LinearLayout{id=2131296373, res-name=cc_form_layout, visibility=VISIBLE, width=703, height=69, has-focus=true, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=true, is-selected=false, layout-params=android.widget.RelativeLayout$LayoutParams@ce0b53d, tag=null, root-is-layout-requested=false, has-input-connection=false, x=42.0, y=21.0, child-count=2} 
    |
    +------------->FrameLayout{id=-1, visibility=VISIBLE, width=94, height=53, has-focus=false, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=true, is-layout-requested=true, is-selected=false, layout-params=android.widget.LinearLayout$LayoutParams@5c61800, tag=null, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=8.0, child-count=2} 
    |
    +-------------->ImageView{id=-1, visibility=VISIBLE, width=84, height=53, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=true, is-selected=false, layout-params=android.widget.FrameLayout$LayoutParams@a86839, tag=null, root-is-layout-requested=false, has-input-connection=false, x=10.0, y=0.0} 
    |
    +-------------->ImageView{id=-1, visibility=GONE, width=0, height=0, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=true, is-selected=false, layout-params=android.widget.FrameLayout$LayoutParams@c8bee7e, tag=null, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0} 
    |
    +------------->CreditCardEntry{id=2131296370, res-name=cc_entry, visibility=VISIBLE, width=609, height=69, has-focus=true, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=true, is-layout-requested=true, is-selected=false, layout-params=android.widget.LinearLayout$LayoutParams@e74b42c, tag=null, root-is-layout-requested=false, has-input-connection=false, x=94.0, y=0.0, child-count=1} 
    |
    +-------------->LinearLayout{id=2131296371, res-name=cc_entry_internal, visibility=VISIBLE, width=1632, height=63, has-focus=true, has-focusable=true, has-window-focus=true, is-clickable=false, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=true, is-selected=false, layout-params=android.widget.FrameLayout$LayoutParams@1f4748a, tag=null, root-is-layout-requested=false, has-input-connection=false, x=0.0, y=0.0, child-count=4} 
    |
    +--------------->CreditCardText{id=2131296368, res-name=cc_card, visibility=VISIBLE, width=1080, height=63, has-focus=true, has-focusable=true, has-window-focus=true, is-clickable=true, is-enabled=true, is-focused=true, is-focusable=true, is-layout-requested=true, is-selected=false, layout-params=android.widget.LinearLayout$LayoutParams@d53dafb, tag=null, root-is-layout-requested=false, has-input-connection=true, editor-info=[inputType=0x2 imeOptions=0x10000006 privateImeOptions=null actionLabel=null actionId=0 initialSelStart=0 initialSelEnd=0 initialCapsMode=0x0 hintText=1234 5678 9012 3456 label=null packageName=null fieldId=0 fieldName=null extras=null ], x=0.0, y=0.0, text=, hint=1234 5678 9012 3456, input-type=2, ime-target=true, has-links=false} 
    |
    +--------------->TextView{id=2131296374, res-name=cc_four_digits, visibility=VISIBLE, width=104, height=63, has-focus=false, has-focusable=false, has-window-focus=true, is-clickable=true, is-enabled=true, is-focused=false, is-focusable=false, is-layout-requested=true, is-selected=false, layout-params=android.widget.LinearLayout$LayoutParams@28ee718, tag=null, root-is-layout-requested=false, has-input-connection=false, x=1080.0, y=0.0, text=4242, input-type=0, ime-target=false, has-links=false} 

(просмотрите тег, связанный с представлением CreditCardForm)

Хотя он действительно видим, вы можете эффективно typeText() только над представлениями, которые текстовые вводы (а именно, когда открывается программная клавиатура).

Перестановка идентификатора теста в представление, способное эффективно принимать ввод, решит его (мне трудно сказать, какой именно, который соответствует иерархии, как взгляды кажутся заказными).