fix: add testIDs to wallet edit touchable components

packages/legacy/app/ios/ariesbifold.xcodeproj/project.pbxproj

@@ -649,6 +649,7 @@
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					" ",
+					"-Wl -ld_classic ",
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
@@ -717,6 +718,7 @@
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					" ",
+					"-Wl -ld_classic ",
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;

packages/legacy/core/App/components/misc/NewQRView.tsx

@@ -205,7 +205,11 @@ const NewQRView: React.FC<Props> = ({ defaultToConnect, handleCodeScan, error, e
             <View style={{ paddingHorizontal: 20, flex: 1 }}>
               <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                 <Text style={styles.walletName}>{store.preferences.walletName}</Text>
-                <TouchableOpacity onPress={handleEdit}>
+                <TouchableOpacity
+                  accessibilityLabel={t('NameWallet.EditWalletName')}
+                  testID={testIdWithKey('EditWalletName')}
+                  onPress={handleEdit}
+                >
                   <Icon style={styles.editButton} name="edit" size={24}></Icon>
                 </TouchableOpacity>
               </View>

packages/legacy/core/App/screens/Settings.tsx

@@ -110,6 +110,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
             navigation.navigate(Screens.NameWallet)
           },
           accessibilityLabel: t('NameWallet.EditWalletName'),
+          testID: testIdWithKey('EditWalletName'),
           style: { color: ColorPallet.brand.primary },
         },
       },
