test: add connect to Portfolio (#10015)

<!--
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**
Automate scenario for connecting wallet to Portfolio by tapping on
Portfolio button on Wallet view.


## **Related issues**

Related: MetaMask/mobile-planning#1728

## **Manual testing steps**

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

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **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.

---------

Co-authored-by: SamuelSalas <[email protected]>

app/components/UI/Tokens/index.test.tsx

@@ -11,15 +11,11 @@ import {
   IMPORT_TOKEN_BUTTON_ID,
   MAIN_WALLET_VIEW_VIA_TOKENS_ID,
 } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
-import {
-  PORTFOLIO_BUTTON,
-  STAKE_BUTTON,
-  TOTAL_BALANCE_TEXT,
-} from '../../../../wdio/screen-objects/testIDs/Components/Tokens.testIds';
 import initialBackgroundState from '../../../util/test/initial-background-state.json';
 import { strings } from '../../../../locales/i18n';
 import AppConstants from '../../../../app/core/AppConstants';
 import Routes from '../../../../app/constants/navigation/Routes';
+import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
 
 const mockEngine = Engine;
 
@@ -190,17 +186,19 @@ describe('Tokens', () => {
   it('fiat balance must be defined', () => {
     const { getByTestId } = renderComponent(initialState);
 
-    expect(getByTestId(TOTAL_BALANCE_TEXT)).toBeDefined();
+    expect(
+      getByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT),
+    ).toBeDefined();
   });
   it('portfolio button should render correctly', () => {
     const { getByTestId } = renderComponent(initialState);
 
-    expect(getByTestId(PORTFOLIO_BUTTON)).toBeDefined();
+    expect(getByTestId(WalletViewSelectorsIDs.PORTFOLIO_BUTTON)).toBeDefined();
   });
   it('navigates to Portfolio url when portfolio button is pressed', () => {
     const { getByTestId } = renderComponent(initialState);
 
-    fireEvent.press(getByTestId(PORTFOLIO_BUTTON));
+    fireEvent.press(getByTestId(WalletViewSelectorsIDs.PORTFOLIO_BUTTON));
     expect(mockNavigate).toHaveBeenCalledWith(Routes.BROWSER.HOME, {
       params: {
         newTabUrl: `${AppConstants.PORTFOLIO.URL}/?metamaskEntry=mobile`,
@@ -258,12 +256,12 @@ describe('Tokens', () => {
   it('renders stake button correctly', () => {
     const { getByTestId } = renderComponent(initialState);
 
-    expect(getByTestId(STAKE_BUTTON)).toBeDefined();
+    expect(getByTestId(WalletViewSelectorsIDs.STAKE_BUTTON)).toBeDefined();
   });
   it('navigates to Portfolio Stake url when stake button is pressed', () => {
     const { getByTestId } = renderComponent(initialState);
 
-    fireEvent.press(getByTestId(STAKE_BUTTON));
+    fireEvent.press(getByTestId(WalletViewSelectorsIDs.STAKE_BUTTON));
     expect(mockNavigate).toHaveBeenCalledWith(Routes.BROWSER.HOME, {
       params: {
         newTabUrl: `${AppConstants.STAKE.URL}?metamaskEntry=mobile`,

app/components/UI/Tokens/index.tsx

@@ -78,12 +78,6 @@ import Icon, {
   IconSize,
 } from '../../../component-library/components/Icons/Icon';
 
-import {
-  PORTFOLIO_BUTTON,
-  STAKE_BUTTON,
-  TOTAL_BALANCE_TEXT,
-} from '../../../../wdio/screen-objects/testIDs/Components/Tokens.testIds';
-
 import { BrowserTab, TokenI, TokensI } from './types';
 import useRampNetwork from '../Ramp/hooks/useRampNetwork';
 import Badge from '../../../component-library/components/Badges/Badge/Badge';
@@ -257,7 +251,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
     return (
       <Pressable
         onPress={onStakeButtonPress}
-        {...generateTestId(Platform, STAKE_BUTTON)}
+        testID={WalletViewSelectorsIDs.STAKE_BUTTON}
         style={styles.stakeButton}
       >
         <Text variant={TextVariant.BodyLGMedium}>
@@ -624,7 +618,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
       <View style={styles.networth}>
         <Text
           style={styles.fiatBalance}
-          {...generateTestId(Platform, TOTAL_BALANCE_TEXT)}
+          testID={WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT}
         >
           {fiatBalance}
         </Text>
@@ -635,7 +629,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
           style={styles.buyButton}
           onPress={onOpenPortfolio}
           label={strings('asset_overview.portfolio_button')}
-          {...generateTestId(Platform, PORTFOLIO_BUTTON)}
+          testID={WalletViewSelectorsIDs.PORTFOLIO_BUTTON}
           endIconName={IconName.Export}
         />
       </View>

app/components/Views/Wallet/index.tsx

@@ -82,6 +82,7 @@ import {
   showNftFetchingLoadingIndicator as showNftFetchingLoadingIndicatorAction,
 } from '../../../reducers/collectibles';
 import { getCurrentRoute } from '../../../reducers/navigation';
+import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
 
 const createStyles = ({ colors, typography }: Theme) =>
   StyleSheet.create({
@@ -502,7 +503,10 @@ const Wallet = ({
       assets = tokens;
     }
     return (
-      <View style={styles.wrapper}>
+      <View
+        style={styles.wrapper}
+        testID={WalletViewSelectorsIDs.WALLET_CONTAINER}
+      >
         {!basicFunctionalityEnabled ? (
           <View style={styles.banner}>
             <BannerAlert

e2e/pages/Browser/BrowserView.js

@@ -1,5 +1,5 @@
 import TestHelpers from '../../helpers';
-import { TEST_DAPP_LOCAL_URL } from '../Browser/TestDApp';
+import { TEST_DAPP_LOCAL_URL } from './TestDApp';
 
 import {
   BrowserViewSelectorsIDs,
@@ -82,9 +82,7 @@ class Browser {
   }
 
   get multiTabButton() {
-    return Matchers.getElementByID(
-      BrowserViewSelectorsIDs.MULTI_TAB_ADD_BUTTON,
-    );
+    return Matchers.getElementByID(BrowserViewSelectorsIDs.ADD_NEW_TAB);
   }
 
   get networkAvatarButton() {
@@ -102,8 +100,23 @@ class Browser {
       : Matchers.getElementByLabel(AddBookmarkViewSelectorsIDs.CONFIRM_BUTTON);
   }
 
+  get tabsNumber() {
+    return Matchers.getElementByID(BrowserViewSelectorsIDs.TABS_NUMBER);
+  }
+
+  get closeAllTabsButton() {
+    return Matchers.getElementByID(BrowserViewSelectorsIDs.CLOSE_ALL_TABS);
+  }
+
+  get noTabsMessage() {
+    return Matchers.getElementByID(BrowserViewSelectorsIDs.NO_TABS_MESSAGE);
+  }
+
   async getFavoritesURL(url) {
-    return Matchers.getElementByHref(url);
+    return Matchers.getElementByHref(
+      BrowserViewSelectorsIDs.BROWSER_WEBVIEW_ID,
+      url,
+    );
   }
 
   async tapUrlInputBox() {
@@ -122,6 +135,10 @@ class Browser {
     await Gestures.waitAndTap(this.tabsButton);
   }
 
+  async tapCloseTabsButton() {
+    await Gestures.waitAndTap(this.closeAllTabsButton);
+  }
+
   async tapOpenNewTabButton() {
     await Gestures.waitAndTap(this.multiTabButton);
   }
@@ -152,10 +169,10 @@ class Browser {
 
   async tapDappInFavorites() {
     if (device.getPlatform() === 'ios') {
-      await Gestures.tapWebElement(await this.TestDappURLInFavourtiesTab);
+      await Gestures.tapWebElement(this.TestDappURLInFavourtiesTab);
     } else {
-      await Gestures.tapWebElement(await this.HomePageFavourtiesTab);
-      await Gestures.tapWebElement(await this.TestDappURLInFavourtiesTab);
+      await Gestures.tapWebElement(this.HomePageFavourtiesTab);
+      await Gestures.tapWebElement(this.TestDappURLInFavourtiesTab);
     }
   }
 

e2e/pages/Browser/PortfolioHomePage.js

@@ -0,0 +1,44 @@
+import { BrowserViewSelectorsIDs } from '../../selectors/Browser/BrowserView.selectors';
+import { PortfolioPageSelectorsXpath } from '../../selectors/Browser/PortfolioPage.selectors';
+import Gestures from '../../utils/Gestures';
+import Matchers from '../../utils/Matchers';
+import TestHelpers from '../../helpers';
+
+class PortfolioHomePage {
+  get connectWalletButton() {
+    return Matchers.getElementByXPath(
+      BrowserViewSelectorsIDs.BROWSER_WEBVIEW_ID,
+      PortfolioPageSelectorsXpath.CONNECT_WALLET_BUTTON,
+    );
+  }
+
+  get closeIconPrivacyModal() {
+    return Matchers.getElementByXPath(
+      BrowserViewSelectorsIDs.BROWSER_WEBVIEW_ID,
+      PortfolioPageSelectorsXpath.CLOSE_PRIVACY_MODAL,
+    );
+  }
+
+  get accountButton() {
+    return Matchers.getElementByXPath(
+      BrowserViewSelectorsIDs.BROWSER_WEBVIEW_ID,
+      PortfolioPageSelectorsXpath.ACCOUNT_ICON_HREF,
+    );
+  }
+
+  async tapConnectMetaMask() {
+    await TestHelpers.delay(1000);
+    await Gestures.tapWebElement(this.connectWalletButton);
+  }
+
+  async closePrivacyModal() {
+    await TestHelpers.delay(1000);
+    await Gestures.tapWebElement(this.closeIconPrivacyModal);
+  }
+
+  async tapAccountButton() {
+    await Gestures.tapWebElement(this.accountButton);
+  }
+}
+
+export default new PortfolioHomePage();

e2e/pages/Send/SendView.js

@@ -51,16 +51,16 @@ class SendView {
   }
 
   async tapAccountName(account) {
-    const accountName = await Matchers.getElementByText(account);
+    const accountName = Matchers.getElementByText(account);
     await Gestures.waitAndTap(accountName);
   }
 
   async tapNextButton() {
-    await Gestures.waitAndTap(await this.nextButton);
+    await Gestures.waitAndTap(this.nextButton);
   }
 
   async inputAddress(address) {
-    await Gestures.replaceTextInField(await this.addressInputField, address);
+    await Gestures.replaceTextInField(this.addressInputField, address);
   }
 
   async tapAddAddressToAddressBook() {
@@ -71,9 +71,5 @@ class SendView {
     await Gestures.waitAndTap(this.removeAddressButton);
     await TestHelpers.delay(1000);
   }
-
-  async tapBackSpaceKey() {
-    await Gestures.tapReturnKeyOnKeyboard(this.addressInputField);
-  }
 }
 export default new SendView();