Merge pull request #11 from serenity-kit/android-e2e-tests

Add e2e tests

.github/workflows/build-ios.yml

@@ -83,3 +83,6 @@ jobs:
           -destination 'platform=iOS Simulator,name=iPhone 11' \
           build \
           CODE_SIGNING_ALLOWED=NO | xcpretty"
+      # - name: Build iOS App
+      #   working-directory: example
+      #   run: yarn ios

.github/workflows/e2e-android.yml

@@ -0,0 +1,81 @@
+name: e2e tests Android
+
+on: [push]
+
+jobs:
+  test-android:
+    name: e2e-android-test
+    runs-on: macos-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+      # build opaque_rust lib
+      - uses: nttld/setup-ndk@v1
+        id: setup-ndk
+        with:
+          ndk-version: r23b
+      - name: Add iOS targets
+        working-directory: rust
+        run: rustup target add x86_64-apple-ios aarch64-apple-ios aarch64-apple-ios-sim
+      - name: Add Android targets
+        working-directory: rust
+        run: rustup target add i686-linux-android x86_64-linux-android aarch64-linux-android arm-linux-androideabi
+      - name: Install cxxbridge
+        working-directory: rust
+        run: cargo install cxxbridge-cmd
+      - name: build
+        working-directory: rust
+        run: ./build-all.sh
+        env:
+          NDK: ${{ steps.setup-ndk.outputs.ndk-path }}
+      # build app
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Setup Java environment
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'zulu'
+          java-version: '11'
+      - name: Gradle cache
+        uses: actions/cache@v2
+        with:
+          path: |
+            ~/.gradle/caches
+            ~/.gradle/wrapper
+          key: gradle-${{ runner.os }}-${{ hashFiles('**/*.gradle*') }}-${{ hashFiles('**/gradle/wrapper/gradle-wrapper.properties') }}-${{ hashFiles('**/buildSrc/**/*.kt') }}
+      - name: Install node_modules in root
+        run: yarn install --frozen-lockfile
+      - name: Install node_modules in example
+        working-directory: example
+        run: yarn install --frozen-lockfile
+      # Install Maestro
+      - name: Install Maestro CLI
+        run: curl -Ls "https://get.maestro.mobile.dev" | bash
+      - name: Add Maestro to path
+        run: echo "${HOME}/.maestro/bin" >> $GITHUB_PATH
+      # Run emulator and e2e tests
+      - name: Run Android Emulator and app
+        uses: reactivecircus/android-emulator-runner@v2
+        with:
+          api-level: 29
+          arch: x86_64
+          target: google_apis
+          force-avd-creation: false
+          emulator-options: -no-snapshot-save -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none
+          disable-animations: true
+          working-directory: example
+          # For some reason in `script` we can't run scripts with multiple
+          # arguments and therefor we created the yarn scripts.
+          # Noticed this workaround in: https://github.com/stripe/stripe-react-native/blob/master/.github/workflows/e2e-tests.yml#L71
+          script: |
+            yarn android-release
+            yarn e2e-debug
+            yarn android-e2e-tests

.github/workflows/e2e-ios.yml

@@ -0,0 +1,68 @@
+name: e2e tests iOS
+
+on: [push]
+
+jobs:
+  test-ios:
+    name: e2e-ios-test
+    runs-on: macos-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+      # build opaque_rust lib
+      - uses: nttld/setup-ndk@v1
+        id: setup-ndk
+        with:
+          ndk-version: r23b
+      - name: Add iOS targets
+        working-directory: rust
+        run: rustup target add x86_64-apple-ios aarch64-apple-ios aarch64-apple-ios-sim
+      - name: Add Android targets
+        working-directory: rust
+        run: rustup target add i686-linux-android x86_64-linux-android aarch64-linux-android arm-linux-androideabi
+      - name: Install cxxbridge
+        working-directory: rust
+        run: cargo install cxxbridge-cmd
+      - name: build
+        working-directory: rust
+        run: ./build-all.sh
+        env:
+          NDK: ${{ steps.setup-ndk.outputs.ndk-path }}
+      # build App
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - uses: actions/cache@v2
+        with:
+          path: example/ios/Pods
+          key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-pods-
+      - name: Install node_modules
+        run: yarn
+      - name: Build iOS App
+        working-directory: example
+        # run: yarn run react-native run-ios --configuration Release --simulator "iPhone 13 (15.2)"
+        run: yarn run react-native run-ios --mode Release
+      # Install Maestro
+      - name: Install Maestro CLI
+        run: |
+          curl -Ls "https://get.maestro.mobile.dev" | bash
+          brew tap facebook/fb
+          brew install facebook/fb/idb-companion
+      - name: Add Maestro to path
+        run: echo "${HOME}/.maestro/bin" >> $GITHUB_PATH
+      # Run e2e test
+      - name: Test
+        run: maestro test e2e-tests/maestro-flow-ios.yml
+
+      # - name: Debug
+      #   if: always()
+      #   run: maestro hierarchy

