Initial Detox E2E iOS configuration to be run on RNTester (#20235)

Summary:
This PR adds initial setup for Detox E2E iOS and some tests for ButtonExample.
Pull Request resolved: facebook/react-native#20235

Reviewed By: hramos

Differential Revision: D8924525

Pulled By: TheSavior

fbshipit-source-id: 8117fc1559c2e9cb831f7b081aa8f4ddc8ba7401

Author: rotemmiz

e2e/config.json

@@ -0,0 +1,6 @@
+{
+  "setupTestFrameworkScriptFile" : "./init.js",
+  "testEnvironment": "node",
+  "bail": true,
+  "verbose": true
+}

e2e/init.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const detox = require('detox');
+const config = require('../../package.json').detox;
+const adapter = require('detox/runners/jest/adapter');
+
+jest.setTimeout(480000);
+jasmine.getEnv().addReporter(adapter);
+
+beforeAll(async () => {
+  await detox.init(config);
+});
+
+beforeEach(async function() {
+  await adapter.beforeEach();
+});
+
+afterAll(async () => {
+  await adapter.afterAll();
+  await detox.cleanup();
+});
+
+process.on('unhandledRejection', (reason, p) => {
+  console.log('Unhandled Rejection at: Promise', p, 'reason:', reason);
+});

e2e/sanity.test.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* global device, element, by, expect */
+
+describe('Sanity', () => {
+  beforeEach(async () => {
+    await device.reloadReactNative();
+    await element(by.label(`<Button> Simple React Native button component.`)).tap();
+  });
+
+  afterEach(async () => {
+    //TODO - remove app state persistency, till then, we must go back to main screen,
+    await element(by.label('Back')).tap();
+  });
+
+  it('Simple button should be tappable', async () => {
+    await element(by.label('Press Me')).tap();
+    await expect(element(by.text('Simple has been pressed!'))).toBeVisible();
+    await element(by.text('OK')).tap();
+  });
+
+  it('Adjusted color button should be tappable', async () => {
+    await element(by.label('Press Purple')).tap();
+    await expect(element(by.text('Purple has been pressed!'))).toBeVisible();
+    await element(by.text('OK')).tap();
+  });
+
+  it(`Two buttons with JustifyContent:'space-between' should be tappable`, async () => {
+    await element(by.label('This looks great!')).tap();
+    await expect(element(by.text('Left has been pressed!'))).toBeVisible();
+    await element(by.text('OK')).tap();
+
+    await element(by.label('Ok!')).tap();
+    await expect(element(by.text('Right has been pressed!'))).toBeVisible();
+    await element(by.text('OK')).tap();
+  });
+
+  it('Disabled button should not interact', async () => {
+    await element(by.label('I Am Disabled')).tap();
+    await expect(element(by.text('Disabled has been pressed!'))).toBeNotVisible();
+  });
+});

js/ButtonExample.js

@@ -14,9 +14,9 @@ const React = require('react');
 const ReactNative = require('react-native');
 const {Alert, Button, View} = ReactNative;
 
-const onButtonPress = () => {
-  Alert.alert('Button has been pressed!');
-};
+function onButtonPress(buttonName) {
+  Alert.alert(`${buttonName} has been pressed!`);
+}
 
 exports.displayName = 'ButtonExample';
 exports.framework = 'React';
@@ -33,7 +33,7 @@ exports.examples = [
     render: function() {
       return (
         <Button
-          onPress={onButtonPress}
+          onPress={() => onButtonPress('Simple')}
           title="Press Me"
           accessibilityLabel="See an informative alert"
         />
@@ -49,7 +49,7 @@ exports.examples = [
     render: function() {
       return (
         <Button
-          onPress={onButtonPress}
+          onPress={() => onButtonPress('Purple')}
           title="Press Purple"
           color="#841584"
           accessibilityLabel="Learn more about purple"
@@ -65,12 +65,12 @@ exports.examples = [
       return (
         <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
           <Button
-            onPress={onButtonPress}
+            onPress={() => onButtonPress('Left')}
             title="This looks great!"
             accessibilityLabel="This sounds great!"
           />
           <Button
-            onPress={onButtonPress}
+            onPress={() => onButtonPress('Right')}
             title="Ok!"
             color="#841584"
             accessibilityLabel="Ok, Great!"
@@ -86,7 +86,7 @@ exports.examples = [
       return (
         <Button
           disabled
-          onPress={onButtonPress}
+          onPress={() => onButtonPress('Disabled')}
           title="I Am Disabled"
           accessibilityLabel="See an informative alert"
         />