Draft: Feat detox testing

apps/native/.detoxrc.js

@@ -0,0 +1,57 @@
+/** @type {Detox.DetoxConfig} */
+module.exports = {
+  logger: {
+    level: process.env.CI ? 'debug' : undefined,
+  },
+  testRunner: {
+    $0: 'jest',
+    args: {
+      config: 'e2e/jest.config.js',
+      _: ['e2e'],
+    },
+  },
+  artifacts: {
+    plugins: {
+      log: process.env.CI ? 'failing' : undefined,
+      screenshot: 'failing',
+    },
+  },
+  apps: {
+    'ios.release': {
+      type: 'ios.app',
+      build:
+        'xcodebuild -workspace ios/eastestsexample.xcworkspace -scheme eastestsexample -configuration Release -sdk iphonesimulator -arch x86_64 -derivedDataPath ios/build',
+      binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/eastestsexample.app',
+    },
+    'android.release': {
+      type: 'android.apk',
+      build:
+        'cd android && ./gradlew :app:assembleRelease :app:assembleAndroidTest -DtestBuildType=release && cd ..',
+      binaryPath: 'android/app/build/outputs/apk/release/app-release.apk',
+    },
+  },
+  devices: {
+    simulator: {
+      type: 'ios.simulator',
+      device: {
+        type: 'iPhone 14',
+      },
+    },
+    emulator: {
+      type: 'android.emulator',
+      device: {
+        avdName: 'pixel_4',
+      },
+    },
+  },
+  configurations: {
+    'ios.release': {
+      device: 'simulator',
+      app: 'ios.release',
+    },
+    'android.release': {
+      device: 'emulator',
+      app: 'android.release',
+    },
+  },
+};

apps/native/.eas/build/pnpm.yml

@@ -1,5 +1,5 @@
 build:
-  name: pnpm install
+  name: build with packages
   steps:
     - eas/checkout
     - run:

apps/native/e2e/app.test.js

