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

…files (#11458)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

We are aiming to refactor the page objects in the modal folder so that
they strictly follow the page object model pattern. This would aide in
providing more readable and help standardize the way we create our
tests. Because of the amount of files remaining, this issue will focus
on working on three files to refactor, as well as their respective
testIDS.

While doing some analysis we see that the ImportTokens and
AddCustomTokenView classes could be merge together. So the refactoring
of the test and classes should be implemented on both files.

NOTE: You should move the AddCustomTokenView and ImportTokens files into
a token-import subfolder within the wallet folder for better
organization and clarity.



## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

Regressin test runs:
https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/ca857ba6-cebc-4903-8918-3d7dc3a51a36

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

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/wallet/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/__snapshots__/index.test.tsx.snap

@@ -8,7 +8,6 @@ exports[`AddCustomToken render matches previous snapshot 1`] = `
       "flex": 1,
     }
   }
-  testID="add-custom-token-screen"
 >
   <RCTScrollView>
     <View>
@@ -226,7 +225,7 @@ exports[`AddCustomToken render matches previous snapshot 1`] = `
           "width": "90%",
         }
       }
-      testID="next-button-custom-import"
+      testID="token-import-next-button"
     >
       <Text
         accessibilityRole="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/wallet/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

@@ -6,7 +6,6 @@ import StyledButton from '../StyledButton'; // eslint-disable-line  import/no-un
 import AssetIcon from '../AssetIcon';
 import { fontStyles } from '../../../styles/common';
 import Text from '../../Base/Text';
-import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/ImportTokenView.selectors';
 
 const styles = StyleSheet.create({
   rowWrapper: {
@@ -80,7 +79,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/wallet/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/wallet/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

@@ -14,7 +14,7 @@ import AssetIcon from '../AssetIcon';
 import { useSelector } from 'react-redux';
 import { selectNetworkImageSource } from '../../../selectors/networkInfos';
 import { strings } from '../../../../locales/i18n';
-import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/ImportTokenView.selectors';
+import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/wallet/ImportTokenView.selectors';
 
 interface Props {
   /**
@@ -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/wallet/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/wallet/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>

app/components/Views/AddAsset/__snapshots__/AddAsset.test.tsx.snap

@@ -86,7 +86,7 @@ exports[`AddAsset component renders correctly 1`] = `
         "flex": 1,
       }
     }
-    testID="add-custom-token-screen"
+    testID="import-nft-screen"
   >
     <View
       style={
@@ -257,7 +257,7 @@ exports[`AddAsset component renders correctly 1`] = `
                     {},
                   ]
                 }
-                testID="input-token-decimals"
+                testID="input-collectible-identifier"
                 value=""
               />
               <Text