test: 1452 refactor modal pages batch 2

app/components/Base/DetailsModal.js

@@ -5,10 +5,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import { fontStyles } from '../../styles/common';
 import Text from './Text';
 import { useTheme } from '../../util/theme';
-import {
-  DETAILS_MODAL_TITLE,
-  DETAILS_MODAL_CLOSE_ICON,
-} from '../../../wdio/screen-objects/testIDs/Components/DetailsModal.js';
+import { TransactionDetailsModalSelectorsIDs } from '../../../e2e/selectors/Modals/TransactionDetailsModal.selectors';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -85,7 +82,7 @@ const DetailsModalTitle = ({ style, ...props }) => {
 
   return (
     <Text
-      testID={DETAILS_MODAL_TITLE}
+      testID={TransactionDetailsModalSelectorsIDs.TITLE}
       style={[styles.title, style]}
       {...props}
     />
@@ -99,7 +96,7 @@ const DetailsModalCloseIcon = ({ style, ...props }) => {
     <TouchableOpacity
       style={[styles.closeIcon, style]}
       {...props}
-      testID={DETAILS_MODAL_CLOSE_ICON}
+      testID={TransactionDetailsModalSelectorsIDs.CLOSE_ICON}
     >
       <Ionicons color={colors.text.default} name={'ios-close'} size={38} />
     </TouchableOpacity>
@@ -109,7 +106,13 @@ const DetailsModalBody = ({ style, ...props }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
 
-  return <View style={[styles.body, style]} {...props} />;
+  return (
+    <View
+      testID={TransactionDetailsModalSelectorsIDs.BODY}
+      style={[styles.body, style]}
+      {...props}
+    />
+  );
 };
 const DetailsModalSection = ({ style, borderBottom, ...props }) => {
   const { colors } = useTheme();

app/components/Base/StatusText.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native';
 import { FIAT_ORDER_STATES } from '../../constants/on-ramp';
 import { strings } from '../../../locales/i18n';
 import { useTheme } from '../../util/theme';
-import { DETAILS_MODAL_TITLE } from '../../../wdio/screen-objects/testIDs/Components/DetailsModal.js';
+import { CommonSelectorsIDs } from '../../../e2e/selectors/Common.selectors';
 
 const styles = StyleSheet.create({
   status: {
@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
 
 export const ConfirmedText = (props) => (
   <Text
-    testID={DETAILS_MODAL_TITLE}
+    testID={CommonSelectorsIDs.STATUS_CONFIRMED}
     bold
     green
     style={styles.status}

app/components/UI/NetworkModal/NetworkAdded/index.tsx

@@ -4,10 +4,8 @@ import StyledButton from '../../StyledButton';
 import { strings } from '../../../../../locales/i18n';
 import Text from '../../../Base/Text';
 import { useTheme } from '../../../../util/theme';
-import {
-  NEW_NETWORK_ADDED_SWITCH_TO_NETWORK_BUTTON,
-  NEW_NETWORK_ADDED_CLOSE_BUTTON,
-} from '../../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids';
+import { NetworkAddedModalSelectorsIDs } from '../../../../../e2e/selectors/Modals/NetworkAddedModal.selectors';
+
 const createStyles = (colors: any) =>
   StyleSheet.create({
     buttonView: {
@@ -54,7 +52,7 @@ const NetworkAdded = (props: NetworkAddedProps) => {
       <View style={styles.buttonView}>
         <StyledButton
           type={'cancel'}
-          testID={NEW_NETWORK_ADDED_CLOSE_BUTTON}
+          testID={NetworkAddedModalSelectorsIDs.CLOSE_NETWORK_BUTTON}
           onPress={closeModal}
           containerStyle={[styles.button, styles.cancel]}
         >
@@ -63,7 +61,7 @@ const NetworkAdded = (props: NetworkAddedProps) => {
         <StyledButton
           type={'confirm'}
           onPress={switchNetwork}
-          testID={NEW_NETWORK_ADDED_SWITCH_TO_NETWORK_BUTTON}
+          testID={NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON}
           containerStyle={[styles.button, styles.confirm]}
         >
           {strings('networks.switch_network')}

app/components/UI/Tabs/index.js

@@ -7,7 +7,6 @@ import {
   ScrollView,
   TouchableOpacity,
   StyleSheet,
-  Platform,
 } from 'react-native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import PropTypes from 'prop-types';
@@ -19,7 +18,6 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
 import AnalyticsV2 from '../../../util/analyticsV2';
 
 import { ThemeContext, mockTheme } from '../../../util/theme';
-import generateTestId from '../../../../wdio/utils/generateTestId';
 import {
   MULTI_TAB_ADD_BUTTON,
   MULTI_TAB_CLOSE_ALL_BUTTON,
@@ -231,10 +229,7 @@ export default class Tabs extends PureComponent {
 
     return (
       <View style={styles.noTabs}>
-        <Text
-          style={styles.noTabsTitle}
-          {...generateTestId(Platform, MULTI_TAB_NO_TABS_MESSAGE)}
-        >
+        <Text style={styles.noTabsTitle} testID={MULTI_TAB_NO_TABS_MESSAGE}>
           {strings('browser.no_tabs_title')}
         </Text>
         <Text style={styles.noTabsDesc}>{strings('browser.no_tabs_desc')}</Text>
@@ -287,7 +282,7 @@ export default class Tabs extends PureComponent {
         <TouchableOpacity
           style={[styles.tabAction, styles.tabActionleft]}
           onPress={closeAllTabs}
-          {...generateTestId(Platform, MULTI_TAB_CLOSE_ALL_BUTTON)}
+          testID={MULTI_TAB_CLOSE_ALL_BUTTON}
         >
           <Text
             style={[
@@ -302,7 +297,7 @@ export default class Tabs extends PureComponent {
           <TouchableOpacity
             style={styles.newTabIconButton}
             onPress={this.onNewTabPress}
-            {...generateTestId(Platform, MULTI_TAB_ADD_BUTTON)}
+            testID={MULTI_TAB_ADD_BUTTON}
           >
             <MaterialCommunityIcon
               name="plus"
@@ -315,7 +310,7 @@ export default class Tabs extends PureComponent {
         <TouchableOpacity
           style={[styles.tabAction, styles.tabActionRight]}
           onPress={closeTabsView}
-          {...generateTestId(Platform, MULTI_TAB_DONE_BUTTON)}
+          testID={MULTI_TAB_DONE_BUTTON}
         >
           <Text
             style={[

app/components/Views/AccountPermissions/AccountPermissionsConnected/AccountPermissionsConnected.tsx

@@ -140,10 +140,7 @@ const AccountPermissionsConnected = ({
   return (
     <>
       <SheetHeader title={strings('accounts.connected_accounts_title')} />
-      <View
-        style={styles.body}
-        testID={ConnectedAccountsSelectorsIDs.CONTAINER}
-      >
+      <View style={styles.body}>
         <TagUrl
           imageSource={favicon}
           label={urlWithProtocol}

e2e/pages/CommonView.js

@@ -18,7 +18,6 @@ class CommonView {
   get errorMessage() {
     return Matchers.getElementByID(CommonSelectorsIDs.ERROR_MESSAGE);
   }
-
   async tapBackButton() {
     await Gestures.waitAndTap(this.backButton);
   }

e2e/pages/modals/ConnectedAccountsModal.js

@@ -6,10 +6,6 @@ import Matchers from '../../utils/Matchers';
 import Gestures from '../../utils/Gestures';
 
 class ConnectedAccountsModal {
-  get container() {
-    return Matchers.getElementByID(ConnectedAccountsSelectorsIDs.CONTAINER);
-  }
-
   get permissionsButton() {
     return Matchers.getElementByText(
       ConnectedAccountModalSelectorsText.PERMISSION_LINK,
@@ -34,6 +30,10 @@ class ConnectedAccountsModal {
     );
   }
 
+  get title() {
+    return Matchers.getElementByText(ConnectedAccountModalSelectorsText.TITLE);
+  }
+
   async tapPermissionsButton() {
     await Gestures.waitAndTap(this.permissionsButton);
   }
@@ -50,7 +50,7 @@ class ConnectedAccountsModal {
   // }
 
   async scrollToBottomOfModal() {
-    await Gestures.swipe(this.container, 'down', 'fast');
+    await Gestures.swipe(this.title, 'down', 'fast');
   }
 
   async tapConnectMoreAccountsButton() {

e2e/pages/modals/DeleteWalletModal.js

@@ -1,38 +1,40 @@
-import TestHelpers from '../../helpers';
 import {
   DeleteWalletModalSelectorsIDs,
   DeleteWalletModalSelectorsText,
 } from '../../selectors/Modals/DeleteWalletModal.selectors';
-import { CommonSelectorsText } from '../../selectors/Common.selectors';
+import Matchers from '../../utils/Matchers';
+import Gestures from '../../utils/Gestures';
 
-export default class DeleteWalletModal {
-  static async tapIUnderstandButton() {
-    await TestHelpers.delay(2000);
-    await TestHelpers.tapByText(
+class DeleteWalletModal {
+  get container() {
+    return Matchers.getElementByID(DeleteWalletModalSelectorsIDs.CONTAINER);
+  }
+
+  get understandButton() {
+    return Matchers.getElementByText(
       DeleteWalletModalSelectorsText.UNDERSTAND_BUTTON,
     );
   }
 
-  static async tapCancelButton() {
-    await TestHelpers.tapByText(CommonSelectorsText.CANCEL_BUTTON);
+  get deleteWalletButton() {
+    return Matchers.getElementByText(DeleteWalletModalSelectorsText.DELETE_MY);
   }
-  static async tapDeleteMyWalletButton() {
-    await TestHelpers.tapByText(DeleteWalletModalSelectorsText.DELETE_MY);
+
+  get deleteInput() {
+    return Matchers.getElementByID(DeleteWalletModalSelectorsIDs.INPUT);
   }
-  static async typeDeleteInInputBox() {
-    await TestHelpers.typeTextAndHideKeyboard(
-      DeleteWalletModalSelectorsIDs.INPUT,
-      'delete',
-    );
+
+  async tapIUnderstandButton() {
+    await Gestures.waitAndTap(this.understandButton);
   }
 
-  static async isVisible() {
-    await TestHelpers.checkIfVisible(DeleteWalletModalSelectorsIDs.CONTAINER);
+  async tapDeleteMyWalletButton() {
+    await Gestures.waitAndTap(this.deleteWalletButton);
   }
 
-  static async isNotVisible() {
-    await TestHelpers.checkIfNotVisible(
-      DeleteWalletModalSelectorsIDs.CONTAINER,
-    );
+  async typeDeleteInInputBox() {
+    await Gestures.typeTextAndHideKeyboard(this.deleteInput, 'delete');
   }
 }
+
+export default new DeleteWalletModal();

e2e/pages/modals/DetailsModal.js

@@ -1,32 +1,43 @@
-import TestHelpers from '../../helpers';
 import {
-  DETAILS_MODAL_TITLE,
-  DETAILS_MODAL_STATUS_CONFIRMED,
-  DETAILS_MODAL_CLOSE_ICON,
-} from '../../../wdio/screen-objects/testIDs/Components/DetailsModal.js';
-import { TransactionDetailsModalSelectorsText } from '../../selectors/Modals/TransactionDetailsModal.selectors';
+  TransactionDetailsModalSelectorsText,
+  TransactionDetailsModalSelectorsIDs,
+} from '../../selectors/Modals/TransactionDetailsModal.selectors';
+import Matchers from '../../utils/Matchers';
+import Gestures from '../../utils/Gestures';
+import { CommonSelectorsIDs } from '../../selectors/Common.selectors';
 
-export default class DetailsModal {
-  static async isTitleVisible(sourceToken, destinationToken) {
-    let title = TransactionDetailsModalSelectorsText.TITLE;
-    title = title.replace('{{sourceToken}}', sourceToken);
-    title = title.replace('{{destinationToken}}', destinationToken);
-    await TestHelpers.checkIfElementHasString(DETAILS_MODAL_TITLE, title);
+class DetailsModal {
+  get title() {
+    return Matchers.getElementByID(TransactionDetailsModalSelectorsIDs.TITLE);
+  }
+
+  get closeIcon() {
+    return Matchers.getElementByID(
+      TransactionDetailsModalSelectorsIDs.CLOSE_ICON,
+    );
   }
 
-  static async isStatusCorrect(status) {
-    await TestHelpers.checkIfElementHasString(
-      DETAILS_MODAL_STATUS_CONFIRMED,
-      status,
+  get statusConfirmed() {
+    return Matchers.getElementIDWithAncestor(
+      CommonSelectorsIDs.STATUS_CONFIRMED,
+      TransactionDetailsModalSelectorsIDs.BODY,
     );
   }
 
-  static async tapOnCloseIcon() {
+  generateExpectedTitle(sourceToken, destinationToken) {
+    let title = TransactionDetailsModalSelectorsText.TITLE;
+    title = title.replace('{{sourceToken}}', sourceToken);
+    title = title.replace('{{destinationToken}}', destinationToken);
+    return title;
+  }
+
+  async tapOnCloseIcon() {
     try {
-      await TestHelpers.waitAndTap(DETAILS_MODAL_CLOSE_ICON);
-      await TestHelpers.delay(1000);
+      await Gestures.waitAndTap(this.closeIcon);
     } catch {
       //
     }
   }
 }
+
+export default new DetailsModal();

e2e/pages/modals/NetworkAddedModal.js

@@ -1,37 +1,44 @@
-import TestHelpers from '../../helpers';
 import {
   NetworkAddedModalSelectorsIDs,
   NetworkAddedModalSelectorsText,
 } from '../../selectors/Modals/NetworkAddedModal.selectors';
+import Matchers from '../../utils/Matchers';
+import Gestures from '../../utils/Gestures';
 
-export default class NetworkAddedModal {
-  static async tapSwitchToNetwork() {
-    await TestHelpers.tap(NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON);
+class NetworkAddedModal {
+  get switchNetwork() {
+    return Matchers.getElementByText(
+      NetworkAddedModalSelectorsText.SWITCH_NETWORK,
+    );
   }
-  static async tapCloseButton() {
-    await TestHelpers.tap(NetworkAddedModalSelectorsIDs.CLOSE_NETWORK_BUTTON);
+
+  get switchNetworkButton() {
+    return device.getPlatform() === 'android'
+      ? Matchers.getElementByLabel(
+          NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON,
+        )
+      : Matchers.getElementByID(
+          NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON,
+        );
   }
 
-  static async isVisible() {
-    await TestHelpers.checkIfElementWithTextIsVisible(
-      NetworkAddedModalSelectorsText.SWITCH_NETWORK,
-    );
+  get closeNetworkButton() {
+    return device.getPlatform() === 'android'
+      ? Matchers.getElementByLabel(
+          NetworkAddedModalSelectorsIDs.CLOSE_NETWORK_BUTTON,
+        )
+      : Matchers.getElementByID(
+          NetworkAddedModalSelectorsIDs.CLOSE_NETWORK_BUTTON,
+        );
   }
-  static async isNotVisible() {
-    await TestHelpers.checkIfElementWithTextIsVisible(
-      NetworkAddedModalSelectorsText.SWITCH_NETWORK,
-    );
+
+  async tapSwitchToNetwork() {
+    await Gestures.waitAndTap(this.switchNetworkButton);
   }
 
-  static async tapSwitchToNetworkButton() {
-    if (device.getPlatform() === 'android') {
-      await TestHelpers.waitAndTapByLabel(
-        NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON,
-      );
-    } else {
-      await TestHelpers.tap(
-        NetworkAddedModalSelectorsIDs.SWITCH_NETWORK_BUTTON,
-      );
-    }
+  async tapCloseButton() {
+    await Gestures.waitAndTap(this.closeNetworkButton);
   }
 }
+
+export default new NetworkAddedModal();