test: E2E Mocking Setup For Detox Tests

e2e/mockserver/mockUrlCollection.js

@@ -0,0 +1,4 @@
+export const mockUrlCollection = {
+  SUGGESTED_GAS_API_MAINNET_URL: 'https://gas.api.cx.metamask.io/networks/1/suggestedGasFees',
+  DEFAULT_PORT: 8000,
+};

e2e/mockserver/mockserver.js

@@ -0,0 +1,41 @@
+/* eslint-disable no-console */
+import { getLocal } from 'mockttp';
+import { mockUrlCollection } from './mockUrlCollection';
+
+const mockServer = getLocal();
+const defaultMockPort = 8000;
+
+export const startMockServer = async ({
+  mockUrl,
+  responseCode = 500,
+  responseBody = {},
+  port = mockUrlCollection.DEFAULT_PORT,
+}) => {
+  if (!mockUrl) throw new Error('The mockUrl parameter is required');
+
+  await mockServer.start(port);
+  console.log(`Mockttp server running at http://localhost:${port}`);
+
+  await mockServer
+    .forGet('/health-check')
+    .thenReply(200, 'Mock server is running');
+
+  await mockServer
+    .forGet('/proxy')
+    .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 };
+    },
+  });
+
+  return mockServer;
+};
+
+export const stopMockServer = async () => {
+  await mockServer.stop();
+  console.log('Mockttp server stopped');
+};

e2e/pages/Send/TransactionConfirmView.js

@@ -71,6 +71,12 @@ class TransactionConfirmationView {
     return Matchers.getElementByText(EditGasViewSelectorsText.ADVANCE_OPTIONS);
   }
 
+  get editPriorityModal() {
+    return Matchers.getElementByText(
+      TransactionConfirmViewSelectorsText.EDIT_PRIORITY_MODAL,
+    );
+  }
+
   async tapConfirmButton() {
     await Gestures.waitAndTap(this.confirmButton);
   }
@@ -79,10 +85,9 @@ class TransactionConfirmationView {
     await Gestures.waitAndTap(this.cancelButton);
   }
 
-  async tapEstimatedGasLink() {
+  async tapEstimatedGasLink(index = 0) {
     await Gestures.swipe(this.transactionAmount, 'up', 'fast');
-
-    await Gestures.waitAndTap(this.estimatedGasLink);
+    await Gestures.TapAtIndex(this.estimatedGasLink, index);
   }
 
   async tapLowPriorityGasOption() {

e2e/selectors/TransactionConfirmView.selectors.js

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

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

@@ -0,0 +1,89 @@
+'use strict';
+import { loginToApp } from '../../viewHelper.js';
+import { SmokeCore } from '../../tags.js';
+import TabBarComponent from '../../pages/TabBarComponent.js';
+import WalletActionsModal from '../../pages/modals/WalletActionsModal.js';
+import SendView from '../../pages/Send/SendView.js';
+import AmountView from '../../pages/Send/AmountView.js';
+import TransactionConfirmView from '../../pages/Send/TransactionConfirmView.js';
+import { startMockServer, stopMockServer } from '../../mockserver/mockserver.js';
+import WalletView from '../../pages/wallet/WalletView.js';
+import Assertions from '../../utils/Assertions.js';
+import AccountListView from '../../pages/AccountListView.js';
+import AddAccountModal from '../../pages/modals/AddAccountModal.js';
+import ImportAccountView from '../../pages/ImportAccountView.js';
+import Accounts from '../../../wdio/helpers/Accounts.js';
+import { withFixtures } from '../../fixtures/fixture-helper.js';
+import FixtureBuilder from '../../fixtures/fixture-builder.js';
+import TestHelpers from '../../helpers.js';
+import { mockUrlCollection } from '../../mockserver/mockUrlCollection.js';
+
+describe(SmokeCore('Mock suggestedGasApi fallback to legacy gas endpoint  when EIP1559 endpoint is down'), () => {
+  let mockServer;
+  beforeAll(async () => {
+    jest.setTimeout(150000);
+    await TestHelpers.reverseServerPort();
+
+    mockServer = await startMockServer({ // Configure mock server
+      mockUrl: mockUrlCollection.SUGGESTED_GAS_API_MAINNET_URL,
+      responseCode: 500,
+      responseBody: { error: 'Internal server error' },
+    });
+  });
+
+  // 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);
+      }
+    }
+  });
+
+  const RECIPIENT = '0x1FDb169Ef12954F20A15852980e1F0C122BfC1D6';
+  const AMOUNT = '0.0003';
+  const validPrivateKey = Accounts.getAccountPrivateKey();
+
+  it('should fallback to legacy gas endpoint & legacy modal when EIP1559 endpoint is down', async () => {
+    await withFixtures(
+      {
+        fixture: new FixtureBuilder().build(),
+        restartDevice: true,
+      },
+      async () => {
+        await loginToApp();
+        await WalletView.tapIdenticon();
+        await Assertions.checkIfVisible(AccountListView.accountList);
+        await AccountListView.tapAddAccountButton();
+        await AddAccountModal.tapImportAccount();
+        await ImportAccountView.isVisible();
+        await ImportAccountView.enterPrivateKey(validPrivateKey.keys);
+        await ImportAccountView.isImportSuccessSreenVisible();
+        await ImportAccountView.tapCloseButtonOnImportSuccess();
+        if (device.getPlatform() === 'ios') {
+          await AccountListView.swipeToDismissAccountsModal();
+          await Assertions.checkIfNotVisible(AccountListView.title);
+        } else {
+          await WalletView.tapIdenticon();
+        }
+        await TabBarComponent.tapActions();
+        await WalletActionsModal.tapSendButton();
+        await SendView.inputAddress(RECIPIENT);
+        await SendView.tapNextButton();
+        await AmountView.typeInTransactionAmount(AMOUNT);
+        await AmountView.tapNextButton();
+        await TransactionConfirmView.tapEstimatedGasLink(1);
+        await Assertions.checkIfVisible(
+          TransactionConfirmView.editPriorityModal,
+        );
+        await stopMockServer(); //stop mock server to reinstate suggested gas api service
+        await Assertions.checkIfVisible(
+          TransactionConfirmView.editPriorityFeeSheetContainer, 30000
+        );
+      },
+    );
+  });
+});

