From 80d5ac610d3e296700ede00e16f0cbec56f1427f Mon Sep 17 00:00:00 2001
From: Harsh <harshrathi.dev@gmail.com>
Date: Thu, 28 Mar 2024 10:15:32 +0530
Subject: [PATCH] added workaround for failing test case on expo-image

---
 __mocks__/expo-image.js                       |  8 ++
 jest.setup.js                                 | 13 +++
 .../__snapshots__/EmptyVault.test.tsx.snap    | 19 +---
 .../__snapshots__/VaultCard.test.tsx.snap     | 18 +---
 .../__snapshots__/AboutScreen.test.tsx.snap   | 20 +---
 .../EmptyTransaction.test.tsx.snap            | 19 +---
 .../ConnectionBoundary.test.tsx.snap          | 19 +---
 .../PasscodePrompt.test.tsx.snap              | 96 ++-----------------
 .../CreateWalletGuidelines.test.tsx.snap      | 19 +---
 .../WalletCreateRestoreSuccess.test.tsx.snap  | 38 +-------
 10 files changed, 43 insertions(+), 226 deletions(-)
 create mode 100644 __mocks__/expo-image.js

diff --git a/__mocks__/expo-image.js b/__mocks__/expo-image.js
new file mode 100644
index 0000000000..1df672fe31
--- /dev/null
+++ b/__mocks__/expo-image.js
@@ -0,0 +1,8 @@
+import {
+  Image as RNImage,
+  ImageBackground as RNImageBackground,
+} from 'react-native';
+
+// TODO remove when https://github.com/expo/expo/issues/26087 is resolved
+export const ImageBackground = RNImageBackground;
+export const Image = RNImage;
\ No newline at end of file
diff --git a/jest.setup.js b/jest.setup.js
index b1769278c6..e46f028ce9 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -8,3 +8,16 @@ jest.mock("expo-linking", () => {
 
   return module;
 });
+
+global.window.matchMedia = global.matchMedia || function (query) {
+  return {
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  };
+}
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/EmptyVault.test.tsx.snap b/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/EmptyVault.test.tsx.snap
index 3893de09ac..3a068070d2 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/EmptyVault.test.tsx.snap
+++ b/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/EmptyVault.test.tsx.snap
@@ -58,29 +58,14 @@ exports[`Empty vault should match snapshot 1`] = `
           }
         }
       >
-        <ViewManagerAdapter_ExpoImage
-          contentFit="cover"
-          contentPosition={
-            {
-              "left": "50%",
-              "top": "50%",
-            }
-          }
-          height={136}
-          onError={[Function]}
-          onLoad={[Function]}
-          onLoadStart={[Function]}
-          onProgress={[Function]}
-          placeholder={[]}
-          source={[]}
+        <Image
+          source={1}
           style={
             {
               "height": 136,
               "width": 204,
             }
           }
-          transition={null}
-          width={204}
         />
       </View>
       <Text
diff --git a/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/VaultCard.test.tsx.snap b/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/VaultCard.test.tsx.snap
index 5de4698be2..b451723d5e 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/VaultCard.test.tsx.snap
+++ b/mobile-app/app/screens/AppNavigator/screens/Loans/components/__snapshots__/VaultCard.test.tsx.snap
@@ -1361,21 +1361,9 @@ exports[`Vault card should match snapshot of liquidated vault 1`] = `
           }
         }
       >
-        <ViewManagerAdapter_ExpoImage
+        <Image
           contentFit="contain"
