Integrate React Native E2E test with detox framework (microsoft#15133)

### Description
<!-- Describe your changes. -->

Integrate react native e2e test framework with detox.
https://wix.github.io/Detox/

Good build in CI:

https://dev.azure.com/onnxruntime/onnxruntime/_build/results?buildId=946695&view=results

### Motivation and Context
<!-- - Why is this change required? What problem does it solve?
- If it fixes an open issue, please link to the issue here. -->

Write cross-platform end-to-end tests in JavaScript. 
Resolve flaky e2e tests in react native ci pipelines.

---------

Co-authored-by: rachguo <[email protected]>
Co-authored-by: rachguo <[email protected]>

Author: 3 people

README.md

@@ -397,27 +397,78 @@ From ORT v1.13 onwards the 'full' ONNX Runtime package is used. It supports both
      - replace `com.microsoft.onnxruntime:onnxruntime-android` with `com.microsoft.onnxruntime:onnxruntime-mobile` in /js/react_native/e2e/android/app/build.gradle
      - replace `onnxruntime-c` with `onnxruntime-mobile-c` in /js/react_native/e2e/ios/Podfile
 
-   From `<ORT_ROOT>/js/react_native/e2e/android`, run e2e Android tests as follows,
+  - Run E2E Testing with Detox framework
 
-   ```sh
-   ./gradlew :app:connectedDebugAndroidTest
-   ```
+    When testing with integrated [Detox](https://wix.github.io/Detox/docs/next/introduction/getting-started) framework for Android and iOS e2e apps:
+    - Detox prerequisites:
 
-   From `<ORT_ROOT>/js/react_native/e2e/ios`, run e2e iOS tests as follows,
+      Install detox command line tools:
+      ```
+      yarn global add detox-cli
+      ```
+      Install applesimutils which is required by Detox to work with iOS simulators. (Requires a MacOS device)
+      ```
+      brew tap wix/brew
+      brew install applesimutils
+      ```
+      Main Detox project files:
+        - `.detoxrc.js` -Detox config file;
+        - `e2e/jest.config.js` -Jest configuration;
+        - `e2e/OnnxruntimeModuleExample.test.js` - initial react native onnxruntimemodule e2e detox test.
+    - Build the detox e2e testing app.
 
-   ```sh
-   xcrun xcodebuild test -workspace OnnxruntimeModuleExample.xcworkspace -scheme OnnxruntimeModuleExample -destination 'platform=iOS Simulator,OS=latest,name=iPhone 13'
-   ```
+      From `<ORT_ROOT>/js/react_native/e2e`, run the command to build the e2e testing app. Before that ensure you have android emulator/ios simulator started locally.
+
+      iOS (Debug):
+
+      ```
+      detox build --configuration ios.sim.debug
+      ```
+      
+      Android (Debug):
+
+      ```
+      detox build --configuration android.emu.debug
+      ```
+      
+      * Note: If names of local testing android/ios devices do not match the default setting in `.detoxrc.js` file, 
+      modify the device name in config files accordingly to match local device name otherwise would cause a build failure.
 
-   ***`yarn bootstrap` changes `packages.json` and `yarn.lock` files. Once testing is done, restore changes to avoid unwanted commit.***
+    - Run the detox e2e tests.
+      
+      In a debug configuration, you need to have React Native packager running in parallel before you start Detox tests:
+
+      ```
+      npm start
+
+      > react-native start
+      ```
+      
+      From `<ORT_ROOT>/js/react_native/e2e`, run Detox tests using the following command:
+
+      iOS (Debug):
+
+      ```
+      detox test --configuration ios.sim.debug
+      ```
+
+      Android (Debug):
+
+      ```
+      detox test --configuration android.emu.debug
+      ```
+
+      To record logs for testing results, add `--record-logs`. Output logs and test results will be produced in the `e2e/artifacts/` folder.
+      See: [Detox/logger#artifacts](https://wix.github.io/Detox/docs/api/logger#artifacts)
+    
+      ***`yarn bootstrap` changes `packages.json` and `yarn.lock` files. Once testing is done, restore changes to avoid unwanted commit.***
 
 5. Run Android and iOS apps.
 
    ```sh
    yarn e2e android
    yarn e2e ios
    ```
-
 ### NPM Packaging
 
 1. Update a version using `npm version <version>` from `<ORT_ROOT>/js/react_native` folder. If it's for a dev, use `npm version <version>-dev.<subversion>`

react_native/e2e/.detoxrc.js

@@ -0,0 +1,83 @@
+/** @type {Detox.DetoxConfig} */
+module.exports = {
+  testRunner: {
+    args: {
+      '$0': 'jest',
+      config: 'test/jest.config.js'
+    },
+    jest: {
+      setupTimeout: 120000
+    }
+  },
+  apps: {
+    'ios.debug': {
+      type: 'ios.app',
+      binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/OnnxruntimeModuleExample.app',
+      build: 'xcodebuild -workspace ios/OnnxruntimeModuleExample.xcworkspace -scheme OnnxruntimeModuleExample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build'
+    },
+    'ios.release': {
+      type: 'ios.app',
+      binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/OnnxruntimeModuleExample.app',
+      build: 'xcodebuild -workspace ios/OnnxruntimeModuleExample.xcworkspace -scheme OnnxruntimeModuleExample -configuration Release -sdk iphonesimulator -derivedDataPath ios/build'
+    },
+    'android.debug': {
+      type: 'android.apk',
+      binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk',
+      build: 'cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug',
+      reversePorts: [
+        8081
+      ]
+    },
+    'android.release': {
+      type: 'android.apk',
+      binaryPath: 'android/app/build/outputs/apk/release/app-release.apk',
+      build: 'cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release'
+    }
+  },
+  devices: {
+    simulator: {
+      type: 'ios.simulator',
+      device: {
+        type: 'iPhone 13'
+      }
+    },
+    attached: {
+      type: 'android.attached',
+      device: {
+        adbName: '.*'
+      }
+    },
+    emulator: {
+      type: 'android.emulator',
+      device: {
+        avdName: 'ort_android'
+      }
+    }
+  },
+  configurations: {
+    'ios.sim.debug': {
+      device: 'simulator',
+      app: 'ios.debug'
+    },
+    'ios.sim.release': {
+      device: 'simulator',
+      app: 'ios.release'
+    },
+    'android.att.debug': {
+      device: 'attached',
+      app: 'android.debug'
+    },
+    'android.att.release': {
+      device: 'attached',
+      app: 'android.release'
+    },
+    'android.emu.debug': {
+      device: 'emulator',
+      app: 'android.debug'
+    },
+    'android.emu.release': {
+      device: 'emulator',
+      app: 'android.release'
+    }
+  }
+};

react_native/e2e/android/app/build.gradle

@@ -133,7 +133,7 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
-
+        testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
     splits {
@@ -159,6 +159,7 @@ android {
             signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro"
         }
     }
     // applicationVariants are e.g. debug, release
@@ -184,6 +185,9 @@ repositories {
 }
 
 dependencies {
+    androidTestImplementation('com.wix:detox:20.7.0')
+    implementation 'androidx.appcompat:appcompat:1.1.0'
+    
     implementation fileTree(dir: "libs", include: ["*.jar"])
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules

react_native/e2e/android/app/src/androidTest/java/com/example/reactnativeonnxruntimemodule/DetoxTest.java

@@ -0,0 +1,33 @@
+// Dummy auxiliary Android Test
+// Detox requires the project to have a single dummy native Android Test with some special content,
+// which will be picked up by the testRunner.
+
+package com.example.reactnativeonnxruntimemodule;
+
+import com.wix.detox.Detox;
+import com.wix.detox.config.DetoxConfig;
+
+import org.junit.Rule;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.filters.LargeTest;
+import androidx.test.rule.ActivityTestRule;
+
+@RunWith(AndroidJUnit4.class)
+@LargeTest
+public class DetoxTest {
+    @Rule
+    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);
+
+    @Test
+    public void runDetoxTests() {
+        DetoxConfig detoxConfig = new DetoxConfig();
+        detoxConfig.idlePolicyConfig.masterTimeoutSec = 90;
+        detoxConfig.idlePolicyConfig.idleResourceTimeoutSec = 60;
+        detoxConfig.rnContextLoadTimeoutSec = (BuildConfig.DEBUG ? 180 : 60);
+
+        Detox.runTests(mActivityRule, detoxConfig);
+    }
+}

react_native/e2e/android/app/src/androidTest/java/com/example/reactnativeonnxruntimemodule/OnnxruntimeModuleExampleUITests.java

@@ -11,7 +11,8 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
-      android:theme="@style/AppTheme">
+      android:theme="@style/AppTheme"
+      android:networkSecurityConfig="@xml/network_security_config">
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

react_native/e2e/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<network-security-config>
+    <domain-config cleartextTrafficPermitted="true">
+        <domain includeSubdomains="true">10.0.2.2</domain>
+        <domain includeSubdomains="true">localhost</domain>
+    </domain-config>
+</network-security-config>