chore: Additional e2e test to support PortfolioView (#12602)

## **Description**

Additional e2e tests to support `PortfolioView`. This is an initial pass
to cover the basic happy path use cases. Should be expanded further to
handle edge cases.

## **Related issues**

Fixes:

## **Manual testing steps**

1. `yarn setup`
2. `yarn test:e2e:ios:debug:build`
3. `yarn watch:clean`
4. `yarn test:e2e:ios:debug:run
/e2e/specs/multichain/asset-list.spec.js`

## **Screenshots/Recordings**

Current state of things:
```
PASS  e2e/specs/multichain/asset-list.spec.js (58.1 s)
  SmokeMultiChain Import Tokens
    ✓ should display tokens across networks when all networks filter is toggled on (9755 ms)
    ✓ should display tokens across networks when current networks filter is toggled on (23606 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        58.153 s
```

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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: salimtb <salim.toubal@outlook.com>
Co-authored-by: Curtis <Curtis.David7@gmail.com>

app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.tsx

@@ -20,6 +20,7 @@ import ListItemSelect from '../../../../component-library/components/List/ListIt
 import { VerticalAlignment } from '../../../../component-library/components/List/ListItem';
 import { strings } from '../../../../../locales/i18n';
 import { enableAllNetworksFilter } from '../util/enableAllNetworksFilter';
+import { WalletViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/WalletView.selectors';
 
 enum FilterOption {
   AllNetworks,
@@ -69,6 +70,7 @@ const TokenFilterBottomSheet = () => {
           {strings('wallet.filter_by')}
         </Text>
         <ListItemSelect
+          testID={WalletViewSelectorsIDs.TOKEN_NETWORK_FILTER_ALL}
           onPress={() =>
             onFilterControlsBottomSheetPress(FilterOption.AllNetworks)
           }
@@ -81,6 +83,7 @@ const TokenFilterBottomSheet = () => {
           </Text>
         </ListItemSelect>
         <ListItemSelect
+          testID={WalletViewSelectorsIDs.TOKEN_NETWORK_FILTER_CURRENT}
           onPress={() =>
             onFilterControlsBottomSheetPress(FilterOption.CurrentNetwork)
           }

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

@@ -356,6 +356,7 @@ exports[`Tokens Portfolio View should match the snapshot when portfolio view is
                                 "paddingHorizontal": 16,
                               }
                             }
+                            testID="token-network-filter"
                           >
                             <Text
                               numberOfLines={1}

app/components/UI/Tokens/index.tsx

@@ -422,6 +422,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
         {isPortfolioViewEnabled() ? (
           <View style={styles.controlButtonOuterWrapper}>
             <ButtonBase
+              testID={WalletViewSelectorsIDs.TOKEN_NETWORK_FILTER}
               label={
                 <Text style={styles.controlButtonText} numberOfLines={1}>
                   {isAllNetworks

e2e/pages/swaps/QuoteView.js

@@ -10,6 +10,10 @@ class QuoteView {
     return Matchers.getElementByText(QuoteViewSelectorText.GET_QUOTES);
   }
 
+  get cancelButton() {
+    return Matchers.getElementByText(QuoteViewSelectorText.CANCEL);
+  }
+
   get sourceToken() {
     return Matchers.getElementByID(QuoteViewSelectorIDs.SOURCE_TOKEN);
   }
@@ -58,6 +62,10 @@ class QuoteView {
     await device.disableSynchronization();
     await Gestures.waitAndTap(this.getQuotes);
   }
+
+  async tapOnCancelButton() {
+    await Gestures.waitAndTap(this.cancelButton);
+  }
 }
 
 export default new QuoteView();

e2e/pages/wallet/WalletView.js

@@ -86,6 +86,26 @@ class WalletView {
     );
   }
 
+  get tokenNetworkFilter() {
+    return Matchers.getElementByID(WalletViewSelectorsIDs.TOKEN_NETWORK_FILTER);
+  }
+
+  get tokenNetworkFilterAll() {
+    return Matchers.getElementByID(
+      WalletViewSelectorsIDs.TOKEN_NETWORK_FILTER_ALL,
+    );
+  }
+
+  get tokenNetworkFilterCurrent() {
+    return Matchers.getElementByID(
+      WalletViewSelectorsIDs.TOKEN_NETWORK_FILTER_CURRENT,
+    );
+  }
+
+  get cancelButton() {
+    return Matchers.getElementByText('Cancel');
+  }
+
   async tapCurrentMainWalletAccountActions() {
     await Gestures.waitAndTap(this.currentMainWalletAccountActions);
   }
@@ -165,6 +185,22 @@ class WalletView {
   async tapPortfolio() {
     await Gestures.waitAndTap(this.portfolioButton);
   }
+
+  async tapTokenNetworkFilter() {
+    await Gestures.waitAndTap(this.tokenNetworkFilter);
+  }
+
+  async tapTokenNetworkFilterAll() {
+    await Gestures.waitAndTap(this.tokenNetworkFilterAll);
+  }
+
+  async tapTokenNetworkFilterCurrent() {
+    await Gestures.waitAndTap(this.tokenNetworkFilterCurrent);
+  }
+
+  async tapCancelButton() {
+    await Gestures.waitAndTap(this.cancelButton);
+  }
 }
 
 export default new WalletView();

e2e/selectors/swaps/QuoteView.selectors.js

@@ -2,6 +2,7 @@ import enContent from '../../../locales/languages/en.json';
 
 export const QuoteViewSelectorText = {
   GET_QUOTES: enContent.swaps.get_quotes,
+  CANCEL: 'Cancel',
 };
 
 export const QuoteViewSelectorIDs = {

e2e/selectors/wallet/WalletView.selectors.js

@@ -32,6 +32,9 @@ export const WalletViewSelectorsIDs = {
   SORT_ALPHABETICAL: 'sort-alphabetical',
   SORT_BY: 'sort-by',
   NAVBAR_NETWORK_PICKER: 'network-avatar-picker',
+  TOKEN_NETWORK_FILTER: 'token-network-filter',
+  TOKEN_NETWORK_FILTER_ALL: 'token-network-filter-all',
+  TOKEN_NETWORK_FILTER_CURRENT: 'token-network-filter-current',
 };
 
 export const WalletViewSelectorsText = {

e2e/specs/multichain/asset-list.spec.js

@@ -0,0 +1,133 @@
+// 'persists the preferred asset list preference when changing networks'
+
+import { SmokeMultiChain } from '../../tags';
+import WalletView from '../../pages/wallet/WalletView';
+import FixtureBuilder from '../../fixtures/fixture-builder';
+import {
+  loadFixture,
+  startFixtureServer,
+  stopFixtureServer,
+} from '../../fixtures/fixture-helper';
+import FixtureServer from '../../fixtures/fixture-server';
+import { getFixturesServerPort } from '../../fixtures/utils';
+import { loginToApp } from '../../viewHelper';
+import Assertions from '../../utils/Assertions';
+import TokenOverview from '../../pages/wallet/TokenOverview';
+import NetworkEducationModal from '../../pages/Network/NetworkEducationModal';
+import TestHelpers from '../../helpers';
+import SendView from '../../pages/Send/SendView';
+
+import QuoteView from '../../pages/swaps/QuoteView';
+import TabBarComponent from '../../pages/wallet/TabBarComponent';
+
+const fixtureServer = new FixtureServer();
+
+const ETHEREUM_NAME = 'Ethereum';
+const AVAX_NAME = 'AVAX';
+const BNB_NAME = 'BNB';
+
+describe(SmokeMultiChain('Import Tokens'), () => {
+  beforeAll(async () => {
+    await TestHelpers.reverseServerPort();
+    const fixture = new FixtureBuilder().withPopularNetworks().build();
+    await startFixtureServer(fixtureServer);
+    await loadFixture(fixtureServer, { fixture });
+    await TestHelpers.launchApp({
+      launchArgs: { fixtureServerPort: `${getFixturesServerPort()}` },
+    });
+    await loginToApp();
+  });
+
+  afterAll(async () => {
+    await stopFixtureServer(fixtureServer);
+  });
+
+  it('should display tokens across networks when all networks filter is toggled on', async () => {
+    await WalletView.tapTokenNetworkFilter();
+    await WalletView.tapTokenNetworkFilterAll();
+    const eth = WalletView.tokenInWallet(ETHEREUM_NAME);
+    const avax = WalletView.tokenInWallet(AVAX_NAME);
+    const bnb = WalletView.tokenInWallet(BNB_NAME);
+    await Assertions.checkIfVisible(eth);
+    await Assertions.checkIfVisible(avax);
+    await Assertions.checkIfVisible(bnb);
+  });
+
+  it('should display tokens of current network when current networks filter is toggled on', async () => {
+    await WalletView.tapTokenNetworkFilter();
+    await WalletView.tapTokenNetworkFilterAll();
+    await WalletView.tapTokenNetworkFilter();
+    await WalletView.tapTokenNetworkFilterCurrent();
+    const eth = WalletView.tokenInWallet(ETHEREUM_NAME);
+    const avax = WalletView.tokenInWallet(AVAX_NAME);
+    const bnb = WalletView.tokenInWallet(BNB_NAME);
+    await Assertions.checkIfVisible(eth);
+    await Assertions.checkIfNotVisible(avax);
+    await Assertions.checkIfNotVisible(bnb);
+  });
+
+  it('should switch networks when clicking on swap if an asset on a different network is selected', async () => {
+    const BNB_NAME = 'BNB Smart Chain';
+    await WalletView.tapTokenNetworkFilter();
+    await WalletView.tapTokenNetworkFilterAll();
+    const bnb = WalletView.tokenInWallet('BNB');
+    await Assertions.checkIfVisible(bnb);
+    await WalletView.tapOnToken('BNB');
+    await Assertions.checkIfVisible(TokenOverview.swapButton);
+    await TokenOverview.tapSwapButton();
+
+    await Assertions.checkIfVisible(NetworkEducationModal.container);
+    await Assertions.checkIfElementToHaveText(
+      NetworkEducationModal.networkName,
+      BNB_NAME,
+    );
+    await NetworkEducationModal.tapGotItButton();
+  });
+
+  it('should switch networks when clicking on send if an asset on a different network is selected', async () => {
+    const ETHEREUM_NAME = 'Ethereum Main Network';
+    await QuoteView.tapOnCancelButton();
+    await TabBarComponent.tapWallet();
+    await WalletView.tapTokenNetworkFilter();
+    await WalletView.tapTokenNetworkFilterAll();
+    const ethereum = WalletView.tokenInWallet('Ethereum');
+    await Assertions.checkIfVisible(ethereum);
+    await WalletView.tapOnToken();
+    await Assertions.checkIfVisible(TokenOverview.sendButton);
+    await TokenOverview.tapSendButton();
+
+    await Assertions.checkIfVisible(NetworkEducationModal.container);
+    await Assertions.checkIfElementToHaveText(
+      NetworkEducationModal.networkName,
+      ETHEREUM_NAME,
+    );
+    await NetworkEducationModal.tapGotItButton();
+  });
+
+  it('should allows clicking into the asset details page of native token on another network', async () => {
+    await SendView.tapCancelButton();
+    await TabBarComponent.tapWallet();
+    await WalletView.tapTokenNetworkFilter();
+    await WalletView.tapTokenNetworkFilterAll();
+    await WalletView.tapOnToken('AVAX');
+
+    await Assertions.checkIfVisible(TokenOverview.container);
+    await TokenOverview.tapChartPeriod1d();
+    await Assertions.checkIfVisible(TokenOverview.chartPeriod1d);
+    await TokenOverview.tapChartPeriod1w();
+    await Assertions.checkIfVisible(TokenOverview.chartPeriod1w);
+    await TokenOverview.tapChartPeriod1m();
+    await Assertions.checkIfVisible(TokenOverview.chartPeriod1m);
+    await TokenOverview.tapChartPeriod3m();
+    await Assertions.checkIfVisible(TokenOverview.chartPeriod3m);
+    await TokenOverview.tapChartPeriod1y();
+    await Assertions.checkIfVisible(TokenOverview.chartPeriod1y);
+    await TokenOverview.tapChartPeriod3y();
+    await Assertions.checkIfVisible(TokenOverview.chartPeriod3y);
+
+    await TokenOverview.scrollOnScreen();
+    await Assertions.checkIfVisible(TokenOverview.receiveButton);
+    await Assertions.checkIfVisible(TokenOverview.sendButton);
+    await Assertions.checkIfVisible(TokenOverview.swapButton);
+  });
+});