test(e2e): route snaps webview traffic through mock server

Co-authored-by: javiergarciavera <javiergarciavera@users.noreply.github.com>

Author: cursoragent

app/lib/snaps/SnapsExecutionWebView.tsx

@@ -9,9 +9,83 @@ import { PostMessageEvent } from '@metamask/post-message-stream';
 // @ts-expect-error Types are currently broken for this.
 import WebViewHTML from '@metamask/snaps-execution-environments/dist/webpack/webview/index.html';
 import { EmptyObject } from '@metamask/snaps-sdk';
+import {
+  FALLBACK_MOCK_SERVER_PORT,
+  isE2E,
+  testConfig,
+} from '../../util/test/utils';
 
 const styles = createStyles();
 
+const getE2ENetworkProxyInjection = (mockServerPort: string): string => `
+  (function() {
+    var mockServerUrl = 'http://localhost:${mockServerPort}';
+    var proxyPrefix = mockServerUrl + '/proxy?url=';
+
+    function toUrlString(url) {
+      if (typeof url === 'string') {
+        return url;
+      }
+      if (url && typeof url === 'object' && typeof url.url === 'string') {
+        return url.url;
+      }
+      return String(url);
+    }
+
+    function shouldProxy(url) {
+      return (
+        typeof url === 'string' &&
+        (url.startsWith('http://') || url.startsWith('https://')) &&
+        !url.includes('/proxy?url=') &&
+        !url.includes('localhost:${mockServerPort}') &&
+        !url.includes('127.0.0.1:${mockServerPort}') &&
+        !url.includes('10.0.2.2:${mockServerPort}')
+      );
+    }
+
+    if (typeof fetch === 'function') {
+      var originalFetch = fetch.bind(window);
+      window.fetch = function(url, options) {
+        var urlString = toUrlString(url);
+        var finalUrl = shouldProxy(urlString)
+          ? proxyPrefix + encodeURIComponent(urlString)
+          : url;
+        return originalFetch(finalUrl, options);
+      };
+    }
+
+    var OriginalXHR = window.XMLHttpRequest;
+    if (typeof OriginalXHR === 'function') {
+      window.XMLHttpRequest = function() {
+        var xhr = new OriginalXHR();
+        var originalOpen = xhr.open;
+
+        xhr.open = function(method, url) {
+          var openArgs = Array.prototype.slice.call(arguments, 2);
+          var finalUrl = shouldProxy(url)
+            ? proxyPrefix + encodeURIComponent(url)
+            : url;
+          return originalOpen.call.apply(
+            originalOpen,
+            [this, method, finalUrl].concat(openArgs),
+          );
+        };
+
+        return xhr;
+      };
+
+      try {
+        Object.setPrototypeOf(window.XMLHttpRequest, OriginalXHR);
+        Object.assign(window.XMLHttpRequest, OriginalXHR);
+        window.XMLHttpRequest.prototype = OriginalXHR.prototype;
+      } catch (e) {
+        // No-op: this is best effort in the constrained WebView runtime.
+      }
+    }
+  })();
+  true;
+`;
+
 // This is a hack to allow us to asynchronously await the creation of the WebView.
 // eslint-disable-next-line import/no-mutable-exports
 export let createWebView: (jobId: string) => Promise<WebViewInterface>;
@@ -107,6 +181,14 @@ export class SnapsExecutionWebView extends Component {
   }
 
   render() {
+    const mockServerPort = String(
+      testConfig.mockServerPort ?? FALLBACK_MOCK_SERVER_PORT,
+    );
+    const e2eWebViewNetworkProxyInjection = isE2E
+      ? getE2ENetworkProxyInjection(mockServerPort)
+      : undefined;
+    const mixedContentMode = isE2E ? 'always' : undefined;
+
     return (
       <View style={styles.container}>
         {Object.entries(this.webViews).map(([key, { props }]) => (
@@ -119,6 +201,10 @@ export class SnapsExecutionWebView extends Component {
             onError={props.onWebViewError}
             onLoadEnd={props.onWebViewLoad}
             originWhitelist={['*']}
+            mixedContentMode={mixedContentMode}
+            injectedJavaScriptBeforeContentLoaded={
+              e2eWebViewNetworkProxyInjection
+            }
             javaScriptEnabled
             webviewDebuggingEnabled={__DEV__}
           />

app/util/test/utils.js

@@ -5,6 +5,7 @@ export const flushPromises = () => new Promise(setImmediate);
 // iOS: These are overridden by LaunchArgs at runtime
 export const FALLBACK_FIXTURE_SERVER_PORT = 12345;
 export const FALLBACK_COMMAND_QUEUE_SERVER_PORT = 2446;
+export const FALLBACK_MOCK_SERVER_PORT = 8000;
 
 // E2E test configuration required in app
 export const testConfig = {};

shim.js

@@ -9,6 +9,7 @@ import { LaunchArguments } from 'react-native-launch-arguments';
 import {
   FALLBACK_FIXTURE_SERVER_PORT,
   FALLBACK_COMMAND_QUEUE_SERVER_PORT,
+  FALLBACK_MOCK_SERVER_PORT,
   isE2E,
   isTest,
   enableApiCallLogs,
@@ -66,6 +67,9 @@ if (isTest) {
   testConfig.commandQueueServerPort = raw?.commandQueueServerPort
     ? raw.commandQueueServerPort
     : FALLBACK_COMMAND_QUEUE_SERVER_PORT;
+  testConfig.mockServerPort = raw?.mockServerPort
+    ? raw.mockServerPort
+    : FALLBACK_MOCK_SERVER_PORT;
 }
 
 // Fix for https://github.com/facebook/react-native/issues/5667