Refactor sendlinkviewjs and tokenoverviewjs page objects

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -1,10 +1,9 @@
 import { zeroAddress } from 'ethereumjs-util';
 import React, { useCallback, useEffect } from 'react';
-import { Platform, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { strings } from '../../../../locales/i18n';
-import { TOKEN_ASSET_OVERVIEW } from '../../../../wdio/screen-objects/testIDs/Screens/TokenOverviewScreen.testIds';
-import generateTestId from '../../../../wdio/utils/generateTestId';
+import { TokenOverviewSelectorsIDs } from '../../../../e2e/selectors/TokenOverview.selectors';
 import { newAssetTransaction } from '../../../actions/transaction';
 import AppConstants from '../../../core/AppConstants';
 import Engine from '../../../core/Engine';
@@ -261,7 +260,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   return (
     <View
       style={styles.wrapper}
-      {...generateTestId(Platform, TOKEN_ASSET_OVERVIEW)}
+      testID={TokenOverviewSelectorsIDs.CONTAINER}
     >
       {asset.hasBalanceError ? (
         renderWarning()

app/components/UI/AssetOverview/Price/Price.tsx

@@ -17,7 +17,7 @@ import Text, {
 import PriceChart from '../PriceChart/PriceChart';
 import { distributeDataPoints } from '../PriceChart/utils';
 import styleSheet from './Price.styles';
-import { TOKEN_PRICE } from '../../../../../wdio/screen-objects/testIDs/Screens/TokenOverviewScreen.testIds';
+import { TokenOverviewSelectorsIDs } from '../../../../../e2e/selectors/TokenOverview.selectors';
 import { TokenI } from '../../Tokens/types';
 
 interface PriceProps {
@@ -90,7 +90,7 @@ const Price = ({
           <Text variant={TextVariant.BodyMDMedium}>{asset.symbol}</Text>
         )}
         {!isNaN(price) && (
-          <Text testID={TOKEN_PRICE} variant={TextVariant.HeadingLG}>
+          <Text testID={TokenOverviewSelectorsIDs.TOKEN_PRICE} variant={TextVariant.HeadingLG}>
             {isLoading ? (
               <View style={styles.loadingPrice}>
                 <SkeletonPlaceholder>

app/components/UI/Navbar/index.js

@@ -1118,7 +1118,7 @@ export function getImportTokenNavbarOptions(
       // eslint-disable-next-line react/jsx-no-bind
       <TouchableOpacity
         style={styles.backButton}
-        testID={ImportTokenViewSelectorsIDs.BACK_BUTTON}
+        testID={CommonSelectorsIDs.BACK_ARROW_BUTTON}
       >
         <ButtonIcon
           iconName={IconName.Close}
@@ -1177,7 +1177,7 @@ export function getNftDetailsNavbarOptions(
       <TouchableOpacity
         onPress={() => navigation.pop()}
         style={styles.backButton}
-        testID={ImportTokenViewSelectorsIDs.BACK_BUTTON}
+        testID={CommonSelectorsIDs.BACK_ARROW_BUTTON}
       >
         <Icon
           name={IconName.ArrowLeft}
@@ -1300,7 +1300,7 @@ export function getNetworkNavbarOptions(
       <TouchableOpacity
         onPress={() => navigation.pop()}
         style={styles.backButton}
-        testID={ImportTokenViewSelectorsIDs.BACK_BUTTON}
+        testID={CommonSelectorsIDs.BACK_ARROW_BUTTON}
       >
         <IonicIcon
           name={'ios-close'}

app/components/UI/Transactions/index.js

@@ -69,7 +69,6 @@ import {
 } from '../../../core/Transaction/TransactionError';
 import { getDeviceId } from '../../../core/Ledger/Ledger';
 import ExtendedKeyringTypes from '../../../constants/keyringTypes';
-import { TOKEN_OVERVIEW_TXN_SCREEN } from '../../../../wdio/screen-objects/testIDs/Screens/TokenOverviewScreen.testIds';
 import {
   speedUpTransaction,
   updateIncomingTransactions,
@@ -855,7 +854,7 @@ class Transactions extends PureComponent {
 
     return (
       <PriceChartProvider>
-        <View style={styles.wrapper} testID={TOKEN_OVERVIEW_TXN_SCREEN}>
+        <View style={styles.wrapper}>
           {!this.state.ready || this.props.loading
             ? this.renderLoader()
             : this.renderList()}

app/components/Views/AssetDetails/AssetDetailsActions/AssetDetailsActions.test.tsx

@@ -2,13 +2,7 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
 import AssetDetailsActions from './AssetDetailsActions';
 import { strings } from '../../../../../locales/i18n';
-import {
-  TOKEN_OVERVIEW_BRIDGE_BUTTON,
-  TOKEN_OVERVIEW_BUY_BUTTON,
-  TOKEN_OVERVIEW_RECEIVE_BUTTON,
-  TOKEN_OVERVIEW_SEND_BUTTON,
-  TOKEN_OVERVIEW_SWAP_BUTTON,
-} from '../../../../../wdio/screen-objects/testIDs/Screens/TokenOverviewScreen.testIds';
+import { TokenOverviewSelectorsIDs } from '../../../../../e2e/selectors/TokenOverview.selectors';
 
 describe('AssetDetailsActions', () => {
   const mockOnBuy = jest.fn();
@@ -49,35 +43,35 @@ describe('AssetDetailsActions', () => {
   it('calls onBuy when the buy button is pressed', () => {
     const { getByTestId } = render(<AssetDetailsActions {...defaultProps} />);
 
-    fireEvent.press(getByTestId(TOKEN_OVERVIEW_BUY_BUTTON));
+    fireEvent.press(getByTestId(TokenOverviewSelectorsIDs.BUY_BUTTON));
     expect(mockOnBuy).toHaveBeenCalled();
   });
 
   it('calls goToSwaps when the swap button is pressed', () => {
     const { getByTestId } = render(<AssetDetailsActions {...defaultProps} />);
 
-    fireEvent.press(getByTestId(TOKEN_OVERVIEW_SWAP_BUTTON));
+    fireEvent.press(getByTestId(TokenOverviewSelectorsIDs.SWAP_BUTTON));
     expect(mockGoToSwaps).toHaveBeenCalled();
   });
 
   it('calls goToBridge when the bridge button is pressed', () => {
     const { getByTestId } = render(<AssetDetailsActions {...defaultProps} />);
 
-    fireEvent.press(getByTestId(TOKEN_OVERVIEW_BRIDGE_BUTTON));
+    fireEvent.press(getByTestId(TokenOverviewSelectorsIDs.BRIDGE_BUTTON));
     expect(mockGoToBridge).toHaveBeenCalled();
   });
 
   it('calls onSend when the send button is pressed', () => {
     const { getByTestId } = render(<AssetDetailsActions {...defaultProps} />);
 
-    fireEvent.press(getByTestId(TOKEN_OVERVIEW_SEND_BUTTON));
+    fireEvent.press(getByTestId(TokenOverviewSelectorsIDs.SEND_BUTTON));
     expect(mockOnSend).toHaveBeenCalled();
   });
 
   it('calls onReceive when the receive button is pressed', () => {
     const { getByTestId } = render(<AssetDetailsActions {...defaultProps} />);
 
-    fireEvent.press(getByTestId(TOKEN_OVERVIEW_RECEIVE_BUTTON));
+    fireEvent.press(getByTestId(TokenOverviewSelectorsIDs.RECEIVE_BUTTON));
     expect(mockOnReceive).toHaveBeenCalled();
   });
 

app/components/Views/AssetDetails/AssetDetailsActions/AssetDetailsActions.tsx

@@ -1,22 +1,15 @@
 import React from 'react';
-import { View, Platform } from 'react-native';
+import { View } from 'react-native';
 import styleSheet from './AssetDetailsActions.styles';
 import { useStyles } from '../../../../component-library/hooks';
 import WalletAction from '../../../../components/UI/WalletAction';
 import { strings } from '../../../../../locales/i18n';
-import generateTestId from '../../../../../wdio/utils/generateTestId';
 import { IconName } from '../../../../component-library/components/Icons/Icon';
 import { AvatarSize } from '../../../../component-library/components/Avatars/Avatar';
 import Text, {
   TextVariant,
 } from '../../../../component-library/components/Texts/Text';
-import {
-  TOKEN_OVERVIEW_BRIDGE_BUTTON,
-  TOKEN_OVERVIEW_BUY_BUTTON,
-  TOKEN_OVERVIEW_RECEIVE_BUTTON,
-  TOKEN_OVERVIEW_SEND_BUTTON,
-  TOKEN_OVERVIEW_SWAP_BUTTON,
-} from '../../../../../wdio/screen-objects/testIDs/Screens/TokenOverviewScreen.testIds';
+import { TokenOverviewSelectorsIDs } from '../../../../../e2e/selectors/TokenOverview.selectors';
 
 export interface AssetDetailsActionsProps {
   displayBuyButton: boolean | undefined;
@@ -49,7 +42,7 @@ export const AssetDetailsActions: React.FC<AssetDetailsActionsProps> = ({
             onPress={onBuy}
             iconStyle={styles.icon}
             containerStyle={styles.containerStyle}
-            {...generateTestId(Platform, TOKEN_OVERVIEW_BUY_BUTTON)}
+            testID={TokenOverviewSelectorsIDs.BUY_BUTTON}
           />
           <Text variant={TextVariant.BodyMD}>
             {strings('asset_overview.buy_button')}
@@ -65,7 +58,7 @@ export const AssetDetailsActions: React.FC<AssetDetailsActionsProps> = ({
             onPress={goToSwaps}
             iconStyle={styles.icon}
             containerStyle={styles.containerStyle}
-            {...generateTestId(Platform, TOKEN_OVERVIEW_SWAP_BUTTON)}
+            testID={TokenOverviewSelectorsIDs.SWAP_BUTTON}
           />
           <Text variant={TextVariant.BodyMD}>
             {strings('asset_overview.swap')}
@@ -80,7 +73,7 @@ export const AssetDetailsActions: React.FC<AssetDetailsActionsProps> = ({
           onPress={goToBridge}
           iconStyle={styles.icon}
           containerStyle={styles.containerStyle}
-          {...generateTestId(Platform, TOKEN_OVERVIEW_BRIDGE_BUTTON)}
+          testID={TokenOverviewSelectorsIDs.BRIDGE_BUTTON}
         />
         <Text variant={TextVariant.BodyMD}>
           {strings('asset_overview.bridge')}
@@ -93,7 +86,7 @@ export const AssetDetailsActions: React.FC<AssetDetailsActionsProps> = ({
           onPress={onSend}
           iconStyle={styles.icon}
           containerStyle={styles.containerStyle}
-          {...generateTestId(Platform, TOKEN_OVERVIEW_SEND_BUTTON)}
+          testID={TokenOverviewSelectorsIDs.SEND_BUTTON}
         />
         <Text variant={TextVariant.BodyMD}>
           {strings('asset_overview.send_button')}
@@ -106,7 +99,7 @@ export const AssetDetailsActions: React.FC<AssetDetailsActionsProps> = ({
           onPress={onReceive}
           iconStyle={styles.icon}
           containerStyle={styles.containerStyle}
-          {...generateTestId(Platform, TOKEN_OVERVIEW_RECEIVE_BUTTON)}
+          testID={TokenOverviewSelectorsIDs.RECEIVE_BUTTON}
         />
         <Text variant={TextVariant.BodyMD}>
           {strings('asset_overview.receive_button')}

e2e/pages/SendLinkView.js

@@ -1,34 +1,42 @@
-import TestHelpers from '../helpers';
+import Matchers from '../utils/Matchers';
+import Gestures from '../utils/Gestures';
 import { SendLinkViewSelectorsIDs } from '../selectors/SendLinkView.selectors';
 
-export default class SendLinkView {
-  static async tapQRCodeButton() {
-    if (device.getPlatform() === 'android') {
-      await TestHelpers.waitAndTapByLabel(
-        SendLinkViewSelectorsIDs.QR_CODE_BUTTON,
-      );
-    } else {
-      await TestHelpers.tap(SendLinkViewSelectorsIDs.QR_CODE_BUTTON);
-    }
+class SendLinkView {
+  get container() {
+    return Matchers.getElementByID(SendLinkViewSelectorsIDs.CONTAINER_ID);
   }
 
-  static async isVisible() {
-    await TestHelpers.checkIfVisible(SendLinkViewSelectorsIDs.CONTAINER_ID);
+  get qrModal() {
+    return Matchers.getElementByID(SendLinkViewSelectorsIDs.QR_MODAL);
   }
 
-  static async isNotVisible() {
-    await TestHelpers.checkIfNotVisible(SendLinkViewSelectorsIDs.CONTAINER_ID);
+  get qrCloseButton() {
+    return Matchers.getElementByID(SendLinkViewSelectorsIDs.CLOSE_QR_MODAL_BUTTON);
   }
-  static async tapCloseSendLinkButton() {
-    await TestHelpers.tap(SendLinkViewSelectorsIDs.CLOSE_SEND_LINK_VIEW_BUTTON);
+
+  get closeSendLinkButton() {
+    return Matchers.getElementByID(SendLinkViewSelectorsIDs.CLOSE_SEND_LINK_VIEW_BUTTON);
   }
 
-  // QR Modal
-  static async tapQRCodeCloseButton() {
-    await TestHelpers.tap(SendLinkViewSelectorsIDs.CLOSE_QR_MODAL_BUTTON);
+  get qrCodeButton() {
+    return device.getPlatform() === 'android'
+      ? Matchers.getElementByLabel(SendLinkViewSelectorsIDs.QR_CODE_BUTTON)
+      : Matchers.getElementByID(SendLinkViewSelectorsIDs.QR_CODE_BUTTON);
+  }
+
+  async tapQRCodeButton() {
+    await Gestures.waitAndTap(this.qrCodeButton);
   }
 
-  static async isQRModalVisible() {
-    await TestHelpers.checkIfVisible(SendLinkViewSelectorsIDs.QR_MODAL);
+  async tapCloseSendLinkButton() {
+    await Gestures.waitAndTap(this.closeSendLinkButton);
+  }
+
+  // QR Modal
+  async tapQRCodeCloseButton() {
+    await Gestures.waitAndTap(this.qrCloseButton);
   }
 }
+
+export default new SendLinkView();