forked from callstack/react-native-paper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ListItem.test.tsx
124 lines (107 loc) · 2.93 KB
/
ListItem.test.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { Text, View } from 'react-native';
import renderer from 'react-test-renderer';
import { red500 } from '../../styles/themes/v2/colors';
import Chip from '../Chip/Chip';
import ListIcon from '../List/ListIcon';
import ListItem from '../List/ListItem';
const styles = StyleSheet.create({
title: {
fontSize: 20,
},
description: {
color: red500,
},
});
it('renders list item with title and description', () => {
const tree = renderer
.create(
<ListItem title="First Item" description="Description for first item" />
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders list item with left item', () => {
const tree = renderer
.create(
<ListItem
title="First Item"
left={(props) => <ListIcon {...props} icon="folder" />}
/>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders list item with right item', () => {
const tree = renderer
.create(<ListItem title="First Item" right={() => <Text>GG</Text>} />)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders list item with left and right items', () => {
const tree = renderer
.create(
<ListItem
title="First Item"
description="Item description"
left={() => <Text>GG</Text>}
right={(props) => <ListIcon {...props} icon="folder" />}
/>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders list item with custom title and description styles', () => {
const tree = renderer
.create(
<ListItem
title="First Item"
description="Item description"
titleStyle={styles.title}
descriptionStyle={styles.description}
/>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders list item with custom description', () => {
const tree = renderer
.create(
<ListItem
title="List Item with custom description"
description={({ ellipsizeMode, color: descriptionColor, fontSize }) => (
<View>
<Text
numberOfLines={2}
ellipsizeMode={ellipsizeMode}
style={{ color: descriptionColor, fontSize }}
>
React Native Paper is a high-quality, standard-compliant Design
Design library that has you covered in all major use-cases.
</Text>
<View>
<Chip icon="file-pdf-box" onPress={() => {}}>
DOCS.pdf
</Chip>
</View>
</View>
)}
/>
)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders with a description with typeof number', () => {
const tree = renderer
.create(
<ListItem
title="First Item"
description={123}
titleStyle={styles.title}
descriptionStyle={styles.description}
/>
)
.toJSON();
expect(tree).toMatchSnapshot();
});