@@ -270,7 +271,7 @@ const Settings: React.FC<SettingsProps> = ({ navigation }) => {
           <TouchableOpacity
             accessible={iconRight.action !== undefined}
             accessibilityLabel={iconRight.action ? iconRight.accessibilityLabel : undefined}
-            testID={testIdWithKey(`${title}Action`)}
+            testID={iconRight.testID ? iconRight.testID : undefined}
             onPress={iconRight.action}
           >
             <Icon

packages/legacy/core/App/types/settings.ts

@@ -14,6 +14,7 @@ export interface SettingIcon {
   style?: any
   action?: () => void
   accessibilityLabel?: string
+  testID?: string
 }
 
 export interface SettingSection {

packages/legacy/core/App/utils/testable.ts

@@ -3,3 +3,15 @@ import { testIdPrefix } from '../constants'
 export const testIdWithKey = (key: string): string => {
   return `${testIdPrefix}${key}`
 }
+
+export const testIdForAccessabilityLabel = (label: string) => {
+  if (!label) {
+    return ''
+  }
+
+  return label
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+    .replace(/\s/g, '')
+}

packages/legacy/core/__tests__/components/NewQRView.test.tsx

@@ -1,3 +1,15 @@
+import { useConnections } from '@aries-framework/react-hooks'
+import { useAgent } from '@aries-framework/react-hooks'
+import { act, render } from '@testing-library/react-native'
+import React from 'react'
+
+import NewQRView from '../../App/components/misc/NewQRView'
+import { ConfigurationContext } from '../../App/contexts/configuration'
+import { StoreProvider, defaultState } from '../../App/contexts/store'
+import { testIdWithKey } from '../../App/utils/testable'
+import { useNavigation } from '../../__mocks__/custom/@react-navigation/core'
+import configurationContext from '../contexts/configuration'
+
 jest.mock('@react-navigation/core', () => {
   return require('../../__mocks__/custom/@react-navigation/core')
 })
@@ -9,25 +21,15 @@ jest.mock('react-native-camera', () => {
   return require('../../__mocks__/custom/react-native-camera')
 })
 
-import { useConnections } from '@aries-framework/react-hooks'
-import { act, render } from '@testing-library/react-native'
-import React from 'react'
-
-import NewQRView from '../../App/components/misc/NewQRView'
-import { ConfigurationContext } from '../../App/contexts/configuration'
-import { StoreProvider, defaultState } from '../../App/contexts/store'
-import configurationContext from '../contexts/configuration'
-import { useNavigation } from '../../__mocks__/custom/@react-navigation/core'
-
-import {  useAgent } from '@aries-framework/react-hooks'
-
 describe('NewQRView Component', () => {
-  beforeAll(()=>{
+  beforeAll(() => {
     jest.useFakeTimers()
   })
-  afterAll(()=>{
+
+  afterAll(() => {
     jest.useRealTimers()
   })
+
   beforeEach(() => {
     jest.clearAllMocks()
     // @ts-ignore
@@ -39,16 +41,31 @@ describe('NewQRView Component', () => {
   test('Renders correctly on first tab', async () => {
     const tree = render(
       <ConfigurationContext.Provider value={configurationContext}>
-        <NewQRView defaultToConnect={false} handleCodeScan={() => Promise.resolve()} navigation={navigation as any} route={{} as any} />
+        <NewQRView
+          defaultToConnect={false}
+          handleCodeScan={() => Promise.resolve()}
+          navigation={navigation as any}
+          route={{} as any}
+        />
       </ConfigurationContext.Provider>
     )
-    await act(()=>{ jest.runAllTimers() })
+
+    await act(() => {
+      jest.runAllTimers()
+    })
+
     expect(tree).toMatchSnapshot()
   })
 
   test('Renders correctly on second tab', async () => {
     // @ts-ignore
-    useAgent().agent?.oob.createInvitation.mockReturnValue({outOfBandInvitation:{toUrl: ()=>{ return ""}}})
+    useAgent().agent?.oob.createInvitation.mockReturnValue({
+      outOfBandInvitation: {
+        toUrl: () => {
+          return ''
+        },
+      },
+    })
     const tree = render(
       <StoreProvider
         initialState={{
@@ -60,11 +77,59 @@ describe('NewQRView Component', () => {
         }}
       >
         <ConfigurationContext.Provider value={configurationContext}>
-          <NewQRView defaultToConnect={true} handleCodeScan={() => Promise.resolve()} navigation={navigation as any} route={{} as any} />
+          <NewQRView
+            defaultToConnect={true}
+            handleCodeScan={() => Promise.resolve()}
+            navigation={navigation as any}
+            route={{} as any}
+          />
         </ConfigurationContext.Provider>
       </StoreProvider>
     )
-    await act(()=>{ jest.runAllTimers() })
+
+    await act(() => {
+      jest.runAllTimers()
+    })
+
     expect(tree).toMatchSnapshot()
   })
+
+  test('Contains test IDs', async () => {
+    // @ts-ignore
+    useAgent().agent?.oob.createInvitation.mockReturnValue({
+      outOfBandInvitation: {
+        toUrl: () => {
+          return ''
+        },
+      },
+    })
+    const { getByTestId } = render(
+      <StoreProvider
+        initialState={{
+          ...defaultState,
+          preferences: {
+            ...defaultState.preferences,
+            walletName: 'My Wallet - 1234',
+          },
+        }}
+      >
+        <ConfigurationContext.Provider value={configurationContext}>
+          <NewQRView
+            defaultToConnect={true}
+            handleCodeScan={() => Promise.resolve()}
+            navigation={navigation as any}
+            route={{} as any}
+          />
+        </ConfigurationContext.Provider>
+      </StoreProvider>
+    )
+
+    await act(() => {
+      jest.runAllTimers()
+    })
+
+    const editButtonByTestId = getByTestId(testIdWithKey('EditWalletName'))
+
+    expect(editButtonByTestId).not.toBeNull()
+  })
 })

packages/legacy/core/__tests__/components/__snapshots__/NewQRView.test.tsx.snap

@@ -306,8 +306,10 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
               onGestureHandlerStateChange={[Function]}
               onHandlerStateChange={[Function]}
               rippleColor={0}
+              testID="com.ariesbifold:id/EditWalletName"
             >
               <View
+                accessibilityLabel="NameWallet.EditWalletName"
                 accessible={true}
                 collapsable={false}
                 style={

packages/legacy/core/__tests__/screens/Settings.test.tsx

@@ -2,11 +2,11 @@ import { useNavigation } from '@react-navigation/core'
 import { render } from '@testing-library/react-native'
 import React from 'react'
 
-import Settings from '../../App/screens/Settings'
-import configurationContext from '../contexts/configuration'
+import { StoreContext } from '../../App'
 import { ConfigurationContext } from '../../App/contexts/configuration'
+import Settings from '../../App/screens/Settings'
 import { testIdWithKey } from '../../App/utils/testable'
-import { StoreContext } from '../../App'
+import configurationContext from '../contexts/configuration'
 import { testDefaultState } from '../contexts/store'
 
 jest.mock('@react-navigation/core', () => {
@@ -39,12 +39,19 @@ describe('Settings Screen', () => {
       preferences: {
         ...testDefaultState.preferences,
         developerModeEnabled: true,
-        walletName: "My Wallet"
-      }
-    } 
-    
+        walletName: 'My Wallet',
+      },
+    }
+
     const tree = render(
-      <StoreContext.Provider value={[customState, () => { return }]}>
+      <StoreContext.Provider
+        value={[
+          customState,
+          () => {
+            return
+          },
+        ]}
+      >
         <ConfigurationContext.Provider value={configurationContext}>
           <Settings navigation={useNavigation()} route={{} as any} />
         </ConfigurationContext.Provider>
@@ -60,19 +67,28 @@ describe('Settings Screen', () => {
         ...testDefaultState.preferences,
         developerModeEnabled: true,
         useConnectionInviterCapability: true,
-        walletName: "Wallet123"
-      }
-    } 
-    
+        walletName: 'Wallet123',
+      },
+    }
+
     const tree = render(
-      <StoreContext.Provider value={[customState, () => { return }]}>
+      <StoreContext.Provider
+        value={[
+          customState,
+          () => {
+            return
+          },
+        ]}
+      >
         <ConfigurationContext.Provider value={configurationContext}>
           <Settings navigation={useNavigation()} route={{} as any} />
         </ConfigurationContext.Provider>
       </StoreContext.Provider>
     )
+
     const walletName = tree.getByText('Wallet123')
-    const editButton = tree.getByTestId(testIdWithKey('Wallet123Action'))
+    const editButton = tree.getByTestId(testIdWithKey('EditWalletName'))
+
     expect(editButton).not.toBeNull()
     expect(walletName).not.toBeNull()
   })
@@ -83,19 +99,26 @@ describe('Settings Screen', () => {
       preferences: {
         ...testDefaultState.preferences,
         developerModeEnabled: true,
-        walletName: "My Wallet"
-      }
-    } 
+        walletName: 'My Wallet',
+      },
+    }
     const tree = render(
-      <StoreContext.Provider value={[customState, () => { return }]}>
+      <StoreContext.Provider
+        value={[
+          customState,
+          () => {
+            return
+          },
+        ]}
+      >
         <ConfigurationContext.Provider value={configurationContext}>
           <Settings navigation={useNavigation()} route={{} as any} />
         </ConfigurationContext.Provider>
       </StoreContext.Provider>
     )
-    
+
     const developerModeButton = tree.getByTestId(testIdWithKey('DeveloperOptions'))
-    expect(developerModeButton).not.toBeNull()    
+    expect(developerModeButton).not.toBeNull()
   })
 
   test('If mobile verifier is enabled, verifier options are shown', async () => {
@@ -104,11 +127,18 @@ describe('Settings Screen', () => {
       preferences: {
         ...testDefaultState.preferences,
         useVerifierCapability: true,
-        walletName: "My Wallet"
-      }
-    }    
+        walletName: 'My Wallet',
+      },
+    }
     const tree = render(
-      <StoreContext.Provider value={[customState, () => { return }]}>
+      <StoreContext.Provider
+        value={[
+          customState,
+          () => {
+            return
+          },
+        ]}
+      >
         <ConfigurationContext.Provider value={configurationContext}>
           <Settings navigation={useNavigation()} route={{} as any} />
         </ConfigurationContext.Provider>

packages/legacy/core/__tests__/screens/__snapshots__/Settings.test.tsx.snap

@@ -48,6 +48,7 @@ exports[`Settings Screen Renders correctly 1`] = `
               "style": Object {
                 "color": "#42803E",
               },
+              "testID": "com.ariesbifold:id/EditWalletName",
             },
             "title": "Screens.Contacts",
           },

packages/legacy/core/__tests__/utils/__snapshots__/testable.test.ts.snap

@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Testable Converts a string to testID 1`] = `"UpdateYourProfile"`;
+
 exports[`Testable Produces the correct testID 1`] = `"com.ariesbifold:id/blarb"`;

packages/legacy/core/__tests__/utils/testable.test.ts

@@ -1,4 +1,4 @@
-import { testIdWithKey } from '../../App/utils/testable'
+import { testIdWithKey, testIdForAccessabilityLabel } from '../../App/utils/testable'
 
 describe('Testable', () => {
   test('Produces the correct testID', () => {
@@ -7,4 +7,11 @@ describe('Testable', () => {
 
     expect(result).toMatchSnapshot()
   })
+
+  test('Converts a string to testID', () => {
+    const label = 'Update your profile'
+    const result = testIdForAccessabilityLabel(label)
+
+    expect(result).toMatchSnapshot()
+  })
 })