LogBox - Display errors for notifications and inspector
Summary: This diff adds and displays errors in LogBox. We will now toast both warnings and errors, open errors for inspection, and allow paginating through errors and warnings. Changelog: [Internal] Reviewed By: cpojer Differential Revision: D18091519 fbshipit-source-id: c155969dc505de5cfb0e95bb5a8221b9f8cfe4f7
This commit is contained in:
Родитель
c5aa26da41
Коммит
3c525d5b17
|
@ -30,13 +30,6 @@ function LogBoxContainer(props: Props): React.Node {
|
|||
|
||||
const logs = Array.from(props.logs);
|
||||
|
||||
function getVisibleLog() {
|
||||
// TODO: currently returns the newest log but later will need to return
|
||||
// the newest log of the highest level. For example, we want to show
|
||||
// the latest error message even if there are newer warnings.
|
||||
return logs[logs.length - 1];
|
||||
}
|
||||
|
||||
function handleInspectorDismissAll() {
|
||||
props.onDismissAll();
|
||||
}
|
||||
|
@ -59,8 +52,12 @@ function LogBoxContainer(props: Props): React.Node {
|
|||
setSelectedLog(null);
|
||||
}
|
||||
|
||||
function handleRowPress(index: number) {
|
||||
setSelectedLog(logs.length - 1);
|
||||
function openLog(log: LogBoxLog) {
|
||||
let index = logs.length - 1;
|
||||
while (index > 0 && logs[index] !== log) {
|
||||
index -= 1;
|
||||
}
|
||||
setSelectedLog(index);
|
||||
}
|
||||
|
||||
if (selectedLogIndex != null) {
|
||||
|
@ -77,20 +74,42 @@ function LogBoxContainer(props: Props): React.Node {
|
|||
);
|
||||
}
|
||||
|
||||
return logs.length === 0 ? null : (
|
||||
if (logs.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const warnings = logs.filter(log => log.level === 'warn');
|
||||
const errors = logs.filter(log => log.level === 'error');
|
||||
return (
|
||||
<View style={styles.list}>
|
||||
<View style={styles.toast}>
|
||||
<LogBoxLogNotification
|
||||
log={getVisibleLog()}
|
||||
level="warn"
|
||||
totalLogCount={logs.length}
|
||||
onPressOpen={handleRowPress}
|
||||
onPressList={() => {
|
||||
/* TODO: open log list */
|
||||
}}
|
||||
onPressDismiss={handleInspectorDismissAll}
|
||||
/>
|
||||
</View>
|
||||
{warnings.length > 0 && (
|
||||
<View style={styles.toast}>
|
||||
<LogBoxLogNotification
|
||||
log={warnings[warnings.length - 1]}
|
||||
level="warn"
|
||||
totalLogCount={warnings.length}
|
||||
onPressOpen={() => openLog(warnings[warnings.length - 1])}
|
||||
onPressList={() => {
|
||||
/* TODO: open log list */
|
||||
}}
|
||||
onPressDismiss={handleInspectorDismissAll}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{errors.length > 0 && (
|
||||
<View style={styles.toast}>
|
||||
<LogBoxLogNotification
|
||||
log={errors[errors.length - 1]}
|
||||
level="error"
|
||||
totalLogCount={errors.length}
|
||||
onPressOpen={() => openLog(errors[errors.length - 1])}
|
||||
onPressList={() => {
|
||||
/* TODO: open log list */
|
||||
}}
|
||||
onPressDismiss={handleInspectorDismissAll}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
<SafeAreaView style={styles.safeArea} />
|
||||
</View>
|
||||
);
|
||||
|
@ -105,6 +124,7 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
toast: {
|
||||
borderRadius: 8,
|
||||
marginBottom: 5,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
safeArea: {
|
||||
|
|
|
@ -55,6 +55,7 @@ class LogBoxInspector extends React.Component<Props> {
|
|||
onSelectIndex={this._handleSelectIndex}
|
||||
selectedIndex={selectedIndex}
|
||||
total={logs.length}
|
||||
level={log.level}
|
||||
/>
|
||||
<LogBoxInspectorBody
|
||||
log={log}
|
||||
|
@ -113,6 +114,7 @@ function LogBoxInspectorBody(props) {
|
|||
collapsed={collapsed}
|
||||
onPress={() => setCollapsed(!collapsed)}
|
||||
message={props.log.message}
|
||||
level={props.log.level}
|
||||
/>
|
||||
<ScrollView style={styles.scrollBody}>
|
||||
<LogBoxInspectorReactFrames log={props.log} />
|
||||
|
@ -128,6 +130,7 @@ function LogBoxInspectorBody(props) {
|
|||
collapsed={collapsed}
|
||||
onPress={() => setCollapsed(!collapsed)}
|
||||
message={props.log.message}
|
||||
level={props.log.level}
|
||||
/>
|
||||
<LogBoxInspectorReactFrames log={props.log} />
|
||||
<LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
|
||||
|
|
|
@ -20,11 +20,12 @@ import View from '../../Components/View/View';
|
|||
import LogBoxImageSource from './LogBoxImageSource';
|
||||
import LogBoxButton from './LogBoxButton';
|
||||
import * as LogBoxStyle from './LogBoxStyle';
|
||||
|
||||
import type {LogLevel} from '../Data/LogBoxLog';
|
||||
type Props = $ReadOnly<{|
|
||||
onSelectIndex: (selectedIndex: number) => void,
|
||||
selectedIndex: number,
|
||||
total: number,
|
||||
level: LogLevel,
|
||||
|}>;
|
||||
|
||||
function LogBoxInspectorHeader(props: Props): React.Node {
|
||||
|
@ -37,10 +38,11 @@ function LogBoxInspectorHeader(props: Props): React.Node {
|
|||
: `Log ${props.selectedIndex + 1} of ${props.total}`;
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.root}>
|
||||
<SafeAreaView style={styles[props.level]}>
|
||||
<View style={styles.header}>
|
||||
<LogBoxInspectorHeaderButton
|
||||
disabled={prevIndex < 0}
|
||||
level={props.level}
|
||||
image={LogBoxImageSource.chevronLeft}
|
||||
onPress={() => props.onSelectIndex(prevIndex)}
|
||||
/>
|
||||
|
@ -49,6 +51,7 @@ function LogBoxInspectorHeader(props: Props): React.Node {
|
|||
</View>
|
||||
<LogBoxInspectorHeaderButton
|
||||
disabled={nextIndex >= props.total}
|
||||
level={props.level}
|
||||
image={LogBoxImageSource.chevronRight}
|
||||
onPress={() => props.onSelectIndex(nextIndex)}
|
||||
/>
|
||||
|
@ -61,14 +64,21 @@ function LogBoxInspectorHeaderButton(
|
|||
props: $ReadOnly<{|
|
||||
disabled: boolean,
|
||||
image: string,
|
||||
level: LogLevel,
|
||||
onPress?: ?() => void,
|
||||
|}>,
|
||||
): React.Node {
|
||||
return (
|
||||
<LogBoxButton
|
||||
backgroundColor={{
|
||||
default: LogBoxStyle.getWarningColor(),
|
||||
pressed: LogBoxStyle.getWarningDarkColor(),
|
||||
default:
|
||||
props.level === 'warn'
|
||||
? LogBoxStyle.getWarningColor()
|
||||
: LogBoxStyle.getErrorColor(),
|
||||
pressed:
|
||||
props.level === 'warn'
|
||||
? LogBoxStyle.getWarningDarkColor()
|
||||
: LogBoxStyle.getErrorDarkColor(),
|
||||
}}
|
||||
onPress={props.disabled ? null : props.onPress}
|
||||
style={headerStyles.button}>
|
||||
|
@ -99,8 +109,11 @@ const headerStyles = StyleSheet.create({
|
|||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
backgroundColor: LogBoxStyle.getWarningColor(1),
|
||||
warn: {
|
||||
backgroundColor: LogBoxStyle.getWarningColor(),
|
||||
},
|
||||
error: {
|
||||
backgroundColor: LogBoxStyle.getErrorColor(),
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
|
|
|
@ -17,12 +17,13 @@ import View from '../../Components/View/View';
|
|||
import LogBoxButton from './LogBoxButton';
|
||||
import * as LogBoxStyle from './LogBoxStyle';
|
||||
import LogBoxMessage from './LogBoxMessage';
|
||||
|
||||
import type {LogLevel} from '../Data/LogBoxLog';
|
||||
import type {Message} from '../Data/parseLogBoxLog';
|
||||
|
||||
type Props = $ReadOnly<{|
|
||||
collapsed: boolean,
|
||||
message: Message,
|
||||
level: LogLevel,
|
||||
onPress: () => void,
|
||||
|}>;
|
||||
|
||||
|
@ -49,7 +50,9 @@ function LogBoxInspectorMessageHeader(props: Props): React.Node {
|
|||
return (
|
||||
<View style={messageStyles.body}>
|
||||
<View style={messageStyles.heading}>
|
||||
<Text style={messageStyles.headingText}>Warning</Text>
|
||||
<Text style={[messageStyles.headingText, messageStyles[props.level]]}>
|
||||
{props.level === 'warn' ? 'Warning' : 'Error'}
|
||||
</Text>
|
||||
{renderShowMore()}
|
||||
</View>
|
||||
<Text
|
||||
|
@ -91,13 +94,18 @@ const messageStyles = StyleSheet.create({
|
|||
marginBottom: 5,
|
||||
},
|
||||
headingText: {
|
||||
color: LogBoxStyle.getWarningColor(1),
|
||||
flex: 1,
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
includeFontPadding: false,
|
||||
lineHeight: 28,
|
||||
},
|
||||
warn: {
|
||||
color: LogBoxStyle.getWarningColor(1),
|
||||
},
|
||||
error: {
|
||||
color: LogBoxStyle.getErrorColor(1),
|
||||
},
|
||||
messageText: {
|
||||
color: LogBoxStyle.getTextColor(0.6),
|
||||
},
|
||||
|
|
|
@ -34,6 +34,10 @@ export function getErrorColor(opacity?: number): string {
|
|||
return `rgba(243, 83, 105, ${opacity == null ? 1 : opacity})`;
|
||||
}
|
||||
|
||||
export function getErrorDarkColor(opacity?: number): string {
|
||||
return `rgba(208, 75, 95, ${opacity == null ? 1 : opacity})`;
|
||||
}
|
||||
|
||||
export function getLogColor(opacity?: number): string {
|
||||
return `rgba(119, 119, 119, ${opacity == null ? 1 : opacity})`;
|
||||
}
|
||||
|
|
|
@ -29,7 +29,7 @@ describe('LogBoxContainer', () => {
|
|||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render the latest log', () => {
|
||||
it('should render the latest warning', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxContainer
|
||||
onDismiss={() => {}}
|
||||
|
@ -63,4 +63,74 @@ describe('LogBoxContainer', () => {
|
|||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render the latest error', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxContainer
|
||||
onDismiss={() => {}}
|
||||
onDismissAll={() => {}}
|
||||
logs={
|
||||
new Set([
|
||||
new LogBoxLog(
|
||||
'error',
|
||||
{
|
||||
content: 'Some kind of message',
|
||||
substitutions: [],
|
||||
},
|
||||
[],
|
||||
'Some kind of message',
|
||||
[],
|
||||
),
|
||||
new LogBoxLog(
|
||||
'error',
|
||||
{
|
||||
content: 'Some kind of message (latest)',
|
||||
substitutions: [],
|
||||
},
|
||||
[],
|
||||
'Some kind of message (latest)',
|
||||
[],
|
||||
),
|
||||
])
|
||||
}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render both an error and warning', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxContainer
|
||||
onDismiss={() => {}}
|
||||
onDismissAll={() => {}}
|
||||
logs={
|
||||
new Set([
|
||||
new LogBoxLog(
|
||||
'warn',
|
||||
{
|
||||
content: 'Some kind of message',
|
||||
substitutions: [],
|
||||
},
|
||||
[],
|
||||
'Some kind of message',
|
||||
[],
|
||||
),
|
||||
new LogBoxLog(
|
||||
'error',
|
||||
{
|
||||
content: 'Some kind of message (latest)',
|
||||
substitutions: [],
|
||||
},
|
||||
[],
|
||||
'Some kind of message (latest)',
|
||||
[],
|
||||
),
|
||||
])
|
||||
}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -28,7 +28,7 @@ const logs = [
|
|||
[],
|
||||
),
|
||||
new LogBoxLog(
|
||||
'warn',
|
||||
'error',
|
||||
{
|
||||
content: 'Some kind of message (second)',
|
||||
substitutions: [],
|
||||
|
@ -54,7 +54,7 @@ describe('LogBoxContainer', () => {
|
|||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render first log with selectedIndex 0', () => {
|
||||
it('should render warning with selectedIndex 0', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxInspector
|
||||
onDismiss={() => {}}
|
||||
|
@ -68,7 +68,7 @@ describe('LogBoxContainer', () => {
|
|||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render second log with selectedIndex 1', () => {
|
||||
it('should render error with selectedIndex 1', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxInspector
|
||||
onDismiss={() => {}}
|
||||
|
|
|
@ -22,6 +22,7 @@ describe('LogBoxInspectorHeader', () => {
|
|||
onSelectIndex={() => {}}
|
||||
selectedIndex={0}
|
||||
total={1}
|
||||
level="warn"
|
||||
/>,
|
||||
);
|
||||
|
||||
|
@ -34,18 +35,33 @@ describe('LogBoxInspectorHeader', () => {
|
|||
onSelectIndex={() => {}}
|
||||
selectedIndex={1}
|
||||
total={2}
|
||||
level="warn"
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render two buttons for three total, middle selected', () => {
|
||||
it('should render two buttons for three total, middle selected (warning)', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxInspectorHeader
|
||||
onSelectIndex={() => {}}
|
||||
selectedIndex={0}
|
||||
total={1}
|
||||
level="warn"
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render two buttons for three total, middle selected (error)', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxInspectorHeader
|
||||
onSelectIndex={() => {}}
|
||||
selectedIndex={0}
|
||||
total={1}
|
||||
level="error"
|
||||
/>,
|
||||
);
|
||||
|
||||
|
@ -58,6 +74,7 @@ describe('LogBoxInspectorHeader', () => {
|
|||
onSelectIndex={() => {}}
|
||||
selectedIndex={0}
|
||||
total={2}
|
||||
level="warn"
|
||||
/>,
|
||||
);
|
||||
|
||||
|
|
|
@ -17,9 +17,26 @@ const LogBoxInspectorMessageHeader = require('../LogBoxInspectorMessageHeader')
|
|||
const render = require('../../../../jest/renderer');
|
||||
|
||||
describe('LogBoxInspectorMessageHeader', () => {
|
||||
it('should not render error', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxInspectorMessageHeader
|
||||
level="error"
|
||||
collapsed={false}
|
||||
message={{
|
||||
content: 'Short',
|
||||
substitutions: [],
|
||||
}}
|
||||
onPress={() => {}}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(output).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should not render collapse button for short content', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxInspectorMessageHeader
|
||||
level="warn"
|
||||
collapsed={false}
|
||||
message={{
|
||||
content: 'Short',
|
||||
|
@ -35,6 +52,7 @@ describe('LogBoxInspectorMessageHeader', () => {
|
|||
it('should render "collapse" if expanded', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxInspectorMessageHeader
|
||||
level="warn"
|
||||
collapsed={false}
|
||||
message={{content: '#'.repeat(200), substitutions: []}}
|
||||
onPress={() => {}}
|
||||
|
@ -47,6 +65,7 @@ describe('LogBoxInspectorMessageHeader', () => {
|
|||
it('should render "see more" if collapsed', () => {
|
||||
const output = render.shallowRender(
|
||||
<LogBoxInspectorMessageHeader
|
||||
level="warn"
|
||||
collapsed={true}
|
||||
message={{
|
||||
content: '#'.repeat(200),
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LogBoxContainer should render null with no logs 1`] = `null`;
|
||||
|
||||
exports[`LogBoxContainer should render the latest log 1`] = `
|
||||
exports[`LogBoxContainer should render both an error and warning 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
|
@ -17,6 +15,156 @@ exports[`LogBoxContainer should render the latest log 1`] = `
|
|||
style={
|
||||
Object {
|
||||
"borderRadius": 8,
|
||||
"marginBottom": 5,
|
||||
"overflow": "hidden",
|
||||
}
|
||||
}
|
||||
>
|
||||
<LogBoxLogNotification
|
||||
level="warn"
|
||||
log={
|
||||
LogBoxLog {
|
||||
"category": "Some kind of message",
|
||||
"componentStack": Array [],
|
||||
"count": 1,
|
||||
"level": "warn",
|
||||
"message": Object {
|
||||
"content": "Some kind of message",
|
||||
"substitutions": Array [],
|
||||
},
|
||||
"stack": Array [],
|
||||
"symbolicated": Object {
|
||||
"error": null,
|
||||
"stack": null,
|
||||
"status": "NONE",
|
||||
},
|
||||
}
|
||||
}
|
||||
onPressDismiss={[Function]}
|
||||
onPressList={[Function]}
|
||||
onPressOpen={[Function]}
|
||||
totalLogCount={1}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"borderRadius": 8,
|
||||
"marginBottom": 5,
|
||||
"overflow": "hidden",
|
||||
}
|
||||
}
|
||||
>
|
||||
<LogBoxLogNotification
|
||||
level="error"
|
||||
log={
|
||||
LogBoxLog {
|
||||
"category": "Some kind of message (latest)",
|
||||
"componentStack": Array [],
|
||||
"count": 1,
|
||||
"level": "error",
|
||||
"message": Object {
|
||||
"content": "Some kind of message (latest)",
|
||||
"substitutions": Array [],
|
||||
},
|
||||
"stack": Array [],
|
||||
"symbolicated": Object {
|
||||
"error": null,
|
||||
"stack": null,
|
||||
"status": "NONE",
|
||||
},
|
||||
}
|
||||
}
|
||||
onPressDismiss={[Function]}
|
||||
onPressList={[Function]}
|
||||
onPressOpen={[Function]}
|
||||
totalLogCount={1}
|
||||
/>
|
||||
</View>
|
||||
<ForwardRef(SafeAreaView)
|
||||
style={
|
||||
Object {
|
||||
"flex": 1,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`LogBoxContainer should render null with no logs 1`] = `null`;
|
||||
|
||||
exports[`LogBoxContainer should render the latest error 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"bottom": 10,
|
||||
"left": 10,
|
||||
"position": "absolute",
|
||||
"right": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"borderRadius": 8,
|
||||
"marginBottom": 5,
|
||||
"overflow": "hidden",
|
||||
}
|
||||
}
|
||||
>
|
||||
<LogBoxLogNotification
|
||||
level="error"
|
||||
log={
|
||||
LogBoxLog {
|
||||
"category": "Some kind of message (latest)",
|
||||
"componentStack": Array [],
|
||||
"count": 1,
|
||||
"level": "error",
|
||||
"message": Object {
|
||||
"content": "Some kind of message (latest)",
|
||||
"substitutions": Array [],
|
||||
},
|
||||
"stack": Array [],
|
||||
"symbolicated": Object {
|
||||
"error": null,
|
||||
"stack": null,
|
||||
"status": "NONE",
|
||||
},
|
||||
}
|
||||
}
|
||||
onPressDismiss={[Function]}
|
||||
onPressList={[Function]}
|
||||
onPressOpen={[Function]}
|
||||
totalLogCount={2}
|
||||
/>
|
||||
</View>
|
||||
<ForwardRef(SafeAreaView)
|
||||
style={
|
||||
Object {
|
||||
"flex": 1,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`LogBoxContainer should render the latest warning 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"bottom": 10,
|
||||
"left": 10,
|
||||
"position": "absolute",
|
||||
"right": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"borderRadius": 8,
|
||||
"marginBottom": 5,
|
||||
"overflow": "hidden",
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LogBoxContainer should render first log with selectedIndex 0 1`] = `
|
||||
exports[`LogBoxContainer should render error with selectedIndex 1 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
|
@ -11,6 +11,53 @@ exports[`LogBoxContainer should render first log with selectedIndex 0 1`] = `
|
|||
}
|
||||
>
|
||||
<LogBoxInspectorHeader
|
||||
level="error"
|
||||
onSelectIndex={[Function]}
|
||||
selectedIndex={1}
|
||||
total={2}
|
||||
/>
|
||||
<LogBoxInspectorBody
|
||||
log={
|
||||
LogBoxLog {
|
||||
"category": "Some kind of message (second)",
|
||||
"componentStack": Array [],
|
||||
"count": 1,
|
||||
"level": "error",
|
||||
"message": Object {
|
||||
"content": "Some kind of message (second)",
|
||||
"substitutions": Array [],
|
||||
},
|
||||
"stack": Array [],
|
||||
"symbolicated": Object {
|
||||
"error": null,
|
||||
"stack": null,
|
||||
"status": "NONE",
|
||||
},
|
||||
}
|
||||
}
|
||||
onRetry={[Function]}
|
||||
/>
|
||||
<LogBoxInspectorFooter
|
||||
onDismiss={[Function]}
|
||||
onMinimize={[Function]}
|
||||
/>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`LogBoxContainer should render null with no logs 1`] = `null`;
|
||||
|
||||
exports[`LogBoxContainer should render warning with selectedIndex 0 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "rgba(255, 255, 255, 1)",
|
||||
"elevation": undefined,
|
||||
"height": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<LogBoxInspectorHeader
|
||||
level="warn"
|
||||
onSelectIndex={[Function]}
|
||||
selectedIndex={0}
|
||||
total={2}
|
||||
|
@ -42,48 +89,3 @@ exports[`LogBoxContainer should render first log with selectedIndex 0 1`] = `
|
|||
/>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`LogBoxContainer should render null with no logs 1`] = `null`;
|
||||
|
||||
exports[`LogBoxContainer should render second log with selectedIndex 1 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "rgba(255, 255, 255, 1)",
|
||||
"elevation": undefined,
|
||||
"height": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<LogBoxInspectorHeader
|
||||
onSelectIndex={[Function]}
|
||||
selectedIndex={1}
|
||||
total={2}
|
||||
/>
|
||||
<LogBoxInspectorBody
|
||||
log={
|
||||
LogBoxLog {
|
||||
"category": "Some kind of message (second)",
|
||||
"componentStack": Array [],
|
||||
"count": 1,
|
||||
"level": "warn",
|
||||
"message": Object {
|
||||
"content": "Some kind of message (second)",
|
||||
"substitutions": Array [],
|
||||
},
|
||||
"stack": Array [],
|
||||
"symbolicated": Object {
|
||||
"error": null,
|
||||
"stack": null,
|
||||
"status": "NONE",
|
||||
},
|
||||
}
|
||||
}
|
||||
onRetry={[Function]}
|
||||
/>
|
||||
<LogBoxInspectorFooter
|
||||
onDismiss={[Function]}
|
||||
onMinimize={[Function]}
|
||||
/>
|
||||
</View>
|
||||
`;
|
||||
|
|
|
@ -19,6 +19,7 @@ exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
|
|||
<LogBoxInspectorHeaderButton
|
||||
disabled={true}
|
||||
image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
|
||||
level="warn"
|
||||
onPress={[Function]}
|
||||
/>
|
||||
<View
|
||||
|
@ -47,6 +48,7 @@ exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
|
|||
<LogBoxInspectorHeaderButton
|
||||
disabled={true}
|
||||
image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
|
||||
level="warn"
|
||||
onPress={[Function]}
|
||||
/>
|
||||
</View>
|
||||
|
@ -72,6 +74,7 @@ exports[`LogBoxInspectorHeader should render one left button for two total, righ
|
|||
<LogBoxInspectorHeaderButton
|
||||
disabled={false}
|
||||
image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
|
||||
level="warn"
|
||||
onPress={[Function]}
|
||||
/>
|
||||
<View
|
||||
|
@ -100,6 +103,7 @@ exports[`LogBoxInspectorHeader should render one left button for two total, righ
|
|||
<LogBoxInspectorHeaderButton
|
||||
disabled={true}
|
||||
image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
|
||||
level="warn"
|
||||
onPress={[Function]}
|
||||
/>
|
||||
</View>
|
||||
|
@ -125,6 +129,7 @@ exports[`LogBoxInspectorHeader should render one right button for two total, lef
|
|||
<LogBoxInspectorHeaderButton
|
||||
disabled={true}
|
||||
image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
|
||||
level="warn"
|
||||
onPress={[Function]}
|
||||
/>
|
||||
<View
|
||||
|
@ -153,17 +158,18 @@ exports[`LogBoxInspectorHeader should render one right button for two total, lef
|
|||
<LogBoxInspectorHeaderButton
|
||||
disabled={false}
|
||||
image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
|
||||
level="warn"
|
||||
onPress={[Function]}
|
||||
/>
|
||||
</View>
|
||||
</ForwardRef(SafeAreaView)>
|
||||
`;
|
||||
|
||||
exports[`LogBoxInspectorHeader should render two buttons for three total, middle selected 1`] = `
|
||||
exports[`LogBoxInspectorHeader should render two buttons for three total, middle selected (error) 1`] = `
|
||||
<ForwardRef(SafeAreaView)
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "rgba(250, 186, 48, 1)",
|
||||
"backgroundColor": "rgba(243, 83, 105, 1)",
|
||||
}
|
||||
}
|
||||
>
|
||||
|
@ -178,6 +184,7 @@ exports[`LogBoxInspectorHeader should render two buttons for three total, middle
|
|||
<LogBoxInspectorHeaderButton
|
||||
disabled={true}
|
||||
image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
|
||||
level="error"
|
||||
onPress={[Function]}
|
||||
/>
|
||||
<View
|
||||
|
@ -206,6 +213,62 @@ exports[`LogBoxInspectorHeader should render two buttons for three total, middle
|
|||
<LogBoxInspectorHeaderButton
|
||||
disabled={true}
|
||||
image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
|
||||
level="error"
|
||||
onPress={[Function]}
|
||||
/>
|
||||
</View>
|
||||
</ForwardRef(SafeAreaView)>
|
||||
`;
|
||||
|
||||
exports[`LogBoxInspectorHeader should render two buttons for three total, middle selected (warning) 1`] = `
|
||||
<ForwardRef(SafeAreaView)
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "rgba(250, 186, 48, 1)",
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"flexDirection": "row",
|
||||
"height": 44,
|
||||
}
|
||||
}
|
||||
>
|
||||
<LogBoxInspectorHeaderButton
|
||||
disabled={true}
|
||||
image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
|
||||
level="warn"
|
||||
onPress={[Function]}
|
||||
/>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flex": 1,
|
||||
"justifyContent": "center",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(255, 255, 255, 1)",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
"lineHeight": 20,
|
||||
}
|
||||
}
|
||||
>
|
||||
Log
|
||||
</Text>
|
||||
</View>
|
||||
<LogBoxInspectorHeaderButton
|
||||
disabled={true}
|
||||
image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
|
||||
level="warn"
|
||||
onPress={[Function]}
|
||||
/>
|
||||
</View>
|
||||
|
|
|
@ -30,14 +30,18 @@ exports[`LogBoxInspectorMessageHeader should not render collapse button for shor
|
|||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(250, 186, 48, 1)",
|
||||
"flex": 1,
|
||||
"fontSize": 20,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
"lineHeight": 28,
|
||||
}
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"fontSize": 20,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
"lineHeight": 28,
|
||||
},
|
||||
Object {
|
||||
"color": "rgba(250, 186, 48, 1)",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
Warning
|
||||
|
@ -74,6 +78,84 @@ exports[`LogBoxInspectorMessageHeader should not render collapse button for shor
|
|||
</View>
|
||||
`;
|
||||
|
||||
exports[`LogBoxInspectorMessageHeader should not render error 1`] = `
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "rgba(51, 51, 51, 1)",
|
||||
"elevation": 2,
|
||||
"flex": 0,
|
||||
"shadowColor": "#000",
|
||||
"shadowOffset": Object {
|
||||
"height": 2,
|
||||
"width": 0,
|
||||
},
|
||||
"shadowOpacity": 0.5,
|
||||
"shadowRadius": 2,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flexDirection": "row",
|
||||
"marginBottom": 5,
|
||||
"marginTop": 10,
|
||||
"paddingHorizontal": 12,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"fontSize": 20,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
"lineHeight": 28,
|
||||
},
|
||||
Object {
|
||||
"color": "rgba(243, 83, 105, 1)",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
Error
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
numberOfLines={null}
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(255, 255, 255, 1)",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "500",
|
||||
"includeFontPadding": false,
|
||||
"lineHeight": 20,
|
||||
"paddingBottom": 10,
|
||||
"paddingHorizontal": 12,
|
||||
}
|
||||
}
|
||||
>
|
||||
<LogBoxMessage
|
||||
message={
|
||||
Object {
|
||||
"content": "Short",
|
||||
"substitutions": Array [],
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(255, 255, 255, 0.6)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Text>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`LogBoxInspectorMessageHeader should render "collapse" if expanded 1`] = `
|
||||
<View
|
||||
style={
|
||||
|
@ -104,14 +186,18 @@ exports[`LogBoxInspectorMessageHeader should render "collapse" if expanded 1`] =
|
|||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(250, 186, 48, 1)",
|
||||
"flex": 1,
|
||||
"fontSize": 20,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
"lineHeight": 28,
|
||||
}
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"fontSize": 20,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
"lineHeight": 28,
|
||||
},
|
||||
Object {
|
||||
"color": "rgba(250, 186, 48, 1)",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
Warning
|
||||
|
@ -207,14 +293,18 @@ exports[`LogBoxInspectorMessageHeader should render "see more" if collapsed 1`]
|
|||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"color": "rgba(250, 186, 48, 1)",
|
||||
"flex": 1,
|
||||
"fontSize": 20,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
"lineHeight": 28,
|
||||
}
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"fontSize": 20,
|
||||
"fontWeight": "600",
|
||||
"includeFontPadding": false,
|
||||
"lineHeight": 28,
|
||||
},
|
||||
Object {
|
||||
"color": "rgba(250, 186, 48, 1)",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
Warning
|
||||
|
|
Загрузка…
Ссылка в новой задаче