test: Refactor Advanced Gas fees test to utilize mocks

app/components/Views/confirmations/SendFlow/Confirm/components/CustomGasModal/__snapshots__/CustomGasModal.test.tsx.snap

@@ -137,6 +137,7 @@ exports[`CustomGasModal should render correctly 1`] = `
               "paddingTop": 24,
             }
           }
+          testID="edit-priority-legacy-screen"
         >
           <RCTScrollView
             style={

app/components/Views/confirmations/components/EditGasFeeLegacyUpdate/__snapshots__/EditGasFeeLegacyUpdate.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`EditGasFeeLegacyUpdate should match snapshot 1`] = `
       "paddingTop": 24,
     }
   }
+  testID="edit-priority-legacy-screen"
 >
   <RCTScrollView
     style={

app/components/Views/confirmations/components/EditGasFeeLegacyUpdate/index.tsx

@@ -45,6 +45,7 @@ import { useMetrics } from '../../../../../components/hooks/useMetrics';
 import { selectGasFeeEstimates } from '../../../../../selectors/confirmTransaction';
 import { selectPrimaryCurrency } from '../../../../../selectors/settings';
 import { selectGasFeeControllerEstimateType } from '../../../../../selectors/gasFeeController';
+import { EditGasViewSelectorsIDs } from '../../../../../../e2e/selectors/EditGasView.selectors';
 
 const EditGasFeeLegacy = ({
   onCancel,
@@ -254,7 +255,7 @@ const EditGasFeeLegacy = ({
   };
 
   return (
-    <View style={styles.root}>
+    <View style={styles.root} testID={EditGasViewSelectorsIDs.LEGACY_CONTAINER}>
       <ScrollView style={styles.wrapper}>
         <TouchableWithoutFeedback>
           <View>

app/util/test/ganache.js

@@ -22,6 +22,7 @@ export default class Ganache {
     try {
       this._server = ganache.server(options);
       await this._server.listen(port);
+      console.log(`Ganache started on port ${port}`);
     } catch (error) {
       console.error(error);
       throw error;
@@ -59,5 +60,7 @@ export default class Ganache {
     }
     await this._server.close();
     this._server = undefined;
+    console.log(`Ganache server shutting down`);
+
   }
 }

e2e/fixtures/utils.js

@@ -1,6 +1,7 @@
 import { DEFAULT_GANACHE_PORT } from '../../app/util/test/ganache';
 import { DEFAULT_FIXTURE_SERVER_PORT } from './fixture-server';
 import { DEFAULT_DAPP_SERVER_PORT } from './fixture-helper';
+import { defaultMockPort } from './../mockServer/mockUrlCollection';
 
 function transformToValidPort(defaultPort, pid) {
   // Improve uniqueness by using a simple transformation
@@ -28,3 +29,7 @@ export function getFixturesServerPort() {
 export function getLocalTestDappPort() {
   return getServerPort(DEFAULT_DAPP_SERVER_PORT);
 }
+
+export function getMockttpPort() {
+  return getServerPort(defaultMockPort);
+}

e2e/helpers.js

@@ -3,6 +3,7 @@ import {
   getFixturesServerPort,
   getGanachePort,
   getLocalTestDappPort,
+  getMockttpPort,
 } from './fixtures/utils';
 import Utilities from './utils/Utilities';
 
@@ -276,6 +277,7 @@ export default class TestHelpers {
       await device.reverseTcpPort(getGanachePort());
       await device.reverseTcpPort(getFixturesServerPort());
       await device.reverseTcpPort(getLocalTestDappPort());
+      await device.reverseTcpPort(getMockttpPort());
     }
   }
 }

e2e/mockServer/data/suggestedGasApiGanacheResponseBody.json

@@ -0,0 +1,37 @@
+{
+  "low": {
+    "suggestedMaxPriorityFeePerGas": "1",
+    "suggestedMaxFeePerGas": "1.000503137",
+    "minWaitTimeEstimate": 15000,
+    "maxWaitTimeEstimate": 60000
+  },
+  "medium": {
+    "suggestedMaxPriorityFeePerGas": "1.5",
+    "suggestedMaxFeePerGas": "1.500679235",
+    "minWaitTimeEstimate": 15000,
+    "maxWaitTimeEstimate": 45000
+  },
+  "high": {
+    "suggestedMaxPriorityFeePerGas": "2",
+    "suggestedMaxFeePerGas": "2.000855333",
+    "minWaitTimeEstimate": 15000,
+    "maxWaitTimeEstimate": 30000
+  },
+  "estimatedBaseFee": "0.000503137",
+  "networkCongestion": 0.34,
+  "latestPriorityFeeRange": [
+    "1.5",
+    "2"
+  ],
+  "historicalPriorityFeeRange": [
+    "0.000001",
+    "236.428872442"
+  ],
+  "historicalBaseFeeRange": [
+    "0.000392779",
+    "0.00100495"
+  ],
+  "priorityFeeTrend": "up",
+  "baseFeeTrend": "up",
+  "version": "0.0.1"
+}

e2e/mockServer/mockServer.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { getLocal } from 'mockttp';
 import { defaultMockPort } from './mockUrlCollection';
+import portfinder from 'portfinder';
 
 const mockServer = getLocal();
 
@@ -11,9 +12,10 @@ export const startMockServer = async ({
   port = defaultMockPort,
 }) => {
   if (!mockUrl) throw new Error('The mockUrl parameter is required');
-
-  await mockServer.start(port);
-  console.log(`Mockttp server running at http://localhost:${port}`);
+  await portfinder.setBasePort(port);
+  const mockPort = await portfinder.getPortPromise();
+  await mockServer.start(mockPort);
+  console.log(`Mockttp server running at http://localhost:${mockPort}`);
 
   await mockServer
     .forGet('/health-check')
@@ -24,17 +26,20 @@ export const startMockServer = async ({
     .withQuery({ url: mockUrl })
     .thenReply(responseCode, JSON.stringify(responseBody));
 
-  await mockServer.forUnmatchedRequest().thenPassThrough({
-    beforeRequest: async ({ url, method }) => {
-      console.log(`Forwarding request to: ${method} ${url}`);
-      return { url: new URL(url).searchParams.get('url') || url };
-    },
-  });
+    await mockServer.forUnmatchedRequest().thenPassThrough({
+      beforeRequest: async ({ url, method }) => {
+        const returnUrl = new URL(url).searchParams.get('url') || url;
+        const updatedUrl = device.getPlatform() === 'android' ? returnUrl.replace('localhost', '127.0.0.1') : returnUrl;
+
+        console.log(`Mock proxy forwarding request to: ${updatedUrl}`);
+        return { url: updatedUrl };
+      },
+    });
 
   return mockServer;
 };
 
 export const stopMockServer = async () => {
   await mockServer.stop();
-  console.log('Mockttp server stopped');
+  console.log('Mockttp server shutting down');
 };

e2e/mockServer/mockUrlCollection.json

@@ -2,6 +2,7 @@
   "localhost": "localhost",
   "defaultMockPort": 8000,
   "urls": {
-    "suggestedGasApiMainnet": "'https://gas.api.cx.metamask.io/networks/1/suggestedGasFees'"
+    "suggestedGasApiMainnet": "https://gas.api.cx.metamask.io/networks/1/suggestedGasFees",
+    "suggestedGasApiGanache": "https://gas.api.cx.metamask.io/networks/1337/suggestedGasFees"
   }
 }

e2e/pages/Send/AmountView.js

@@ -1,12 +1,19 @@
 import Matchers from '../../utils/Matchers';
 import Gestures from '../../utils/Gestures';
-import { AmountViewSelectorsIDs } from '../../selectors/SendFlow/AmountView.selectors';
+import {
+  AmountViewSelectorsIDs,
+  AmountViewSelectorsText
+} from '../../selectors/SendFlow/AmountView.selectors';
 
 class AmountView {
   get currencySwitch() {
     return Matchers.getElementByID(AmountViewSelectorsIDs.CURRENCY_SWITCH);
   }
 
+  get title() {
+    return Matchers.getElementByText(AmountViewSelectorsText.SCREEN_TITLE);
+  }
+
   get nextButton() {
     return device.getPlatform() === 'ios'
       ? Matchers.getElementByID(AmountViewSelectorsIDs.NEXT_BUTTON)

e2e/pages/Send/TransactionConfirmView.js

@@ -71,9 +71,9 @@ class TransactionConfirmationView {
     return Matchers.getElementByText(EditGasViewSelectorsText.ADVANCE_OPTIONS);
   }
 
-  get editPriorityModal() {
-    return Matchers.getElementByText(
-      TransactionConfirmViewSelectorsText.EDIT_PRIORITY_MODAL,
+  get editPriorityLegacyModal() {
+    return Matchers.getElementByID(
+      EditGasViewSelectorsIDs.LEGACY_CONTAINER,
     );
   }
 

e2e/selectors/EditGasView.selectors.js

@@ -4,6 +4,7 @@ export const EditGasViewSelectorsIDs = {
   ESTIMATED_FEE_TEST_ID: 'estimated-fee',
   EDIT_PRIORITY_SCREEN_TEST_ID: 'edit-priority-screen',
   MAX_PRIORITY_FEE_INPUT_TEST_ID: 'max-priority-fee-range-input',
+  LEGACY_CONTAINER: 'edit-priority-legacy-screen',
 };
 export const EditGasViewSelectorsText = {
   AGGRESSIVE: enContent.edit_gas_fee_eip1559.aggressive,

e2e/selectors/TransactionConfirmView.selectors.js

@@ -10,5 +10,4 @@ export const TransactionConfirmViewSelectorsIDs = {
 
 export const TransactionConfirmViewSelectorsText = {
   CANCEL_BUTTON: enContent.transaction.cancel,
-  EDIT_PRIORITY_MODAL: enContent.edit_gas_fee_eip1559.edit_priority,
 };

e2e/specs/confirmations/advanced-gas-fees.spec.js

@@ -14,20 +14,42 @@ import TabBarComponent from '../../pages/TabBarComponent';
 import WalletActionsModal from '../../pages/modals/WalletActionsModal';
 import TestHelpers from '../../helpers';
 import Assertions from '../../utils/Assertions';
-import { AmountViewSelectorsText } from '../../selectors/SendFlow/AmountView.selectors';
+import {
+  startMockServer,
+  stopMockServer
+} from '../../mockServer/mockServer';
+import { urls } from '../../mockServer/mockUrlCollection.json';
+import responseBody from '../../mockServer/data/suggestedGasApiGanacheResponseBody.json';
 
 const VALID_ADDRESS = '0xebe6CcB6B55e1d094d9c58980Bc10Fed69932cAb';
 
 describe(SmokeConfirmations('Advanced Gas Fees and Priority Tests'), () => {
+  let mockServer;
   beforeAll(async () => {
     jest.setTimeout(170000);
     await TestHelpers.reverseServerPort();
+
+    mockServer = await startMockServer({ // Configure mock server
+      mockUrl: urls.suggestedGasApiGanache,
+      responseCode: 200,
+      responseBody
+    });
+
+  });
+
+  afterAll(async () => {
+    try {
+      await stopMockServer();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log('Mock server already stopped or encountered an error:', error);
+    }
   });
 
   it('should edit priority gas settings and send ETH', async () => {
     await withFixtures(
       {
-        fixture: new FixtureBuilder().withSepoliaNetwork().build(),
+        fixture: new FixtureBuilder().withGanacheNetwork().build(),
         restartDevice: true,
         ganacheOptions: defaultGanacheOptions,
       },
@@ -46,9 +68,7 @@ describe(SmokeConfirmations('Advanced Gas Fees and Priority Tests'), () => {
         await SendView.inputAddress(VALID_ADDRESS);
         await SendView.tapNextButton();
         // Check that we are on the amount view
-        await Assertions.checkIfTextIsDisplayed(
-          AmountViewSelectorsText.SCREEN_TITLE,
-        );
+        await Assertions.checkIfVisible(AmountView.title);
 
         // Input acceptable value
         await AmountView.typeInTransactionAmount('0.00004');

e2e/specs/wallet/suggestedGasApi.mock.spec.js

@@ -32,15 +32,12 @@ describe(SmokeCore('Mock suggestedGasApi fallback to legacy gas endpoint  when E
     });
   });
 
-  // Because we stop the server within the test, a try catch block here would stop the server if the test fails midway
   afterAll(async () => {
-    if (mockServer) {
-      try {
-        await stopMockServer();  // Stop the mock server if it's running
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.log('Mock server already stopped or encountered an error:', error);
-      }
+    try {
+      await stopMockServer();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log('Mock server already stopped or encountered an error:', error);
     }
   });
 
@@ -78,7 +75,7 @@ describe(SmokeCore('Mock suggestedGasApi fallback to legacy gas endpoint  when E
         await AmountView.tapNextButton();
         await TransactionConfirmView.tapEstimatedGasLink(1);
         await Assertions.checkIfVisible(
-          TransactionConfirmView.editPriorityModal,
+          TransactionConfirmView.editPriorityLegacyModal,
         );
         await stopMockServer(); //stop mock server to reinstate suggested gas api service
         await Assertions.checkIfVisible(

package.json

@@ -463,6 +463,7 @@
     "nyc": "^15.1.0",
     "octonode": "0.10.2",
     "patch-package": "^6.2.2",
+    "portfinder": "^1.0.32",
     "prettier": "^2.2.1",
     "prettier-plugin-gherkin": "^1.1.1",
     "react-dom": "18.2.0",