e2e-tests/maestro-flow-android.yml

@@ -0,0 +1,6 @@
+appId: com.opaqueexample
+---
+- launchApp
+- assertVisible:
+    text: 'Tests passed'
+    enabled: true

e2e-tests/maestro-flow-ios.yml

@@ -0,0 +1,6 @@
+appId: org.reactjs.native.example.OpaqueExample
+---
+- launchApp
+- assertVisible:
+    text: 'Tests passed'
+    enabled: true

example/package.json

@@ -4,6 +4,9 @@
   "private": true,
   "scripts": {
     "android": "react-native run-android",
+    "android-release": "react-native run-android --mode Release",
+    "android-e2e-tests": "maestro test ../e2e-tests/maestro-flow-android.yml",
+    "e2e-debug": "maestro hierarchy",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "pods": "pod-install --quiet",

example/src/App.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Alert, Button, StyleSheet, Text, TextInput, View } from 'react-native';
 import * as opaque from 'react-native-opaque';
+import { Tests } from './Tests';
 
 async function request(method: string, url: string, body: any = undefined) {
   console.log(`${method} ${url}`, body);
@@ -161,6 +162,7 @@ function App() {
           }}
         />
       </View>
+      <Tests />
     </View>
   );
 }

example/src/Tests.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+type ExpectResult =
+  | {
+      type: 'toBe';
+      error: boolean;
+      actualValue: unknown;
+      comparisonValue: unknown;
+    }
+  | {
+      type: 'toBeUndefined';
+      error: boolean;
+      actualValue: unknown;
+    };
+
+type TestEntry = {
+  description: string;
+  failed: boolean;
+  expectResults: ExpectResult[];
+};
+
+let tests: TestEntry[] = [];
+
+async function test(description: string, callback: () => void) {
+  const testEntry: TestEntry = {
+    description,
+    failed: true,
+    expectResults: [],
+  };
+  tests.push(testEntry);
+  try {
+    callback();
+    if (testEntry.expectResults.length === 0) {
+      testEntry.failed = true;
+    } else {
+      testEntry.failed = testEntry.expectResults.some((result) => result.error);
+    }
+  } catch (error) {
+    testEntry.failed = true;
+  }
+}
+
+function expect(actualValue: unknown) {
+  const testEntry = tests[tests.length - 1];
+  if (!testEntry) {
+    throw new Error('No test entry found');
+  }
+
+  return {
+    toBe(comparisonValue: unknown) {
+      if (actualValue !== comparisonValue) {
+        testEntry.expectResults.push({
+          type: 'toBe',
+          error: true,
+          actualValue,
+          comparisonValue,
+        });
+      } else {
+        testEntry.expectResults.push({
+          type: 'toBe',
+          error: false,
+          actualValue,
+          comparisonValue,
+        });
+      }
+    },
+    toBeUndefined() {
+      if (actualValue === undefined) {
+        testEntry.expectResults.push({
+          type: 'toBeUndefined',
+          error: false,
+          actualValue,
+        });
+      } else {
+        testEntry.expectResults.push({
+          type: 'toBeUndefined',
+          error: true,
+          actualValue,
+        });
+      }
+    },
+  };
+}
+
+export const Tests: React.FC = () => {
+  tests = [];
+
+  test('1 === 1', async () => {
+    expect(1).toBe(1);
+    // expect(1).toBe(2);
+  });
+
+  test('something to be undefined', async () => {
+    expect(undefined).toBeUndefined();
+  });
+
+  const allTestsPassed = tests.every((testEntry) => !testEntry.failed);
+
+  return (
+    <View>
+      <Text>{allTestsPassed ? 'Tests passed' : 'Tests failed'}</Text>
+      {tests.map((result) => {
+        return (
+          <View key={performance.now()}>
+            <Text>
+              {result.description}: {result.failed ? '❌' : '✅'}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+};