Detox Setup

Setup Detox tests

.detoxrc.js

@@ -0,0 +1,87 @@
+/** @type {Detox.DetoxConfig} */
+module.exports = {
+  testRunner: {
+    args: {
+      $0: 'jest',
+      config: 'e2e/jest.config.js',
+    },
+    jest: {
+      setupTimeout: 120000,
+    },
+  },
+  apps: {
+    'ios.debug': {
+      type: 'ios.app',
+      binaryPath:
+        'ios/build/Build/Products/Debug-iphonesimulator/XmtpMobileChat.app',
+      build:
+        'xcodebuild -workspace ios/XmtpMobileChat.xcworkspace -scheme XmtpMobileChat -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build',
+    },
+    'ios.release': {
+      type: 'ios.app',
+      binaryPath:
+        'ios/build/Build/Products/Release-iphonesimulator/XmtpMobileChat.app',
+      build:
+        'xcodebuild -workspace ios/XmtpMobileChat.xcworkspace -scheme XmtpMobileChat -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 15',
+      },
+    },
+    attached: {
+      type: 'android.attached',
+      device: {
+        adbName: '.*',
+      },
+    },
+    emulator: {
+      type: 'android.emulator',
+      device: {
+        avdName: 'Pixel_7_API_TiramisuPrivacySandbox',
+      },
+    },
+  },
+  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',
+    },
+  },
+};

android/app/build.gradle

@@ -86,6 +86,8 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+        testBuildType System.getProperty('testBuildType', 'debug')
+        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
     }
     signingConfigs {
         debug {
@@ -105,11 +107,14 @@ 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"
         }
     }
 }
 
 dependencies {
+    androidTestImplementation('com.wix:detox:+')
+    implementation 'androidx.appcompat:appcompat:1.1.0'
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
     implementation("com.facebook.react:flipper-integration")

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

@@ -0,0 +1,29 @@
+package com.xmtpmobilechat; // (1)
+
+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 // (2)
+    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);
+    }
+}

android/build.gradle

@@ -19,4 +19,12 @@ buildscript {
 
 }
 
+allprojects {
+    repositories {
+        maven { // (4)
+        url("$rootDir/../node_modules/detox/Detox-android")
+        }
+    }
+}
+
 apply plugin: "com.facebook.react.rootproject"

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,
+};

e2e/starter.test.js

@@ -0,0 +1,15 @@
+import {by, device, element} from 'detox';
+
+describe('Example', () => {
+  beforeAll(async () => {
+    await device.launchApp();
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('should have welcome screen', async () => {
+    await expect(element(by.id('welcome-text-1'))).toBeVisible();
+  });
+});

jest.config.js

@@ -3,4 +3,5 @@ const esModules = ['@react-native', 'react-native', 'i18n-js'].join('|');
 module.exports = {
   preset: 'react-native',
   transformIgnorePatterns: [`node_modules/(?!${esModules})`],
+  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/e2e/'],
 };

package.json

@@ -8,7 +8,11 @@
     "lint": "eslint .",
     "start": "react-native start",
     "test": "jest",
-    "postinstall": "patch-package && npx pod-install"
+    "postinstall": "patch-package && npx pod-install",
+    "e2e:ios:build": "detox build --configuration ios.sim.debug",
+    "e2e:ios:test": "detox test --configuration ios.sim.debug",
+    "e2e:android:build": "detox build --configuration android.emu.debug",
+    "e2e:android:test": "detox test --configuration android.emu.debug"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.496.0",
@@ -65,6 +69,7 @@
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
+    "detox": "^20.17.0",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "patch-package": "^8.0.0",

patches/react-native-encrypted-storage+4.0.3.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/react-native-encrypted-storage/android/build.gradle b/node_modules/react-native-encrypted-storage/android/build.gradle
+index b343dc8..964614c 100644
+--- a/node_modules/react-native-encrypted-storage/android/build.gradle
++++ b/node_modules/react-native-encrypted-storage/android/build.gradle
+@@ -124,7 +124,7 @@ dependencies {
+
+   testImplementation 'junit:junit:4.13.1'
+
+-  androidTestImplementation 'androidx.test.ext:junit:1.1.2'
++  androidTestImplementation 'androidx.test.ext:junit:1.1.3'
+   //noinspection GradleDependency
+   androidTestImplementation 'org.mockito:mockito-android:3.4.6'
+   androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

src/screens/OnboardingConnectWalletScreen.tsx

@@ -10,7 +10,6 @@ import {ScreenNames} from '../navigation/ScreenNames';
 
 export const OnboardingConnectWalletScreen = () => {
   const {navigate} = useTypedNavigation();
-  // const [showModal, setShowModal] = useState(false);
   const address = useAddress();
 
   useEffect(() => {
@@ -33,7 +32,7 @@ export const OnboardingConnectWalletScreen = () => {
           width={'100%'}
           flex={1}
           paddingX={'24px'}>
-          <Text typography="text-4xl/bold">
+          <Text testID="welcome-text-1" typography="text-4xl/bold">
             {translate('your_interoperable_web3_inbox')}
           </Text>
           <Text>
@@ -65,20 +64,6 @@ export const OnboardingConnectWalletScreen = () => {
               })}
               buttonTitle={translate('connect_your_wallet')}
             />
-            {/* <Button
-              width={''}
-              variant={'solid'}
-              backgroundColor={'brand.800'}
-              onPress={handleConnectWalletPress}
-              rightIcon={
-                <Icon
-                  name="arrow-right-circle-thick"
-                  size={24}
-                  color={colors.actionPrimaryText}
-                />
-              }>
-              Connect your wallet
-            </Button> */}
           </>
         </VStack>
       </Screen>

src/utils/getMessageTimeDisplay.ts

@@ -1,26 +1,28 @@
 import {translate} from '../i18n';
 
+const DAY_IN_MS = 24 * 60 * 60 * 1000;
+
 export const getMessageTimeDisplay = (time: number): string => {
   const date = new Date(time);
   // If today, show time
   // If yesterday, show yesterday
   // If this year, show month and day
   // Otherwise, show year
+  if (date.getTime() > new Date().getTime() - DAY_IN_MS) {
+    return date.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }
+  if (date.getTime() > new Date().getTime() - 2 * DAY_IN_MS) {
+    return translate('yesterday');
+  }
   if (date.getFullYear() === new Date().getFullYear()) {
     if (date.getMonth() === new Date().getMonth()) {
-      if (date.getDate() === new Date().getDate()) {
-        return date.toLocaleTimeString([], {
-          hour: '2-digit',
-          minute: '2-digit',
-        });
-      } else if (date.getDate() === new Date().getDate() - 1) {
-        return translate('yesterday');
-      } else {
-        return date.toLocaleDateString([], {
-          month: 'short',
-          day: 'numeric',
-        });
-      }
+      return date.toLocaleDateString([], {
+        month: 'short',
+        day: 'numeric',
+      });
     } else {
       return date.toLocaleDateString([], {
         month: 'short',