-          contentPosition={
-            {
-              "left": "50%",
-              "top": "50%",
-            }
-          }
-          height={64}
-          onError={[Function]}
-          onLoad={[Function]}
-          onLoadStart={[Function]}
-          onProgress={[Function]}
-          placeholder={[]}
-          source={[]}
+          source={1}
           style={
             {
               "height": 64,
@@ -1383,8 +1371,6 @@ exports[`Vault card should match snapshot of liquidated vault 1`] = `
             }
           }
           testID="vault_IN LIQUIDATION_liquidated_vault_image"
-          transition={null}
-          width={74}
         />
         <View
           style={
diff --git a/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap b/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap
index b98f295740..a1c9e6533f 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap
+++ b/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap
@@ -81,23 +81,9 @@ exports[`<AboutScreen /> should match snapshot 1`] = `
           />
         </RNSVGGroup>
       </RNSVGSvgView>
-      <ViewManagerAdapter_ExpoImage
+      <Image
         contentFit="contain"
-        contentPosition={
-          {
-            "left": "50%",
-            "top": "50%",
-          }
-        }
-        flexWrap="wrap"
-        height={24}
-        marginTop={20}
-        onError={[Function]}
-        onLoad={[Function]}
-        onLoadStart={[Function]}
-        onProgress={[Function]}
-        placeholder={[]}
-        source={[]}
+        source={1}
         style={
           {
             "flexWrap": "wrap",
@@ -106,8 +92,6 @@ exports[`<AboutScreen /> should match snapshot 1`] = `
             "width": 256,
           }
         }
-        transition={null}
-        width={256}
       />
       <View
         style={
diff --git a/mobile-app/app/screens/AppNavigator/screens/Transactions/__snapshots__/EmptyTransaction.test.tsx.snap b/mobile-app/app/screens/AppNavigator/screens/Transactions/__snapshots__/EmptyTransaction.test.tsx.snap
index bb2f824a1e..1a5ed194e3 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Transactions/__snapshots__/EmptyTransaction.test.tsx.snap
+++ b/mobile-app/app/screens/AppNavigator/screens/Transactions/__snapshots__/EmptyTransaction.test.tsx.snap
@@ -37,29 +37,14 @@ exports[`empty transaction should match snapshot 1`] = `
         }
       }
     >
-      <ViewManagerAdapter_ExpoImage
-        contentFit="cover"
-        contentPosition={
-          {
-            "left": "50%",
-            "top": "50%",
-          }
-        }
-        height={96}
-        onError={[Function]}
-        onLoad={[Function]}
-        onLoadStart={[Function]}
-        onProgress={[Function]}
-        placeholder={[]}
-        source={[]}
+      <Image
+        source={1}
         style={
           {
             "height": 96,
             "width": 204,
           }
         }
-        transition={null}
-        width={204}
       />
     </View>
     <Text
diff --git a/mobile-app/app/screens/ConnectionBoundary/__snapshots__/ConnectionBoundary.test.tsx.snap b/mobile-app/app/screens/ConnectionBoundary/__snapshots__/ConnectionBoundary.test.tsx.snap
index 15cfa3b79e..f79016e16a 100644
--- a/mobile-app/app/screens/ConnectionBoundary/__snapshots__/ConnectionBoundary.test.tsx.snap
+++ b/mobile-app/app/screens/ConnectionBoundary/__snapshots__/ConnectionBoundary.test.tsx.snap
@@ -31,29 +31,14 @@ exports[`offline screen should match snapshot when offline 1`] = `
       }
     }
   >
-    <ViewManagerAdapter_ExpoImage
-      contentFit="cover"
-      contentPosition={
-        {
-          "left": "50%",
-          "top": "50%",
-        }
-      }
-      height={59}
-      onError={[Function]}
-      onLoad={[Function]}
-      onLoadStart={[Function]}
-      onProgress={[Function]}
-      placeholder={[]}
-      source={[]}
+    <Image
+      source={1}
       style={
         {
           "height": 59,
           "width": 163,
         }
       }
-      transition={null}
-      width={163}
     />
   </View>
   <Text
diff --git a/mobile-app/app/screens/TransactionAuthorization/__snapshots__/PasscodePrompt.test.tsx.snap b/mobile-app/app/screens/TransactionAuthorization/__snapshots__/PasscodePrompt.test.tsx.snap
index 294f9e802f..a40f11796a 100644
--- a/mobile-app/app/screens/TransactionAuthorization/__snapshots__/PasscodePrompt.test.tsx.snap
+++ b/mobile-app/app/screens/TransactionAuthorization/__snapshots__/PasscodePrompt.test.tsx.snap
@@ -1,97 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`transaction authorization screen should match snapshot of status: 0 1`] = `
-<RCTSafeAreaView
-  style={
-    {
-      "flexDirection": "column",
-      "height": "100%",
-      "left": 0,
-      "position": "absolute",
-      "top": 0,
-      "width": "100%",
-      "zIndex": 50,
-    }
-  }
-/>
-`;
+exports[`transaction authorization screen should match snapshot of status: 0 1`] = `null`;
 
-exports[`transaction authorization screen should match snapshot of status: 1 1`] = `
-<RCTSafeAreaView
-  style={
-    {
-      "flexDirection": "column",
-      "height": "100%",
-      "left": 0,
-      "position": "absolute",
-      "top": 0,
-      "width": "100%",
-      "zIndex": 50,
-    }
-  }
-/>
-`;
+exports[`transaction authorization screen should match snapshot of status: 1 1`] = `null`;
 
-exports[`transaction authorization screen should match snapshot of status: 2 1`] = `
-<RCTSafeAreaView
-  style={
-    {
-      "flexDirection": "column",
-      "height": "100%",
-      "left": 0,
-      "position": "absolute",
-      "top": 0,
-      "width": "100%",
-      "zIndex": 50,
-    }
-  }
-/>
-`;
+exports[`transaction authorization screen should match snapshot of status: 2 1`] = `null`;
 
-exports[`transaction authorization screen should match snapshot of status: 3 1`] = `
-<RCTSafeAreaView
-  style={
-    {
-      "flexDirection": "column",
-      "height": "100%",
-      "left": 0,
-      "position": "absolute",
-      "top": 0,
-      "width": "100%",
-      "zIndex": 50,
-    }
-  }
-/>
-`;
+exports[`transaction authorization screen should match snapshot of status: 3 1`] = `null`;
 
-exports[`transaction authorization screen should match snapshot of status: 4 1`] = `
-<RCTSafeAreaView
-  style={
-    {
-      "flexDirection": "column",
-      "height": "100%",
-      "left": 0,
-      "position": "absolute",
-      "top": 0,
-      "width": "100%",
-      "zIndex": 50,
-    }
-  }
-/>
-`;
+exports[`transaction authorization screen should match snapshot of status: 4 1`] = `null`;
 
-exports[`transaction authorization screen should match snapshot of status: 5 1`] = `
-<RCTSafeAreaView
-  style={
-    {
-      "flexDirection": "column",
-      "height": "100%",
-      "left": 0,
-      "position": "absolute",
-      "top": 0,
-      "width": "100%",
-      "zIndex": 50,
-    }
-  }
-/>
-`;
+exports[`transaction authorization screen should match snapshot of status: 5 1`] = `null`;
diff --git a/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/CreateWalletGuidelines.test.tsx.snap b/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/CreateWalletGuidelines.test.tsx.snap
index 72712feaf7..fc78c80113 100644
--- a/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/CreateWalletGuidelines.test.tsx.snap
+++ b/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/CreateWalletGuidelines.test.tsx.snap
@@ -33,29 +33,14 @@ exports[`create wallet guidelines v2 should match snapshot 1`] = `
         }
       }
     >
