microsoft
/
react-native-macos
зеркало из https://github.com/microsoft/react-native-macos.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

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:
Rick Hanlon 2019-10-28 10:08:54 -07:00 коммит произвёл Facebook Github Bot
Родитель c5aa26da41
Коммит 3c525d5b17
13 изменённых файлов: 568 добавлений и 111 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

64
Libraries/LogBox/UI/LogBoxContainer.js
Просмотреть файл

@ -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: {

3
Libraries/LogBox/UI/LogBoxInspector.js
Просмотреть файл

@ -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} />

25
Libraries/LogBox/UI/LogBoxInspectorHeader.js
Просмотреть файл

@ -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',

14
Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js
Просмотреть файл

@ -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),
},

4
Libraries/LogBox/UI/LogBoxStyle.js
Просмотреть файл

@ -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})`;
}

72
Libraries/LogBox/UI/__tests__/LogBoxContainer-test.js
Просмотреть файл

@ -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();
});
});

6
Libraries/LogBox/UI/__tests__/LogBoxInspector-test.js
Просмотреть файл

@ -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={() => {}}

19
Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js
Просмотреть файл

@ -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"
/>,
);

19
Libraries/LogBox/UI/__tests__/LogBoxInspectorMesageHeader-test.js
Просмотреть файл

@ -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),

154
Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxContainer-test.js.snap
Просмотреть файл

@ -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",
}
}

94
Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-test.js.snap
Просмотреть файл

@ -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>
`;

67
Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap
Просмотреть файл

@ -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>

138
Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorMesageHeader-test.js.snap
Просмотреть файл

@ -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