RN: Migrate LogBoxInspectorHeader-test.js from Shallow Renderer (fa…

…cebook#44978) Summary: Pull Request resolved: facebook#44978 Migrates this Jest unit test away from using `react-shallow-renderer` because it is no longer recommended. Changelog: [Internal] Differential Revision: D58643059
yungsters · Jun 16, 2024 · 7eb95c9 · 7eb95c9
1 parent d8020da
commit 7eb95c9
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 74 deletions.
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js
@@ -8,26 +8,25 @@
  * @format
  */
 
-import type {ImageSource} from '../../Image/ImageSource';
 import type {LogLevel} from '../Data/LogBoxLog';
 
 import StatusBar from '../../Components/StatusBar/StatusBar';
 import View from '../../Components/View/View';
-import Image from '../../Image/Image';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import Platform from '../../Utilities/Platform';
-import LogBoxButton from './LogBoxButton';
+import LogBoxInspectorHeaderButton from './LogBoxInspectorHeaderButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
-type Props = $ReadOnly<{|
+
+type Props = $ReadOnly<{
   onSelectIndex: (selectedIndex: number) => void,
   selectedIndex: number,
   total: number,
   level: LogLevel,
-|}>;
+}>;
 
-function LogBoxInspectorHeader(props: Props): React.Node {
+export default function LogBoxInspectorHeader(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
       <View style={[styles.safeArea, styles[props.level]]}>
@@ -70,64 +69,6 @@ function LogBoxInspectorHeader(props: Props): React.Node {
   );
 }
 
-const backgroundForLevel = (level: LogLevel) =>
-  ({
-    warn: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getWarningDarkColor(),
-    },
-    error: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getErrorDarkColor(),
-    },
-    fatal: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getFatalDarkColor(),
-    },
-    syntax: {
-      default: 'transparent',
-      pressed: LogBoxStyle.getFatalDarkColor(),
-    },
-  })[level];
-
-function LogBoxInspectorHeaderButton(
-  props: $ReadOnly<{|
-    disabled: boolean,
-    image: ImageSource,
-    level: LogLevel,
-    onPress?: ?() => void,
-  |}>,
-): React.Node {
-  return (
-    <LogBoxButton
-      backgroundColor={backgroundForLevel(props.level)}
-      onPress={props.disabled ? null : props.onPress}
-      style={headerStyles.button}>
-      {props.disabled ? null : (
-        <Image source={props.image} style={headerStyles.buttonImage} />
-      )}
-    </LogBoxButton>
-  );
-}
-
-const headerStyles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    aspectRatio: 1,
-    justifyContent: 'center',
-    marginTop: 5,
-    marginRight: 6,
-    marginLeft: 6,
-    marginBottom: -8,
-    borderRadius: 3,
-  },
-  buttonImage: {
-    height: 14,
-    width: 8,
-    tintColor: LogBoxStyle.getTextColor(),
-  },
-});
-
 const styles = StyleSheet.create({
   syntax: {
     backgroundColor: LogBoxStyle.getFatalColor(),
@@ -164,5 +105,3 @@ const styles = StyleSheet.create({
     paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
   },
 });
-
-export default LogBoxInspectorHeader;
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeaderButton.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeaderButton.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ImageSource} from '../../Image/ImageSource';
+import type {LogLevel} from '../Data/LogBoxLog';
+
+import Image from '../../Image/Image';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+const backgroundForLevel = (level: LogLevel) =>
+  ({
+    warn: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getWarningDarkColor(),
+    },
+    error: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getErrorDarkColor(),
+    },
+    fatal: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getFatalDarkColor(),
+    },
+    syntax: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getFatalDarkColor(),
+    },
+  })[level];
+
+export default function LogBoxInspectorHeaderButton(
+  props: $ReadOnly<{
+    disabled: boolean,
+    image: ImageSource,
+    level: LogLevel,
+    onPress?: ?() => void,
+  }>,
+): React.Node {
+  return (
+    <LogBoxButton
+      backgroundColor={backgroundForLevel(props.level)}
+      onPress={props.disabled ? null : props.onPress}
+      style={styles.button}>
+      {props.disabled ? null : (
+        <Image source={props.image} style={styles.buttonImage} />
+      )}
+    </LogBoxButton>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    aspectRatio: 1,
+    justifyContent: 'center',
+    marginTop: 5,
+    marginRight: 6,
+    marginLeft: 6,
+    marginBottom: -8,
+    borderRadius: 3,
+  },
+  buttonImage: {
+    height: 14,
+    width: 8,
+    tintColor: LogBoxStyle.getTextColor(),
+  },
+});
diff --git a/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js b/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js
@@ -15,9 +15,16 @@ const render = require('../../../../jest/renderer');
 const LogBoxInspectorHeader = require('../LogBoxInspectorHeader').default;
 const React = require('react');
 
+// Mock `LogBoxInspectorHeaderButton` because we are interested in snapshotting
+// the behavior of `LogBoxInspectorHeader`, not `LogBoxInspectorHeaderButton`.
+jest.mock('../LogBoxInspectorHeaderButton', () => ({
+  __esModule: true,
+  default: 'LogBoxInspectorHeaderButton',
+}));
+
 describe('LogBoxInspectorHeader', () => {
   it('should render no buttons for one total', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxInspectorHeader
         onSelectIndex={() => {}}
         selectedIndex={0}
@@ -30,7 +37,7 @@ describe('LogBoxInspectorHeader', () => {
   });
 
   it('should render both buttons for two total', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxInspectorHeader
         onSelectIndex={() => {}}
         selectedIndex={1}
@@ -43,7 +50,7 @@ describe('LogBoxInspectorHeader', () => {
   });
 
   it('should render two buttons for three or more total', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxInspectorHeader
         onSelectIndex={() => {}}
         selectedIndex={0}
@@ -56,7 +63,7 @@ describe('LogBoxInspectorHeader', () => {
   });
 
   it('should render syntax error header', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxInspectorHeader
         onSelectIndex={() => {}}
         selectedIndex={0}

diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -5576,14 +5576,25 @@ declare export default function LogBoxInspectorFooterButton(
 `;
 
 exports[`public API should not change unintentionally Libraries/LogBox/UI/LogBoxInspectorHeader.js 1`] = `
-"type Props = $ReadOnly<{|
+"type Props = $ReadOnly<{
   onSelectIndex: (selectedIndex: number) => void,
   selectedIndex: number,
   total: number,
   level: LogLevel,
-|}>;
-declare function LogBoxInspectorHeader(props: Props): React.Node;
-declare export default typeof LogBoxInspectorHeader;
+}>;
+declare export default function LogBoxInspectorHeader(props: Props): React.Node;
+"
+`;
+
+exports[`public API should not change unintentionally Libraries/LogBox/UI/LogBoxInspectorHeaderButton.js 1`] = `
+"declare export default function LogBoxInspectorHeaderButton(
+  props: $ReadOnly<{
+    disabled: boolean,
+    image: ImageSource,
+    level: LogLevel,
+    onPress?: ?() => void,
+  }>
+): React.Node;
 "
 `;