-      <ViewManagerAdapter_ExpoImage
-        contentFit="cover"
-        contentPosition={
-          {
-            "left": "50%",
-            "top": "50%",
-          }
-        }
-        height={136}
-        onError={[Function]}
-        onLoad={[Function]}
-        onLoadStart={[Function]}
-        onProgress={[Function]}
-        placeholder={[]}
-        source={[]}
+      <Image
+        source={1}
         style={
           {
             "height": 136,
             "width": 200,
           }
         }
-        transition={null}
-        width={200}
       />
     </View>
     <Text
diff --git a/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/WalletCreateRestoreSuccess.test.tsx.snap b/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/WalletCreateRestoreSuccess.test.tsx.snap
index 7c8e692e69..790f2678a9 100644
--- a/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/WalletCreateRestoreSuccess.test.tsx.snap
+++ b/mobile-app/app/screens/WalletNavigator/screens/CreateWallet/__snapshots__/WalletCreateRestoreSuccess.test.tsx.snap
@@ -128,29 +128,14 @@ exports[`WalletCreateRestoreSuccess should match create wallet snapshot 1`] = `
             ]
           }
         />
-        <ViewManagerAdapter_ExpoImage
-          contentFit="cover"
-          contentPosition={
-            {
-              "left": "50%",
-              "top": "50%",
-            }
-          }
-          height={332}
-          onError={[Function]}
-          onLoad={[Function]}
-          onLoadStart={[Function]}
-          onProgress={[Function]}
-          placeholder={[]}
-          source={[]}
+        <Image
+          source={1}
           style={
             {
               "height": 332,
               "width": 750,
             }
           }
-          transition={null}
-          width={750}
         />
         <View
           style={
@@ -360,29 +345,14 @@ exports[`WalletCreateRestoreSuccess should match restore wallet snapshot 1`] = `
             ]
           }
         />
-        <ViewManagerAdapter_ExpoImage
-          contentFit="cover"
-          contentPosition={
-            {
-              "left": "50%",
-              "top": "50%",
-            }
-          }
-          height={332}
-          onError={[Function]}
-          onLoad={[Function]}
-          onLoadStart={[Function]}
-          onProgress={[Function]}
-          placeholder={[]}
-          source={[]}
+        <Image
+          source={1}
           style={
             {
               "height": 332,
               "width": 750,
             }
           }
-          transition={null}
-          width={750}
         />
         <View
           style={