test: Removing test selector strings within app code (5/7) (#7989)

## **Description** We have instances where testIDs are not consistently stored in variables. This lack of uniformity can lead to redundant testID declarations throughout the codebase, resulting in code that is harder to maintain and prone to errors. A more effective and best-practice approach is to store the testID value as a variable and then reference that variable when defining the testID property. By doing so, we centralize the testID values, reducing redundancy and making it easier to manage and maintain these identifiers throughout the codebase. This approach enhances code consistency and reduces the likelihood of introducing errors, ultimately contributing to a more robust and maintainable codebase. ## **Related issues** Fixes: # ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings**  ### **Before**  ### **After** Smoke E2E test run: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/c081b66c-78d1-4ec0-8bde-d0e83389855b Regression E2E test run: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/fc4ec84f-6c1a-4655-b67b-31d69c972ac0 ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained what problem this PR is solving and how it is solved. - [ ] I've linked related issues - [ ] I've included manual testing steps - [ ] I've included screenshots/recordings if applicable - [ ] 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. - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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.
MetaMask · Dec 4, 2023 · d884f7a · d884f7a
1 parent 53c7f86
commit d884f7a
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 97 deletions.
diff --git a/app/components/Views/CollectibleView/index.js b/app/components/Views/CollectibleView/index.js
@@ -102,7 +102,7 @@ class CollectibleView extends PureComponent {
     return (
       <SafeAreaView style={styles.root}>
         <ScrollView style={styles.wrapper} ref={this.scrollViewRef}>
-          <View style={styles.assetOverviewWrapper} testID={'asset'}>
+          <View style={styles.assetOverviewWrapper}>
             <CollectibleOverview
               navigation={navigation}
               collectible={collectible}

diff --git a/app/components/Views/ConnectQRHardware/SelectQRAccounts/index.tsx b/app/components/Views/ConnectQRHardware/SelectQRAccounts/index.tsx
@@ -151,7 +151,6 @@ const SelectQRAccounts = (props: ISelectQRAccountsProps) => {
               onCheckColor={colors.background.default}
               onFillColor={colors.primary.default}
               onTintColor={colors.primary.default}
-              testID={'skip-backup-check'}
             />
             <AccountDetails
               index={item.index}

diff --git a/app/components/Views/EnterPasswordSimple/index.js b/app/components/Views/EnterPasswordSimple/index.js
@@ -118,7 +118,7 @@ export default class EnterPasswordSimple extends PureComponent {
 
     return (
       <SafeAreaView style={styles.mainWrapper}>
-        <View style={styles.wrapper} testID={'enter-password-screen'}>
+        <View style={styles.wrapper}>
           <KeyboardAwareScrollView
             style={styles.wrapper}
             resetScrollToCoords={{ x: 0, y: 0 }}
@@ -142,7 +142,6 @@ export default class EnterPasswordSimple extends PureComponent {
                 <StyledButton
                   type={'blue'}
                   onPress={this.onPressConfirm}
-                  testID={'submit-button'}
                   disabled={
                     !(
                       this.state.password !== '' ||

diff --git a/app/components/Views/GasEducationCarousel/index.js b/app/components/Views/GasEducationCarousel/index.js
@@ -245,13 +245,7 @@ const GasEducationCarousel = ({
     if (key === 1) {
       return (
         <View style={styles.tab}>
-          <Text
-            noMargin
-            bold
-            black
-            style={styles.title}
-            testID={`carousel-screen-${key}`}
-          >
+          <Text noMargin bold black style={styles.title}>
             {strings('fiat_on_ramp.gas_education_carousel.step_1.title', {
               ticker: getTicker(ticker),
             })}
@@ -283,13 +277,7 @@ const GasEducationCarousel = ({
     if (key === 2) {
       return (
         <View style={styles.tab}>
-          <Text
-            noMargin
-            bold
-            black
-            style={styles.title}
-            testID={`carousel-screen-${key}`}
-          >
+          <Text noMargin bold black style={styles.title}>
             {strings('fiat_on_ramp.gas_education_carousel.step_2.title')}
           </Text>
           <Text grey noMargin style={styles.subtitle}>
@@ -311,13 +299,7 @@ const GasEducationCarousel = ({
     if (key === 3) {
       return (
         <View style={styles.tab}>
-          <Text
-            noMargin
-            bold
-            black
-            style={styles.title}
-            testID={`carousel-screen-${key}`}
-          >
+          <Text noMargin bold black style={styles.title}>
             {strings('fiat_on_ramp.gas_education_carousel.step_3.title')}
           </Text>
           <Text noMargin bold style={styles.subheader}>
@@ -339,7 +321,7 @@ const GasEducationCarousel = ({
   };
 
   return (
-    <View style={baseStyles.flexGrow} testID={'gas-education-carousel-screen'}>
+    <View style={baseStyles.flexGrow}>
       <OnboardingScreenWithBg screen={'carousel'}>
         <ScrollView
           style={baseStyles.flexGrow}
@@ -361,7 +343,6 @@ const GasEducationCarousel = ({
                         source={carousel_images[index]}
                         style={[styles.carouselImage, styles[imgStyleKey]]}
                         resizeMethod={'auto'}
-                        testID={`carousel-${value}-image`}
                       />
                     </View>
                     <View style={baseStyles.flexGrow}>
@@ -372,7 +353,6 @@ const GasEducationCarousel = ({
                             <StyledButton
                               type={'confirm'}
                               onPress={onPresGetStarted}
-                              testID={'gas-education-fiat-on-ramp-start'}
                             >
                               {strings(
                                 'fiat_on_ramp.gas_education_carousel.step_3.cta',

diff --git a/app/components/Views/ImportFromSecretRecoveryPhrase/index.js b/app/components/Views/ImportFromSecretRecoveryPhrase/index.js
@@ -54,16 +54,7 @@ import {
   PASSCODE_DISABLED,
 } from '../../../constants/storage';
 import Routes from '../../../constants/navigation/Routes';
-import generateTestId from '../../../../wdio/utils/generateTestId';
-import {
-  IMPORT_FROM_SEED_SCREEN_CONFIRM_PASSWORD_INPUT_ID,
-  IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID,
-  IMPORT_FROM_SEED_SCREEN_SUBMIT_BUTTON_ID,
-  IMPORT_FROM_SEED_SCREEN_TITLE_ID,
-  IMPORT_FROM_SEED_SCREEN_NEW_PASSWORD_INPUT_ID,
-  IMPORT_FROM_SEED_SCREEN_PASSWORD_STRENGTH_ID,
-  IMPORT_FROM_SEED_SCREEN_CONFIRM_PASSWORD_CHECK_ICON_ID,
-} from '../../../../wdio/screen-objects/testIDs/Screens/ImportFromSeedScreen.testIds';
+
 import createStyles from './styles';
 import { Authentication } from '../../../core';
 import AUTHENTICATION_TYPE from '../../../constants/userProperties';
@@ -73,6 +64,7 @@ import {
 } from '../../../util/authentication';
 import navigateTermsOfUse from '../../../util/termsOfUse/termsOfUse';
 import { ImportFromSeedSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ImportFromSeed.selectors';
+import { ChoosePasswordSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ChoosePassword.selectors';
 
 const MINIMUM_SUPPORTED_CLIPBOARD_VERSION = 9;
 
@@ -387,10 +379,9 @@ const ImportFromSecretRecoveryPhrase = ({
         containerStyle={inputWidth}
         inputContainerStyle={styles.padding}
         placeholder={strings('import_from_seed.seed_phrase_placeholder')}
-        {...generateTestId(
-          Platform,
-          IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID,
-        )}
+        testID={
+          ImportFromSeedSelectorsIDs.IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID
+        }
         placeholderTextColor={colors.text.muted}
         returnKeyType="next"
         autoCapitalize="none"
@@ -427,7 +418,7 @@ const ImportFromSecretRecoveryPhrase = ({
         <View testID={ImportFromSeedSelectorsIDs.CONTAINER_ID}>
           <Text
             style={styles.title}
-            {...generateTestId(Platform, IMPORT_FROM_SEED_SCREEN_TITLE_ID)}
+            testID={ImportFromSeedSelectorsIDs.IMPORT_FROM_SEED_SCREEN_TITLE_ID}
           >
             {strings('import_from_seed.title')}
           </Text>
@@ -510,11 +501,7 @@ const ImportFromSecretRecoveryPhrase = ({
             <OutlinedTextField
               style={styles.input}
               containerStyle={inputWidth}
-              {...generateTestId(
-                Platform,
-                IMPORT_FROM_SEED_SCREEN_NEW_PASSWORD_INPUT_ID,
-              )}
-              testID={'create-password-first-input-field'}
+              testID={ChoosePasswordSelectorsIDs.NEW_PASSWORD_INPUT_ID}
               placeholder={strings('import_from_seed.new_password')}
               placeholderTextColor={colors.text.muted}
               returnKeyType={'next'}
@@ -531,10 +518,9 @@ const ImportFromSecretRecoveryPhrase = ({
             {(password !== '' && (
               <Text
                 style={styles.passwordStrengthLabel}
-                {...generateTestId(
-                  Platform,
-                  IMPORT_FROM_SEED_SCREEN_PASSWORD_STRENGTH_ID,
-                )}
+                testID={
+                  ImportFromSeedSelectorsIDs.IMPORT_FROM_SEED_SCREEN_PASSWORD_STRENGTH_ID
+                }
               >
                 {strings('choose_password.password_strength')}
                 <Text style={styles[`strength_${passwordStrengthWord}`]}>
@@ -552,11 +538,7 @@ const ImportFromSecretRecoveryPhrase = ({
             <OutlinedTextField
               style={styles.input}
               containerStyle={inputWidth}
-              {...generateTestId(
-                Platform,
-                IMPORT_FROM_SEED_SCREEN_CONFIRM_PASSWORD_INPUT_ID,
-              )}
-              testID={'create-password-second-input-field'}
+              testID={ChoosePasswordSelectorsIDs.CONFIRM_PASSWORD_INPUT_ID}
               onChangeText={onPasswordConfirmChange}
               returnKeyType={'next'}
               autoCapitalize="none"
@@ -576,10 +558,9 @@ const ImportFromSecretRecoveryPhrase = ({
                   name="check"
                   size={12}
                   color={colors.success.default}
-                  {...generateTestId(
-                    Platform,
-                    IMPORT_FROM_SEED_SCREEN_CONFIRM_PASSWORD_CHECK_ICON_ID,
-                  )}
+                  testID={
+                    ImportFromSeedSelectorsIDs.IMPORT_FROM_SEED_SCREEN_CONFIRM_PASSWORD_CHECK_ICON_ID
+                  }
                 />
               ) : null}
             </View>
@@ -593,7 +574,12 @@ const ImportFromSecretRecoveryPhrase = ({
           {renderSwitch()}
 
           {!!error && (
-            <Text style={styles.errorMsg} testID={'invalid-seed-phrase'}>
+            <Text
+              style={styles.errorMsg}
+              testID={
+                ImportFromSeedSelectorsIDs.INVALID_SEED_PHRASE_PLACE_HOLDER_TEXT
+              }
+            >
               {error}
             </Text>
           )}
@@ -602,7 +588,9 @@ const ImportFromSecretRecoveryPhrase = ({
             <StyledButton
               type={'blue'}
               onPress={onPressImport}
-              testID={IMPORT_FROM_SEED_SCREEN_SUBMIT_BUTTON_ID}
+              testID={
+                ImportFromSeedSelectorsIDs.IMPORT_FROM_SEED_SCREEN_SUBMIT_BUTTON_ID
+              }
               disabled={!(password !== '' && password === confirmPassword)}
             >
               {loading ? (

diff --git a/app/components/Views/ImportPrivateKey/index.tsx b/app/components/Views/ImportPrivateKey/index.tsx
@@ -5,7 +5,6 @@ import {
   TextInput,
   Text,
   View,
-  Platform,
   ActivityIndicator,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
@@ -19,13 +18,7 @@ import Device from '../../../util/device';
 import { importAccountFromPrivateKey } from '../../../util/address';
 import { useAppTheme } from '../../../util/theme';
 import { createStyles } from './styles';
-import generateTestId from '../../../../wdio/utils/generateTestId';
-import {
-  IMPORT_ACCOUNT_SCREEN_ID,
-  IMPORT_PRIVATE_KEY_BUTTON_ID,
-  PRIVATE_KEY_INPUT_BOX_ID,
-  CLOSE_BUTTON_ON_IMPORT_ACCOUNT_SCREEN_ID,
-} from '../../../../wdio/screen-objects/testIDs/Screens/ImportAccountScreen.testIds';
+import { ImportAccountFromPrivateKeySelectorsIDs } from '../../../../e2e/selectors/ImportAccountFromPrivateKey.selectors';
 
 /**
  * View that's displayed the first time a user receives funds
@@ -126,22 +119,22 @@ const ImportPrivateKey = () => {
       <KeyboardAwareScrollView
         contentContainerStyle={styles.wrapper}
         style={styles.topOverlay}
-        testID={'first-incoming-transaction-screen'}
         resetScrollToCoords={{ x: 0, y: 0 }}
       >
         <View
           style={styles.content}
-          {...generateTestId(Platform, IMPORT_ACCOUNT_SCREEN_ID)}
+          testID={
+            ImportAccountFromPrivateKeySelectorsIDs.IMPORT_ACCOUNT_SCREEN_ID
+          }
         >
           <TouchableOpacity onPress={dismiss} style={styles.navbarRightButton}>
             <MaterialIcon
               name="close"
               size={15}
               style={styles.closeIcon}
-              {...generateTestId(
-                Platform,
-                CLOSE_BUTTON_ON_IMPORT_ACCOUNT_SCREEN_ID,
-              )}
+              testID={
+                ImportAccountFromPrivateKeySelectorsIDs.CLOSE_BUTTON_ON_IMPORT_ACCOUNT_SCREEN_ID
+              }
             />
           </TouchableOpacity>
           <View style={styles.top}>
@@ -172,7 +165,9 @@ const ImportPrivateKey = () => {
               multiline
               style={[styles.input, inputWidth ? { width: inputWidth } : {}]}
               onChangeText={setPrivateKey}
-              {...generateTestId(Platform, PRIVATE_KEY_INPUT_BOX_ID)}
+              testID={
+                ImportAccountFromPrivateKeySelectorsIDs.PRIVATE_KEY_INPUT_BOX_ID
+              }
               blurOnSubmit
               onSubmitEditing={() => goNext()}
               returnKeyType={'next'}
@@ -195,7 +190,9 @@ const ImportPrivateKey = () => {
             containerStyle={styles.button}
             type={'confirm'}
             onPress={() => goNext()}
-            {...generateTestId(Platform, IMPORT_PRIVATE_KEY_BUTTON_ID)}
+            testID={
+              ImportAccountFromPrivateKeySelectorsIDs.IMPORT_PRIVATE_KEY_BUTTON_ID
+            }
           >
             {loading ? (
               <ActivityIndicator size="small" color={colors.primary.inverse} />

diff --git a/app/components/Views/ImportPrivateKeySuccess/__snapshots__/index.test.tsx.snap b/app/components/Views/ImportPrivateKeySuccess/__snapshots__/index.test.tsx.snap
@@ -21,7 +21,6 @@ exports[`ImportPrivateKeySuccess should render correctly 1`] = `
         "flex": 1,
       }
     }
-    testID="first-incoming-transaction-screen"
   >
     <View
       style={

diff --git a/app/components/Views/ImportPrivateKeySuccess/index.js b/app/components/Views/ImportPrivateKeySuccess/index.js
@@ -7,7 +7,6 @@ import {
   StyleSheet,
   InteractionManager,
   BackHandler,
-  Platform,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { fontStyles } from '../../../styles/common';
@@ -17,11 +16,8 @@ import { strings } from '../../../../locales/i18n';
 import Device from '../../../util/device';
 import { ScreenshotDeterrent } from '../../UI/ScreenshotDeterrent';
 import { ThemeContext, mockTheme } from '../../../util/theme';
-import generateTestId from '../../../../wdio/utils/generateTestId';
-import {
-  IMPORT_SUCESS_SCREEN_ID,
-  IMPORT_SUCESS_SCREEN_CLOSE_BUTTON_ID,
-} from '../../../../wdio/screen-objects/testIDs/Screens/ImportSuccessScreen.testIds';
+
+import { ImportPrivateKeySuccessScreenSelectorsIDs } from '../../../../e2e/selectors/ImportPrivateKeySuccessScreen.selectors';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -122,19 +118,19 @@ class ImportPrivateKeySuccess extends PureComponent {
         <ScrollView
           contentContainerStyle={styles.wrapper}
           style={styles.mainWrapper}
-          testID={'first-incoming-transaction-screen'}
         >
           <View
             style={styles.content}
-            {...generateTestId(Platform, IMPORT_SUCESS_SCREEN_ID)}
+            testID={
+              ImportPrivateKeySuccessScreenSelectorsIDs.IMPORT_SUCESS_SCREEN_ID
+            }
           >
             <TouchableOpacity
               onPress={this.dismiss}
               style={styles.navbarRightButton}
-              {...generateTestId(
-                Platform,
-                IMPORT_SUCESS_SCREEN_CLOSE_BUTTON_ID,
-              )}
+              testID={
+                ImportPrivateKeySuccessScreenSelectorsIDs.IMPORT_SUCESS_SCREEN_CLOSE_BUTTON_ID
+              }
             >
               <MaterialIcon name="close" size={15} style={styles.closeIcon} />
             </TouchableOpacity>

diff --git a/e2e/pages/Onboarding/ImportWalletView.js b/e2e/pages/Onboarding/ImportWalletView.js
@@ -1,6 +1,5 @@
 import TestHelpers from '../../helpers';
 
-import { IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID } from '../../../wdio/screen-objects/testIDs/Screens/ImportFromSeedScreen.testIds';
 import { ChoosePasswordSelectorsIDs } from '../../selectors/Onboarding/ChoosePassword.selectors';
 import { ImportFromSeedSelectorsIDs } from '../../selectors/Onboarding/ImportFromSeed.selectors';
 
@@ -22,21 +21,25 @@ export default class ImportWalletView {
   static async enterSecretRecoveryPhrase(secretRecoveryPhrase) {
     if (device.getPlatform() === 'android') {
       await TestHelpers.replaceTextInField(
-        IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID,
+        ImportFromSeedSelectorsIDs.IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID,
         secretRecoveryPhrase,
       );
       await element(
-        by.id(IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID),
+        by.id(
+          ImportFromSeedSelectorsIDs.IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID,
+        ),
       ).tapReturnKey();
     } else {
       await TestHelpers.typeTextAndHideKeyboard(
-        IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID,
+        ImportFromSeedSelectorsIDs.IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID,
         secretRecoveryPhrase,
       );
     }
   }
   static async clearSecretRecoveryPhraseInputBox() {
-    await TestHelpers.clearField(IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID);
+    await TestHelpers.clearField(
+      ImportFromSeedSelectorsIDs.IMPORT_FROM_SEED_SCREEN_SEED_PHRASE_INPUT_ID,
+    );
   }
 
   // Assertions
-Original file line number
+Diff line change
@@ Expand Up @@
             "flex": 1,
           }
         }
-        testID="first-incoming-transaction-screen"
       >
         <View
           style={
@@ Expand Down @@