fix: add missing mock for portfolio site in e2e testing (#31034)

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

This PR is to fix the missing mock for portfolio site in specs:
- test/e2e/tests/portfolio/portfolio-site.spec.ts
- test/e2e/tests/bridge/bridge-button-opens-portfolio.spec.ts
- test/e2e/tests/phishing-controller/phishing-detection.spec.js

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/31034?quickstart=1)

## **Related issues**

Fixes:

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

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/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-extension/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.

Author: stanleyyconsensys

privacy-snapshot.json

@@ -84,5 +84,6 @@
   "unresponsive-rpc.url",
   "user-storage.api.cx.metamask.io",
   "verify.walletconnect.com",
-  "www.4byte.directory"
+  "www.4byte.directory",
+  "api.web3modal.org"
 ]

test/e2e/tests/bridge/bridge-test-utils.ts

@@ -9,6 +9,7 @@ import { SMART_CONTRACTS } from '../../seeder/smart-contracts';
 import { CHAIN_IDS } from '../../../../shared/constants/network';
 import { Driver } from '../../webdriver/driver';
 import type { FeatureFlagResponse } from '../../../../shared/types/bridge';
+import { emptyHtmlPage } from '../../mock-e2e';
 import {
   DEFAULT_FEATURE_FLAGS_RESPONSE,
   ETH_CONVERSION_RATE_USD,
@@ -62,7 +63,7 @@ export class BridgePage {
   };
 
   verifyPortfolioTab = async () => {
-    await this.driver.switchToWindowWithTitle('MetaMask Portfolio - Bridge');
+    await this.driver.switchToWindowWithTitle('E2E Test Page');
     await this.driver.waitForUrlContaining({
       url: 'portfolio.metamask.io/bridge',
     });
@@ -101,16 +102,15 @@ const mockServer =
             };
           }),
     );
-    const portfolioMock = async () =>
-      await mockServer_
-        .forGet('https://portfolio.metamask.io/bridge')
-        .always()
-        .thenCallback(() => {
-          return {
-            statusCode: 200,
-            json: {},
-          };
-        });
+    const portfolioMock = mockServer_
+      .forGet(`https://portfolio.metamask.io/bridge`)
+      .always()
+      .thenCallback(() => {
+        return {
+          statusCode: 200,
+          body: emptyHtmlPage(),
+        };
+      });
     return Promise.all([...featureFlagMocks, portfolioMock]);
   };
 

test/e2e/tests/phishing-controller/mocks.js

@@ -112,6 +112,16 @@ async function setupPhishingDetectionMocks(
         body: emptyHtmlPage(blockProvider),
       };
     });
+
+  await mockServer
+    .forGet(`https://portfolio.metamask.io`)
+    .always()
+    .thenCallback(() => {
+      return {
+        statusCode: 200,
+        body: emptyHtmlPage(),
+      };
+    });
 }
 
 /**

test/e2e/tests/portfolio/portfolio-site.spec.ts

@@ -1,18 +1,21 @@
 import { MockttpServer } from 'mockttp';
 import { withFixtures } from '../../helpers';
-import { PORTFOLIO_PAGE_TITLE, MOCK_META_METRICS_ID } from '../../constants';
+import { MOCK_META_METRICS_ID } from '../../constants';
 import FixtureBuilder from '../../fixture-builder';
 import { emptyHtmlPage } from '../../mock-e2e';
 import HomePage from '../../page-objects/pages/home/homepage';
 import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
+import MockedPage from '../../page-objects/pages/mocked-page';
 
 describe('Portfolio site', function () {
   async function mockPortfolioSite(mockServer: MockttpServer) {
     return await mockServer
       .forGet('https://portfolio.metamask.io/')
       .withQuery({
         metamaskEntry: 'ext_portfolio_button',
-        metametricsId: 'null',
+        metametricsId: MOCK_META_METRICS_ID,
+        metricsEnabled: 'true',
+        marketingEnabled: 'false',
       })
       .thenCallback(() => {
         return {
@@ -38,12 +41,15 @@ describe('Portfolio site', function () {
       async ({ driver }) => {
         await loginWithBalanceValidation(driver);
         await new HomePage(driver).openPortfolioPage();
-        await driver.switchToWindowWithTitle(PORTFOLIO_PAGE_TITLE);
+        await driver.switchToWindowWithTitle('E2E Test Page');
 
         // Verify site
         await driver.waitForUrl({
           url: `https://portfolio.metamask.io/?metamaskEntry=ext_portfolio_button&metametricsId=${MOCK_META_METRICS_ID}&metricsEnabled=true&marketingEnabled=false`,
         });
+        await new MockedPage(driver).check_displayedMessage(
+          'Empty page by MetaMask',
+        );
       },
     );
   });