Skip to content

Commit 67234a0

Browse files
liweijie0812liweijie0812
authored
test(List): improve test coverage of list (#5849)
* test(list): update test case * test(list): update test case * test(list): update test case
1 parent 2115e02 commit 67234a0

File tree

3 files changed

+380
-138
lines changed

3 files changed

+380
-138
lines changed

‎packages/components/list/__tests__/list-item-meta.test.tsx‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import { List, ListItem, ListItemMeta } from '@tdesign/components/list';
2+
import { mount } from '@vue/test-utils';
3+
4+
describe('ListItemMeta', () => {
5+
describe('props', () => {
6+
it('description[string]', () => {
7+
const wrapper = mount(() => (
8+
<List stripe>
9+
<ListItem>
10+
<ListItemMeta description="描述一"></ListItemMeta>
11+
</ListItem>
12+
<ListItem>
13+
<ListItemMeta description="描述二"></ListItemMeta>
14+
</ListItem>
15+
</List>
16+
));
17+
const descriptions = wrapper.findAll('.t-list-item__meta .t-list-item__meta-description');
18+
expect(descriptions.length).toBe(2);
19+
expect(descriptions[0].text()).toBe('描述一');
20+
expect(descriptions[1].text()).toBe('描述二');
21+
});
22+
23+
it('description[slot]', () => {
24+
const wrapper = mount(() => (
25+
<List stripe>
26+
<ListItem>
27+
<ListItemMeta v-slots={{ description: () => '描述一' }}></ListItemMeta>
28+
</ListItem>
29+
<ListItem>
30+
<ListItemMeta v-slots={{ description: () => '描述二' }}></ListItemMeta>
31+
</ListItem>
32+
</List>
33+
));
34+
const descriptions = wrapper.findAll('.t-list-item__meta .t-list-item__meta-description');
35+
expect(descriptions.length).toBe(2);
36+
expect(descriptions[0].text()).toBe('描述一');
37+
expect(descriptions[1].text()).toBe('描述二');
38+
});
39+
40+
it('description[function]', () => {
41+
const wrapper = mount(() => (
42+
<List stripe>
43+
<ListItem>
44+
<ListItemMeta description={() => '描述一'}></ListItemMeta>
45+
</ListItem>
46+
<ListItem>
47+
<ListItemMeta description={() => '描述二'}></ListItemMeta>
48+
</ListItem>
49+
</List>
50+
));
51+
const descriptions = wrapper.findAll('.t-list-item__meta .t-list-item__meta-description');
52+
expect(descriptions.length).toBe(2);
53+
expect(descriptions[0].text()).toBe('描述一');
54+
expect(descriptions[1].text()).toBe('描述二');
55+
});
56+
57+
it('title[string]', () => {
58+
const wrapper = mount(() => (
59+
<List stripe>
60+
<ListItem>
61+
<ListItemMeta title="标题一" description="描述一"></ListItemMeta>
62+
</ListItem>
63+
<ListItem>
64+
<ListItemMeta title="标题一" description="描述二"></ListItemMeta>
65+
</ListItem>
66+
</List>
67+
));
68+
const titles = wrapper.findAll('.t-list-item__meta .t-list-item__meta-title');
69+
expect(titles.length).toBe(2);
70+
expect(titles[0].text()).toBe('标题一');
71+
expect(titles[1].text()).toBe('标题一');
72+
});
73+
74+
it('title[slot]', () => {
75+
const wrapper = mount(() => (
76+
<List stripe>
77+
<ListItem>
78+
<ListItemMeta v-slots={{ title: () => '标题一' }} description="描述一"></ListItemMeta>
79+
</ListItem>
80+
<ListItem>
81+
<ListItemMeta v-slots={{ title: () => '标题二' }} description="描述二"></ListItemMeta>
82+
</ListItem>
83+
</List>
84+
));
85+
const titles = wrapper.findAll('.t-list-item__meta .t-list-item__meta-title');
86+
expect(titles.length).toBe(2);
87+
expect(titles[0].text()).toBe('标题一');
88+
expect(titles[1].text()).toBe('标题二');
89+
});
90+
91+
it('title[function]', () => {
92+
const wrapper = mount(() => (
93+
<List stripe>
94+
<ListItem>
95+
<ListItemMeta title={() => '标题一'} description="描述一"></ListItemMeta>
96+
</ListItem>
97+
<ListItem>
98+
<ListItemMeta title={() => '标题二'} description="描述二"></ListItemMeta>
99+
</ListItem>
100+
</List>
101+
));
102+
const titles = wrapper.findAll('.t-list-item__meta .t-list-item__meta-title');
103+
expect(titles.length).toBe(2);
104+
expect(titles[0].text()).toBe('标题一');
105+
expect(titles[1].text()).toBe('标题二');
106+
});
107+
108+
it('image[string]', () => {
109+
const imageUrl = 'https://tdesign.gtimg.com/site/avatar.jpg';
110+
const wrapper = mount(() => (
111+
<List stripe>
112+
<ListItem>
113+
<ListItemMeta image={imageUrl} title="标题一" description="描述一"></ListItemMeta>
114+
</ListItem>
115+
<ListItem>
116+
<ListItemMeta image={imageUrl} title="标题一" description="描述二"></ListItemMeta>
117+
</ListItem>
118+
</List>
119+
));
120+
const images = wrapper.findAll('.t-list-item__meta .t-list-item__meta-avatar img');
121+
expect(images.length).toBe(2);
122+
expect(images[0].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
123+
expect(images[1].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
124+
});
125+
126+
it('image[slot]', () => {
127+
const wrapper = mount(() => {
128+
return (
129+
<List stripe>
130+
<ListItem>
131+
<ListItemMeta
132+
v-slots={{ image: () => <img src="https://tdesign.gtimg.com/site/avatar.jpg" /> }}
133+
title="标题一"
134+
description="描述一"
135+
/>
136+
</ListItem>
137+
<ListItem>
138+
<ListItemMeta
139+
v-slots={{ image: () => <img src="https://tdesign.gtimg.com/site/avatar.jpg" /> }}
140+
title="标题二"
141+
description="描述二"
142+
/>
143+
</ListItem>
144+
</List>
145+
);
146+
});
147+
const images = wrapper.findAll('.t-list-item__meta .t-list-item__meta-avatar img');
148+
expect(images.length).toBe(2);
149+
expect(images[0].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
150+
expect(images[1].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
151+
});
152+
153+
it('image[function]', () => {
154+
const wrapper = mount(() => (
155+
<List stripe>
156+
<ListItem>
157+
<ListItemMeta
158+
image={() => <img src="https://tdesign.gtimg.com/site/avatar.jpg" />}
159+
title="标题一"
160+
description="描述一"
161+
></ListItemMeta>
162+
</ListItem>
163+
<ListItem>
164+
<ListItemMeta
165+
image={() => <img src="https://tdesign.gtimg.com/site/avatar.jpg" />}
166+
title="标题二"
167+
description="描述二"
168+
></ListItemMeta>
169+
</ListItem>
170+
</List>
171+
));
172+
const images = wrapper.findAll('.t-list-item__meta .t-list-item__meta-avatar img');
173+
expect(images.length).toBe(2);
174+
expect(images[0].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
175+
expect(images[1].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
176+
});
177+
});
178+
});

‎packages/components/list/__tests__/list-item.test.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { List, ListItem } from '@tdesign/components/list';
2+
import { mount } from '@vue/test-utils';
3+
4+
describe('ListItem', () => {
5+
describe('props', () => {
6+
it('action[string]', () => {
7+
const wrapper = mount(() => (
8+
<List stripe>
9+
<ListItem action="操作">描述性文字</ListItem>
10+
</List>
11+
));
12+
expect(wrapper.find('.t-list-item .t-list-item__action').text()).toBe('操作');
13+
});
14+
15+
it('action[slot]', () => {
16+
const wrapper = mount(() => (
17+
<List stripe>
18+
<ListItem v-slots={{ action: () => '操作' }}>描述性文字</ListItem>
19+
</List>
20+
));
21+
expect(wrapper.find('.t-list-item .t-list-item__action').text()).toBe('操作');
22+
});
23+
24+
it('action[function]', () => {
25+
const wrapper = mount(() => (
26+
<List stripe>
27+
<ListItem action={() => '操作'}>描述性文字</ListItem>
28+
</List>
29+
));
30+
expect(wrapper.find('.t-list-item .t-list-item__action').text()).toBe('操作');
31+
});
32+
it('content[string]', () => {
33+
const wrapper = mount(() => (
34+
<List stripe>
35+
<ListItem content="描述性文字"></ListItem>
36+
</List>
37+
));
38+
const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
39+
expect(item.exists()).toBeTruthy();
40+
expect(item.text()).toBe('描述性文字');
41+
});
42+
43+
it('content[slot]', () => {
44+
const wrapper = mount(() => (
45+
<List stripe>
46+
<ListItem v-slots={{ content: () => '描述性文字' }}></ListItem>
47+
</List>
48+
));
49+
const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
50+
expect(item.exists()).toBeTruthy();
51+
expect(item.text()).toBe('描述性文字');
52+
});
53+
54+
it('content[function]', () => {
55+
const wrapper = mount(() => (
56+
<List stripe>
57+
<ListItem content={() => '描述性文字'}></ListItem>
58+
</List>
59+
));
60+
const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
61+
expect(item.exists()).toBeTruthy();
62+
expect(item.text()).toBe('描述性文字');
63+
});
64+
it('default[string]', () => {
65+
const wrapper = mount(() => (
66+
<List stripe>
67+
<ListItem default="描述性文字"></ListItem>
68+
</List>
69+
));
70+
const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
71+
expect(item.exists()).toBeTruthy();
72+
expect(item.text()).toBe('描述性文字');
73+
});
74+
it('default[slot]', () => {
75+
const wrapper = mount(() => (
76+
<List stripe>
77+
<ListItem v-slots={{ default: () => '描述性文字' }}></ListItem>
78+
</List>
79+
));
80+
const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
81+
expect(item.exists()).toBeTruthy();
82+
expect(item.text()).toBe('描述性文字');
83+
});
84+
it('default[function]', () => {
85+
const wrapper = mount(() => (
86+
<List stripe>
87+
<ListItem default={() => '描述性文字'}></ListItem>
88+
</List>
89+
));
90+
const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
91+
expect(item.exists()).toBeTruthy();
92+
expect(item.text()).toBe('描述性文字');
93+
});
94+
});
95+
});

0 commit comments

Comments
 (0)