add detox tests

android/app/build.gradle

@@ -94,18 +94,24 @@ def enableSeparateBuildPerCPUArchitecture = false
 def enableProguardInReleaseBuilds = false
 
 android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+
+    compileSdkVersion 27 // Detox: update existing with this one
+    buildToolsVersion '27.0.2' // Detox: update existing with this one
 
     defaultConfig {
         applicationId "com.reactnativeci"
-        minSdkVersion 16
-        targetSdkVersion 22
+        minSdkVersion 18 // Detox: update existing with this one
+        targetSdkVersion 26 // Detox: update existing with this one
         versionCode 1
         versionName "1.0"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }
+        // Detox: start
+        testBuildType System.getProperty('testBuildType', 'debug')
+        missingDimensionStrategy "minReactNative", "minReactNative46"
+        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
+        // Detox: end
     }
     splits {
         abi {
@@ -140,6 +146,14 @@ dependencies {
     compile project(':react-native-vector-icons')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
+
+    // Detox: start
+    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'
+    // Detox: end
+
     compile "com.facebook.react:react-native:+"  // From node_modules
 }
 

android/app/src/androidTest/java/com/reactnativeci/DetoxTest.java

@@ -0,0 +1,24 @@
+package com.reactnativeci; // Detox: replace with the actual package name
+
+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);
+  }
+}

android/build.gradle

@@ -22,5 +22,10 @@ allprojects {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url "$rootDir/../node_modules/react-native/android"
         }
+        buildscript {
+          repositories {
+            google()
+          }
+        }
     }
 }

android/settings.gradle

@@ -5,3 +5,6 @@ include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 
 include ':app'
+
+include ':detox'
+project(':detox').projectDir = new File(rootProject.projectDir, '../node_modules/detox/android/detox')

e2e/firstTest.spec.js

@@ -0,0 +1,27 @@
+describe("App is functional", () => {
+  beforeEach(async () => {
+    await device.reloadReactNative(); // reload the app before running each of the tests
+  });
+
+  it("should show loader", async () => {
+    await expect(element(by.id("loader"))).toExist(); // we're using toExist() instead of isVisible() because the ActivityIndicator component becomes invisible when a testID prop is passed in
+  });
+
+  it("should load cards", async () => {
+    // assumes that if one card exists, then all the other cards also exists
+    await expect(element(by.id("card-Blaziken"))).toExist();
+  });
+
+  it("card changes state when it is clicked", async () => {
+    await element(by.id("card-Entei")).tap(); // not favorited by default
+    await expect(element(by.id("card-Entei-heart"))).toExist(); // should be marked as favorite
+    await element(by.id("card-Entei")).tap(); // clicking for a second time un-favorites it
+    await expect(element(by.id("card-Entei-heart-o"))).toExist(); // should not be marked as favorite
+  });
+
+  it("card state is kept in local storage", async () => {
+    await element(by.id("card-Entei")).tap(); // not favorited by default
+    await device.reloadReactNative(); // has the same effect of re-launching the app
+    await expect(element(by.id("card-Entei-heart"))).toExist(); // should still be favorited after app is reloaded
+  });
+});

e2e/init.js

@@ -0,0 +1,19 @@
+const detox = require('detox');
+const config = require('../package.json').detox;
+const adapter = require('detox/runners/mocha/adapter');
+
+before(async () => {
+  await detox.init(config);
+});
+
+beforeEach(async function () {
+  await adapter.beforeEach(this);
+});
+
+afterEach(async function () {
+  await adapter.afterEach(this);
+});
+
+after(async () => {
+  await detox.cleanup();
+});

e2e/mocha.opts

@@ -0,0 +1 @@
+--recursive --timeout 120000 --bail

package.json

@@ -19,7 +19,9 @@
 	"devDependencies": {
 		"babel-jest": "23.4.2",
 		"babel-preset-react-native": "4.0.0",
+		"detox": "8.1.6",
 		"jest": "23.5.0",
+		"mocha": "4.0.1",
 		"react-test-renderer": "16.0.0"
 	},
 	"jest": {
@@ -30,8 +32,30 @@
 		"transform": {
 			"\\.(jpg|jpeg|png|gif)$": "<rootDir>/fileTransformer.js"
 		},
-		"setupFiles": [
-			"<rootDir>/node_modules/appcenter/test/AppCenterMock.js"
-		]
+
+		"testMatch": ["<rootDir>/__tests__/*"]
+	},
+	"detox": {
+		"configurations": {
+			"ios.sim.debug": {
+				"binaryPath":
+					"ios/build/Build/Products/Debug-iphonesimulator/ReactNativeCI.app",
+				"build":
+					"xcodebuild -project ios/ReactNativeCI.xcodeproj -scheme ReactNativeCI -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
+				"type": "ios.simulator",
+				"name": "iPhone 5s"
+			},
+			"android.emu.debug": {
+				"binaryPath":
+					"./android/app/build/outputs/apk/debug/app-debug.apk",
+				"build":
+					"cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
+				"type": "android.attached",
+				"name": "192.168.57.101:5555"
+			}
+		},
+		"test-runner": "mocha",
+		"specs": "e2e",
+		"runner-config": "e2e/mocha.opts"
 	}
 }

src/components/Card.js

@@ -9,11 +9,16 @@ const { width } = Dimensions.get("window");
 const Card = ({ image, text, is_favorite, action }) => {
   const icon = is_favorite ? "heart" : "heart-o";
   return (
-    <TouchableOpacity onPress={action}>
+    <TouchableOpacity onPress={action} testID={"card-" + text}>
       <View style={styles.card}>
         <Text style={styles.text}>{text}</Text>
         <Image source={image} resizeMode={"contain"} style={styles.image} />
-        <Icon name={icon} size={30} color={"#333"} />
+        <Icon
+          name={icon}
+          size={30}
+          color={"#333"}
+          testID={"card-" + text + "-" + icon}
+        />
       </View>
     </TouchableOpacity>
   );

src/components/CardList.js

@@ -17,7 +17,12 @@ class CardList extends Component {
     const { fetching, cards } = this.props;
     return (
       <View style={styles.container}>
-        <ActivityIndicator size="large" color="#333" animating={fetching} />
+        <ActivityIndicator
+          size="large"
+          color="#333"
+          animating={fetching}
+          testID="loader"
+        />
         <FlatList
           contentContainerStyle={styles.flatlist}
           data={cards}