Skip to content

Commit e311165

Browse files
zombieJzombieJ
committed
test: add test case
1 parent f182fb1 commit e311165

File tree

4 files changed

+212
-0
lines changed

4 files changed

+212
-0
lines changed

‎tests/prefix.spec.tsx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import React from 'react';
2+
import { mount } from './wrapper';
3+
import Overflow from '../src';
4+
5+
interface ItemType {
6+
key: React.Key;
7+
value: any;
8+
}
9+
10+
function getData(count: number): ItemType[] {
11+
return new Array(count).fill(null).map((_, index) => ({
12+
key: `key-${index}`,
13+
value: index,
14+
}));
15+
}
16+
17+
function renderItem(item: ItemType) {
18+
return <span>{item.value}</span>;
19+
}
20+
21+
describe('Overflow.Prefix', () => {
22+
beforeEach(() => {
23+
jest.useFakeTimers();
24+
});
25+
26+
afterEach(() => {
27+
jest.runAllTimers();
28+
jest.useRealTimers();
29+
});
30+
31+
it('should render prefix when provided', () => {
32+
const wrapper = mount(
33+
<Overflow<ItemType>
34+
data={getData(3)}
35+
itemKey="key"
36+
renderItem={renderItem}
37+
prefix="Prefix:"
38+
/>,
39+
);
40+
41+
expect(wrapper.findPrefix()).toHaveLength(1);
42+
expect(wrapper.findPrefix().text()).toBe('Prefix:');
43+
});
44+
45+
it('should not render prefix when not provided', () => {
46+
const wrapper = mount(
47+
<Overflow<ItemType>
48+
data={getData(3)}
49+
itemKey="key"
50+
renderItem={renderItem}
51+
/>,
52+
);
53+
54+
expect(wrapper.findPrefix()).toHaveLength(0);
55+
});
56+
57+
it('should work with responsive mode and show overflow', () => {
58+
const wrapper = mount(
59+
<Overflow<ItemType>
60+
data={getData(10)}
61+
itemKey="key"
62+
renderItem={renderItem}
63+
maxCount="responsive"
64+
prefix="Label:"
65+
/>,
66+
);
67+
68+
// Small container to force overflow
69+
wrapper.initSize(60, 20);
70+
71+
// Should render prefix
72+
expect(wrapper.findPrefix()).toHaveLength(1);
73+
expect(wrapper.findPrefix().text()).toBe('Label:');
74+
75+
// Should show overflow indicator
76+
expect(wrapper.findRest()).toHaveLength(1);
77+
78+
// Should render some but not all items
79+
expect(wrapper.findItems().length).toBeGreaterThan(0);
80+
expect(wrapper.findItems().length).toBeLessThan(10);
81+
});
82+
83+
it('should work with fixed maxCount', () => {
84+
const wrapper = mount(
85+
<Overflow<ItemType>
86+
data={getData(10)}
87+
itemKey="key"
88+
renderItem={renderItem}
89+
maxCount={3}
90+
prefix="Categories:"
91+
/>,
92+
);
93+
94+
// Should render prefix
95+
expect(wrapper.findPrefix()).toHaveLength(1);
96+
expect(wrapper.findPrefix().text()).toBe('Categories:');
97+
98+
// Should show exactly 3 items + rest
99+
expect(wrapper.findItems()).toHaveLength(3);
100+
expect(wrapper.findRest()).toHaveLength(1);
101+
});
102+
103+
it('should work with both prefix and suffix', () => {
104+
const wrapper = mount(
105+
<Overflow<ItemType>
106+
data={getData(5)}
107+
itemKey="key"
108+
renderItem={renderItem}
109+
maxCount={3}
110+
prefix="Start"
111+
suffix="End"
112+
/>,
113+
);
114+
115+
// Should render both prefix and suffix
116+
expect(wrapper.findPrefix()).toHaveLength(1);
117+
expect(wrapper.findSuffix()).toHaveLength(1);
118+
expect(wrapper.findPrefix().text()).toBe('Start');
119+
expect(wrapper.findSuffix().text()).toBe('End');
120+
121+
// Should show 3 items + rest
122+
expect(wrapper.findItems()).toHaveLength(3);
123+
expect(wrapper.findRest()).toHaveLength(1);
124+
});
125+
126+
it('should render complex prefix content', () => {
127+
const ComplexPrefix = () => (
128+
<div className="complex-prefix">
129+
<span>🏷️</span>
130+
<span>Tags:</span>
131+
</div>
132+
);
133+
134+
const wrapper = mount(
135+
<Overflow<ItemType>
136+
data={getData(3)}
137+
itemKey="key"
138+
renderItem={renderItem}
139+
prefix={<ComplexPrefix />}
140+
/>,
141+
);
142+
143+
expect(wrapper.findPrefix()).toHaveLength(1);
144+
expect(wrapper.findPrefix().find('.complex-prefix')).toHaveLength(1);
145+
expect(wrapper.findPrefix().text()).toBe('🏷️Tags:');
146+
});
147+
});