e2e/utils/Gestures.js

@@ -59,6 +59,19 @@ class Gestures {
     await element.tap();
   }
 
+  /**
+   * Wait for an element at a specific index to be visible and then tap it.
+   *
+   * @param {Promise<Detox.IndexableNativeElement>} elementID - ID of the element to tap
+   * @param {number} index - Index of the element to tap
+   * @param {number} timeout - Timeout for waiting (default: 15000ms)
+   */
+  static async TapAtIndex(elementID, index, timeout = 15000) {
+    const element = (await elementID).atIndex(index);
+    await waitFor(element).toBeVisible().withTimeout(timeout);
+    await element.tap();
+  }
+
   /**
    * Wait for an element to be visible and then tap it.
    *

package.json

@@ -270,6 +270,7 @@
     "lodash": "^4.17.21",
     "lottie-ios": "3.4.1",
     "lottie-react-native": "5.1.5",
+    "mockttp": "^3.15.2",
     "multihashes": "0.4.14",
     "number-to-bn": "1.7.0",
     "obs-store": "4.0.3",

shim.js

@@ -1,11 +1,13 @@
 /* eslint-disable import/no-nodejs-modules */
+/* global Platform */
 import { decode, encode } from 'base-64';
 import {
   FIXTURE_SERVER_PORT,
   isTest,
   testConfig,
 } from './app/util/test/utils.js';
 import { LaunchArguments } from 'react-native-launch-arguments';
+import { mockUrlCollection } from './e2e/mockserver/mockUrlCollection';
 
 // In a testing environment, assign the fixtureServerPort to use a deterministic port
 if (isTest) {
@@ -56,3 +58,26 @@ if (typeof localStorage !== 'undefined') {
 // If using the crypto shim, uncomment the following line to ensure
 // crypto is loaded first, so it can populate global.crypto
 // require('crypto')
+
+if (isTest) {
+  (async () => {
+    const { fetch: originalFetch } = global;
+    const MOCKTTP_URL = `http://${
+      Platform.OS === 'ios' ? 'localhost' : '10.0.2.2'
+    }:${mockUrlCollection.DEFAULT_PORT}`;
+
+    const isMockServerAvailable = await originalFetch(
+      `${MOCKTTP_URL}/health-check`,
+    )
+      .then((res) => res.ok)
+      .catch(() => false);
+    // if mockserver is off we route to original destination
+    global.fetch = async (url, options) =>
+      isMockServerAvailable
+        ? originalFetch(
+            `${MOCKTTP_URL}/proxy?url=${encodeURIComponent(url)}`,
+            options,
+          ).catch(() => originalFetch(url, options))
+        : originalFetch(url, options);
+  })();
+}