LogBox - Update to use it's own root for the inspector
Summary: Apologies for the large diff, it was difficult to break down. This diff is a major refactor of LogBox that: - Separates LogBoxNotification and LogBoxInspector - Moves them each to their own container - Updates AppContainer to only render the notification - Updates the native logbox root to render the inspector - Adds withSubscription HOC to manage subscribing to LogBoxData - Simplifies LogBox to export an object instead of a component Changelog: [Internal] Reviewed By: motiz88 Differential Revision: D18750011 fbshipit-source-id: 639885d29e55e125892d1c2b6bbf2826f27d78db
This commit is contained in:
Родитель
e272089524
Коммит
587979552d
|
@ -10,6 +10,7 @@
|
|||
|
||||
('use strict');
|
||||
|
||||
import * as React from 'react';
|
||||
import LogBoxLog from './LogBoxLog';
|
||||
import {parseLogBoxException} from './parseLogBoxLog';
|
||||
import type {LogLevel} from './LogBoxLog';
|
||||
|
@ -369,3 +370,97 @@ export function observe(observer: Observer): Subscription {
|
|||
},
|
||||
};
|
||||
}
|
||||
|
||||
type Props = $ReadOnly<{||}>;
|
||||
type State = $ReadOnly<{|
|
||||
logs: LogBoxLogs,
|
||||
isDisabled: boolean,
|
||||
hasError: boolean,
|
||||
selectedLogIndex: number,
|
||||
|}>;
|
||||
|
||||
type SubscribedComponent = React.AbstractComponent<
|
||||
$ReadOnly<{|
|
||||
logs: $ReadOnlyArray<LogBoxLog>,
|
||||
isDisabled: boolean,
|
||||
selectedLogIndex: number,
|
||||
|}>,
|
||||
>;
|
||||
|
||||
export function withSubscription(
|
||||
WrappedComponent: SubscribedComponent,
|
||||
): React.AbstractComponent<{||}> {
|
||||
class LogBoxStateSubscription extends React.Component<Props, State> {
|
||||
static getDerivedStateFromError() {
|
||||
return {hasError: true};
|
||||
}
|
||||
|
||||
componentDidCatch(err: Error, errorInfo: {componentStack: string, ...}) {
|
||||
reportLogBoxError(err, errorInfo.componentStack);
|
||||
}
|
||||
|
||||
_subscription: ?Subscription;
|
||||
|
||||
state = {
|
||||
logs: new Set(),
|
||||
isDisabled: false,
|
||||
hasError: false,
|
||||
selectedLogIndex: -1,
|
||||
};
|
||||
|
||||
render(): React.Node {
|
||||
if (this.state.hasError) {
|
||||
// This happens when the component failed to render, in which case we delegate to the native redbox.
|
||||
// We can't show anyback fallback UI here, because the error may be with <View> or <Text>.
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<WrappedComponent
|
||||
logs={Array.from(this.state.logs)}
|
||||
isDisabled={this.state.isDisabled}
|
||||
selectedLogIndex={this.state.selectedLogIndex}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
this._subscription = observe(data => {
|
||||
this.setState(data);
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
if (this._subscription != null) {
|
||||
this._subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
_handleDismiss = (): void => {
|
||||
// Here we handle the cases when the log is dismissed and it
|
||||
// was either the last log, or when the current index
|
||||
// is now outside the bounds of the log array.
|
||||
const {selectedLogIndex, logs: stateLogs} = this.state;
|
||||
const logsArray = Array.from(stateLogs);
|
||||
if (selectedLogIndex != null) {
|
||||
if (logsArray.length - 1 <= 0) {
|
||||
setSelectedLog(-1);
|
||||
} else if (selectedLogIndex >= logsArray.length - 1) {
|
||||
setSelectedLog(selectedLogIndex - 1);
|
||||
}
|
||||
|
||||
dismiss(logsArray[selectedLogIndex]);
|
||||
}
|
||||
};
|
||||
|
||||
_handleMinimize = (): void => {
|
||||
setSelectedLog(-1);
|
||||
};
|
||||
|
||||
_handleSetSelectedLog = (index: number): void => {
|
||||
setSelectedLog(index);
|
||||
};
|
||||
}
|
||||
|
||||
return LogBoxStateSubscription;
|
||||
}
|
||||
|
|
|
@ -10,26 +10,14 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
import * as React from 'react';
|
||||
import Platform from '../Utilities/Platform';
|
||||
import RCTLog from '../Utilities/RCTLog';
|
||||
import LogBoxContainer from './UI/LogBoxContainer';
|
||||
import * as LogBoxData from './Data/LogBoxData';
|
||||
import {parseLogBoxLog} from './Data/parseLogBoxLog';
|
||||
|
||||
import type {LogBoxLogs, Subscription, IgnorePattern} from './Data/LogBoxData';
|
||||
import type {IgnorePattern} from './Data/LogBoxData';
|
||||
|
||||
import LogBoxLog from './Data/LogBoxLog';
|
||||
|
||||
type Props = $ReadOnly<{||}>;
|
||||
type State = {|
|
||||
logs: LogBoxLogs,
|
||||
isDisabled: boolean,
|
||||
hasError: boolean,
|
||||
selectedLogIndex: number,
|
||||
|};
|
||||
|
||||
let LogBoxComponent;
|
||||
let LogBox;
|
||||
|
||||
/**
|
||||
* LogBox displays logs in the app.
|
||||
|
@ -48,25 +36,26 @@ if (__DEV__) {
|
|||
warnImpl(...args);
|
||||
};
|
||||
|
||||
LogBoxComponent = class LogBox extends React.Component<Props, State> {
|
||||
static getDerivedStateFromError() {
|
||||
return {hasError: true};
|
||||
}
|
||||
|
||||
componentDidCatch(err, errorInfo) {
|
||||
LogBoxData.reportLogBoxError(err, errorInfo.componentStack);
|
||||
}
|
||||
|
||||
LogBox = {
|
||||
// TODO: deprecated, replace with ignoreLogs
|
||||
static ignoreWarnings(patterns: $ReadOnlyArray<IgnorePattern>): void {
|
||||
ignoreWarnings: (patterns: $ReadOnlyArray<IgnorePattern>): void => {
|
||||
LogBox.ignoreLogs(patterns);
|
||||
}
|
||||
},
|
||||
|
||||
static ignoreLogs(patterns: $ReadOnlyArray<IgnorePattern>): void {
|
||||
ignoreLogs: (patterns: $ReadOnlyArray<IgnorePattern>): void => {
|
||||
LogBoxData.addIgnorePatterns(patterns);
|
||||
}
|
||||
},
|
||||
|
||||
uninstall: (): void => {
|
||||
errorImpl = error;
|
||||
warnImpl = warn;
|
||||
delete (console: any).disableLogBox;
|
||||
},
|
||||
|
||||
install: (): void => {
|
||||
// Trigger lazy initialization of module.
|
||||
require('../NativeModules/specs/NativeLogBox');
|
||||
|
||||
static install(): void {
|
||||
errorImpl = function(...args) {
|
||||
registerError(...args);
|
||||
};
|
||||
|
@ -92,62 +81,7 @@ if (__DEV__) {
|
|||
RCTLog.setWarningHandler((...args) => {
|
||||
registerWarning(...args);
|
||||
});
|
||||
}
|
||||
|
||||
static uninstall(): void {
|
||||
errorImpl = error;
|
||||
warnImpl = warn;
|
||||
delete (console: any).disableLogBox;
|
||||
}
|
||||
|
||||
_subscription: ?Subscription;
|
||||
|
||||
state = {
|
||||
logs: new Set(),
|
||||
isDisabled: false,
|
||||
hasError: false,
|
||||
selectedLogIndex: -1,
|
||||
};
|
||||
|
||||
render(): React.Node {
|
||||
if (this.state.hasError) {
|
||||
// This happens when the component failed to render, in which case we delegate to the native redbox.
|
||||
// We can't show anyback fallback UI here, because the error may be with <View> or <Text>.
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.state.logs == null ? null : (
|
||||
<LogBoxContainer
|
||||
onDismiss={this._handleDismiss}
|
||||
onDismissWarns={LogBoxData.clearWarnings}
|
||||
onDismissErrors={LogBoxData.clearErrors}
|
||||
logs={this.state.logs}
|
||||
isDisabled={this.state.isDisabled}
|
||||
selectedLogIndex={this.state.selectedLogIndex}
|
||||
setSelectedLog={this._handleSetSelectedLog}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
this._subscription = LogBoxData.observe(data => {
|
||||
this.setState(data);
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
if (this._subscription != null) {
|
||||
this._subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
_handleDismiss(log: LogBoxLog): void {
|
||||
LogBoxData.dismiss(log);
|
||||
}
|
||||
|
||||
_handleSetSelectedLog(index: number): void {
|
||||
LogBoxData.setSelectedLog(index);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const isRCTLogAdviceWarning = (...args) => {
|
||||
|
@ -227,31 +161,27 @@ if (__DEV__) {
|
|||
}
|
||||
};
|
||||
} else {
|
||||
LogBoxComponent = class extends React.Component<Props, State> {
|
||||
LogBox = {
|
||||
// TODO: deprecated, replace with ignoreLogs
|
||||
static ignoreWarnings(patterns: $ReadOnlyArray<IgnorePattern>): void {
|
||||
ignoreWarnings: (patterns: $ReadOnlyArray<IgnorePattern>): void => {
|
||||
// Do nothing.
|
||||
}
|
||||
},
|
||||
|
||||
static ignoreLogs(patterns: $ReadOnlyArray<IgnorePattern>): void {
|
||||
ignoreLogs: (patterns: $ReadOnlyArray<IgnorePattern>): void => {
|
||||
// Do nothing.
|
||||
}
|
||||
},
|
||||
|
||||
static install(): void {
|
||||
install: (): void => {
|
||||
// Do nothing.
|
||||
}
|
||||
},
|
||||
|
||||
static uninstall(): void {
|
||||
uninstall: (): void => {
|
||||
// Do nothing.
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = (LogBoxComponent: Class<React.Component<Props, State>> & {
|
||||
module.exports = (LogBox: {
|
||||
// TODO: deprecated, replace with ignoreLogs
|
||||
ignoreWarnings($ReadOnlyArray<IgnorePattern>): void,
|
||||
ignoreLogs($ReadOnlyArray<IgnorePattern>): void,
|
||||
|
|
|
@ -0,0 +1,86 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow
|
||||
* @format
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
import * as React from 'react';
|
||||
import {View, StyleSheet} from 'react-native';
|
||||
import * as LogBoxData from './Data/LogBoxData';
|
||||
import LogBoxInspector from './UI/LogBoxInspector';
|
||||
import type LogBoxLog from './Data/LogBoxLog';
|
||||
import NativeLogBox from '../NativeModules/specs/NativeLogBox';
|
||||
|
||||
type Props = $ReadOnly<{|
|
||||
logs: $ReadOnlyArray<LogBoxLog>,
|
||||
selectedLogIndex: number,
|
||||
isDisabled?: ?boolean,
|
||||
|}>;
|
||||
|
||||
function NativeLogBoxVisibility(props) {
|
||||
React.useLayoutEffect(() => {
|
||||
if (NativeLogBox) {
|
||||
if (props.visible) {
|
||||
// Schedule this to try and prevent flashing the old state.
|
||||
setTimeout(() => NativeLogBox.show(), 10);
|
||||
} else {
|
||||
NativeLogBox.hide();
|
||||
}
|
||||
}
|
||||
}, [props.visible]);
|
||||
|
||||
return props.children;
|
||||
}
|
||||
|
||||
export class _LogBoxInspectorContainer extends React.Component<Props> {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<NativeLogBoxVisibility visible={this.props.selectedLogIndex >= 0}>
|
||||
<View style={StyleSheet.absoluteFill}>
|
||||
<LogBoxInspector
|
||||
onDismiss={this._handleDismiss}
|
||||
onMinimize={this._handleMinimize}
|
||||
onChangeSelectedIndex={this._handleSetSelectedLog}
|
||||
logs={this.props.logs}
|
||||
selectedIndex={this.props.selectedLogIndex}
|
||||
/>
|
||||
</View>
|
||||
</NativeLogBoxVisibility>
|
||||
);
|
||||
}
|
||||
|
||||
_handleDismiss = (): void => {
|
||||
// Here we handle the cases when the log is dismissed and it
|
||||
// was either the last log, or when the current index
|
||||
// is now outside the bounds of the log array.
|
||||
const {selectedLogIndex, logs} = this.props;
|
||||
const logsArray = Array.from(logs);
|
||||
if (selectedLogIndex != null) {
|
||||
if (logsArray.length - 1 <= 0) {
|
||||
LogBoxData.setSelectedLog(-1);
|
||||
} else if (selectedLogIndex >= logsArray.length - 1) {
|
||||
LogBoxData.setSelectedLog(selectedLogIndex - 1);
|
||||
}
|
||||
|
||||
LogBoxData.dismiss(logsArray[selectedLogIndex]);
|
||||
}
|
||||
};
|
||||
|
||||
_handleMinimize = (): void => {
|
||||
LogBoxData.setSelectedLog(-1);
|
||||
};
|
||||
|
||||
_handleSetSelectedLog = (index: number): void => {
|
||||
LogBoxData.setSelectedLog(index);
|
||||
};
|
||||
}
|
||||
|
||||
export default (LogBoxData.withSubscription(
|
||||
_LogBoxInspectorContainer,
|
||||
): React.AbstractComponent<{||}>);
|
|
@ -11,46 +11,31 @@
|
|||
'use strict';
|
||||
|
||||
import * as React from 'react';
|
||||
import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
|
||||
import StyleSheet from '../../StyleSheet/StyleSheet';
|
||||
import View from '../../Components/View/View';
|
||||
import LogBoxInspector from './LogBoxInspector';
|
||||
import LogBoxLog from '../Data/LogBoxLog';
|
||||
import LogBoxLogNotification from './LogBoxLogNotification';
|
||||
import type {LogBoxLogs} from '../Data/LogBoxData';
|
||||
import StyleSheet from '../StyleSheet/StyleSheet';
|
||||
import View from '../Components/View/View';
|
||||
import * as LogBoxData from './Data/LogBoxData';
|
||||
import LogBoxLog from './Data/LogBoxLog';
|
||||
import LogBoxLogNotification from './UI/LogBoxNotification';
|
||||
|
||||
type Props = $ReadOnly<{|
|
||||
onDismiss: (log: LogBoxLog) => void,
|
||||
onDismissWarns: () => void,
|
||||
onDismissErrors: () => void,
|
||||
setSelectedLog: number => void,
|
||||
logs: LogBoxLogs,
|
||||
logs: $ReadOnlyArray<LogBoxLog>,
|
||||
selectedLogIndex: number,
|
||||
isDisabled?: ?boolean,
|
||||
|}>;
|
||||
|
||||
function LogBoxContainer(props: Props): React.Node {
|
||||
const {selectedLogIndex, setSelectedLog} = props;
|
||||
export function _LogBoxNotificationContainer(props: Props): React.Node {
|
||||
const {logs} = props;
|
||||
|
||||
const logs = Array.from(props.logs);
|
||||
const onDismissWarns = () => {
|
||||
LogBoxData.clearWarnings();
|
||||
};
|
||||
const onDismissErrors = () => {
|
||||
LogBoxData.clearErrors();
|
||||
};
|
||||
|
||||
function handleInspectorDismiss() {
|
||||
// Here we handle the cases when the log is dismissed and it
|
||||
// was either the last log, or when the current index
|
||||
// is now outside the bounds of the log array.
|
||||
if (selectedLogIndex != null) {
|
||||
if (logs.length - 1 <= 0) {
|
||||
setSelectedLog(-1);
|
||||
} else if (selectedLogIndex >= logs.length - 1) {
|
||||
setSelectedLog(selectedLogIndex - 1);
|
||||
}
|
||||
props.onDismiss(logs[selectedLogIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
function handleInspectorMinimize() {
|
||||
setSelectedLog(-1);
|
||||
}
|
||||
const setSelectedLog = (index: number): void => {
|
||||
LogBoxData.setSelectedLog(index);
|
||||
};
|
||||
|
||||
function openLog(log: LogBoxLog) {
|
||||
let index = logs.length - 1;
|
||||
|
@ -62,20 +47,6 @@ function LogBoxContainer(props: Props): React.Node {
|
|||
setSelectedLog(index);
|
||||
}
|
||||
|
||||
if (selectedLogIndex > -1) {
|
||||
return (
|
||||
<View style={StyleSheet.absoluteFill}>
|
||||
<LogBoxInspector
|
||||
onDismiss={handleInspectorDismiss}
|
||||
onMinimize={handleInspectorMinimize}
|
||||
onChangeSelectedIndex={setSelectedLog}
|
||||
logs={logs}
|
||||
selectedIndex={selectedLogIndex}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (logs.length === 0 || props.isDisabled === true) {
|
||||
return null;
|
||||
}
|
||||
|
@ -93,7 +64,7 @@ function LogBoxContainer(props: Props): React.Node {
|
|||
level="warn"
|
||||
totalLogCount={warnings.length}
|
||||
onPressOpen={() => openLog(warnings[warnings.length - 1])}
|
||||
onPressDismiss={props.onDismissWarns}
|
||||
onPressDismiss={onDismissWarns}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
@ -104,7 +75,7 @@ function LogBoxContainer(props: Props): React.Node {
|
|||
level="error"
|
||||
totalLogCount={errors.length}
|
||||
onPressOpen={() => openLog(errors[errors.length - 1])}
|
||||
onPressDismiss={props.onDismissErrors}
|
||||
onPressDismiss={onDismissErrors}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
@ -126,4 +97,6 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
});
|
||||
|
||||
export default LogBoxContainer;
|
||||
export default (LogBoxData.withSubscription(
|
||||
_LogBoxNotificationContainer,
|
||||
): React.AbstractComponent<{||}>);
|
|
@ -14,7 +14,7 @@ import LogBoxInspectorCodeFrame from './LogBoxInspectorCodeFrame';
|
|||
import * as React from 'react';
|
||||
import ScrollView from '../../Components/ScrollView/ScrollView';
|
||||
import StyleSheet from '../../StyleSheet/StyleSheet';
|
||||
import Modal from '../../Modal/Modal';
|
||||
import View from '../../Components/View/View';
|
||||
import * as LogBoxData from '../Data/LogBoxData';
|
||||
import Keyboard from '../../Components/Keyboard/Keyboard';
|
||||
import LogBoxInspectorFooter from './LogBoxInspectorFooter';
|
||||
|
@ -23,8 +23,7 @@ import LogBoxInspectorReactFrames from './LogBoxInspectorReactFrames';
|
|||
import LogBoxInspectorStackFrames from './LogBoxInspectorStackFrames';
|
||||
import LogBoxInspectorHeader from './LogBoxInspectorHeader';
|
||||
import * as LogBoxStyle from './LogBoxStyle';
|
||||
|
||||
import type LogBoxLog, {LogLevel} from '../Data/LogBoxLog';
|
||||
import LogBoxLog, {type LogLevel} from '../Data/LogBoxLog';
|
||||
|
||||
type Props = $ReadOnly<{|
|
||||
onDismiss: () => void,
|
||||
|
@ -40,7 +39,9 @@ function LogBoxInspector(props: Props): React.Node {
|
|||
|
||||
const log = logs[selectedIndex];
|
||||
React.useEffect(() => {
|
||||
LogBoxData.symbolicateLogNow(log);
|
||||
if (log) {
|
||||
LogBoxData.symbolicateLogNow(log);
|
||||
}
|
||||
}, [log]);
|
||||
|
||||
React.useEffect(() => {
|
||||
|
@ -68,12 +69,7 @@ function LogBoxInspector(props: Props): React.Node {
|
|||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
animationType="none"
|
||||
visible
|
||||
statusBarTranslucent
|
||||
supportedOrientations={['portrait']}
|
||||
presentationStyle="overFullScreen">
|
||||
<View style={styles.root}>
|
||||
<LogBoxInspectorHeader
|
||||
onSelectIndex={props.onChangeSelectedIndex}
|
||||
selectedIndex={selectedIndex}
|
||||
|
@ -86,7 +82,7 @@ function LogBoxInspector(props: Props): React.Node {
|
|||
onMinimize={props.onMinimize}
|
||||
level={log.level}
|
||||
/>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -143,6 +139,10 @@ function LogBoxInspectorBody(props) {
|
|||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
flex: 1,
|
||||
backgroundColor: LogBoxStyle.getTextColor(),
|
||||
},
|
||||
scrollBody: {
|
||||
backgroundColor: LogBoxStyle.getBackgroundColor(0.9),
|
||||
flex: 1,
|
||||
|
|
|
@ -126,7 +126,7 @@ const headerStyles = StyleSheet.create({
|
|||
borderRadius: 3,
|
||||
},
|
||||
buttonImage: {
|
||||
tintColor: LogBoxStyle.getBackgroundColor(1),
|
||||
tintColor: LogBoxStyle.getTextColor(),
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -156,7 +156,7 @@ const styles = StyleSheet.create({
|
|||
justifyContent: 'center',
|
||||
},
|
||||
titleText: {
|
||||
color: LogBoxStyle.getBackgroundColor(1),
|
||||
color: LogBoxStyle.getTextColor(),
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
includeFontPadding: false,
|
||||
|
|
|
@ -1,254 +0,0 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @emails oncall+react_native
|
||||
* @flow strict-local
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const LogBoxContainer = require('../LogBoxContainer').default;
|
||||
const LogBoxLog = require('../../Data/LogBoxLog').default;
|
||||
const render = require('../../../../jest/renderer');
|
||||
|
||||
describe('LogBoxContainer', () => {
|
||||
it('should render null with no logs', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxContainer
|
||||
onDismiss={() => {}}
|
||||
onDismissWarns={() => {}}
|
||||
onDismissErrors={() => {}}
|
||||
setSelectedLog={() => {}}
|
||||
selectedLogIndex={-1}
|
||||
logs={new Set()}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render null with no selected log and disabled', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxContainer
|
||||
isDisabled
|
||||
onDismiss={() => {}}
|
||||
onDismissWarns={() => {}}
|
||||
onDismissErrors={() => {}}
|
||||
setSelectedLog={() => {}}
|
||||
selectedLogIndex={-1}
|
||||
logs={
|
||||
new Set([
|
||||
new LogBoxLog({
|
||||
level: 'warn',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message',
|
||||
componentStack: [],
|
||||
}),
|
||||
])
|
||||
}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render the latest warning notification', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxContainer
|
||||
onDismiss={() => {}}
|
||||
onDismissWarns={() => {}}
|
||||
onDismissErrors={() => {}}
|
||||
setSelectedLog={() => {}}
|
||||
selectedLogIndex={-1}
|
||||
logs={
|
||||
new Set([
|
||||
new LogBoxLog({
|
||||
level: 'warn',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message',
|
||||
componentStack: [],
|
||||
}),
|
||||
new LogBoxLog({
|
||||
level: 'warn',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message (latest)',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message (latest)',
|
||||
componentStack: [],
|
||||
}),
|
||||
])
|
||||
}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render the latest error notification', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxContainer
|
||||
onDismiss={() => {}}
|
||||
onDismissWarns={() => {}}
|
||||
onDismissErrors={() => {}}
|
||||
setSelectedLog={() => {}}
|
||||
selectedLogIndex={-1}
|
||||
logs={
|
||||
new Set([
|
||||
new LogBoxLog({
|
||||
level: 'error',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message',
|
||||
componentStack: [],
|
||||
}),
|
||||
new LogBoxLog({
|
||||
level: 'error',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message (latest)',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message (latest)',
|
||||
componentStack: [],
|
||||
}),
|
||||
])
|
||||
}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render both an error and warning notification', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxContainer
|
||||
onDismiss={() => {}}
|
||||
onDismissWarns={() => {}}
|
||||
onDismissErrors={() => {}}
|
||||
setSelectedLog={() => {}}
|
||||
selectedLogIndex={-1}
|
||||
logs={
|
||||
new Set([
|
||||
new LogBoxLog({
|
||||
level: 'warn',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message',
|
||||
componentStack: [],
|
||||
}),
|
||||
new LogBoxLog({
|
||||
level: 'error',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message (latest)',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message (latest)',
|
||||
componentStack: [],
|
||||
}),
|
||||
])
|
||||
}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render selected fatal error even when disabled', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxContainer
|
||||
isDisabled
|
||||
onDismiss={() => {}}
|
||||
onDismissWarns={() => {}}
|
||||
onDismissErrors={() => {}}
|
||||
setSelectedLog={() => {}}
|
||||
selectedLogIndex={0}
|
||||
logs={
|
||||
new Set([
|
||||
new LogBoxLog({
|
||||
level: 'fatal',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Should be selected',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message',
|
||||
componentStack: [],
|
||||
}),
|
||||
])
|
||||
}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render selected syntax error even when disabled', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxContainer
|
||||
isDisabled
|
||||
onDismiss={() => {}}
|
||||
onDismissWarns={() => {}}
|
||||
onDismissErrors={() => {}}
|
||||
setSelectedLog={() => {}}
|
||||
selectedLogIndex={0}
|
||||
logs={
|
||||
new Set([
|
||||
new LogBoxLog({
|
||||
level: 'syntax',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Should be selected',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of syntax error message',
|
||||
componentStack: [],
|
||||
codeFrame: {
|
||||
fileName:
|
||||
'/path/to/RKJSModules/Apps/CrashReact/CrashReactApp.js',
|
||||
location: {row: 199, column: 0},
|
||||
content: ` 197 | });
|
||||
198 |
|
||||
> 199 | export default CrashReactApp;
|
||||
| ^
|
||||
200 |`,
|
||||
},
|
||||
}),
|
||||
])
|
||||
}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
});
|
|
@ -12,7 +12,7 @@
|
|||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const LogBoxLogNotification = require('../LogBoxLogNotification').default;
|
||||
const LogBoxNotification = require('../LogBoxNotification').default;
|
||||
const LogBoxLog = require('../../Data/LogBoxLog').default;
|
||||
const render = require('../../../../jest/renderer');
|
||||
|
||||
|
@ -28,10 +28,10 @@ const log = new LogBoxLog({
|
|||
componentStack: [],
|
||||
});
|
||||
|
||||
describe('LogBoxLogNotification', () => {
|
||||
describe('LogBoxNotification', () => {
|
||||
it('should render log', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxLogNotification
|
||||
<LogBoxNotification
|
||||
log={log}
|
||||
totalLogCount={1}
|
||||
level="warn"
|
|
@ -1,17 +1,13 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LogBoxContainer should render fatal with selectedIndex 2 1`] = `
|
||||
<Component
|
||||
animationType="none"
|
||||
hardwareAccelerated={false}
|
||||
presentationStyle="overFullScreen"
|
||||
statusBarTranslucent={true}
|
||||
supportedOrientations={
|
||||
Array [
|
||||
"portrait",
|
||||
]
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "rgba(255, 255, 255, 1)",
|
||||
"flex": 1,
|
||||
}
|
||||
}
|
||||
visible={true}
|
||||
>
|
||||
<LogBoxInspectorHeader
|
||||
level="fatal"
|
||||
|
@ -47,23 +43,19 @@ exports[`LogBoxContainer should render fatal with selectedIndex 2 1`] = `
|
|||
onDismiss={[Function]}
|
||||
onMinimize={[Function]}
|
||||
/>
|
||||
</Component>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`LogBoxContainer should render null with no logs 1`] = `null`;
|
||||
|
||||
exports[`LogBoxContainer should render warning with selectedIndex 0 1`] = `
|
||||
<Component
|
||||
animationType="none"
|
||||
hardwareAccelerated={false}
|
||||
presentationStyle="overFullScreen"
|
||||
statusBarTranslucent={true}
|
||||
supportedOrientations={
|
||||
Array [
|
||||
"portrait",
|
||||
]
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "rgba(255, 255, 255, 1)",
|
||||
"flex": 1,
|
||||
}
|
||||
}
|
||||
visible={true}
|
||||
>
|
||||
<LogBoxInspectorHeader
|
||||
level="warn"
|
||||
|
@ -99,5 +91,5 @@ exports[`LogBoxContainer should render warning with selectedIndex 0 1`] = `
|
|||
onDismiss={[Function]}
|
||||
onMinimize={[Function]}
|
||||
/>
|
||||
</Component>
|
||||
</View>
|
||||
`;
|
||||
|
|
|
@ -39,7 +39,7 @@ exports[`LogBoxInspectorHeader should render both buttons for two total 1`] = `
|
|||
<Text
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(51, 51, 51, 1)",
|
||||
"color": "rgba(255, 255, 255, 1)",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
|
@ -99,7 +99,7 @@ exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
|
|||
<Text
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(51, 51, 51, 1)",
|
||||
"color": "rgba(255, 255, 255, 1)",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
|
@ -153,7 +153,7 @@ exports[`LogBoxInspectorHeader should render syntax error header 1`] = `
|
|||
<Text
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(51, 51, 51, 1)",
|
||||
"color": "rgba(255, 255, 255, 1)",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
|
@ -207,7 +207,7 @@ exports[`LogBoxInspectorHeader should render two buttons for three or more total
|
|||
<Text
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(51, 51, 51, 1)",
|
||||
"color": "rgba(255, 255, 255, 1)",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LogBoxLogNotification should render log 1`] = `
|
||||
exports[`LogBoxNotification should render log 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
|
@ -0,0 +1,212 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @emails oncall+react_native
|
||||
* @flow
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const {
|
||||
_LogBoxNotificationContainer: LogBoxNotificationContainer,
|
||||
} = require('../LogBoxNotificationContainer');
|
||||
const LogBoxLog = require('../Data/LogBoxLog').default;
|
||||
const render = require('../../../jest/renderer');
|
||||
|
||||
describe('LogBoxNotificationContainer', () => {
|
||||
it('should render null with no logs', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxNotificationContainer selectedLogIndex={-1} logs={[]} />,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render null with no selected log and disabled', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxNotificationContainer
|
||||
isDisabled
|
||||
selectedLogIndex={-1}
|
||||
logs={[
|
||||
new LogBoxLog({
|
||||
level: 'warn',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message',
|
||||
componentStack: [],
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render the latest warning notification', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxNotificationContainer
|
||||
selectedLogIndex={-1}
|
||||
logs={[
|
||||
new LogBoxLog({
|
||||
level: 'warn',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message',
|
||||
componentStack: [],
|
||||
}),
|
||||
new LogBoxLog({
|
||||
level: 'warn',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message (latest)',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message (latest)',
|
||||
componentStack: [],
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render the latest error notification', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxNotificationContainer
|
||||
selectedLogIndex={-1}
|
||||
logs={[
|
||||
new LogBoxLog({
|
||||
level: 'error',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message',
|
||||
componentStack: [],
|
||||
}),
|
||||
new LogBoxLog({
|
||||
level: 'error',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message (latest)',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message (latest)',
|
||||
componentStack: [],
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render both an error and warning notification', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxNotificationContainer
|
||||
selectedLogIndex={-1}
|
||||
logs={[
|
||||
new LogBoxLog({
|
||||
level: 'warn',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message',
|
||||
componentStack: [],
|
||||
}),
|
||||
new LogBoxLog({
|
||||
level: 'error',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message (latest)',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message (latest)',
|
||||
componentStack: [],
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render selected fatal error even when disabled', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxNotificationContainer
|
||||
isDisabled
|
||||
selectedLogIndex={0}
|
||||
logs={[
|
||||
new LogBoxLog({
|
||||
level: 'fatal',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Should be selected',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message',
|
||||
componentStack: [],
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render selected syntax error even when disabled', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxNotificationContainer
|
||||
isDisabled
|
||||
selectedLogIndex={0}
|
||||
logs={[
|
||||
new LogBoxLog({
|
||||
level: 'syntax',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Should be selected',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of syntax error message',
|
||||
componentStack: [],
|
||||
codeFrame: {
|
||||
fileName: '/path/to/RKJSModules/Apps/CrashReact/CrashReactApp.js',
|
||||
location: {row: 199, column: 0},
|
||||
content: ` 197 | });
|
||||
198 |
|
||||
> 199 | export default CrashReactApp;
|
||||
| ^
|
||||
200 |`,
|
||||
},
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,56 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @emails oncall+react_native
|
||||
* @flow strict-local
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const {
|
||||
_LogBoxInspectorContainer: LogBoxInspectorContainer,
|
||||
} = require('../LogBoxInspectorContainer');
|
||||
const LogBoxLog = require('../Data/LogBoxLog').default;
|
||||
const render = require('../../../jest/renderer');
|
||||
|
||||
describe('LogBoxNotificationContainer', () => {
|
||||
it('should render inspector with logs, even when disabled', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxInspectorContainer
|
||||
isDisabled
|
||||
selectedLogIndex={-1}
|
||||
logs={[
|
||||
new LogBoxLog({
|
||||
level: 'warn',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message',
|
||||
componentStack: [],
|
||||
}),
|
||||
new LogBoxLog({
|
||||
level: 'error',
|
||||
isComponentError: false,
|
||||
message: {
|
||||
content: 'Some kind of message (latest)',
|
||||
substitutions: [],
|
||||
},
|
||||
stack: [],
|
||||
category: 'Some kind of message (latest)',
|
||||
componentStack: [],
|
||||
}),
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
});
|
|
@ -1,6 +1,6 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LogBoxContainer should render both an error and warning notification 1`] = `
|
||||
exports[`LogBoxNotificationContainer should render both an error and warning notification 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
|
@ -86,108 +86,15 @@ exports[`LogBoxContainer should render both an error and warning notification 1`
|
|||
</View>
|
||||
`;
|
||||
|
||||
exports[`LogBoxContainer should render null with no logs 1`] = `null`;
|
||||
exports[`LogBoxNotificationContainer should render null with no logs 1`] = `null`;
|
||||
|
||||
exports[`LogBoxContainer should render null with no selected log and disabled 1`] = `null`;
|
||||
exports[`LogBoxNotificationContainer should render null with no selected log and disabled 1`] = `null`;
|
||||
|
||||
exports[`LogBoxContainer should render selected fatal error even when disabled 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<LogBoxInspector
|
||||
logs={
|
||||
Array [
|
||||
LogBoxLog {
|
||||
"category": "Some kind of message",
|
||||
"codeFrame": undefined,
|
||||
"componentStack": Array [],
|
||||
"count": 1,
|
||||
"isComponentError": false,
|
||||
"level": "fatal",
|
||||
"message": Object {
|
||||
"content": "Should be selected",
|
||||
"substitutions": Array [],
|
||||
},
|
||||
"stack": Array [],
|
||||
"symbolicated": Object {
|
||||
"error": null,
|
||||
"stack": null,
|
||||
"status": "NONE",
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
onChangeSelectedIndex={[Function]}
|
||||
onDismiss={[Function]}
|
||||
onMinimize={[Function]}
|
||||
selectedIndex={0}
|
||||
/>
|
||||
</View>
|
||||
`;
|
||||
exports[`LogBoxNotificationContainer should render selected fatal error even when disabled 1`] = `null`;
|
||||
|
||||
exports[`LogBoxContainer should render selected syntax error even when disabled 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<LogBoxInspector
|
||||
logs={
|
||||
Array [
|
||||
LogBoxLog {
|
||||
"category": "Some kind of syntax error message",
|
||||
"codeFrame": Object {
|
||||
"content": " 197 | });
|
||||
198 |
|
||||
> 199 | export default CrashReactApp;
|
||||
| ^
|
||||
200 |",
|
||||
"fileName": "/path/to/RKJSModules/Apps/CrashReact/CrashReactApp.js",
|
||||
"location": Object {
|
||||
"column": 0,
|
||||
"row": 199,
|
||||
},
|
||||
},
|
||||
"componentStack": Array [],
|
||||
"count": 1,
|
||||
"isComponentError": false,
|
||||
"level": "syntax",
|
||||
"message": Object {
|
||||
"content": "Should be selected",
|
||||
"substitutions": Array [],
|
||||
},
|
||||
"stack": Array [],
|
||||
"symbolicated": Object {
|
||||
"error": null,
|
||||
"stack": null,
|
||||
"status": "NONE",
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
onChangeSelectedIndex={[Function]}
|
||||
onDismiss={[Function]}
|
||||
onMinimize={[Function]}
|
||||
selectedIndex={0}
|
||||
/>
|
||||
</View>
|
||||
`;
|
||||
exports[`LogBoxNotificationContainer should render selected syntax error even when disabled 1`] = `null`;
|
||||
|
||||
exports[`LogBoxContainer should render the latest error notification 1`] = `
|
||||
exports[`LogBoxNotificationContainer should render the latest error notification 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
|
@ -237,7 +144,7 @@ exports[`LogBoxContainer should render the latest error notification 1`] = `
|
|||
</View>
|
||||
`;
|
||||
|
||||
exports[`LogBoxContainer should render the latest warning notification 1`] = `
|
||||
exports[`LogBoxNotificationContainer should render the latest warning notification 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
|
@ -0,0 +1,66 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LogBoxNotificationContainer should render inspector with logs, even when disabled 1`] = `
|
||||
<NativeLogBoxVisibility
|
||||
visible={false}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<LogBoxInspector
|
||||
logs={
|
||||
Array [
|
||||
LogBoxLog {
|
||||
"category": "Some kind of message",
|
||||
"codeFrame": undefined,
|
||||
"componentStack": Array [],
|
||||
"count": 1,
|
||||
"isComponentError": false,
|
||||
"level": "warn",
|
||||
"message": Object {
|
||||
"content": "Some kind of message",
|
||||
"substitutions": Array [],
|
||||
},
|
||||
"stack": Array [],
|
||||
"symbolicated": Object {
|
||||
"error": null,
|
||||
"stack": null,
|
||||
"status": "NONE",
|
||||
},
|
||||
},
|
||||
LogBoxLog {
|
||||
"category": "Some kind of message (latest)",
|
||||
"codeFrame": undefined,
|
||||
"componentStack": Array [],
|
||||
"count": 1,
|
||||
"isComponentError": false,
|
||||
"level": "error",
|
||||
"message": Object {
|
||||
"content": "Some kind of message (latest)",
|
||||
"substitutions": Array [],
|
||||
},
|
||||
"stack": Array [],
|
||||
"symbolicated": Object {
|
||||
"error": null,
|
||||
"stack": null,
|
||||
"status": "NONE",
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
onChangeSelectedIndex={[Function]}
|
||||
onDismiss={[Function]}
|
||||
onMinimize={[Function]}
|
||||
selectedIndex={-1}
|
||||
/>
|
||||
</View>
|
||||
</NativeLogBoxVisibility>
|
||||
`;
|
|
@ -229,7 +229,7 @@ class Modal extends React.Component<Props> {
|
|||
}
|
||||
|
||||
const innerChildren = __DEV__ ? (
|
||||
<AppContainer rootTag={this.context.rootTag} internal_excludeLogBox>
|
||||
<AppContainer rootTag={this.context.rootTag}>
|
||||
{this.props.children}
|
||||
</AppContainer>
|
||||
) : (
|
||||
|
|
|
@ -98,8 +98,9 @@ class AppContainer extends React.Component<Props, State> {
|
|||
if (__DEV__ && !this.props.internal_excludeLogBox) {
|
||||
if (!global.__RCTProfileIsProfiling) {
|
||||
if (global.__reactExperimentalLogBox) {
|
||||
const LogBox = require('../LogBox/LogBox');
|
||||
logBox = <LogBox />;
|
||||
const LogBoxNotificationContainer = require('../LogBox/LogBoxNotificationContainer')
|
||||
.default;
|
||||
logBox = <LogBoxNotificationContainer />;
|
||||
} else {
|
||||
const YellowBox = require('../YellowBox/YellowBox');
|
||||
logBox = <YellowBox />;
|
||||
|
@ -155,15 +156,6 @@ if (__DEV__) {
|
|||
if (global.__reactExperimentalLogBox) {
|
||||
const LogBox = require('../LogBox/LogBox');
|
||||
LogBox.install();
|
||||
|
||||
// TODO: (rickhanlonii) T57484314 Temporary hack to fix LogBox experiment but we need to
|
||||
// either decide to provide an error boundary by default or move this to a separate root.
|
||||
AppContainer.getDerivedStateFromError = function getDerivedStateFromError(
|
||||
error,
|
||||
state,
|
||||
) {
|
||||
return {...state, hasError: true};
|
||||
};
|
||||
} else {
|
||||
const YellowBox = require('../YellowBox/YellowBox');
|
||||
YellowBox.install();
|
||||
|
|
|
@ -294,7 +294,8 @@ const AppRegistry = {
|
|||
BatchedBridge.registerCallableModule('AppRegistry', AppRegistry);
|
||||
|
||||
if (__DEV__) {
|
||||
AppRegistry.registerComponent('LogBox', () => () => null);
|
||||
const LogBoxInspector = require('../LogBox/LogBoxInspectorContainer').default;
|
||||
AppRegistry.registerComponent('LogBox', () => LogBoxInspector);
|
||||
}
|
||||
|
||||
module.exports = AppRegistry;
|
||||
|
|
Загрузка…
Ссылка в новой задаче