‎tests/responsive.spec.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,66 @@ describe('Overflow.Responsive', () => {
226226
});
227227
});
228228

229+
describe('prefix', () => {
230+
it('should render prefix when provided', () => {
231+
const wrapper = mount(
232+
<Overflow<ItemType>
233+
data={getData(5)}
234+
itemKey="key"
235+
renderItem={renderItem}
236+
maxCount="responsive"
237+
prefix="Label:"
238+
/>,
239+
);
240+
241+
wrapper.initSize(100, 20);
242+
243+
// Should render prefix
244+
expect(wrapper.findPrefix()).toHaveLength(1);
245+
expect(wrapper.findPrefix().text()).toBe('Label:');
246+
});
247+
248+
it('should not render prefix when not provided', () => {
249+
const wrapper = mount(
250+
<Overflow<ItemType>
251+
data={getData(5)}
252+
itemKey="key"
253+
renderItem={renderItem}
254+
maxCount="responsive"
255+
/>,
256+
);
257+
258+
wrapper.initSize(100, 20);
259+
260+
expect(wrapper.findPrefix()).toHaveLength(0);
261+
});
262+
263+
it('should show overflow with prefix taking space', () => {
264+
const wrapper = mount(
265+
<Overflow<ItemType>
266+
data={getData(10)}
267+
itemKey="key"
268+
renderItem={renderItem}
269+
maxCount="responsive"
270+
prefix="Label:"
271+
/>,
272+
);
273+
274+
// Very small container to ensure overflow
275+
wrapper.initSize(60, 20);
276+
277+
// Should have prefix
278+
expect(wrapper.findPrefix()).toHaveLength(1);
279+
280+
// Should show rest due to limited space
281+
expect(wrapper.findRest()).toHaveLength(1);
282+
283+
// Should show limited number of items
284+
expect(wrapper.findItems().length).toBeGreaterThan(0);
285+
expect(wrapper.findItems().length).toBeLessThan(10);
286+
});
287+
});
288+
229289
it('render rest directly', () => {
230290
const wrapper = mount(
231291
<Overflow<ItemType>

‎tests/setup.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,16 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
3636
return this.find('Item').filterWhere(
3737
(item) =>
3838
item.props().className !== 'rc-overflow-item-rest' &&
39+
item.props().className !== 'rc-overflow-item-prefix' &&
3940
item.props().className !== 'rc-overflow-item-suffix',
4041
);
4142
},
4243
findRest() {
4344
return this.find('Item.rc-overflow-item-rest');
4445
},
46+
findPrefix() {
47+
return this.find('Item.rc-overflow-item-prefix');
48+
},
4549
findSuffix() {
4650
return this.find('Item.rc-overflow-item-suffix');
4751
},

‎tests/wrapper.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface WrapperType extends ReactWrapper<any, any> {
99
initSize: (width: number, itemWidth: number) => WrapperType;
1010
findItems: () => WrapperType;
1111
findRest: () => WrapperType;
12+
findPrefix: () => WrapperType;
1213
findSuffix: () => WrapperType;
1314
}
1415

0 commit comments

Comments
 (0)