Skip to content

Commit 856a515

Browse files
author
rulishu
committed
Merge branch 'dev' of github.com:uiwjs/react-native-uiw into rls
2 parents 7efa893 + 6a65c94 commit 856a515

File tree

9 files changed

+464
-22
lines changed

9 files changed

+464
-22
lines changed

‎packages/core/src/Divider/index.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,12 @@ export default class Divider extends Component<DividerProps> {
4242
if (labelStyle && typeof labelStyle === 'number') {
4343
labelStyle = StyleSheet.flatten(labelStyle);
4444
}
45-
children = <Text style={[styles.label, labelStyle]}> {label} </Text>;
45+
children = (
46+
<Text testID="RNE__Divider__label" style={[styles.label, labelStyle]}>
47+
{' '}
48+
{label}{' '}
49+
</Text>
50+
);
4651
}
4752
if (lineStyle && typeof lineStyle === 'number') {
4853
lineStyle = StyleSheet.flatten(lineStyle);
@@ -53,10 +58,14 @@ export default class Divider extends Component<DividerProps> {
5358
if (orientation === 'right') {
5459
startStyles.unshift({ flexGrow: 100 });
5560
}
56-
const lineStart = <View style={[styles.lineStart, ...lineStyleArr, ...startStyles, lineStyle]} />;
57-
const lineEnd = <View style={[styles.lineEnd, ...lineStyleArr, ...endStyles, lineStyle]} />;
61+
const lineStart = (
62+
<View testID="RNE__Divider__start" style={[styles.lineStart, ...lineStyleArr, ...startStyles, lineStyle]} />
63+
);
64+
const lineEnd = (
65+
<View testID="RNE__Divider__end" style={[styles.lineEnd, ...lineStyleArr, ...endStyles, lineStyle]} />
66+
);
5867
return (
59-
<View style={[styles.warpper, ...warpperStyles, style]} {...restProps}>
68+
<View testID="RNE__Divider__wrap" style={[styles.warpper, ...warpperStyles, style]} {...restProps}>
6069
{lineStart}
6170
{children}
6271
{children && lineEnd}

‎packages/core/src/Flex/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default class Flex extends Component<FlexProps> {
5555
sty.alignItems = align.replace(/^start$/g, 'flex-start').replace(/^end$/g, 'flex-end') as FlexStyle['alignItems'];
5656
}
5757
return (
58-
<View style={[sty, style]}>
58+
<View testID="RNE__Flex__wrap" style={[sty, style]}>
5959
{children &&
6060
React.Children.map(children, (child: React.ReactNode) => {
6161
if (!React.isValidElement(child)) {

‎packages/core/src/WingBlank/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default class WingBlank extends Component<WingBlankProps> {
2020
} else if (size && styles[size]) {
2121
sizeStyle = styles[size];
2222
}
23-
return <View {...restProps} style={[sizeStyle, style]} />;
23+
return <View testID="RNE__WingBlank__view" {...restProps} style={[sizeStyle, style]} />;
2424
}
2525
}
2626

‎test-ci/src/__tests__/__snapshots__/divider.tsx.snap‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Divider center should display orientation center divider 1`] = `
4+
<View
5+
style={
6+
[
7+
{
8+
"alignItems": "center",
9+
},
10+
{
11+
"flexDirection": "row",
12+
"flexGrow": 1,
13+
"flexShrink": 1,
14+
"justifyContent": "center",
15+
},
16+
undefined,
17+
]
18+
}
19+
testID="RNE__Divider__wrap"
20+
>
21+
<View
22+
style={
23+
[
24+
{
25+
"backgroundColor": "rgb(229, 229, 229)",
26+
"flexDirection": "column",
27+
"flexGrow": 1,
28+
"flexShrink": 100,
29+
},
30+
{
31+
"marginHorizontal": 8,
32+
},
33+
{
34+
"height": 1,
35+
"minHeight": 1,
36+
"minWidth": 16,
37+
},
38+
undefined,
39+
]
40+
}
41+
testID="RNE__Divider__start"
42+
/>
43+
<Text
44+
style={
45+
[
46+
{
47+
"color": "rgba(0, 0, 0, 0.54)",
48+
"fontSize": 14,
49+
},
50+
undefined,
51+
]
52+
}
53+
testID="RNE__Divider__label"
54+
>
55+
56+
这是一条分割线
57+
58+
</Text>
59+
<View
60+
style={
61+
[
62+
{
63+
"backgroundColor": "rgb(229, 229, 229)",
64+
"flexDirection": "column",
65+
"flexGrow": 1,
66+
"flexShrink": 100,
67+
},
68+
{
69+
"marginHorizontal": 8,
70+
},
71+
{
72+
"height": 1,
73+
"minHeight": 1,
74+
"minWidth": 16,
75+
},
76+
undefined,
77+
]
78+
}
79+
testID="RNE__Divider__end"
80+
/>
81+
</View>
82+
`;
83+
84+
exports[`Divider left should display orientation left divider 1`] = `
85+
<View
86+
style={
87+
[
88+
{
89+
"alignItems": "center",
90+
},
91+
{
92+
"flexDirection": "row",
93+
"flexGrow": 1,
94+
"flexShrink": 1,
95+
"justifyContent": "center",
96+
},
97+
undefined,
98+
]
99+
}
100+
testID="RNE__Divider__wrap"
101+
>
102+
<View
103+
style={
104+
[
105+
{
106+
"backgroundColor": "rgb(229, 229, 229)",
107+
"flexDirection": "column",
108+
"flexGrow": 1,
109+
"flexShrink": 100,
110+
},
111+
{
112+
"marginHorizontal": 8,
113+
},
114+
{
115+
"height": 1,
116+
"minHeight": 1,
117+
"minWidth": 16,
118+
},
119+
undefined,
120+
]
121+
}
122+
testID="RNE__Divider__start"
123+
/>
124+
<Text
125+
style={
126+
[
127+
{
128+
"color": "rgba(0, 0, 0, 0.54)",
129+
"fontSize": 14,
130+
},
131+
undefined,
132+
]
133+
}
134+
testID="RNE__Divider__label"
135+
>
136+
137+
这是一条分割线
138+
139+
</Text>
140+
<View
141+
style={
142+
[
143+
{
144+
"backgroundColor": "rgb(229, 229, 229)",
145+
"flexDirection": "column",
146+
"flexGrow": 1,
147+
"flexShrink": 100,
148+
},
149+
{
150+
"marginHorizontal": 8,
151+
},
152+
{
153+
"height": 1,
154+
"minHeight": 1,
155+
"minWidth": 16,
156+
},
157+
{
158+
"flexGrow": 100,
159+
},
160+
undefined,
161+
]
162+
}
163+
testID="RNE__Divider__end"
164+
/>
165+
</View>
166+
`;
167+
168+
exports[`Divider right should display orientation right divider 1`] = `
169+
<View
170+
style={
171+
[
172+
{
173+
"alignItems": "center",
174+
},
175+
{
176+
"flexDirection": "row",
177+
"flexGrow": 1,
178+
"flexShrink": 1,
179+
"justifyContent": "center",
180+
},
181+
undefined,
182+
]
183+
}
184+
testID="RNE__Divider__wrap"
185+
>
186+
<View
187+
style={
188+
[
189+
{
190+
"backgroundColor": "rgb(229, 229, 229)",
191+
"flexDirection": "column",
192+
"flexGrow": 1,
193+
"flexShrink": 100,
194+
},
195+
{
196+
"marginHorizontal": 8,
197+
},
198+
{
199+
"height": 1,
200+
"minHeight": 1,
201+
"minWidth": 16,
202+
},
203+
{
204+
"flexGrow": 100,
205+
},
206+
undefined,
207+
]
208+
}
209+
testID="RNE__Divider__start"
210+
/>
211+
<Text
212+
style={
213+
[
214+
{
215+
"color": "rgba(0, 0, 0, 0.54)",
216+
"fontSize": 14,
217+
},
218+
undefined,
219+
]
220+
}
221+
testID="RNE__Divider__label"
222+
>
223+
224+
这是一条分割线
225+
226+
</Text>
227+
<View
228+
style={
229+
[
230+
{
231+
"backgroundColor": "rgb(229, 229, 229)",
232+
"flexDirection": "column",
233+
"flexGrow": 1,
234+
"flexShrink": 100,
235+
},
236+
{
237+
"marginHorizontal": 8,
238+
},
239+
{
240+
"height": 1,
241+
"minHeight": 1,
242+
"minWidth": 16,
243+
},
244+
undefined,
245+
]
246+
}
247+
testID="RNE__Divider__end"
248+
/>
249+
</View>
250+
`;

‎test-ci/src/__tests__/button.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,6 @@ describe('Button', () => {
5555
expect(styles.fontSize).toBe(20);
5656
});
5757

58-
it('type', () => {
59-
const { getByTestId } = render(<Button type="success">success</Button>);
60-
const component = getByTestId('RNE__Button__wrap');
61-
expect(component.props.style.backgroundColor).toBe(colorRgb(colors.green));
62-
});
63-
6458
describe.each`
6559
type
6660
${'primary'}

‎test-ci/src/__tests__/divider.tsx‎

Lines changed: 50 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,53 @@
1-
import Divider from '../lib/Divider';
21
import renderer from 'react-test-renderer';
32

4-
it('Divider', () => {
5-
const component = renderer.create(
6-
<Divider label="这是一条分割线" type='horizontal' gutter={10} orientation='center' />
7-
);
8-
expect(component.root.props.label).toBe('这是一条分割线');
9-
expect(component.root.props.type).toBe('horizontal');
10-
expect(component.root.props.gutter).toBe(10);
11-
expect(component.root.props.orientation).toBe('center');
3+
import 'react-native';
4+
import React from 'react';
5+
import Divider from '../lib/Divider';
6+
import { render } from '@testing-library/react-native';
7+
import { keys, toObject } from '../utils';
8+
9+
const TYPES: keys = {
10+
horizontal: 'row',
11+
vertical: 'column',
12+
};
13+
14+
describe('Divider', () => {
15+
it('label', () => {
16+
const { getByTestId } = render(<Divider label="这是一条分割线" />);
17+
const component = getByTestId('RNE__Divider__label');
18+
const lable = component.props.children[1];
19+
expect(lable).toBe('这是一条分割线');
20+
});
21+
22+
describe.each`
23+
type
24+
${'horizontal'}
25+
${'vertical'}
26+
`('$type', ({ type }) => {
27+
it(`should display type ${type} divider`, () => {
28+
const { getByTestId } = render(<Divider type={type} />);
29+
const component = getByTestId('RNE__Divider__wrap');
30+
const styles = toObject(component.props.style);
31+
expect(styles.flexDirection).toBe(TYPES[type]);
32+
});
33+
});
34+
35+
it('gutter', () => {
36+
const { getByTestId } = render(<Divider gutter={12} />);
37+
const component = getByTestId('RNE__Divider__start');
38+
const styles = toObject(component.props.style);
39+
expect(styles.marginHorizontal).toBe(12);
40+
});
41+
42+
describe.each`
43+
orientation
44+
${'left'}
45+
${'right'}
46+
${'center'}
47+
`('$orientation', ({ orientation }) => {
48+
it(`should display orientation ${orientation} divider`, () => {
49+
const { toJSON } = render(<Divider label="这是一条分割线" orientation={orientation} />);
50+
expect(toJSON()).toMatchSnapshot();
51+
});
52+
});
1253
});

0 commit comments

Comments
 (0)