test: Refactor SendLinkView.js & TokenOverview.js files to follow pag…

…e object model (#11986)

<!--
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.

Files inside the scope for this batch:

- SendLinkView.js
- TokenOverview.js

## **Related issues**

Fixes:

## **Manual testing steps**

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

## **Screenshots/Recordings**

Regression Test run:
https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/73c51633-f930-4f5f-874e-1d7338f508ee

### **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/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/Asset/__snapshots__/index.test.js.snap

@@ -16,7 +16,6 @@ exports[`Asset should render correctly 1`] = `
         "flex": 1,
       }
     }
-    testID="txn-screen"
   >
     <View
       style={

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)}
+            actionID={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)}
+            actionID={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)}
+          actionID={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)}
+          actionID={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)}
+          actionID={TokenOverviewSelectorsIDs.RECEIVE_BUTTON}
         />
         <Text variant={TextVariant.BodyMD}>
           {strings('asset_overview.receive_button')}

e2e/pages/Receive/PaymentRequestQrModal.js

@@ -0,0 +1,19 @@
+import Matchers from '../../utils/Matchers';
+import Gestures from '../../utils/Gestures';
+import { SendLinkViewSelectorsIDs } from '../../selectors/SendLinkView.selectors';
+
+class PaymentRequestQrModal {
+  get container() {
+    return Matchers.getElementByID(SendLinkViewSelectorsIDs.QR_MODAL);
+  }
+
+  get closeButton() {
+    return Matchers.getElementByID(SendLinkViewSelectorsIDs.CLOSE_QR_MODAL_BUTTON);
+  }
+
+  async tapCloseButton() {
+    await Gestures.waitAndTap(this.closeButton);
+  }
+}
+
+export default new PaymentRequestQrModal();

e2e/pages/Receive/SendLinkView.js

@@ -0,0 +1,33 @@
+import Matchers from '../../utils/Matchers';
+import Gestures from '../../utils/Gestures';
+import { SendLinkViewSelectorsIDs } from '../../selectors/SendLinkView.selectors';
+
+class SendLinkView {
+  get container() {
+    return Matchers.getElementByID(SendLinkViewSelectorsIDs.CONTAINER_ID);
+  }
+
+  get qrModal() {
+    return Matchers.getElementByID(SendLinkViewSelectorsIDs.QR_MODAL);
+  }
+
+  get closeSendLinkButton() {
+    return Matchers.getElementByID(SendLinkViewSelectorsIDs.CLOSE_SEND_LINK_VIEW_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);
+  }
+
+  async tapCloseSendLinkButton() {
+    await Gestures.waitAndTap(this.closeSendLinkButton);
+  }
+}
+
+export default new SendLinkView();