test: 1453 refactor modal pages batch 3

app/components/UI/NetworkInfo/index.tsx

@@ -1,16 +1,12 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 import React, { useMemo } from 'react';
-import { View, Text, StyleSheet, Platform } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import StyledButton from '../StyledButton';
 import { strings } from '../../../../locales/i18n';
 import { RPC } from '../../../constants/network';
 import { connect, useSelector } from 'react-redux';
 import Description from './InfoDescription';
 import { useTheme } from '../../../util/theme';
-import {
-  NETWORK_EDUCATION_MODAL_CONTAINER_ID,
-  NETWORK_EDUCATION_MODAL_NETWORK_NAME_ID,
-} from '../../../../wdio/screen-objects/testIDs/Components/NetworkEducationModalTestIds';
 import { fontStyles } from '../../../styles/common';
 import { isTokenDetectionSupportedForNetwork } from '@metamask/assets-controllers/dist/assetsUtil';
 import { NETWORK_EDUCATION_MODAL_CLOSE_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids.js';
@@ -23,7 +19,7 @@ import {
 import Avatar, {
   AvatarVariant,
 } from '../../../component-library/components/Avatars/Avatar';
-import generateTestId from '../../../../wdio/utils/generateTestId';
+import { NetworkEducationModalSelectorsIDs } from '../../../../e2e/selectors/Modals/NetworkEducationModal.selectors';
 
 const createStyles = (colors: {
   background: { default: string };
@@ -148,7 +144,7 @@ const NetworkInfo = (props: NetworkInfoProps) => {
     <View style={styles.wrapper}>
       <View
         style={styles.modalContentView}
-        {...generateTestId(Platform, NETWORK_EDUCATION_MODAL_CONTAINER_ID)}
+        testID={NetworkEducationModalSelectorsIDs.CONTAINER}
       >
         <Text style={styles.title}>
           {strings('network_information.switched_network')}
@@ -162,10 +158,7 @@ const NetworkInfo = (props: NetworkInfoProps) => {
             />
             <Text
               style={styles.tokenText}
-              {...generateTestId(
-                Platform,
-                NETWORK_EDUCATION_MODAL_NETWORK_NAME_ID,
-              )}
+              testID={NetworkEducationModalSelectorsIDs.NETWORK_NAME}
             >
               {networkName}
             </Text>

app/components/UI/OnboardingWizard/Coachmark/index.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Animated, Platform, StyleSheet, Text, View } from 'react-native';
+import { Animated, StyleSheet, Text, View } from 'react-native';
 import {
   colors as importedColors,
   fontStyles,
@@ -20,13 +20,7 @@ import {
   ButtonWidthTypes,
 } from '../../../../component-library/components/Buttons/Button';
 import Button from '../../../../component-library/components/Buttons/Button/Button';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
-import {
-  ONBOARDING_WIZARD_BACK_BUTTON,
-  ONBOARDING_WIZARD_NEXT_GOT_IT_BUTTON,
-  ONBOARDING_WIZARD_STEP_1_NO_THANKS_ID,
-  ONBOARDING_WIZARD_STEP_1_TAKE_THE_TOUR_ID,
-} from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
+import { OnboardingWizardModalSelectorsIDs } from '../../../../../e2e/selectors/Modals/OnboardingWizardModal.selectors';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -336,7 +330,7 @@ export default class Coachmark extends PureComponent {
           containerStyle={[styles.progressButton, styles.rightProgessButton]}
           type={'inverse'}
           onPress={this.onNext}
-          testID={ONBOARDING_WIZARD_NEXT_GOT_IT_BUTTON}
+          testID={OnboardingWizardModalSelectorsIDs.GOT_IT_BUTTON}
         >
           {strings('onboarding_wizard_new.coachmark.progress_next')}
         </StyledButton>
@@ -361,7 +355,7 @@ export default class Coachmark extends PureComponent {
           label={strings('onboarding_wizard_new.coachmark.action_back')}
           style={styles.actionButtonPrimary}
           variant={ButtonVariants.Primary}
-          {...generateTestId(Platform, ONBOARDING_WIZARD_STEP_1_NO_THANKS_ID)}
+          testID={OnboardingWizardModalSelectorsIDs.NO_THANKS_BUTTON}
         />
 
         <Button
@@ -371,10 +365,7 @@ export default class Coachmark extends PureComponent {
           label={strings('onboarding_wizard_new.coachmark.action_next')}
           variant={ButtonVariants.Secondary}
           style={styles.actionButtonSecondary}
-          {...generateTestId(
-            Platform,
-            ONBOARDING_WIZARD_STEP_1_TAKE_THE_TOUR_ID,
-          )}
+          testID={OnboardingWizardModalSelectorsIDs.TAKE_TOUR_BUTTON}
         />
       </View>
     );
@@ -410,7 +401,7 @@ export default class Coachmark extends PureComponent {
                 size={IconSize.Sm}
                 onPress={this.onBack}
                 iconColorOverride={colors.primary.inverse}
-                {...generateTestId(Platform, ONBOARDING_WIZARD_BACK_BUTTON)}
+                testID={OnboardingWizardModalSelectorsIDs.BACK_BUTTON}
               />
             ) : (
               <View />

app/components/UI/OnboardingWizard/Step1/index.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { View, Text, StyleSheet, Platform } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import Coachmark from '../Coachmark';
 import Device from '../../../../util/device';
 import setOnboardingWizardStep from '../../../../actions/wizard';
@@ -13,8 +13,7 @@ import {
 } from '../../../../core/Analytics';
 
 import { ThemeContext, mockTheme } from '../../../../util/theme';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
-import { ONBOARDING_WIZARD_STEP_1_CONTAINER_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
+import { OnboardingWizardModalSelectorsIDs } from '../../../../../e2e/selectors/Modals/OnboardingWizardModal.selectors';
 import { withMetricsAwareness } from '../../../../components/hooks/useMetrics';
 
 const styles = StyleSheet.create({
@@ -90,7 +89,7 @@ class Step1 extends PureComponent {
     return (
       <View
         style={styles.main}
-        {...generateTestId(Platform, ONBOARDING_WIZARD_STEP_1_CONTAINER_ID)}
+        testID={OnboardingWizardModalSelectorsIDs.STEP_ONE_CONTAINER}
       >
         <View style={styles.coachmarkContainer}>
           <Coachmark

app/components/UI/OnboardingWizard/Step2/index.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Platform, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
 import { strings } from '../../../../../locales/i18n';
@@ -11,8 +11,7 @@ import {
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../../core/Analytics';
 import { mockTheme, ThemeContext } from '../../../../util/theme';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
-import { ONBOARDING_WIZARD_SECOND_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
+import { OnboardingWizardModalSelectorsIDs } from '../../../../../e2e/selectors/Modals/OnboardingWizardModal.selectors';
 import { withMetricsAwareness } from '../../../../components/hooks/useMetrics';
 
 const styles = StyleSheet.create({
@@ -121,10 +120,7 @@ class Step2 extends PureComponent {
       <View style={dynamicOnboardingStyles.contentContainer}>
         <Text
           style={dynamicOnboardingStyles.content}
-          {...generateTestId(
-            Platform,
-            ONBOARDING_WIZARD_SECOND_STEP_CONTENT_ID,
-          )}
+          testID={OnboardingWizardModalSelectorsIDs.STEP_TWO_CONTAINER}
         >
           {strings('onboarding_wizard_new.step2.content1')}
         </Text>

app/components/UI/OnboardingWizard/Step3/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Dimensions, Platform, StyleSheet, Text, View } from 'react-native';
+import { Dimensions, StyleSheet, Text, View } from 'react-native';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
 import { strings } from '../../../../../locales/i18n';
@@ -11,14 +11,13 @@ import {
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../../core/Analytics';
 import { useTheme } from '../../../../util/theme';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
-import { ONBOARDING_WIZARD_THIRD_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
 import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
 import { selectAccounts } from '../../../../selectors/accountTrackerController';
 import {
   selectIdentities,
   selectSelectedAddress,
 } from '../../../../selectors/preferencesController';
+import { OnboardingWizardModalSelectorsIDs } from '../../../../../e2e/selectors/Modals/OnboardingWizardModal.selectors';
 import { useMetrics } from '../../../../components/hooks/useMetrics';
 
 const styles = StyleSheet.create({
@@ -94,7 +93,7 @@ const Step3 = ({ setOnboardingWizardStep, coachmarkRef, onClose }) => {
       <View style={dynamicOnboardingStyles.contentContainer}>
         <Text
           style={dynamicOnboardingStyles.content}
-          {...generateTestId(Platform, ONBOARDING_WIZARD_THIRD_STEP_CONTENT_ID)}
+          testID={OnboardingWizardModalSelectorsIDs.STEP_THREE_CONTAINER}
         >
           {strings('onboarding_wizard_new.step3.content1')}
         </Text>

app/components/UI/OnboardingWizard/Step4/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Dimensions, Platform, StyleSheet, Text, View } from 'react-native';
+import { Dimensions, StyleSheet, Text, View } from 'react-native';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
 import { strings } from '../../../../../locales/i18n';
@@ -11,8 +11,7 @@ import {
   ONBOARDING_WIZARD_STEP_DESCRIPTION,
 } from '../../../../core/Analytics';
 import { useTheme } from '../../../../util/theme';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
-import { ONBOARDING_WIZARD_FOURTH_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
+import { OnboardingWizardModalSelectorsIDs } from '../../../../../e2e/selectors/Modals/OnboardingWizardModal.selectors';
 import { useMetrics } from '../../../../components/hooks/useMetrics';
 
 const styles = StyleSheet.create({
@@ -82,7 +81,7 @@ const Step4 = (props) => {
     <View style={dynamicOnboardingStyles.contentContainer}>
       <Text
         style={dynamicOnboardingStyles.content}
-        {...generateTestId(Platform, ONBOARDING_WIZARD_FOURTH_STEP_CONTENT_ID)}
+        testID={OnboardingWizardModalSelectorsIDs.STEP_FOUR_CONTAINER}
       >
         {strings('onboarding_wizard_new.step4.content1')}
       </Text>

app/components/UI/OnboardingWizard/Step5/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Dimensions, Platform, StyleSheet, Text, View } from 'react-native';
+import { Dimensions, StyleSheet, Text, View } from 'react-native';
 import { colors as importedColors } from '../../../../styles/common';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
@@ -13,8 +13,7 @@ import {
 } from '../../../../core/Analytics';
 import { useTheme } from '../../../../util/theme';
 import { createBrowserNavDetails } from '../../../Views/Browser';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
-import { ONBOARDING_WIZARD_FIFTH_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
+import { OnboardingWizardModalSelectorsIDs } from '../../../../../e2e/selectors/Modals/OnboardingWizardModal.selectors';
 import { useMetrics } from '../../../../components/hooks/useMetrics';
 
 const WIDTH = Dimensions.get('window').width;
@@ -81,7 +80,7 @@ const Step5 = (props) => {
     <View style={dynamicOnboardingStyles.contentContainer}>
       <Text
         style={dynamicOnboardingStyles.content}
-        {...generateTestId(Platform, ONBOARDING_WIZARD_FIFTH_STEP_CONTENT_ID)}
+        testID={OnboardingWizardModalSelectorsIDs.STEP_FIVE_CONTAINER}
       >
         {strings('onboarding_wizard_new.step5.content1')}
       </Text>

app/components/UI/OnboardingWizard/Step6/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Platform, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
 import { strings } from '../../../../../locales/i18n';
@@ -13,8 +13,7 @@ import {
 } from '../../../../core/Analytics';
 import { useTheme } from '../../../../util/theme';
 import Routes from '../../../../constants/navigation/Routes';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
-import { ONBOARDING_WIZARD_SIXTH_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
+import { OnboardingWizardModalSelectorsIDs } from '../../../../../e2e/selectors/Modals/OnboardingWizardModal.selectors';
 import { useMetrics } from '../../../../components/hooks/useMetrics';
 
 const styles = StyleSheet.create({
@@ -81,7 +80,7 @@ const Step6 = (props) => {
     <View style={dynamicOnboardingStyles.contentContainer}>
       <Text
         style={dynamicOnboardingStyles.content}
-        {...generateTestId(Platform, ONBOARDING_WIZARD_SIXTH_STEP_CONTENT_ID)}
+        testID={OnboardingWizardModalSelectorsIDs.STEP_SIX_CONTAINER}
       >
         {strings('onboarding_wizard_new.step6.content1')}
       </Text>

app/components/Views/NetworkSelector/NetworkSelector.tsx

@@ -1,6 +1,6 @@
 // Third party dependencies.
 import React, { useRef } from 'react';
-import { Platform, Switch, View } from 'react-native';
+import { Switch, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import images from 'images/image-icons';
 import { useNavigation } from '@react-navigation/native';
@@ -39,12 +39,7 @@ import {
 import Engine from '../../../core/Engine';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import Routes from '../../../constants/navigation/Routes';
-import generateTestId from '../../../../wdio/utils/generateTestId';
-import { ADD_NETWORK_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids';
-import {
-  NETWORK_SCROLL_ID,
-  NETWORK_TEST_SWITCH_ID,
-} from '../../../../wdio/screen-objects/testIDs/Components/NetworkListModal.TestIds';
+import { NetworkListModalSelectorsIDs } from '../../../../e2e/selectors/Modals/NetworkListModal.selectors';
 import { useTheme } from '../../../util/theme';
 import Text from '../../../component-library/components/Texts/Text/Text';
 import {
@@ -233,7 +228,7 @@ const NetworkSelector = () => {
         }}
         thumbColor={theme.brandColors.white['000']}
         ios_backgroundColor={colors.border.muted}
-        {...generateTestId(Platform, NETWORK_TEST_SWITCH_ID)}
+        testID={NetworkListModalSelectorsIDs.TEST_SWITCH}
         disabled={isTestNet(providerConfig.chainId)}
       />
     </View>
@@ -242,7 +237,7 @@ const NetworkSelector = () => {
   return (
     <BottomSheet ref={sheetRef}>
       <SheetHeader title={strings('networks.select_network')} />
-      <ScrollView {...generateTestId(Platform, NETWORK_SCROLL_ID)}>
+      <ScrollView testID={NetworkListModalSelectorsIDs.SCROLL}>
         {renderMainnet()}
         {renderLineaMainnet()}
         {renderRpcNetworks()}
@@ -257,7 +252,7 @@ const NetworkSelector = () => {
         width={ButtonWidthTypes.Full}
         size={ButtonSize.Lg}
         style={styles.addNetworkButton}
-        {...generateTestId(Platform, ADD_NETWORK_BUTTON)}
+        testID={NetworkListModalSelectorsIDs.ADD_BUTTON}
       />
     </BottomSheet>
   );

e2e/pages/Settings/Contacts/AddContactView.js

@@ -36,6 +36,10 @@ class AddContactView {
     return Matchers.getElementByID(AddContactViewSelectorsIDs.NAME_INPUT);
   }
 
+  get memoLabel() {
+    return Matchers.getElementByText(AddContactViewSelectorsText.MEMO);
+  }
+
   get memoInput() {
     return Matchers.getElementByID(AddContactViewSelectorsIDs.MEMO_INPUT);
   }
@@ -66,6 +70,7 @@ class AddContactView {
 
   async typeInMemo(memo) {
     await Gestures.replaceTextInField(this.memoInput, memo);
+    await Gestures.waitAndTap(this.memoLabel);
   }
 
   async typeInAddress(address) {

e2e/pages/modals/ConnectModal.js

@@ -4,14 +4,15 @@ import {
 } from '../../selectors/Modals/ConnectAccountModal.selectors';
 import Matchers from '../../utils/Matchers';
 import Gestures from '../../utils/Gestures';
+import { CommonSelectorsIDs } from '../../selectors/Common.selectors';
 
 class ConnectModal {
   get container() {
     return Matchers.getElementByID(ConnectAccountModalSelectorsIDs.CONTAINER);
   }
 
   get connectButton() {
-    return Matchers.getElementByID(ConnectAccountModalSelectorsIDs.CONTAINER);
+    return Matchers.getElementByID(CommonSelectorsIDs.CONNECT_BUTTON);
   }
 
   get connectAccountsButton() {