test: Merge Import Token flow methods and ids in just one folder and files

app/components/UI/AddCustomCollectible/index.tsx

@@ -6,7 +6,6 @@ import {
   TextInput,
   View,
   StyleSheet,
-  Platform,
 } from 'react-native';
 import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
@@ -18,14 +17,7 @@ import Device from '../../../util/device';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 
 import { useTheme } from '../../../util/theme';
-import { CUSTOM_TOKEN_CONTAINER_ID } from '../../../../wdio/screen-objects/testIDs/Screens/AddCustomToken.testIds';
-import generateTestId from '../../../../wdio/utils/generateTestId';
-import {
-  NFT_ADDRESS_INPUT_BOX_ID,
-  NFT_IDENTIFIER_WARNING_MESSAGE_ID,
-  NFT_ADDRESS_WARNING_MESSAGE_ID,
-  NFT_IDENTIFIER_INPUT_BOX_ID,
-} from '../../../../wdio/screen-objects/testIDs/Screens/NFTImportScreen.testIds';
+import { NFTImportScreenSelectorsIDs } from '../../../../e2e/selectors/ImportNFTView.selectors';
 import { selectChainId } from '../../../selectors/networkController';
 import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
 import { getDecimalChainId } from '../../../util/networks';
@@ -233,7 +225,7 @@ const AddCustomCollectible = ({
   return (
     <View
       style={styles.wrapper}
-      {...generateTestId(Platform, CUSTOM_TOKEN_CONTAINER_ID)}
+      testID={NFTImportScreenSelectorsIDs.CONTAINER}
     >
       <ActionView
         cancelText={strings('add_asset.collectibles.cancel_add_collectible')}
@@ -258,13 +250,13 @@ const AddCustomCollectible = ({
               value={address}
               onChangeText={onAddressChange}
               onBlur={validateCustomCollectibleAddress}
-              {...generateTestId(Platform, NFT_ADDRESS_INPUT_BOX_ID)}
+              testID={NFTImportScreenSelectorsIDs.ADDRESS_INPUT_BOX}
               onSubmitEditing={jumpToAssetTokenId}
               keyboardAppearance={themeAppearance}
             />
             <Text
               style={styles.warningText}
-              {...generateTestId(Platform, NFT_ADDRESS_WARNING_MESSAGE_ID)}
+              testID={NFTImportScreenSelectorsIDs.ADDRESS_WARNING_MESSAGE}
             >
               {warningAddress}
             </Text>
@@ -282,7 +274,7 @@ const AddCustomCollectible = ({
               keyboardType="numeric"
               onChangeText={onTokenIdChange}
               onBlur={validateCustomCollectibleTokenId}
-              {...generateTestId(Platform, NFT_IDENTIFIER_INPUT_BOX_ID)}
+              testID={NFTImportScreenSelectorsIDs.IDENTIFIER_INPUT_BOX}
               ref={assetTokenIdInput}
               onSubmitEditing={addNft}
               returnKeyType={'done'}
@@ -292,7 +284,7 @@ const AddCustomCollectible = ({
             />
             <Text
               style={styles.warningText}
-              {...generateTestId(Platform, NFT_IDENTIFIER_WARNING_MESSAGE_ID)}
+              testID={NFTImportScreenSelectorsIDs.IDENTIFIER_WARNING_MESSAGE}
             >
               {warningTokenId}
             </Text>

app/components/UI/AddCustomToken/index.js

@@ -21,15 +21,7 @@ import Alert, { AlertType } from '../../Base/Alert';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import NotificationManager from '../../../core/NotificationManager';
 import { ThemeContext, mockTheme } from '../../../util/theme';
-import generateTestId from '../../../../wdio/utils/generateTestId';
-import {
-  CUSTOM_TOKEN_CONTAINER_ID,
-  TOKEN_ADDRESS_INPUT_BOX_ID,
-  TOKEN_ADDRESS_SYMBOL_ID,
-  TOKEN_ADDRESS_WARNING_MESSAGE_ID,
-  TOKEN_PRECISION_WARNING_MESSAGE_ID,
-} from '../../../../wdio/screen-objects/testIDs/Screens/AddCustomToken.testIds';
-import { NFT_IDENTIFIER_INPUT_BOX_ID } from '../../../../wdio/screen-objects/testIDs/Screens/NFTImportScreen.testIds';
+import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/ImportTokenView.selectors';
 import { regex } from '../../../../app/util/regex';
 import {
   getBlockExplorerAddressUrl,
@@ -520,10 +512,7 @@ class AddCustomToken extends PureComponent {
     );
 
     return (
-      <View
-        style={styles.wrapper}
-        {...generateTestId(Platform, CUSTOM_TOKEN_CONTAINER_ID)}
-      >
+      <View style={styles.wrapper}>
         <ScrollView>
           {this.renderBanner()}
           <View style={styles.addressWrapper}>
@@ -540,14 +529,14 @@ class AddCustomToken extends PureComponent {
               onBlur={() => {
                 this.handleBlurAddress();
               }}
-              {...generateTestId(Platform, TOKEN_ADDRESS_INPUT_BOX_ID)}
+              testID={ImportTokenViewSelectorsIDs.ADDRESS_INPUT}
               onSubmitEditing={this.jumpToAssetSymbol}
               returnKeyType={'next'}
               keyboardAppearance={themeAppearance}
             />
             <Text
               style={styles.warningText}
-              {...generateTestId(Platform, TOKEN_ADDRESS_WARNING_MESSAGE_ID)}
+              testID={ImportTokenViewSelectorsIDs.ADDRESS_WARNING_MESSAGE}
             >
               {this.state.warningAddress}
             </Text>
@@ -565,7 +554,7 @@ class AddCustomToken extends PureComponent {
                 value={this.state.symbol}
                 onChangeText={this.onSymbolChange}
                 onBlur={this.validateCustomTokenSymbol}
-                {...generateTestId(Platform, TOKEN_ADDRESS_SYMBOL_ID)}
+                testID={ImportTokenViewSelectorsIDs.SYMBOL_INPUT}
                 ref={this.assetSymbolInput}
                 onSubmitEditing={this.jumpToAssetPrecision}
                 returnKeyType={'next'}
@@ -590,7 +579,7 @@ class AddCustomToken extends PureComponent {
                 placeholderTextColor={colors.text.muted}
                 onChangeText={this.onDecimalsChange}
                 onBlur={this.validateCustomTokenDecimals}
-                {...generateTestId(Platform, NFT_IDENTIFIER_INPUT_BOX_ID)}
+                testID={ImportTokenViewSelectorsIDs.DECIMAL_INPUT}
                 ref={this.assetPrecisionInput}
                 onSubmitEditing={this.addToken}
                 returnKeyType={'done'}
@@ -601,10 +590,7 @@ class AddCustomToken extends PureComponent {
               {this.state.warningDecimals ? (
                 <Text
                   style={styles.warningText}
-                  {...generateTestId(
-                    Platform,
-                    TOKEN_PRECISION_WARNING_MESSAGE_ID,
-                  )}
+                  testID={ImportTokenViewSelectorsIDs.PRECISION_WARNING_MESSAGE}
                 >
                   {this.state.warningDecimals}{' '}
                   <Text
@@ -639,7 +625,7 @@ class AddCustomToken extends PureComponent {
             style={styles.import}
             onPress={this.goToConfirmAddToken}
             isDisabled={isDisabled}
-            testID="next-button-custom-import"
+            testID={ImportTokenViewSelectorsIDs.NEXT_BUTTON}
           />
         </View>
       </View>

app/components/UI/AssetList/index.js

@@ -80,7 +80,6 @@ export default class AssetList extends PureComponent {
               containerStyle={styles.item}
               onPress={() => handleSelectAsset(searchResults[i])} // eslint-disable-line
               key={i}
-              testID={ImportTokenViewSelectorsIDs.CONTAINER}
             >
               <View style={styles.assetListElement}>
                 <AssetIcon address={address} logo={iconUrl} />

app/components/UI/AssetSearch/index.tsx

@@ -3,7 +3,6 @@ import {
   TextInput,
   View,
   StyleSheet,
-  Platform,
   TextStyle,
   DimensionValue,
 } from 'react-native';
@@ -14,8 +13,7 @@ import { toLowerCaseEquals } from '../../../util/general';
 import { useSelector } from 'react-redux';
 import { TokenListToken } from '@metamask/assets-controllers';
 import { useTheme } from '../../../util/theme';
-import generateTestId from '../../../../wdio/utils/generateTestId';
-import { TOKEN_INPUT_BOX_ID } from '../../../../wdio/screen-objects/testIDs/Screens/AssetSearch.testIds';
+import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/ImportTokenView.selectors';
 import { TokenViewSelectors } from '../../../../e2e/selectors/AddTokenView.selectors';
 import { selectTokenListArray } from '../../../selectors/tokenListController';
 import Icon, {
@@ -166,7 +164,7 @@ const AssetSearch = memo(({ onSearch, onFocus, onBlur }: Props) => {
           placeholder={strings('token.search_tokens_placeholder')}
           placeholderTextColor={colors.text.muted}
           onChangeText={handleSearch}
-          {...generateTestId(Platform, TOKEN_INPUT_BOX_ID)}
+          testID={ImportTokenViewSelectorsIDs.SEARCH_BAR}
           keyboardAppearance={themeAppearance}
         />
       </View>

app/components/UI/ConfirmAddAsset/ConfirmAddAsset.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { View, Platform } from 'react-native';
+import { View } from 'react-native';
 import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
@@ -36,11 +36,7 @@ import Modal from 'react-native-modal';
 import Box from '../Ramp/components/Box';
 import SheetHeader from '../../../component-library/components/Sheet/SheetHeader';
 import Routes from '../../../constants/navigation/Routes';
-import generateTestId from '../../../../wdio/utils/generateTestId';
-import {
-  ADD_CANCEL_ADD_CUSTOM_ASSET_MODAL,
-  ADD_CONFIRM_CUSTOM_ASSET,
-} from '../../../../wdio/screen-objects/testIDs/Screens/AddCustomToken.testIds';
+import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/ImportTokenView.selectors';
 import { TOKEN_TITLE } from '../../../components/Views/AddAsset/AddAsset.constants';
 
 const RenderBalance = (asset: {
@@ -129,7 +125,7 @@ const ConfirmAddAsset = () => {
     >
       <View
         style={styles.box}
-        {...generateTestId(Platform, ADD_CANCEL_ADD_CUSTOM_ASSET_MODAL)}
+        testID={ImportTokenViewSelectorsIDs.ADD_CANCEL_ADD_CUSTOM_ASSET_MODAL}
       >
         <View style={styles.notch} />
         <SheetHeader title={strings('wallet.are_you_sure_exit')} />
@@ -175,7 +171,7 @@ const ConfirmAddAsset = () => {
   return (
     <View
       style={styles.rowWrapper}
-      {...generateTestId(Platform, ADD_CONFIRM_CUSTOM_ASSET)}
+      testID={ImportTokenViewSelectorsIDs.ADD_CONFIRM_CUSTOM_ASSET}
     >
       <Text variant={TextVariant.BodyMD} style={styles.title}>
         {strings('wallet.import_token')}

app/components/UI/MultiAssetListItems/MultiAssetListItems.tsx

@@ -83,7 +83,7 @@ const MultiAssetListItems = ({
             style={styles.base}
             key={i}
             onPress={() => handleSelectAsset(searchResults[i])}
-            testID={ImportTokenViewSelectorsIDs.CONTAINER}
+            testID={ImportTokenViewSelectorsIDs.SEARCH_TOKEN_RESULT}
           >
             <View style={styles.Icon}>
               <BadgeWrapper

app/components/UI/Navbar/index.js

@@ -28,7 +28,6 @@ import PickerNetwork from '../../../component-library/components/Pickers/PickerN
 import BrowserUrlBar from '../BrowserUrlBar';
 import generateTestId from '../../../../wdio/utils/generateTestId';
 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 Routes from '../../../constants/navigation/Routes';
@@ -53,6 +52,7 @@ import Icon, {
   IconColor,
 } from '../../../component-library/components/Icons/Icon';
 import { AddContactViewSelectorsIDs } from '../../../../e2e/selectors/Settings/Contacts/AddContactView.selectors';
+import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/ImportTokenView.selectors';
 
 const trackEvent = (event, params = {}) => {
   MetaMetrics.getInstance().trackEvent(event, params);
@@ -1119,7 +1119,7 @@ export function getImportTokenNavbarOptions(
       // eslint-disable-next-line react/jsx-no-bind
       <TouchableOpacity
         style={styles.backButton}
-        {...generateTestId(Platform, ASSET_BACK_BUTTON)}
+        testID={ImportTokenViewSelectorsIDs.BACK_BUTTON}
       >
         <ButtonIcon
           iconName={IconName.Close}
@@ -1178,7 +1178,7 @@ export function getNftDetailsNavbarOptions(
       <TouchableOpacity
         onPress={() => navigation.pop()}
         style={styles.backButton}
-        {...generateTestId(Platform, ASSET_BACK_BUTTON)}
+        testID={ImportTokenViewSelectorsIDs.BACK_BUTTON}
       >
         <Icon
           name={IconName.ArrowLeft}
@@ -1301,7 +1301,7 @@ export function getNetworkNavbarOptions(
       <TouchableOpacity
         onPress={() => navigation.pop()}
         style={styles.backButton}
-        {...generateTestId(Platform, ASSET_BACK_BUTTON)}
+        testID={ImportTokenViewSelectorsIDs.BACK_BUTTON}
       >
         <IonicIcon
           name={'ios-close'}

app/components/UI/SearchTokenAutocomplete/index.tsx

@@ -33,6 +33,7 @@ import Button, {
   ButtonVariants,
   ButtonWidthTypes,
 } from '../../../component-library/components/Buttons/Button';
+import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/ImportTokenView.selectors';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -303,7 +304,7 @@ const SearchTokenAutocomplete = ({ navigation }: Props) => {
           label={strings('transaction.next')}
           onPress={goToConfirmAddToken}
           isDisabled={selectedAsset.length < 1}
-          testID="token-import-next-button"
+          testID={ImportTokenViewSelectorsIDs.NEXT_BUTTON}
         />
       </View>
     </View>