[js/react_native] Create ONNX Runtime React Native pipeline

js/.eslintrc.js

@@ -160,7 +160,7 @@ module.exports = {
       '@typescript-eslint/naming-convention': 'off'
     }
   }, {
-    files: ['react_native/example/src/**/*.ts', 'react_native/example/src/**/*.tsx'], rules: {
+    files: ['react_native/e2e/src/**/*.ts', 'react_native/e2e/src/**/*.tsx'], rules: {
       '@typescript-eslint/no-non-null-assertion': 'off',
       '@typescript-eslint/no-unnecessary-type-assertion': 'off',
       'unicorn/filename-case': 'off',

js/README.md

@@ -363,12 +363,10 @@ By default, ONNX Runtime React Native leverages ONNX Runtime Mobile package with
 
    4. Copy `<BUILD_DIRECTORY>/aar_out/MinSizeRel/com/microsoft/onnxruntime/onnxruntime-mobile/<version>/onnxruntime-mobile-<version>.aar` into `<ORT_ROOT>/js/react_native/android/libs` directory.
 
-   5. Modify `Onnxruntime_mobileVersion` property in `<ORT_ROOT>/js/react_native/android/build.properties` to consume a locally built package or a newly published package from Maven.
-
-   6. To verify, open Android Emulator and run this command from `<ORT_ROOT>/js/react_native/android`
+   5. To verify, open Android Emulator and run this command from `<ORT_ROOT>/js/react_native/android`
 
       ```sh
-      adb shell am instrument -w ai.onnxruntime.react_native.test/androidx.test.runner.AndroidJUnitRunner
+      ./gradlew connectedDebugAndroidTest
       ```
 
 3. Build iOS ONNX Runtime package
@@ -393,38 +391,57 @@ By default, ONNX Runtime React Native leverages ONNX Runtime Mobile package with
 
       ```sh
       pod install
-      xcodebuild test -workspace OnnxruntimeModule.xcworkspace -scheme OnnxruntimeModuleTest -destination 'platform=iOS Simulator,name=iPhone 11,OS=15.0'
+      xcodebuild test -workspace OnnxruntimeModule.xcworkspace -scheme OnnxruntimeModuleTest -destination 'platform=iOS Simulator,OS=latest,name=iPhone 13'
       ```
 
-4. Test an example for Android and iOS. In Windows, open Android Emulator first.
+4. Test Android and iOS apps. In Windows, open Android Emulator first.
 
    `debug.keystore` must be generated ahead for Android example.
 
    ```sh
-   keytool -genkey -v -keystore <ORT_ROOT>/js/react_native/example/android/app/debug.keystore -alias androiddebugkey -storepass android -keypass android -keyalg RSA -keysize 2048 -validity 999999 -dname "CN=Android Debug,O=Android,C=US"
+   keytool -genkey -v -keystore <ORT_ROOT>/js/react_native/e2e/android/debug.keystore -alias androiddebugkey -storepass android -keypass android -keyalg RSA -keysize 2048 -validity 999999 -dname "CN=Android Debug,O=Android,C=US"
    ```
 
    From `<ORT_ROOT>/js/react_native,
 
    ```sh
    yarn bootstrap
-   yarn example ios
-   yarn example android
+   ```
+
+   When testing with a custom built ONNX Runtime Android package, copy `<BUILD_DIRECTORY>/aar_out/MinSizeRel/com/microsoft/onnxruntime/onnxruntime-mobile/<version>/onnxruntime-mobile-<version>.aar` into `<ORT_ROOT>/js/react_native/e2e/node_modules/onnxruntime-react-native/android/libs` directory. Using a custom built ONNX Runtime iOS package, copy `onnxruntime-mobile-c.zip` into `<ORT_ROOT>/js/react_native/local_pods` directory if it's not already done.
+
+   From `<ORT_ROOT>/js/react_native/e2e/android`, run e2e Android tests as follows,
+
+   ```sh
+   ./gradlew :app:connectedDebugAndroidTest
+   ```
+
+   From `<ORT_ROOT>/js/react_native/e2e/ios`, run e2e iOS tests as follows,
+
+   ```sh
+   xcrun xcodebuild test -workspace OnnxruntimeModuleExample.xcworkspace -scheme OnnxruntimeModuleExample -destination 'platform=iOS Simulator,OS=latest,name=iPhone 13'
+   ```
+
+   ***`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 verison <version>` from `<ORT_ROOT>/js/react_native` folder. If it's for a dev, use `npm version <version>-dev.<subversion>`
 
-2. Modify Onnxruntime_mobileVersion property in `<ORT_ROOT>/js/react_native/android/build.properties` to update ONNX Runtime Android package version.
-
-3. Run `yarn prepack` to change `onnxruntime-common` to point to a published npm package
+2. Run `yarn prepack-rel` to change `onnxruntime-common` to point to a published npm package
 
-4. Run `npm pack` and verify NPM package contents
+3. Run `npm pack` and verify NPM package contents
 
-5. Run `npm publish <tgz> --dry-run` to see how it's going to be published
+4. Run `npm publish <tgz> --dry-run` to see how it's going to be published
 
-6. Run `npm publish <tgz>` to publish to npmjs. If it's for a dev, add flag `--tag dev`.
+5. Run `npm publish <tgz>` to publish to npmjs. If it's for a dev, add flag `--tag dev`.
 
 ### Distribution
 

js/react_native/.gitignore

@@ -36,7 +36,7 @@ android.iml
 # Cocoapods
 #
 ios/Pods/
-example/ios/Pods/
+e2e/ios/Pods/
 
 # node.js
 #

js/react_native/android/build.gradle

@@ -121,8 +121,6 @@ repositories {
 }
 
 dependencies {
-  def onnxruntimeMobileVersion = project.properties['Onnxruntime_mobileVersion']
-
   // noinspection GradleDynamicVersion
   api "com.facebook.react:react-native:+"
   api "org.mockito:mockito-core:2.28.2"
@@ -134,5 +132,5 @@ dependencies {
 
   androidTestImplementation "com.linkedin.dexmaker:dexmaker-mockito-inline-extended:2.28.1"
 
-  implementation "com.microsoft.onnxruntime:onnxruntime-mobile:$onnxruntimeMobileVersion@aar"
+  implementation "com.microsoft.onnxruntime:onnxruntime-mobile:latest.integration@aar"
 }

js/react_native/android/gradle.properties

@@ -16,4 +16,3 @@ android.useAndroidX=true
 OnnxruntimeModule_buildToolsVersion=29.0.2
 OnnxruntimeModule_compileSdkVersion=29
 OnnxruntimeModule_targetSdkVersion=29
-Onnxruntime_mobileVersion=1.8.2

js/react_native/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,5 @@
-#Tue Jan 26 16:57:19 PST 2021
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.8.3-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-all.zip

js/react_native/example/android/gradlew → js/react_native/android/gradlew

@@ -82,6 +82,7 @@ esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
+
 # Determine the Java command to use to start the JVM.
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
@@ -129,6 +130,7 @@ fi
 if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
     JAVACMD=`cygpath --unix "$JAVACMD"`
 
     # We build the pattern for arguments to be converted via cygpath

js/react_native/example/android/gradlew.bat → js/react_native/android/gradlew.bat

@@ -5,7 +5,7 @@
 @rem you may not use this file except in compliance with the License.
 @rem You may obtain a copy of the License at
 @rem
-@rem      http://www.apache.org/licenses/LICENSE-2.0
+@rem      https://www.apache.org/licenses/LICENSE-2.0
 @rem
 @rem Unless required by applicable law or agreed to in writing, software
 @rem distributed under the License is distributed on an "AS IS" BASIS,
@@ -84,6 +84,7 @@ set CMD_LINE_ARGS=%*
 
 set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
+
 @rem Execute Gradle
 "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
 

js/react_native/example/android/app/build.gradle → js/react_native/e2e/android/app/build.gradle

@@ -133,6 +133,8 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
     splits {
         abi {
@@ -144,16 +146,13 @@ android {
     }
     signingConfigs {
         debug {
-            storeFile file('debug.keystore')
-            storePassword 'android'
+            storeFile rootProject.file('debug.keystore')
             keyAlias 'androiddebugkey'
             keyPassword 'android'
+            storePassword 'android'
         }
     }
     buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
         release {
             // Caution! In production, you need to generate your own keystore file.
             // see https://reactnative.dev/docs/signed-apk-android.
@@ -183,7 +182,6 @@ dependencies {
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
-
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
       exclude group:'com.facebook.fbjni'
@@ -204,7 +202,11 @@ dependencies {
         implementation jscFlavor
     }
 
-    implementation project(':onnxruntimereactnative')
+    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
+    androidTestImplementation 'androidx.test:runner:1.4.0'
+    androidTestImplementation 'androidx.test:rules:1.4.0'
+
+    implementation project(':onnxruntime-react-native')
 }
 
 // Run this once to be able to run the application with BUCK

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

@@ -0,0 +1,79 @@
+package com.example.reactnativeonnxruntimemodule;
+
+import android.view.View;
+import android.widget.TextView;
+
+import androidx.test.espresso.NoMatchingViewException;
+import androidx.test.espresso.UiController;
+import androidx.test.espresso.ViewAction;
+import androidx.test.espresso.ViewInteraction;
+import androidx.test.filters.LargeTest;
+import androidx.test.rule.ActivityTestRule;
+import androidx.test.runner.AndroidJUnit4;
+
+import org.hamcrest.Matcher;
+import org.junit.Assert;
+import org.junit.Rule;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+import static androidx.test.espresso.Espresso.onView;
+import static androidx.test.espresso.matcher.ViewMatchers.isAssignableFrom;
+import static androidx.test.espresso.matcher.ViewMatchers.isDisplayed;
+import static androidx.test.espresso.matcher.ViewMatchers.withContentDescription;
+import static org.hamcrest.Matchers.allOf;
+
+@RunWith(AndroidJUnit4.class)
+@LargeTest
+public class OnnxruntimeModuleExampleUITests {
+    @Rule
+    public ActivityTestRule<MainActivity> activityTestRule = new ActivityTestRule<>(MainActivity.class);
+
+    @Test
+    public void testExample() {
+        // Wait for a view displayed
+        int waitTime = 0;
+        final int sleepTime = 1000;
+        do {
+            try {
+                ViewInteraction view = onView(allOf(withContentDescription("output"), isDisplayed()));
+                if (getText(view) != null) {
+                    break;
+                }
+            } catch (NoMatchingViewException ne) {
+                try {
+                    Thread.sleep(sleepTime);
+                } catch (InterruptedException ie) {
+                }
+                waitTime += sleepTime;
+            }
+        } while (waitTime < 180000);
+
+        ViewInteraction view = onView(allOf(withContentDescription("output"), isDisplayed()));
+        Assert.assertEquals(getText(view), "Result: 3");
+    }
+
+    private String getText(ViewInteraction matcher) {
+        final String[] text = {null};
+
+        matcher.perform(new ViewAction() {
+            @Override
+            public Matcher<View> getConstraints() {
+                return isAssignableFrom(TextView.class);
+            }
+
+            @Override
+            public String getDescription() {
+                return "get a text from a TextView";
+            }
+
+            @Override
+            public void perform(UiController uiController, View view) {
+                TextView textView = (TextView)view;
+                text[0] = textView.getText().toString();
+            }
+        });
+
+        return text[0];
+    }
+}