Merge pull request #4513 from wix/4512-create-test-for-alert-api

test(e2e): add tests for interactions with React Native alerts.

detox/test/e2e/37.dialogs.test.js

@@ -0,0 +1,26 @@
+describe('alerts', () => {
+
+  beforeAll(async () => {
+    await device.launchApp({
+      delete: true,
+      newInstance: true,
+    });
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+    await element(by.text('Alerts')).tap();
+  });
+
+  it('should click on ok and cancel buttons', async () => {
+    await expect(element(by.id('AlertScreen.Text'))).toHaveText('Not Pressed');
+    await element(by.id('AlertScreen.Button')).tap();
+    await expect(element(by.text('Alert Title'))).toBeVisible();
+    await expect(element(by.text('My Alert Msg'))).toBeVisible();
+    await element(by.text('OK')).tap();
+    await expect(element(by.id('AlertScreen.Text'))).toHaveText('OK Pressed');
+    await element(by.id('AlertScreen.Button')).tap();
+    await element(by.text('Cancel')).tap();
+    await expect(element(by.id('AlertScreen.Text'))).toHaveText('Cancel Pressed');
+  });
+});

detox/test/src/Screens/AlertScreen.tsx

@@ -0,0 +1,37 @@
+import React, { Component, useState } from 'react';
+import { Alert, Button, SafeAreaView, Text, View } from 'react-native';
+
+
+const AlertComponent = () => {
+    const [textState, setTextState] = useState('Not Pressed');
+
+    return (
+        <SafeAreaView style={{ flex: 1 }}>
+            <View style={{ flex: 1, alignContent: 'center' }}>
+                <Text style={{ padding: 16 }} testID='AlertScreen.Text'>{textState}</Text>
+
+                <Button title={'Show Alert'} testID='AlertScreen.Button' onPress={() => {
+                    Alert.alert(
+                        'Alert Title',
+                        'My Alert Msg',
+                        [{
+                            text: 'Cancel',
+                            onPress: () => setTextState('Cancel Pressed')
+                        }, {
+                            text: 'OK',
+                            onPress: () => setTextState('OK Pressed')
+                        }
+                        ]);
+                }} />
+            </View>
+        </SafeAreaView>
+    );
+};
+
+export default class AlertScreen extends Component {
+    render() {
+        return (
+            <AlertComponent />
+        );
+    }
+}

detox/test/src/Screens/index.js

@@ -31,6 +31,7 @@ import VisibilityScreen from './VisibilityScreen';
 import AttributesScreen from './AttributesScreen';
 import DragNDropScreen  from './DragNDropScreen';
 import SystemDialogsScreen from "./SystemDialogsScreen";
+import AlertScreen from "./AlertScreen";
 
 export {
   SanityScreen,
@@ -65,5 +66,6 @@ export {
   VisibilityScreen,
   AttributesScreen,
   DragNDropScreen,
-  SystemDialogsScreen
+  SystemDialogsScreen,
+  AlertScreen,
 };

detox/test/src/app.js

@@ -82,7 +82,11 @@ export default class example extends Component {
         {this.renderScreenButton('Switch Root', Screens.SwitchRootScreen)}
         {this.renderScreenButton('Timeouts', Screens.TimeoutsScreen)}
         {this.renderScreenButton('Orientation', Screens.Orientation)}
-        {this.renderScreenButton('Permissions', Screens.Permissions)}
+        <View style={{flexDirection: 'row', justifyContent: 'center'}}>
+          {this.renderScreenButton('Permissions', Screens.Permissions)}
+          {this.renderInlineSeparator()}
+          {this.renderScreenButton('Alerts', Screens.AlertScreen)}
+        </View>
         {this.renderScreenButton('Network', Screens.NetworkScreen)}
         {this.renderAnimationScreenButtons()}
         {this.renderScreenButton('Device', Screens.DeviceScreen)}