WIP - Detox e2e for android (#2673)

* detox android support

* detox android support

* android detox fixes

* android fixes

* more android e2e fixes

* typo fix

* build fix

* remove specific test for ios

* Update DetoxTest.java

* lint fix

* fixed typo

* Update ViewController.java

* added script for android detox e2e

* detox android support

* android detox fixes

* android fixes

* more android e2e fixes

* typo fix

* build fix

* remove specific test for ios

* Update DetoxTest.java

* lint fix

* fixed typo

* Update ViewController.java

* added script for android detox e2e

* e2e test fixes

* Update Orientations.test.js

* Update ScreenStack.test.js

* Update ScreenStyle.test.js

* Update TopLevelApi.test.js

e2e/CustomTransition.js

@@ -1,7 +1,8 @@
 
 const Utils = require('./Utils');
+const testIDs = require('../playground/src/testIDs');
 
-const elementByLabel = Utils.elementByLabel;
+const elementById = Utils.elementById;
 
 describe('custom transition', () => {
   beforeEach(async () => {
@@ -9,8 +10,8 @@ describe('custom transition', () => {
   });
 
   it('sanity', async () => {
-    await elementByLabel('Push Options Screen').tap();
-    await elementByLabel('Custom Transition').tap();
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
+    await elementById(testIDs.CUSTOM_TRANSITION_BUTTON).tap();
     await expect(element(by.id('shared_image1'))).toExist();
     await element(by.id('shared_image1')).tap();
     await expect(element(by.id('shared_image2'))).toExist();

e2e/Orientations.test.js

@@ -9,41 +9,36 @@ describe('orientation', () => {
     await device.relaunchApp();
   });
 
-  afterEach(async () => {
-    await device.setOrientation('landscape');
-    await device.setOrientation('portrait');
-  });
-
   it('default allows all', async () => {
     await elementById(testIDs.ORIENTATION_BUTTON).tap();
     await elementById(testIDs.DEFAULT_ORIENTATION_BUTTON).tap();
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
     await device.setOrientation('landscape');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
+    await expect(elementById(testIDs.LANDSCAPE_ELEMENT)).toBeVisible();
     await device.setOrientation('portrait');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
     await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 
   it('landscape and portrait array', async () => {
     await elementById(testIDs.ORIENTATION_BUTTON).tap();
     await elementById(testIDs.LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON).tap();
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(element(by.id(testIDs.PORTRAIT_ELEMENT))).toBeVisible();
     await device.setOrientation('landscape');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
+    await expect(element(by.id(testIDs.LANDSCAPE_ELEMENT))).toBeVisible();
     await device.setOrientation('portrait');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(element(by.id(testIDs.PORTRAIT_ELEMENT))).toBeVisible();
     await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 
   it('portrait only', async () => {
     await elementById(testIDs.ORIENTATION_BUTTON).tap();
     await elementById(testIDs.PORTRAIT_ORIENTATION_BUTTON).tap();
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
     await device.setOrientation('landscape');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
     await device.setOrientation('portrait');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Portrait');
+    await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
     await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 
@@ -51,9 +46,9 @@ describe('orientation', () => {
     await elementById(testIDs.ORIENTATION_BUTTON).tap();
     await elementById(testIDs.LANDSCAPE_ORIENTATION_BUTTON).tap();
     await device.setOrientation('landscape');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
+    await expect(element(by.id(testIDs.LANDSCAPE_ELEMENT))).toBeVisible();
     await device.setOrientation('portrait');
-    await expect(element(by.id('currentOrientation'))).toHaveText('Landscape');
+    await expect(element(by.id(testIDs.LANDSCAPE_ELEMENT))).toBeVisible();
     await elementById(testIDs.DISMISS_BUTTON).tap();
   });
 });

e2e/ScreenStack.test.js

@@ -90,7 +90,7 @@ describe('screen stack', () => {
     await elementById(testIDs.SHOW_MODAL_BUTTON).tap();
     await elementById(testIDs.MODAL_WITH_STACK_BUTTON).tap();
     await expect(elementByLabel('Screen 2')).toBeVisible();
-    await Utils.tapBackIos();
+    await elementById(testIDs.POP_BUTTON).tap();
     await expect(elementByLabel('Screen 1')).toBeVisible();
   });
 });

e2e/ScreenStyle.test.js

@@ -10,14 +10,14 @@ describe('screen style', () => {
 
   it('declare a options on component component', async () => {
     await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(element(by.label('Static Title'))).toBeVisible();
+    await expect(elementByLabel('Static Title')).toBeVisible();
   });
 
   it('change title on component component', async () => {
     await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
-    await expect(element(by.label('Static Title'))).toBeVisible();
+    await expect(elementByLabel('Static Title')).toBeVisible();
     await elementById(testIDs.DYNAMIC_OPTIONS_BUTTON).tap();
-    await expect(element(by.label('Dynamic Title'))).toBeVisible();
+    await expect(elementByLabel('Dynamic Title')).toBeVisible();
   });
 
   it('set dynamic options with valid options will do something and not crash', async () => {
@@ -46,14 +46,6 @@ describe('screen style', () => {
     await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
   });
 
-  it('makes topBar transparent and opaque', async () => {
-    await elementByLabel('Push Options Screen').tap();
-    await elementByLabel('Top Bar Transparent').tap();
-    await expect(element(by.type('_UIVisualEffectBackdropView'))).toBeNotVisible();
-    await elementByLabel('Top Bar Opaque').tap();
-    await expect(element(by.type('_UIVisualEffectBackdropView')).atIndex(1)).toBeVisible();
-  });
-
   it('set Tab Bar badge on a current Tab', async () => {
     await elementById(testIDs.TAB_BASED_APP_BUTTON).tap();
     await elementById(testIDs.SET_TAB_BADGE_BUTTON).tap();

e2e/TopLevelApi.test.js

@@ -35,9 +35,9 @@ describe('top level api', () => {
   it('unmount is called on pop', async () => {
     await elementById(testIDs.PUSH_LIFECYCLE_BUTTON).tap();
     await expect(elementByLabel('didAppear')).toBeVisible();
-    await Utils.tapBackIos();
+    await elementById(testIDs.POP_BUTTON).tap();
     await expect(elementByLabel('componentWillUnmount')).toBeVisible();
-    await element(by.traits(['button']).and(by.label('OK'))).atIndex(0).tap();
+    await elementByLabel('OK').atIndex(0).tap();
     await expect(elementByLabel('didDisappear')).toBeVisible();
   });
 });

lib/android/app/src/main/java/com/reactnativenavigation/parse/TopBarOptions.java

@@ -27,11 +27,13 @@ public class TopBarOptions implements DEFAULT_VALUES {
         options.drawBehind = Options.BooleanOptions.parse(json.optString("drawBehind"));
         options.rightButtons = Button.parseJsonArray(json.optJSONArray("rightButtons"));
         options.leftButtons = Button.parseJsonArray(json.optJSONArray("leftButtons"));
+        options.testId = TextParser.parse(json, "testID");
 
         return options;
     }
 
     public Text title = new NullText();
+    public Text testId = new NullText();
     public Color backgroundColor = new NullColor();
     public Color textColor = new NullColor();
     public Fraction textFontSize = new NullFraction();

lib/android/app/src/main/java/com/reactnativenavigation/presentation/OptionsPresenter.java

@@ -34,6 +34,7 @@ public class OptionsPresenter {
         topBar.setBackgroundColor(options.backgroundColor);
         topBar.setTitleTextColor(options.textColor);
         topBar.setTitleFontSize(options.textFontSize);
+        if (options.testId.hasValue()) topBar.setTestId(options.testId.get());
 
         topBar.setTitleTypeface(options.textFontFamily);
         if (options.hidden == True) {

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java

@@ -69,8 +69,8 @@ public class BottomTabsController extends ParentController implements AHBottomNa
         if (wasSelected) return false;
         selectTabAtIndex(index);
         return true;
-    }
-
+	}
+	
 	public void setTabs(final List<ViewController> tabs) {
 		if (tabs.size() > 5) {
 			throw new RuntimeException("Too many tabs!");

lib/android/app/src/main/java/com/reactnativenavigation/views/TopBar.java

@@ -51,6 +51,10 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
         return titleBar.getTitle() != null ? titleBar.getTitle().toString() : "";
     }
 
+    public void setTestId(String testId) {
+        setTag(testId);
+    }
+
     public void setTitleTextColor(Color color) {
         if (color.hasValue()) titleBar.setTitleTextColor(color.get());
     }

package.json

@@ -38,6 +38,7 @@
     "test-unit-ios": "node ./scripts/test.unit.ios.js",
     "pretest-e2e-android": "npm run build",
     "test-e2e-android": "node ./scripts/test.e2e.android.js",
+    "test-e2e-android-detox": "node ./scripts/test.e2e.android.detox.js",
     "pretest-e2e-ios": "npm run build",
     "test-e2e-ios": "node ./scripts/test.e2e.ios.js",
     "test-all": "node ./scripts/test.all.js",
@@ -123,6 +124,18 @@
         "build": "RCT_NO_LAUNCH_PACKAGER=true xcodebuild build -scheme playground_release -project playground/ios/playground.xcodeproj -sdk iphonesimulator -configuration Release -derivedDataPath playground/ios/DerivedData/playground ONLY_ACTIVE_ARCH=YES -quiet",
         "type": "ios.simulator",
         "name": "iPhone SE"
+      },
+      "android.emu.debug": {
+        "binaryPath": "playground/android/app/build/outputs/apk/debug/app-debug.apk",
+        "build": "cd playground/android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ../..",
+        "type": "android.emulator",
+        "name": "Nexus_5X_API_26"
+      },
+      "android.emu.release": {
+        "binaryPath": "playground/android/app/build/outputs/apk/release/app-release.apk",
+        "build": "cd playground/android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release && cd ../..",
+        "type": "android.emulator",
+        "name": "Nexus_5X_API_26"
       }
     }
   }

playground/android/app/build.gradle

@@ -25,6 +25,10 @@ android {
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }
+
+        testBuildType System.getProperty('testBuildType', 'debug')  //this will later be used to control the test apk build type
+        missingDimensionStrategy "minReactNative", "minReactNative46" //read note
+        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
     }
     signingConfigs {
         release {
@@ -47,4 +51,9 @@ dependencies {
     implementation 'com.android.support:design:25.4.0'
     implementation "com.android.support:appcompat-v7:25.4.0"
     implementation project(':react-native-navigation')
+
+    androidTestImplementation(project(path: ":detox"))
+    androidTestImplementation 'junit:junit:4.12'
+    androidTestImplementation 'com.android.support.test:runner:1.0.1'
+    androidTestImplementation 'com.android.support.test:rules:1.0.1'
 }

playground/android/app/src/androidTest/java/com/reactnativenavigation/playground/DetoxTest.java

@@ -0,0 +1,24 @@
+package com.reactnativenavigation.playground;
+
+import android.support.test.filters.LargeTest;
+import android.support.test.rule.ActivityTestRule;
+import android.support.test.runner.AndroidJUnit4;
+
+import com.wix.detox.Detox;
+
+import org.junit.Rule;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+@RunWith(AndroidJUnit4.class)
+@LargeTest
+public class DetoxTest {
+
+    @Rule
+    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);
+
+    @Test
+    public void runDetoxTests() throws InterruptedException {
+        Detox.runTests(mActivityRule);
+    }
+}

playground/android/settings.gradle

@@ -3,3 +3,6 @@ rootProject.name = 'playground'
 include ':app'
 include ':react-native-navigation'
 project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../../lib/android/app/')
+
+include ':detox'
+project(':detox').projectDir = new File(rootProject.projectDir, '../../node_modules/detox/android/detox')

playground/src/screens/LifecycleScreen.js

@@ -37,6 +37,7 @@ class LifecycleScreen extends Component {
         <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
         <Text style={styles.h1}>{this.state.text}</Text>
         <Button title='Push to test didDisappear' testID={testIDs.PUSH_TO_TEST_DID_DISAPPEAR_BUTTON} onPress={this.onClickPush} />
+        <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={() => this.onClickPop()} />
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
     );
@@ -45,6 +46,10 @@ class LifecycleScreen extends Component {
   onClickPush() {
     Navigation.push(this.props.componentId, { component: { name: 'navigation.playground.TextScreen' } });
   }
+
+  onClickPop() {
+    Navigation.pop(this.props.componentId);
+  }
 }
 module.exports = LifecycleScreen;
 

playground/src/screens/OptionsScreen.js

@@ -63,7 +63,7 @@ class OptionsScreen extends Component {
         <Button title='Top Bar Transparent' onPress={this.onClickTopBarTransparent} />
         <Button title='Top Bar Opaque' onPress={this.onClickTopBarOpaque} />
         <Button title='scrollView Screen' testID={testIDs.SCROLLVIEW_SCREEN_BUTTON} onPress={this.onClickScrollViewScreen} />
-        <Button title='Custom Transition' onPress={this.onClickCustomTranstition} />
+        <Button title='Custom Transition' testID={testIDs.CUSTOM_TRANSITION_BUTTON} onPress={this.onClickCustomTranstition} />
         <Button title='Show custom alert' testID={testIDs.SHOW_CUSTOM_ALERT_BUTTON} onPress={this.onClickAlert} />
         <Button title='Show snackbar' testID={testIDs.SHOW_SNACKBAR_BUTTON} onPress={this.onClickSnackbar} />
         <Button title='Show overlay' testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />

playground/src/screens/OrientationDetectScreen.js

@@ -23,7 +23,9 @@ class OrientationDetectScreen extends Component {
         <Text style={styles.h1}>{`Orientation Screen`}</Text>
         <Button title='Dismiss' testID={testIDs.DISMISS_BUTTON} onPress={() => Navigation.dismissModal(this.props.componentId)} />
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
-        <Text style={styles.footer} testID='currentOrientation'>{this.state.horizontal ? 'Landscape' : 'Portrait'}</Text>
+        {this.state.horizontal ?
+        <Text style={styles.footer} testID={testIDs.LANDSCAPE_ELEMENT}>Landscape</Text> :
+        <Text style={styles.footer} testID={testIDs.PORTRAIT_ELEMENT}>Portrait</Text>}
       </View>
     );
   }

playground/src/screens/OrientationSelectScreen.js

@@ -1,12 +1,12 @@
 const React = require('react');
 const { Component } = require('react');
+
 const { View, Text, Button } = require('react-native');
 
 const { Navigation } = require('react-native-navigation');
 const testIDs = require('../testIDs');
 
 class OrientationSelectScreen extends Component {
-
   render() {
     return (
       <View style={styles.root}>
@@ -37,16 +37,12 @@ const styles = {
   root: {
     flexGrow: 1,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    backgroundColor: '#f5fcff'
   },
   h1: {
     fontSize: 24,
     textAlign: 'center',
-    margin: 30
-  },
-  footer: {
-    fontSize: 10,
-    color: '#888',
-    marginTop: 10
+    margin: 10
   }
 };

playground/src/screens/TextScreen.js

@@ -97,6 +97,10 @@ class TextScreen extends Component {
       }
     });
   }
+
+  onClickPop() {
+    Navigation.pop(this.props.componentId);
+  }
 }
 
 module.exports = TextScreen;

playground/src/testIDs.js

@@ -51,11 +51,14 @@ module.exports = {
   SHOW_TOUCH_THROUGH_OVERLAY_BUTTON: `SHOW_TOUCH_THROUGH_OVERLAY_BUTTON`,
   OK_BUTTON: `OK_BUTTON`,
   MODAL_WITH_STACK_BUTTON: `MODAL_WITH_STACK_BUTTON`,
+  CUSTOM_TRANSITION_BUTTON: `CUSTOM_TRANSITION_BUTTON`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,
   BOTTOM_TABS_ELEMENT: `BOTTOM_TABS_ELEMENT`,
   TOP_BAR_ELEMENT: `TOP_BAR_ELEMENT`,
+  LANDSCAPE_ELEMENT: `LANDSCAPE_ELEMENT`,
+  PORTRAIT_ELEMENT: `PORTRAIT_ELEMENT`,
 
   // Headers
   WELCOME_SCREEN_HEADER: `WELCOME_SCREEN_HEADER`,

scripts/test.e2e.android.detox.js

@@ -0,0 +1,12 @@
+const _ = require('lodash');
+const exec = require('shell-utils').exec;
+
+const release = _.includes(process.argv, '--release');
+
+run();
+
+function run() {
+  const conf = release ? `release` : `debug`;
+  exec.execSync(`detox build --configuration android.emu.${conf}`);
+  exec.execSync(`detox test --configuration android.emu.${conf} ${process.env.CI ? '--cleanup' : ''}`);
+}