test: Refactor WalletView file

app/component-library/components/Pickers/PickerAccount/PickerAccount.tsx

@@ -2,7 +2,7 @@
 
 // Third party dependencies.
 import React, { forwardRef } from 'react';
-import { Platform, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 // External dependencies.
 import Avatar, { AvatarSize, AvatarVariant } from '../../Avatars/Avatar';
@@ -15,8 +15,7 @@ import { strings } from '../../../../../locales/i18n';
 import PickerBase from '../PickerBase';
 import { PickerAccountProps } from './PickerAccount.types';
 import styleSheet from './PickerAccount.styles';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
-import { WALLET_ACCOUNT_NAME_LABEL_TEXT } from '../../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
+import { WalletViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/WalletView.selectors';
 
 const PickerAccount: React.ForwardRefRenderFunction<
   TouchableOpacity,
@@ -52,7 +51,7 @@ const PickerAccount: React.ForwardRefRenderFunction<
       <View style={styles.accountNameLabel}>
         <Text
           variant={TextVariant.HeadingSMRegular}
-          {...generateTestId(Platform, WALLET_ACCOUNT_NAME_LABEL_TEXT)}
+          testID={WalletViewSelectorsIDs.ACCOUNT_NAME_LABEL_TEXT}
         >
           {accountName}
         </Text>

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx

@@ -2,7 +2,7 @@
 
 // Third party dependencies.
 import React from 'react';
-import { Platform, TouchableOpacity } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 
 // External dependencies.
 import Avatar, { AvatarSize, AvatarVariant } from '../../Avatars/Avatar';
@@ -13,8 +13,7 @@ import { useStyles } from '../../../hooks';
 // Internal dependencies.
 import { PickerNetworkProps } from './PickerNetwork.types';
 import stylesheet from './PickerNetwork.styles';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
-import { NAVBAR_NETWORK_TEXT } from '../../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
+import { WalletViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/WalletView.selectors';
 import { PICKERNETWORK_ARROW_TESTID } from './PickerNetwork.constants';
 
 const PickerNetwork = ({
@@ -38,7 +37,7 @@ const PickerNetwork = ({
         style={styles.label}
         numberOfLines={1}
         variant={TextVariant.BodyMD}
-        {...generateTestId(Platform, NAVBAR_NETWORK_TEXT)}
+        testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_TEXT}
       >
         {label}
       </Text>

app/component-library/components/Toast/Toast.tsx

@@ -10,7 +10,6 @@ import React, {
 import {
   Dimensions,
   LayoutChangeEvent,
-  Platform,
   StyleProp,
   View,
   ViewStyle,
@@ -39,8 +38,7 @@ import {
   ToastVariants,
 } from './Toast.types';
 import styles from './Toast.styles';
-import generateTestId from '../../../../wdio/utils/generateTestId';
-import { TOAST_ID } from '../../../../wdio/screen-objects/testIDs/Common.testIds';
+import { ToastSelectorsIDs } from '../../../../e2e/selectors/Modals/ToastModal.selectors';
 import { ButtonProps } from '../Buttons/Button/Button.types';
 
 const visibilityDuration = 2750;
@@ -210,7 +208,7 @@ const Toast = forwardRef((_, ref: React.ForwardedRef<ToastRef>) => {
         {renderAvatar()}
         <View
           style={styles.labelsContainer}
-          {...generateTestId(Platform, TOAST_ID)}
+          testID={ToastSelectorsIDs.CONTAINER}
         >
           {renderLabel(labelOptions)}
           {renderButtonLink(linkButtonOptions)}

app/components/UI/AccountOverview/index.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import {
   InteractionManager,
-  Platform,
   ScrollView,
   StyleSheet,
   TextInput,
@@ -11,12 +10,7 @@ import {
 } from 'react-native';
 import { connect } from 'react-redux';
 import { strings } from '../../../../locales/i18n';
-import {
-  WALLET_ACCOUNT_ICON,
-  WALLET_ACCOUNT_NAME_LABEL_INPUT,
-  WALLET_ACCOUNT_NAME_LABEL_TEXT,
-} from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
-import generateTestId from '../../../../wdio/utils/generateTestId';
+import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
 import { showAlert } from '../../../actions/alert';
 import { toggleReceiveModal } from '../../../actions/modals';
 import { newAssetTransaction } from '../../../actions/transaction';
@@ -168,10 +162,6 @@ class AccountOverview extends PureComponent {
      */
     account: PropTypes.object,
     /**
-    /* Selected currency
-    */
-    currentCurrency: PropTypes.string,
-    /**
     /* Triggers global alert
     */
     showAlert: PropTypes.func,
@@ -187,19 +177,11 @@ class AccountOverview extends PureComponent {
      * Prompts protect wallet modal
      */
     protectWalletModalVisible: PropTypes.func,
-    /**
-     * Start transaction with asset
-     */
-    newAssetTransaction: PropTypes.func,
     /**
     /* navigation object required to access the props
     /* passed by the parent component
     */
     navigation: PropTypes.object,
-    /**
-     * Action that toggles the receive modal
-     */
-    toggleReceiveModal: PropTypes.func,
     /**
      * The chain ID for the current selected network
      */
@@ -373,7 +355,7 @@ class AccountOverview extends PureComponent {
               style={styles.identiconBorder}
               disabled={onboardingWizard}
               onPress={this.openAccountSelector}
-              {...generateTestId(Platform, WALLET_ACCOUNT_ICON)}
+              testID={WalletViewSelectorsIDs.ACCOUNT_ICON}
             >
               <Identicon
                 address={address}
@@ -400,7 +382,7 @@ class AccountOverview extends PureComponent {
                   onChangeText={this.onAccountLabelChange}
                   onSubmitEditing={this.setAccountLabel}
                   onBlur={this.setAccountLabel}
-                  {...generateTestId(Platform, WALLET_ACCOUNT_NAME_LABEL_INPUT)}
+                  testID={WalletViewSelectorsIDs.ACCOUNT_NAME_LABEL_INPUT}
                   value={accountLabel}
                   selectTextOnFocus
                   ref={this.input}
@@ -425,10 +407,7 @@ class AccountOverview extends PureComponent {
                         },
                       ]}
                       numberOfLines={1}
-                      {...generateTestId(
-                        Platform,
-                        WALLET_ACCOUNT_NAME_LABEL_TEXT,
-                      )}
+                      testID={WalletViewSelectorsIDs.ACCOUNT_NAME_LABEL_TEXT}
                     >
                       {isDefaultAccountName(name) && ens ? ens : name}
                     </Text>

app/components/UI/AddressCopy/AddressCopy.tsx

@@ -18,10 +18,10 @@ import ClipboardManager from '../../../core/ClipboardManager';
 import { showAlert } from '../../../actions/alert';
 import { protectWalletModalVisible } from '../../../actions/user';
 import { strings } from '../../../../locales/i18n';
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { useStyles } from '../../../component-library/hooks';
-import generateTestId from '../../../../wdio/utils/generateTestId';
+import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
 
 // Internal dependencies
 import styleSheet from './AddressCopy.styles';
@@ -75,12 +75,12 @@ const AddressCopy = ({ formatAddressType = 'full' }: AddressCopyProps) => {
       <TouchableOpacity
         style={styles.copyButton}
         onPress={copyAccountToClipboard}
-        {...generateTestId(Platform, 'wallet-account-copy-button')}
+        testID={WalletViewSelectorsIDs.ACCOUNT_COPY_BUTTON}
       >
         <Text
           color={TextColor.Primary}
           variant={TextVariant.BodySM}
-          {...generateTestId(Platform, 'wallet-account-address')}
+          testID={WalletViewSelectorsIDs.ACCOUNT_ADDRESS}
         >
           {selectedInternalAccount
             ? formatAddress(selectedInternalAccount.address, formatAddressType)

app/components/UI/CollectibleContracts/index.js

@@ -5,7 +5,6 @@ import {
   StyleSheet,
   View,
   Image,
-  Platform,
   FlatList,
   RefreshControl,
   ActivityIndicator,
@@ -30,7 +29,6 @@ import { compareTokenIds } from '../../../util/tokens';
 import CollectibleDetectionModal from '../CollectibleDetectionModal';
 import { useTheme } from '../../../util/theme';
 import { MAINNET } from '../../../constants/network';
-import generateTestId from '../../../../wdio/utils/generateTestId';
 import {
   selectChainId,
   selectProviderType,
@@ -41,10 +39,7 @@ import {
   selectUseNftDetection,
 } from '../../../selectors/preferencesController';
 import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
-import {
-  IMPORT_NFT_BUTTON_ID,
-  NFT_TAB_CONTAINER_ID,
-} from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
+import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { RefreshTestId, SpinnerTestId } from './constants';
 
@@ -239,7 +234,7 @@ const CollectibleContracts = ({
         <TouchableOpacity
           onPress={goToAddCollectible}
           disabled={!isAddNFTEnabled}
-          {...generateTestId(Platform, IMPORT_NFT_BUTTON_ID)}
+          testID={WalletViewSelectorsIDs.IMPORT_NFT_BUTTON}
         >
           <Text style={styles.addText}>
             {strings('wallet.add_collectibles')}
@@ -376,7 +371,7 @@ const CollectibleContracts = ({
   return (
     <View
       style={styles.wrapper}
-      {...generateTestId(Platform, NFT_TAB_CONTAINER_ID)}
+      testID={WalletViewSelectorsIDs.NFT_TAB_CONTAINER}
     >
       {renderList()}
     </View>

app/components/UI/Navbar/index.js

@@ -27,12 +27,10 @@ import Device from '../../../util/device';
 import PickerNetwork from '../../../component-library/components/Pickers/PickerNetwork';
 import BrowserUrlBar from '../BrowserUrlBar';
 import generateTestId from '../../../../wdio/utils/generateTestId';
-import { NAVBAR_NETWORK_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
 import { NAV_ANDROID_BACK_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids';
 import { ASSET_BACK_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/TokenOverviewScreen.testIds';
 import { REQUEST_SEARCH_RESULTS_BACK_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/RequestToken.testIds';
 import { BACK_BUTTON_SIMPLE_WEBVIEW } from '../../../../wdio/screen-objects/testIDs/Components/SimpleWebView.testIds';
-import { EDIT_BUTTON } from '../../../../wdio/screen-objects/testIDs/Common.testIds';
 import Routes from '../../../constants/navigation/Routes';
 
 import ButtonIcon, {
@@ -53,6 +51,7 @@ import { NetworksViewSelectorsIDs } from '../../../../e2e/selectors/Settings/Net
 import { SendLinkViewSelectorsIDs } from '../../../../e2e/selectors/SendLinkView.selectors';
 import { SendViewSelectorsIDs } from '../../../../e2e/selectors/SendView.selectors';
 import { getBlockaidTransactionMetricsParams } from '../../../util/blockaid';
+import { AddContactViewSelectorsIDs } from '../../../../e2e/selectors/Settings/Contacts/AddContactView.selectors';
 
 const trackEvent = (event, params = {}) => {
   MetaMetrics.getInstance().trackEvent(event, params);
@@ -290,7 +289,7 @@ export function getEditableOptions(title, navigation, route, themeColors) {
         <TouchableOpacity
           onPress={rightAction}
           style={styles.backButton}
-          {...generateTestId(Platform, EDIT_BUTTON)}
+          testID={AddContactViewSelectorsIDs.EDIT_BUTTON}
         >
           <Text style={innerStyles.headerButtonText}>
             {editMode
@@ -984,7 +983,7 @@ export function getWalletNavbarOptions(
           label={networkName}
           imageSource={networkImageSource}
           onPress={onPressTitle}
-          {...generateTestId(Platform, NAVBAR_NETWORK_BUTTON)}
+          testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_BUTTON}
         />
       </View>
     ),

app/components/UI/Tokens/index.test.tsx

@@ -6,11 +6,7 @@ import { BN } from 'ethereumjs-util';
 import renderWithProvider from '../../../util/test/renderWithProvider';
 import { createStackNavigator } from '@react-navigation/stack';
 import Engine from '../../../core/Engine';
-import {
-  getAssetTestId,
-  IMPORT_TOKEN_BUTTON_ID,
-  MAIN_WALLET_VIEW_VIA_TOKENS_ID,
-} from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
+import { getAssetTestId } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
 import { backgroundState } from '../../../util/test/initial-root-state';
 import { strings } from '../../../../locales/i18n';
 import AppConstants from '../../../../app/core/AppConstants';
@@ -173,14 +169,14 @@ describe('Tokens', () => {
 
   it('navigates to AddAsset screen when Add Tokens button is pressed', () => {
     const { getByTestId } = renderComponent(initialState);
-    fireEvent.press(getByTestId(IMPORT_TOKEN_BUTTON_ID));
+    fireEvent.press(getByTestId(WalletViewSelectorsIDs.IMPORT_TOKEN_BUTTON));
     expect(mockPush).toHaveBeenCalledWith('AddAsset', { assetType: 'token' });
   });
 
   it('shows remove menu when remove button is pressed', () => {
     const { getByTestId, queryAllByTestId } = renderComponent(initialState);
     fireEvent.press(queryAllByTestId(getAssetTestId('BAT'))[0], 'longPress');
-    expect(getByTestId(MAIN_WALLET_VIEW_VIA_TOKENS_ID)).toBeDefined();
+    expect(getByTestId(WalletViewSelectorsIDs.TOKENS_CONTAINER)).toBeDefined();
   });
 
   it('fiat balance must be defined', () => {

app/components/UI/Tokens/index.tsx

@@ -3,7 +3,6 @@ import React, { useRef, useState, LegacyRef } from 'react';
 import {
   TouchableOpacity,
   View,
-  Platform,
   FlatList,
   RefreshControl,
   Pressable,
@@ -34,11 +33,6 @@ import {
   isMainnetByChainId,
   isTestNet,
 } from '../../../util/networks';
-import generateTestId from '../../../../wdio/utils/generateTestId';
-import {
-  IMPORT_TOKEN_BUTTON_ID,
-  MAIN_WALLET_VIEW_VIA_TOKENS_ID,
-} from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
 import {
   selectChainId,
   selectNetworkClientId,
@@ -289,7 +283,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
         style={styles.add}
         onPress={goToAddToken}
         disabled={!isAddTokenEnabled}
-        {...generateTestId(Platform, IMPORT_TOKEN_BUTTON_ID)}
+        testID={WalletViewSelectorsIDs.IMPORT_TOKEN_BUTTON}
       >
         <Text style={styles.centered}>
           <Text style={styles.emptyText}>
@@ -717,7 +711,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
   return (
     <View
       style={styles.wrapper}
-      {...generateTestId(Platform, MAIN_WALLET_VIEW_VIA_TOKENS_ID)}
+      testID={WalletViewSelectorsIDs.TOKENS_CONTAINER}
     >
       {tokens?.length ? renderList() : renderEmpty()}
       <ActionSheet

app/components/UI/WalletAccount/WalletAccount.test.tsx

@@ -14,6 +14,7 @@ import {
   internalAccount2,
   expectedUuid2,
 } from '../../../util/test/accountsControllerTestUtils';
+import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
 
 // Internal dependencies
 import WalletAccount from './WalletAccount';
@@ -111,15 +112,15 @@ describe('WalletAccount', () => {
     const { getByTestId } = renderWithProvider(<WalletAccount />, {
       state: mockInitialState,
     });
-    expect(getByTestId('wallet-account-address')).toBeDefined();
+    expect(getByTestId(WalletViewSelectorsIDs.ACCOUNT_ADDRESS)).toBeDefined();
   });
 
   it('copies the account address to the clipboard when the copy button is pressed', async () => {
     const { getByTestId } = renderWithProvider(<WalletAccount />, {
       state: mockInitialState,
     });
 
-    fireEvent.press(getByTestId('wallet-account-copy-button'));
+    fireEvent.press(getByTestId(WalletViewSelectorsIDs.ACCOUNT_COPY_BUTTON));
     expect(ClipboardManager.setString).toHaveBeenCalledTimes(1);
   });
 
@@ -128,7 +129,7 @@ describe('WalletAccount', () => {
       state: mockInitialState,
     });
 
-    fireEvent.press(getByTestId('account-picker'));
+    fireEvent.press(getByTestId(WalletViewSelectorsIDs.ACCOUNT_ICON));
     expect(mockNavigate).toHaveBeenCalledWith(
       ...createAccountSelectorNavDetails({}),
     );