From 81130f8b0f7d93b6e37bdae97ebb11ee9dee20e5 Mon Sep 17 00:00:00 2001
From: Tim Yung <yungsters@meta.com>
Date: Sun, 16 Jun 2024 12:15:49 -0700
Subject: [PATCH] RN: Migrate `LogBoxInspectorStackFrames-test.js` from Shallow
 Renderer (#44976)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44976

Migrates this Jest unit test away from using `react-shallow-renderer` because it is no longer recommended.

Changelog:
[Internal]

Reviewed By: robhogan

Differential Revision: D58643067

fbshipit-source-id: 2e298e2736227afb9322463daa3db0578638559a
---
 .../LogBoxInspectorStackFrames-test.js        |  14 +-
 .../LogBoxInspectorStackFrames-test.js.snap   | 207 ++++++++++++++----
 2 files changed, 178 insertions(+), 43 deletions(-)

diff --git a/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorStackFrames-test.js b/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorStackFrames-test.js
index f7381ed1206..a8d648692c9 100644
--- a/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorStackFrames-test.js
+++ b/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorStackFrames-test.js
@@ -17,9 +17,15 @@ import LogBoxInspectorStackFrames, {
 
 const render = require('../../../../jest/renderer');
 const LogBoxLog = require('../../Data/LogBoxLog').default;
-const {} = require('../LogBoxInspectorStackFrames');
 const React = require('react');
 
+// Mock `LogBoxInspectorSection` because we are interested in snapshotting the
+// behavior of `LogBoxInspectorStackFrames`, not `LogBoxInspectorSection`.
+jest.mock('../LogBoxInspectorSection', () => ({
+  __esModule: true,
+  default: 'LogBoxInspectorSection',
+}));
+
 const createLogWithFrames = (collapsedOptions: Array<?boolean>) => {
   return new LogBoxLog({
     level: 'warn',
@@ -44,9 +50,9 @@ const createCollapsedFrames = (collapsedOptions: Array<?boolean>) => {
   }));
 };
 
-describe('LogBoxInspectorStackFrame', () => {
+describe('LogBoxInspectorStackFrames', () => {
   it('should render stack frames with 1 frame collapsed', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxInspectorStackFrames
         onRetry={() => {}}
         log={createLogWithFrames([false, true])}
@@ -57,7 +63,7 @@ describe('LogBoxInspectorStackFrame', () => {
   });
 
   it('should render null for empty stack frames', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxInspectorStackFrames
         onRetry={() => {}}
         log={createLogWithFrames([])}
diff --git a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorStackFrames-test.js.snap b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorStackFrames-test.js.snap
index 8d2882cebb0..803ef114aeb 100644
--- a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorStackFrames-test.js.snap
+++ b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorStackFrames-test.js.snap
@@ -1,61 +1,190 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LogBoxInspectorStackFrame should render null for empty stack frames 1`] = `null`;
+exports[`LogBoxInspectorStackFrames should render null for empty stack frames 1`] = `null`;
 
-exports[`LogBoxInspectorStackFrame should render stack frames with 1 frame collapsed 1`] = `
-<LogBoxInspectorSection
-  action={
-    <LogBoxInspectorSourceMapStatus
-      onPress={null}
-      status="NONE"
-    />
+exports[`LogBoxInspectorStackFrames should render stack frames with 1 frame collapsed 1`] = `
+<View
+  style={
+    Object {
+      "marginTop": 15,
+    }
   }
-  heading="Call Stack"
 >
   <View
     style={
       Object {
-        "backgroundColor": "rgba(51, 51, 51, 1)",
-        "borderRadius": 5,
-        "marginBottom": 5,
-        "marginHorizontal": 10,
-        "paddingHorizontal": 5,
-        "paddingVertical": 10,
+        "alignItems": "center",
+        "flexDirection": "row",
+        "marginBottom": 10,
+        "paddingHorizontal": 12,
       }
     }
   >
     <Text
       style={
         Object {
-          "color": "rgba(255, 255, 255, 0.7)",
-          "fontSize": 13,
-          "fontWeight": "400",
+          "color": "rgba(255, 255, 255, 1)",
+          "flex": 1,
+          "fontSize": 18,
+          "fontWeight": "600",
           "includeFontPadding": false,
-          "lineHeight": 18,
-          "marginHorizontal": 10,
+          "lineHeight": 20,
         }
       }
     >
-      This call stack is not symbolicated. Some features are unavailable such as viewing the function name or tapping to open files.
+      Call Stack
     </Text>
   </View>
-  <StackFrameList
-    list={
-      Array [
-        Object {
-          "collapse": false,
-          "column": 1,
-          "file": "dependency.js",
-          "lineNumber": 1,
-          "methodName": "foo",
-        },
-      ]
+  <View
+    style={
+      Object {
+        "paddingBottom": 10,
+      }
     }
-    status="NONE"
-  />
-  <StackFrameFooter
-    message="See 1 more frame"
-    onPress={[Function]}
-  />
-</LogBoxInspectorSection>
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "rgba(51, 51, 51, 1)",
+          "borderRadius": 5,
+          "marginBottom": 5,
+          "marginHorizontal": 10,
+          "paddingHorizontal": 5,
+          "paddingVertical": 10,
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "rgba(255, 255, 255, 0.7)",
+            "fontSize": 13,
+            "fontWeight": "400",
+            "includeFontPadding": false,
+            "lineHeight": 18,
+            "marginHorizontal": 10,
+          }
+        }
+      >
+        This call stack is not symbolicated. Some features are unavailable such as viewing the function name or tapping to open files.
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingHorizontal": 15,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            Object {
+              "borderRadius": 5,
+              "flex": 1,
+              "paddingHorizontal": 10,
+              "paddingVertical": 4,
+            },
+          ]
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "rgba(255, 255, 255, 1)",
+                "fontFamily": "Menlo",
+                "fontSize": 14,
+                "fontWeight": "400",
+                "includeFontPadding": false,
+                "lineHeight": 18,
+              },
+              false,
+            ]
+          }
+        >
+          foo
+        </Text>
+        <Text
+          ellipsizeMode="middle"
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "color": "rgba(255, 255, 255, 0.8)",
+                "fontSize": 12,
+                "fontWeight": "300",
+                "includeFontPadding": false,
+                "lineHeight": 16,
+                "paddingLeft": 10,
+              },
+              false,
+            ]
+          }
+        >
+          dependency.js:1:2
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "marginLeft": 15,
+        }
+      }
+    >
+      <View
+        accessibilityState={
+          Object {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessible={true}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+            },
+            Object {
+              "borderRadius": 5,
+            },
+          ]
+        }
+      >
+        <Text
+          style={
+            Object {
+              "color": "rgba(255, 255, 255, 0.7)",
+              "fontSize": 12,
+              "fontWeight": "300",
+              "lineHeight": 20,
+              "marginTop": 0,
+              "paddingHorizontal": 10,
+              "paddingVertical": 5,
+            }
+          }
+        >
+          See 1 more frame
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
 `;