Детокс - Тестирование видимости модального в реагировать родной - PullRequest
Новая
       16

Детокс - Тестирование видимости модального в реагировать родной

0 голосов
/ 01 мая 2018

Мы используем детокс, чтобы написать E2E-тестирование собственного встроенного приложения, в котором у нас есть кейс, который должен проверить, появляется ли модальное состояние после нажатия кнопки.

Но детокс не смог идентифицировать модал с данным testID, думал, что модал открывается, как и ожидалось. Есть ли другой способ тестирования в реактивном режиме с использованием детоксикации?

Ниже представлен модальный JSX 

<Modal
    testID="loadingModal"
    animationType="none"
    transparent
    visible={loading}
    onRequestClose={() => {}}
  >
    <View style={styles.modalContainer}>
      <View style={styles.loginModal}>
        <ActivityIndicator
          animating
          size="large"
          color="#00e0ff"
        />
        <Text style={styles.login}>Logging in...</Text>
      </View>
    </View>
  </Modal>

А ниже приведен код для проверки видимости модальных 

it('should have welcome screen', async () => {      
    ....

    await element(by.text('CONTINUE')).tap();
    await waitFor(element(by.id('loadingModal'))).toBeVisible().withTimeout(5000);
    await expect(element(by.id('loadingModal'))).toBeVisible(); // this always fails    
});

1 Ответ

0 голосов
/ 02 мая 2018

Модальный компонент React Native создает контроллер представления, который управляет рендерингом дочерних представлений на собственном уровне. К сожалению, он не пропускает testID, поэтому лучший способ, который я нашел, - это обернуть содержимое модала в <View> и передать реквизит testID этому компоненту. В вашем случае вы можете сделать: 

<Modal
    animationType="none"
    transparent
    visible={loading}
    onRequestClose={() => {}}
>
    <View 
        style={styles.modalContainer}
        testID="loadingModal"         // Just move the testID to this element
    >
        <View style={styles.loginModal}>
            <ActivityIndicator
                animating
                size="large"
                color="#00e0ff"
            />
        <Text style={styles.login}>Logging in...</Text>
    </View>
</View>

...