ephemeraHQ · alexrisch · Feb 9, 2024 · Feb 9, 2024 · Feb 9, 2024
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -113,7 +113,9 @@ android {
 }
 
 dependencies {
-    androidTestImplementation('com.wix:detox:+')
+    androidTestImplementation('com.wix:detox:+'){
+        exclude module: "protobuf-lite"
+    }
     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")

diff --git a/e2e/TestIds.ts b/e2e/TestIds.ts
@@ -0,0 +1,60 @@
+export enum TestIds {
+  // Onboarding Wallet Connect
+  ONBOARDING_CONNECT_WALLET_BUTTON = 'ONBOARDING_CONNECT_WALLET_BUTTON',
+  ONBOARDING_CONNECT_WALLET_SCREEN = 'ONBOARDING_CONNECT_WALLET_SCREEN',
+  ONBOARDING_CONNECT_WALLET_CONNECT_OPTION_BUTTON = 'ONBOARDING_CONNECT_WALLET_CONNECT_OPTION_BUTTON',
+  ONBOARDING_CONNECT_METAMASK_OPTION_BUTTON = 'ONBOARDING_CONNECT_METAMASK_OPTION_BUTTON',
+  ONBOARDING_CONNECT_COINBASE_OPTION_BUTTON = 'ONBOARDING_CONNECT_COINBASE_OPTION_BUTTON',
+  ONBOARDING_CONNECT_GUEST_OPTION_BUTTON = 'ONBOARDING_CONNECT_GUEST_OPTION_BUTTON',
+
+  // Conversation List
+  CONVERSATION_LIST_SCREEN = 'CONVERSATION_LIST_SCREEN',
+  CONVERSATION_LIST_ITEM = 'CONVERSATION_LIST_ITEM',
+  CONVERSATION_LIST_ITEM_AVATAR = 'CONVERSATION_LIST_ITEM_AVATAR',
+  CONVERSATION_LIST_ITEM_TITLE = 'CONVERSATION_LIST_ITEM_TITLE',
+  CONVERSATION_LIST_ITEM_TEXT = 'CONVERSATION_LIST_ITEM_TEXT',
+  CONVERSATION_LIST_ITEM_TIME = 'CONVERSATION_LIST_ITEM_TIME',
+  CONVERSATION_LIST_ALL_MESSAGES_TITLE = 'CONVERSATION_LIST_ALL_MESSAGES_TITLE',
+  CONVERSATION_LIST_REQUESTS_TITLE = 'CONVERSATION_LIST_REQUESTS_TITLE',
+  CONVERSATION_LIST_EMPTY_STATE = 'CONVERSATION_LIST_EMPTY_STATE',
+  CONVERSATION_LIST_ALL_MESSAGES_BUTTON = 'CONVERSATION_LIST_ALL_MESSAGES_BUTTON',
+  CONVERSATION_LIST_REQUESTS_BUTTON = 'CONVERSATION_LIST_REQUESTS_BUTTON',
+  CONVERSATION_LIST_PROFILE_BUTTON = 'CONVERSATION_LIST_PROFILE_BUTTON',
+  CONVERSATION_LIST_DISCOVER_BUTTON = 'CONVERSATION_LIST_DISCOVER_BUTTON',
+  CONVERSATION_LIST_NEW_BUTTON = 'CONVERSATION_LIST_NEW_BUTTON',
+
+  // Conversation
+  CONVERSATION_SCREEN = 'CONVERSATION_SCREEN',
+  CONVERSATION_INPUT = 'CONVERSATION_INPUT',
+  CONVERSATION_MESSAGE = 'CONVERSATION_MESSAGE',
+  CONVERSATION_SEND_BUTTON = 'CONVERSATION_SEND_BUTTON',
+  CONVERSATION_CAMERA_BUTTON = 'CONVERSATION_CAMERA_BUTTON',
+  CONVERSATION_GALLERY_BUTTON = 'CONVERSATION_GALLERY_BUTTON',
+  CONVERSATION_PROFILE_BUTTON = 'CONVERSATION_PROFILE_BUTTON',
+  CONVERSATION_HEADER_TITLE = 'CONVERSATION_HEADER_TITLE',
+
+  // Group
+  GROUP_SCREEN = 'GROUP_SCREEN',
+  GROUP_INPUT = 'GROUP_INPUT',
+  GROUP_MESSAGE = 'GROUP_MESSAGE',
+  GROUP_SEND_BUTTON = 'GROUP_SEND_BUTTON',
+  GROUP_CAMERA_BUTTON = 'GROUP_CAMERA_BUTTON',
+  GROUP_GALLERY_BUTTON = 'GROUP_GALLERY_BUTTON',
+  GROUP_PROFILE_BUTTON = 'GROUP_PROFILE_BUTTON',
+  GROUP_HEADER_TITLE = 'GROUP_HEADER_TITLE',
+
+  // Search
+  SEARCH_SCREEN = 'SEARCH_SCREEN',
+  SEARCH_INPUT = 'SEARCH_INPUT',
+  SEARCH_RESULT = 'SEARCH_RESULT',
+  SEARCH_RECENT_RESULT = 'RECENT_RESULT',
+  SEARCH_CONTACTS_RESULT = 'CONTACTS_RESULT',
+  SEARCH_START_BUTTON = 'SEARCH_START_BUTTON',
+  SEARCH_PARTICIPANTS_LIST_PILL = 'SEARCH_PARTICIPANTS_LIST_PILL',
+
+  // Account
+  ACCOUNT_SCREEN = 'ACCOUNT_SCREEN',
+
+  // Discover
+  DISCOVER_SCREEN = 'DISCOVER_SCREEN',
+}
diff --git a/e2e/jest.config.js b/e2e/jest.config.js
@@ -1,7 +1,7 @@
 /** @type {import('@jest/types').Config.InitialOptions} */
 module.exports = {
   rootDir: '..',
-  testMatch: ['<rootDir>/e2e/**/*.test.js'],
+  testMatch: ['<rootDir>/e2e/**/*.test.ts'],
   testTimeout: 120000,
   maxWorkers: 1,
   globalSetup: 'detox/runners/jest/globalSetup',

diff --git a/e2e/starter.test.js b/e2e/starter.test.js
diff --git a/e2e/starter.test.ts b/e2e/starter.test.ts
@@ -0,0 +1,46 @@
+import {by, device, element, expect} from 'detox';
+import {TestIds} from './TestIds';
+
+describe('Example', () => {
+  beforeAll(async () => {
+    await device.launchApp();
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('should have welcome screen', async () => {
+    const address1 = '0x1f07ccCb84F550100a786EAFf7e7179C52b0aC8d';
+    // const address2 = '0x62BdD7864695d8B4c760CD1ea5635cD23A84d513';
+    await expect(
+      element(by.id(TestIds.ONBOARDING_CONNECT_WALLET_SCREEN)),
+    ).toBeVisible();
+    await expect(
+      element(by.id(TestIds.ONBOARDING_CONNECT_WALLET_BUTTON)),
+    ).toBeVisible();
+    await element(by.id(TestIds.ONBOARDING_CONNECT_WALLET_BUTTON)).tap();
+    await expect(
+      element(by.id(TestIds.ONBOARDING_CONNECT_GUEST_OPTION_BUTTON)),
+    ).toBeVisible();
+    await element(by.id(TestIds.ONBOARDING_CONNECT_GUEST_OPTION_BUTTON)).tap();
+    await waitFor(element(by.id(TestIds.CONVERSATION_LIST_SCREEN)))
+      .toBeVisible()
+      .withTimeout(5000);
+    await expect(
+      element(by.id(TestIds.CONVERSATION_LIST_NEW_BUTTON)),
+    ).toBeVisible();
+    await element(by.id(TestIds.CONVERSATION_LIST_NEW_BUTTON)).tap();
+    await expect(element(by.id(TestIds.SEARCH_SCREEN))).toBeVisible();
+    await expect(element(by.id(TestIds.SEARCH_INPUT))).toBeVisible();
+    await element(by.id(TestIds.SEARCH_INPUT)).typeText(address1);
+    await expect(
+      element(by.id(`${TestIds.SEARCH_RESULT}_${address1}`)),
+    ).toBeVisible();
+    await element(by.id(`${TestIds.SEARCH_RESULT}_${address1}`)).tap();
+    await expect(element(by.id(TestIds.SEARCH_START_BUTTON))).toBeVisible();
+    await element(by.id(TestIds.SEARCH_START_BUTTON)).tap();
+    await expect(element(by.id(TestIds.CONVERSATION_SCREEN))).toBeVisible();
+    await expect(element(by.id(TestIds.CONVERSATION_INPUT))).toBeVisible();
+  });
+});
diff --git a/src/components/WalletOptionButton.tsx b/src/components/WalletOptionButton.tsx
@@ -8,15 +8,17 @@
   onPress: () => void;
   title: string;
   icon: IconName;
+  testId: string;
 }
 
 export const WalletOptionButton: FC<WalletOptionButtonProps> = ({
   onPress,
   title,
   icon,
+  testId,
 }) => {
   return (
-    <Pressable onPress={onPress}>
+    <Pressable onPress={onPress} testID={testId}>
       <HStack
         w="100%"
         justifyContent={'space-between'}
@@ -33,7 +35,7 @@
          </Text>
        </HStack>
        <Icon
          style={{justifyContent: 'flex-end', alignSelf: 'center'}}
          name="arrow-right-circle-thick"
          type="mini"
          size={24}

diff --git a/src/components/common/Pill.tsx b/src/components/common/Pill.tsx
@@ -9,6 +9,7 @@ interface PillProps {
   text: string;
   onPress?: () => void;
   size?: 'sm' | 'md' | 'lg';
+  testId?: string;
 }
 
 export const Pill: FC<PillProps> = ({
@@ -17,6 +18,7 @@ export const Pill: FC<PillProps> = ({
   onPress,
   rightIconName,
   size,
+  testId,
 }) => {
   const sizeProps = useMemo(() => {
     if (size === 'sm') {
@@ -48,7 +50,7 @@ export const Pill: FC<PillProps> = ({
   }, [size]);
 
   return (
-    <Pressable onPress={onPress}>
+    <Pressable onPress={onPress} testID={testId}>
       <Box
         {...sizeProps}
         borderRadius={'24px'}

diff --git a/src/components/common/Screen.tsx b/src/components/common/Screen.tsx
@@ -12,6 +12,7 @@ interface ScreenProps {
   containerStlye?: ViewStyle;
   includeTopPadding?: boolean;
   includeBackground?: boolean;
+  testId?: string;
 }
 
 export const Screen: FC<ScreenProps> = ({
@@ -22,10 +23,12 @@ export const Screen: FC<ScreenProps> = ({
   containerStlye,
   includeTopPadding = true,
   includeBackground = true,
+  testId,
 }) => {
   const showHeader = left || right || title;
   return (
     <Box
+      testID={testId}
       flex={1}
       backgroundColor={includeBackground ? colors.backgroundPrimary : undefined}
       paddingTop={

diff --git a/src/consts/TestIds.ts b/src/consts/TestIds.ts
@@ -0,0 +1,60 @@
+export enum TestIds {
+  // Onboarding Wallet Connect
+  ONBOARDING_CONNECT_WALLET_BUTTON = 'ONBOARDING_CONNECT_WALLET_BUTTON',
+  ONBOARDING_CONNECT_WALLET_SCREEN = 'ONBOARDING_CONNECT_WALLET_SCREEN',
+  ONBOARDING_CONNECT_WALLET_CONNECT_OPTION_BUTTON = 'ONBOARDING_CONNECT_WALLET_CONNECT_OPTION_BUTTON',
+  ONBOARDING_CONNECT_METAMASK_OPTION_BUTTON = 'ONBOARDING_CONNECT_METAMASK_OPTION_BUTTON',
+  ONBOARDING_CONNECT_COINBASE_OPTION_BUTTON = 'ONBOARDING_CONNECT_COINBASE_OPTION_BUTTON',
+  ONBOARDING_CONNECT_GUEST_OPTION_BUTTON = 'ONBOARDING_CONNECT_GUEST_OPTION_BUTTON',
+
+  // Conversation List
+  CONVERSATION_LIST_SCREEN = 'CONVERSATION_LIST_SCREEN',
+  CONVERSATION_LIST_ITEM = 'CONVERSATION_LIST_ITEM',
+  CONVERSATION_LIST_ITEM_AVATAR = 'CONVERSATION_LIST_ITEM_AVATAR',
+  CONVERSATION_LIST_ITEM_TITLE = 'CONVERSATION_LIST_ITEM_TITLE',
+  CONVERSATION_LIST_ITEM_TEXT = 'CONVERSATION_LIST_ITEM_TEXT',
+  CONVERSATION_LIST_ITEM_TIME = 'CONVERSATION_LIST_ITEM_TIME',
+  CONVERSATION_LIST_ALL_MESSAGES_TITLE = 'CONVERSATION_LIST_ALL_MESSAGES_TITLE',
+  CONVERSATION_LIST_REQUESTS_TITLE = 'CONVERSATION_LIST_REQUESTS_TITLE',
+  CONVERSATION_LIST_EMPTY_STATE = 'CONVERSATION_LIST_EMPTY_STATE',
+  CONVERSATION_LIST_ALL_MESSAGES_BUTTON = 'CONVERSATION_LIST_ALL_MESSAGES_BUTTON',
+  CONVERSATION_LIST_REQUESTS_BUTTON = 'CONVERSATION_LIST_REQUESTS_BUTTON',
+  CONVERSATION_LIST_PROFILE_BUTTON = 'CONVERSATION_LIST_PROFILE_BUTTON',
+  CONVERSATION_LIST_DISCOVER_BUTTON = 'CONVERSATION_LIST_DISCOVER_BUTTON',
+  CONVERSATION_LIST_NEW_BUTTON = 'CONVERSATION_LIST_NEW_BUTTON',
+
+  // Conversation
+  CONVERSATION_SCREEN = 'CONVERSATION_SCREEN',
+  CONVERSATION_INPUT = 'CONVERSATION_INPUT',
+  CONVERSATION_MESSAGE = 'CONVERSATION_MESSAGE',
+  CONVERSATION_SEND_BUTTON = 'CONVERSATION_SEND_BUTTON',
+  CONVERSATION_CAMERA_BUTTON = 'CONVERSATION_CAMERA_BUTTON',
+  CONVERSATION_GALLERY_BUTTON = 'CONVERSATION_GALLERY_BUTTON',
+  CONVERSATION_PROFILE_BUTTON = 'CONVERSATION_PROFILE_BUTTON',
+  CONVERSATION_HEADER_TITLE = 'CONVERSATION_HEADER_TITLE',
+
+  // Group
+  GROUP_SCREEN = 'GROUP_SCREEN',
+  GROUP_INPUT = 'GROUP_INPUT',
+  GROUP_MESSAGE = 'GROUP_MESSAGE',
+  GROUP_SEND_BUTTON = 'GROUP_SEND_BUTTON',
+  GROUP_CAMERA_BUTTON = 'GROUP_CAMERA_BUTTON',
+  GROUP_GALLERY_BUTTON = 'GROUP_GALLERY_BUTTON',
+  GROUP_PROFILE_BUTTON = 'GROUP_PROFILE_BUTTON',
+  GROUP_HEADER_TITLE = 'GROUP_HEADER_TITLE',
+
+  // Search
+  SEARCH_SCREEN = 'SEARCH_SCREEN',
+  SEARCH_INPUT = 'SEARCH_INPUT',
+  SEARCH_RESULT = 'SEARCH_RESULT',
+  SEARCH_RECENT_RESULT = 'RECENT_RESULT',
+  SEARCH_CONTACTS_RESULT = 'CONTACTS_RESULT',
+  SEARCH_START_BUTTON = 'SEARCH_START_BUTTON',
+  SEARCH_PARTICIPANTS_LIST_PILL = 'SEARCH_PARTICIPANTS_LIST_PILL',
+
+  // Account
+  ACCOUNT_SCREEN = 'ACCOUNT_SCREEN',
+
+  // Discover
+  DISCOVER_SCREEN = 'DISCOVER_SCREEN',
+}
diff --git a/src/screens/AccountSettingsScreen.tsx b/src/screens/AccountSettingsScreen.tsx
@@ -1,3 +1,4 @@
+import Clipboard from '@react-native-clipboard/clipboard';
 import {
   useAddress,
   useDisconnect,
@@ -115,7 +116,7 @@
 
 export const AccountSettingsScreen = () => {
   const {navigate, goBack} = useTypedNavigation();
-  const {setClient} = useClientContext();
+  const {client, setClient} = useClientContext();
   const {avatarUrl, addresses, wallets, name} = useData();
   const [walletsShown, setWalletsShown] = useState(false);
   const disconnect = useDisconnect();
@@ -174,7 +175,7 @@
          {
            text: translate('disconnect_wallet'),
            onPress: async () => {
              if (!address) return;
              await clearClientKeys(address as `0x${string}`);
              setClient(null);
              // handleLink('https://www.google.com')
@@ -308,6 +309,9 @@
           address={address ?? ''}
         />
         <Button
+          onLongPress={() =>
+            __DEV__ ? Clipboard.setString(client?.address ?? '') : {}
+          }
           onPress={() => setWalletsShown(true)}
           variant={'ghost'}
           rightIcon={
@@ -318,7 +322,9 @@
               color="#0F172A"
             />
           }>
-          <Text typography="text-xl/bold">{name}</Text>
+          <Text typography="text-xl/bold">
+            {__DEV__ ? client?.address : name}
+          </Text>
         </Button>
         <HStack flexWrap={'wrap'} justifyContent={'center'}>
           {addresses.map(address => (

diff --git a/src/screens/ConversationListScreen.tsx b/src/screens/ConversationListScreen.tsx
@@ -11,6 +11,7 @@ import {Drawer} from '../components/common/Drawer';
 import {Icon} from '../components/common/Icon';
 import {Screen} from '../components/common/Screen';
 import {Text} from '../components/common/Text';
+import {TestIds} from '../consts/TestIds';
 import {useClient} from '../hooks/useClient';
 import {useListMessages} from '../hooks/useListMessages';
 import {useTypedNavigation} from '../hooks/useTypedNavigation';
@@ -239,7 +240,7 @@ export const ConversationListScreen = () => {
 
   return (
     <>
-      <Screen>
+      <Screen testId={TestIds.CONVERSATION_LIST_SCREEN}>
         <FlatList
           w={'100%'}
           h={'100%'}
@@ -281,6 +282,7 @@ export const ConversationListScreen = () => {
         />
         {!showPickerModal && focused && (
           <Fab
+            testID={TestIds.CONVERSATION_LIST_NEW_BUTTON}
             position="absolute"
             size="sm"
             right={27}
@@ -304,7 +306,9 @@ export const ConversationListScreen = () => {
         isOpen={showPickerModal}
         onBackgroundPress={() => setShowPickerModal(false)}>
         <VStack w={'100%'} alignItems={'flex-start'}>
-          <Pressable onPress={() => handleFilterPress('ALL_MESSAGES')}>
+          <Pressable
+            onPress={() => handleFilterPress('ALL_MESSAGES')}
+            testID={TestIds.CONVERSATION_LIST_ALL_MESSAGES_BUTTON}>
             <HStack
               w={'100%'}
               paddingX="12px"
@@ -337,7 +341,9 @@ export const ConversationListScreen = () => {
               )}
             </HStack>
           </Pressable>
-          <Pressable onPress={() => handleFilterPress('MESSAGE_REQUESTS')}>
+          <Pressable
+            onPress={() => handleFilterPress('MESSAGE_REQUESTS')}
+            testID={TestIds.CONVERSATION_LIST_REQUESTS_BUTTON}>
             <HStack
               w={'100%'}
               paddingX="12px"