@@ -0,0 +1,14 @@
+describe('Home screen', () => {
+  beforeAll(async () => {
+    await device.launchApp();
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('shows "Hi!" after tapping "Click me"', async () => {
+    await element(by.text('Show Mnemonic')).tap();
+    await expect(element(by.text('Hide Mnemonic'))).toBeVisible();
+  });
+});

apps/native/e2e/jest.config.js

@@ -0,0 +1,12 @@
+/** @type {import('@jest/types').Config.InitialOptions} */
+module.exports = {
+  rootDir: '..',
+  testMatch: ['<rootDir>/e2e/**/*.test.js'],
+  testTimeout: 120000,
+  maxWorkers: 1,
+  globalSetup: 'detox/runners/jest/globalSetup',
+  globalTeardown: 'detox/runners/jest/globalTeardown',
+  reporters: ['detox/runners/jest/reporter'],
+  testEnvironment: 'detox/runners/jest/testEnvironment',
+  verbose: true,
+};

apps/native/e2e/starter.test.js

@@ -0,0 +1,23 @@
+describe('Example', () => {
+  beforeAll(async () => {
+    await device.launchApp();
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('should have welcome screen', async () => {
+    await expect(element(by.id('welcome'))).toBeVisible();
+  });
+
+  it('should show hello screen after tap', async () => {
+    await element(by.id('hello_button')).tap();
+    await expect(element(by.text('Hello!!!'))).toBeVisible();
+  });
+
+  it('should show world screen after tap', async () => {
+    await element(by.id('world_button')).tap();
+    await expect(element(by.text('World!!!'))).toBeVisible();
+  });
+});

apps/native/eas-hooks/eas-build-on-success.sh

@@ -0,0 +1,45 @@
+#!/usr/bin/env bash
+
+function cleanup()
+{
+  echo 'Cleaning up...'
+  if [[ "$EAS_BUILD_PLATFORM" == "android" ]]; then
+    # Kill emulator
+    adb emu kill &
+  fi
+}
+
+if [[ "$EAS_BUILD_PROFILE" != "test" ]]; then
+  exit
+fi
+
+# Fail if anything errors
+set -eox pipefail
+# If this script exits, trap it first and clean up the emulator
+trap cleanup EXIT
+
+ANDROID_EMULATOR=pixel_4
+
+if [[ "$EAS_BUILD_PLATFORM" == "android" ]]; then
+  # Start emulator
+  $ANDROID_SDK_ROOT/emulator/emulator @$ANDROID_EMULATOR -no-audio -no-boot-anim -no-window -use-system-libs 2>&1 >/dev/null &
+
+  # Wait for emulator
+  max_retry=10
+  counter=0
+  until adb shell getprop sys.boot_completed; do
+    sleep 10
+    [[ counter -eq $max_retry ]] && echo "Failed to start the emulator!" && exit 1
+    counter=$((counter + 1))
+  done
+
+  # Execute Android tests
+  if [[ "$EAS_BUILD_PROFILE" == "test" ]]; then
+    detox test --configuration android.release
+  fi
+else
+  # Execute iOS tests
+  if [[  "$EAS_BUILD_PROFILE" == "test" ]]; then
+    detox test --configuration ios.release
+  fi
+fi

apps/native/eas-hooks/esa-build-pre-install.sh

@@ -0,0 +1,40 @@
+#!/usr/bin/env bash
+
+set -eox pipefail
+
+if [[ "$EAS_BUILD_RUNNER" == "eas-build" && "$EAS_BUILD_PROFILE" == "test"* ]]; then
+  if [[ "$EAS_BUILD_PLATFORM" == "android" ]]; then
+    sudo apt-get --quiet update --yes
+
+    # Install emulator & video bridge dependencies
+    # Source: https://github.com/react-native-community/docker-android/blob/master/Dockerfile
+    sudo apt-get --quiet install --yes \
+      libc6 \
+      libdbus-1-3 \
+      libfontconfig1 \
+      libgcc1 \
+      libpulse0 \
+      libtinfo5 \
+      libx11-6 \
+      libxcb1 \
+      libxdamage1 \
+      libnss3 \
+      libxcomposite1 \
+      libxcursor1 \
+      libxi6 \
+      libxext6 \
+      libxfixes3 \
+      zlib1g \
+      libgl1 \
+      pulseaudio \
+      socat
+
+    # Emulator must be API 31 -- API 32 and 33 fail due to https://github.com/wix/Detox/issues/3762
+    sdkmanager --install "system-images;android-31;google_apis;x86_64"
+    avdmanager --verbose create avd --force --name "pixel_4" --device "pixel_4" --package "system-images;android-31;google_apis;x86_64"
+  else
+    brew tap wix/brew
+    brew install applesimutils
+  fi
+fi
+

apps/native/eas.json

@@ -3,6 +3,16 @@
     "version": ">= 10.0.2"
   },
   "build": {
+    "test": {
+      "android": {
+        "gradleCommand": ":app:assembleRelease :app:assembleAndroidTest -DtestBuildType=release",
+        "withoutCredentials": true
+      },
+      "ios": {
+        "simulator": true
+      },
+      "buildArtifactPaths": ["artifacts/**/*.png"]
+    },
     "development": {
       "developmentClient": true,
       "distribution": "internal",
@@ -13,7 +23,11 @@
       "config":"pnpm.yml"
     },
     "production": {
-      "config":"pnpm.yml"
+      "config":"pnpm.yml",
+      "android": {
+        "image": "latest"
+      },
+      "buildArtifactPaths": ["artifacts/**/*.png"]
     }
   },
   "submit": {

apps/native/package.json

@@ -10,7 +10,9 @@
     "android": "expo start --android",
     "build-native": "expo start --no-dev --minify",
     "lint": "eslint . --ext .ts,.tsx",
-    "clean": "rm -rf .turbo .expo node_modules dist"
+    "clean": "rm -rf .turbo .expo node_modules dist",
+    "eas-build-pre-install": "./eas-hooks/eas-build-pre-install.sh",
+    "eas-build-on-success": "./eas-hooks/eas-build-on-success.sh"
   },
   "dependencies": {
     "@effect/schema": "^0.68.0",
@@ -51,6 +53,9 @@
     "eslint-config-evolu": "workspace:*",
     "metro-react-native-babel-preset": "^0.77.0",
     "prettier": "^3.2.5",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "@config-plugins/detox": "^8.0.0",
+    "detox":"20.22.2",
+    "jest":"29.7.0"
   }
 }

apps/native/webpack.config.js

@@ -52,8 +52,6 @@ const babelLoaderConfiguration = {
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
   let babel = getExpoBabelLoader(config);
-  // console.info(babel)
-  // config.mode
   if (babel) {
     babel.use = babelLoaderConfiguration.use;
   }

package.json

@@ -14,7 +14,7 @@
     "release": "pnpm run build && changeset publish",
     "ios": "cd apps/native && pnpm ios",
     "android": "cd apps/native && pnpm android",
-    "eas:android":"cd apps/native && eas build --platform android",
+    "eas:android":"cd apps/native && eas build --platform android --profile preview",
     "generate-sql": "bun scripts/generateSql.ts",
     "docs": "typedoc"
   },