From c5acff86bd48c8223a768c224ac37b58bb4d29a3 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Sun, 16 Jun 2024 10:30:39 -0700 Subject: [PATCH] RN: Migrate `LogBoxInspectorFooter-test.js` from Shallow Renderer (#44968) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/44968 Migrates this Jest unit test away from using `react-shallow-renderer` because it is no longer recommended. Changelog: [Internal] Reviewed By: robhogan Differential Revision: D58643066 fbshipit-source-id: 216a036ef8e5cfe9b362c2f367da052ee6c9808b --- .../LogBox/UI/LogBoxInspectorFooter.js | 48 ++------------- .../LogBox/UI/LogBoxInspectorFooterButton.js | 58 +++++++++++++++++++ .../__tests__/LogBoxInspectorFooter-test.js | 15 +++-- .../LogBoxInspectorFooter-test.js.snap | 12 ++-- .../__snapshots__/public-api-test.js.snap | 18 ++++-- 5 files changed, 95 insertions(+), 56 deletions(-) create mode 100644 packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js index 44d344f0334..4100fb4a414 100644 --- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js @@ -10,21 +10,20 @@ import type {LogLevel} from '../Data/LogBoxLog'; -import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView'; import View from '../../Components/View/View'; import StyleSheet from '../../StyleSheet/StyleSheet'; import Text from '../../Text/Text'; -import LogBoxButton from './LogBoxButton'; +import LogBoxInspectorFooterButton from './LogBoxInspectorFooterButton'; import * as LogBoxStyle from './LogBoxStyle'; import * as React from 'react'; -type Props = $ReadOnly<{| +type Props = $ReadOnly<{ onDismiss: () => void, onMinimize: () => void, level?: ?LogLevel, -|}>; +}>; -function LogBoxInspectorFooter(props: Props): React.Node { +export default function LogBoxInspectorFooter(props: Props): React.Node { if (props.level === 'syntax') { return ( @@ -39,34 +38,12 @@ function LogBoxInspectorFooter(props: Props): React.Node { return ( - - + + ); } -type ButtonProps = $ReadOnly<{| - onPress: () => void, - text: string, -|}>; - -function FooterButton(props: ButtonProps): React.Node { - return ( - - - - {props.text} - - - - ); -} - const styles = StyleSheet.create({ root: { backgroundColor: LogBoxStyle.getBackgroundColor(1), @@ -79,17 +56,6 @@ const styles = StyleSheet.create({ button: { flex: 1, }, - buttonContent: { - alignItems: 'center', - height: 48, - justifyContent: 'center', - }, - buttonLabel: { - color: LogBoxStyle.getTextColor(1), - fontSize: 14, - includeFontPadding: false, - lineHeight: 20, - }, syntaxErrorText: { textAlign: 'center', width: '100%', @@ -102,5 +68,3 @@ const styles = StyleSheet.create({ color: LogBoxStyle.getTextColor(0.6), }, }); - -export default LogBoxInspectorFooter; diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js new file mode 100644 index 00000000000..d2208c773e2 --- /dev/null +++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js @@ -0,0 +1,58 @@ +/** + * 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 SafeAreaView from '../../Components/SafeAreaView/SafeAreaView'; +import View from '../../Components/View/View'; +import StyleSheet from '../../StyleSheet/StyleSheet'; +import Text from '../../Text/Text'; +import LogBoxButton from './LogBoxButton'; +import * as LogBoxStyle from './LogBoxStyle'; +import * as React from 'react'; + +type ButtonProps = $ReadOnly<{ + onPress: () => void, + text: string, +}>; + +export default function LogBoxInspectorFooterButton( + props: ButtonProps, +): React.Node { + return ( + + + + {props.text} + + + + ); +} + +const styles = StyleSheet.create({ + button: { + flex: 1, + }, + buttonContent: { + alignItems: 'center', + height: 48, + justifyContent: 'center', + }, + buttonLabel: { + color: LogBoxStyle.getTextColor(1), + fontSize: 14, + includeFontPadding: false, + lineHeight: 20, + }, +}); diff --git a/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorFooter-test.js b/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorFooter-test.js index 500ad24f810..4465a0b21c6 100644 --- a/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorFooter-test.js +++ b/packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorFooter-test.js @@ -15,9 +15,16 @@ const render = require('../../../../jest/renderer'); const LogBoxInspectorFooter = require('../LogBoxInspectorFooter').default; const React = require('react'); +// Mock `LogBoxInspectorFooterButton` because we are interested in snapshotting +// the behavior of `LogBoxInspectorFooter`, not `LogBoxInspectorFooterButton`. +jest.mock('../LogBoxInspectorFooterButton', () => ({ + __esModule: true, + default: 'LogBoxInspectorFooterButton', +})); + describe('LogBoxInspectorFooter', () => { it('should render two buttons for warning', () => { - const output = render.shallowRender( + const output = render.create( {}} onDismiss={() => {}} @@ -29,7 +36,7 @@ describe('LogBoxInspectorFooter', () => { }); it('should render two buttons for error', () => { - const output = render.shallowRender( + const output = render.create( {}} onDismiss={() => {}} @@ -41,7 +48,7 @@ describe('LogBoxInspectorFooter', () => { }); it('should render two buttons for fatal', () => { - const output = render.shallowRender( + const output = render.create( {}} onDismiss={() => {}} @@ -53,7 +60,7 @@ describe('LogBoxInspectorFooter', () => { }); it('should render no buttons and a message for syntax error', () => { - const output = render.shallowRender( + const output = render.create( {}} onDismiss={() => {}} diff --git a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap index 958f456d53f..dc84cb131f0 100644 --- a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap +++ b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap @@ -60,11 +60,11 @@ exports[`LogBoxInspectorFooter should render two buttons for error 1`] = ` } } > - - @@ -87,11 +87,11 @@ exports[`LogBoxInspectorFooter should render two buttons for fatal 1`] = ` } } > - - @@ -114,11 +114,11 @@ exports[`LogBoxInspectorFooter should render two buttons for warning 1`] = ` } } > - - 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 index 8ace0bdbb5e..32953cb94f1 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -5555,13 +5555,23 @@ declare export default typeof LogBoxInspectorCodeFrame; `; exports[`public API should not change unintentionally Libraries/LogBox/UI/LogBoxInspectorFooter.js 1`] = ` -"type Props = $ReadOnly<{| +"type Props = $ReadOnly<{ onDismiss: () => void, onMinimize: () => void, level?: ?LogLevel, -|}>; -declare function LogBoxInspectorFooter(props: Props): React.Node; -declare export default typeof LogBoxInspectorFooter; +}>; +declare export default function LogBoxInspectorFooter(props: Props): React.Node; +" +`; + +exports[`public API should not change unintentionally Libraries/LogBox/UI/LogBoxInspectorFooterButton.js 1`] = ` +"type ButtonProps = $ReadOnly<{ + onPress: () => void, + text: string, +}>; +declare export default function LogBoxInspectorFooterButton( + props: ButtonProps +): React.Node; " `;