Skip to content

Commit 4fa2c14

Browse files
zombieJzombieJ
committed
test: All cleanup
1 parent 6a4ec37 commit 4fa2c14

File tree

5 files changed

+126
-28
lines changed

5 files changed

+126
-28
lines changed

‎examples/basic.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ const Demo = () => {
6969
<option value={0}>0</option>
7070
<option value={1}>1</option>
7171
<option value={2}>2</option>
72+
<option value={3}>3</option>
7273
<option value={5}>5</option>
7374
<option value={10}>10</option>
7475
<option value={20}>20</option>

‎src/Overflow.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,9 @@ function Overflow<ItemType = any>(
6161
// ================================= Data =================================
6262
const isResponsive = maxCount === RESPONSIVE;
6363

64-
// When is `responsive`, we will always render rest node to get the real width of it for calculation
64+
/**
65+
* When is `responsive`, we will always render rest node to get the real width of it for calculation
66+
*/
6567
const showRest = isResponsive || data.length > maxCount!;
6668

6769
const mergedData = React.useMemo(() => {
@@ -125,7 +127,7 @@ function Overflow<ItemType = any>(
125127
}
126128

127129
function registerOverflowSize(_: React.Key, width: number | null) {
128-
setRestWidth(width || 0);
130+
setRestWidth(width!);
129131
setPrevRestWidth(restWidth);
130132
}
131133

@@ -154,9 +156,8 @@ function Overflow<ItemType = any>(
154156
totalWidth += currentItemWidth;
155157

156158
if (
157-
(i === lastIndex - 1 &&
158-
totalWidth + getItemWidth(lastIndex)! <= containerWidth) ||
159-
i === lastIndex
159+
i === lastIndex - 1 &&
160+
totalWidth + getItemWidth(lastIndex)! <= containerWidth
160161
) {
161162
// Additional check if match the end
162163
updateDisplayCount(lastIndex);
@@ -203,7 +204,7 @@ function Overflow<ItemType = any>(
203204
className={`${itemPrefixCls}-rest`}
204205
responsive={isResponsive}
205206
registerSize={registerOverflowSize}
206-
display={restReady && displayCount < data.length}
207+
display={restReady && !!omittedItems.length}
207208
>
208209
{typeof renderRest === 'function'
209210
? renderRest(omittedItems)

‎src/hooks/useBatchFrameState.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useRef, useState } from 'react';
1+
import { useRef, useState, useEffect } from 'react';
22
import raf from 'rc-util/lib/raf';
33

44
/**
@@ -8,9 +8,17 @@ import raf from 'rc-util/lib/raf';
88
export function useBatchFrameState() {
99
const [, forceUpdate] = useState({});
1010
const statesRef = useRef<any[]>([]);
11+
const destroyRef = useRef<boolean>(false);
1112
let walkingIndex = 0;
1213
let beforeFrameId: number = 0;
1314

15+
useEffect(
16+
() => () => {
17+
destroyRef.current = true;
18+
},
19+
[],
20+
);
21+
1422
function createState<T>(
1523
defaultValue: T,
1624
): [T, (value: T | ((origin: T) => T)) => void] {
@@ -33,7 +41,9 @@ export function useBatchFrameState() {
3341

3442
// Flush with batch
3543
beforeFrameId = raf(() => {
36-
forceUpdate({});
44+
if (!destroyRef.current) {
45+
forceUpdate({});
46+
}
3747
});
3848
}
3949

‎tests/index.spec.tsx‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ describe('Overflow', () => {
1919
}));
2020
}
2121

22+
it('no data', () => {
23+
const wrapper = mount(<Overflow<ItemType> />);
24+
expect(wrapper.findItems()).toHaveLength(0);
25+
});
26+
2227
it('no maxCount', () => {
2328
const wrapper = mount(
2429
<Overflow<ItemType> data={getData(6)} renderItem={renderItem} />,
@@ -46,17 +51,32 @@ describe('Overflow', () => {
4651
expect(wrapper.find('Item').text()).toEqual('Bamboo Is Light');
4752
});
4853

49-
it('renderRest', () => {
50-
const wrapper = mount(
51-
<Overflow
52-
data={getData(6)}
53-
renderItem={renderItem}
54-
renderRest={omittedItems => `Bamboo: ${omittedItems.length}`}
55-
maxCount={3}
56-
/>,
57-
);
54+
describe('renderRest', () => {
55+
it('function', () => {
56+
const wrapper = mount(
57+
<Overflow
58+
data={getData(6)}
59+
renderItem={renderItem}
60+
renderRest={(omittedItems) => `Bamboo: ${omittedItems.length}`}
61+
maxCount={3}
62+
/>,
63+
);
64+
65+
expect(wrapper.findRest().text()).toEqual('Bamboo: 3');
66+
});
5867

59-
expect(wrapper.findRest().text()).toEqual('Bamboo: 3');
68+
it('node', () => {
69+
const wrapper = mount(
70+
<Overflow
71+
data={getData(6)}
72+
renderItem={renderItem}
73+
renderRest={<span>Light Is Bamboo</span>}
74+
maxCount={3}
75+
/>,
76+
);
77+
78+
expect(wrapper.findRest().text()).toEqual('Light Is Bamboo');
79+
});
6080
});
6181

6282
describe('itemKey', () => {
@@ -72,7 +92,7 @@ describe('Overflow', () => {
7292
<Overflow
7393
data={getData(1)}
7494
renderItem={renderItem}
75-
itemKey={item => `bamboo-${item.key}`}
95+
itemKey={(item) => `bamboo-${item.key}`}
7696
/>,
7797
);
7898

‎tests/responsive.spec.tsx‎

Lines changed: 75 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { act } from 'react-dom/test-utils';
23
import Overflow from '../src';
34
import { mount } from './wrapper';
45

@@ -39,17 +40,27 @@ describe('Overflow.Responsive', () => {
3940
wrapper.initSize(100, 20); // [0][1][2][3][4][+2](5)(6)
4041
expect(wrapper.findItems()).toHaveLength(6);
4142
[true, true, true, true, false, false].forEach((display, i) => {
42-
expect(
43-
wrapper
44-
.findItems()
45-
.at(i)
46-
.props().display,
47-
).toBe(display);
43+
expect(wrapper.findItems().at(i).props().display).toBe(display);
4844
});
4945
expect(wrapper.findRest()).toHaveLength(1);
5046
expect(wrapper.findRest().text()).toEqual('+ 2 ...');
5147
});
5248

49+
it('only one', () => {
50+
const wrapper = mount(
51+
<Overflow<ItemType>
52+
data={getData(1)}
53+
itemKey="key"
54+
renderItem={renderItem}
55+
maxCount="responsive"
56+
/>,
57+
);
58+
wrapper.initSize(100, 20);
59+
60+
expect(wrapper.findItems()).toHaveLength(1);
61+
expect(wrapper.findRest().props().display).toBeFalsy();
62+
});
63+
5364
it('remove to clean up', () => {
5465
const data = getData(6);
5566

@@ -63,19 +74,35 @@ describe('Overflow.Responsive', () => {
6374
);
6475
wrapper.initSize(100, 20);
6576

66-
// Remove one
77+
// Remove one (Just fit the container width)
6778
const newData = [...data];
6879
newData.splice(1, 1);
6980
wrapper.setProps({ data: newData });
81+
wrapper.update();
7082

7183
expect(wrapper.findItems()).toHaveLength(5);
72-
expect(wrapper.findRest().text()).toEqual('+ 1 ...');
84+
expect(wrapper.findRest().props().display).toBeFalsy();
85+
86+
// Remove one (More place for container)
87+
const restData = [...newData];
88+
restData.splice(1, 2);
89+
restData.push({
90+
label: 'Additional',
91+
key: 'additional',
92+
});
93+
wrapper.setProps({ data: restData });
94+
wrapper.update();
95+
96+
expect(wrapper.findItems()).toHaveLength(4);
97+
expect(wrapper.findRest().props().display).toBeFalsy();
7398
});
7499

75100
it('none to overflow', () => {
101+
const data = getData(5);
102+
76103
const wrapper = mount(
77104
<Overflow<ItemType>
78-
data={getData(5)}
105+
data={data}
79106
itemKey="key"
80107
renderItem={renderItem}
81108
maxCount="responsive"
@@ -85,5 +112,44 @@ describe('Overflow.Responsive', () => {
85112
wrapper.initSize(100, 20);
86113
expect(wrapper.findItems()).toHaveLength(5);
87114
expect(wrapper.findRest().props().display).toBeFalsy();
115+
116+
// Add one
117+
const newData: ItemType[] = [
118+
{
119+
label: 'Additional',
120+
key: 'additional',
121+
},
122+
...data,
123+
];
124+
wrapper.setProps({ data: newData });
125+
wrapper.update();
126+
127+
// Currently resize observer not trigger, rest node is not ready
128+
expect(wrapper.findItems()).toHaveLength(6);
129+
expect(wrapper.findRest().props().display).toBeFalsy();
130+
131+
// Trigger resize, node ready
132+
wrapper.triggerItemResize(0, 20);
133+
expect(wrapper.findItems()).toHaveLength(6);
134+
expect(wrapper.findRest().props().display).toBeTruthy();
135+
});
136+
137+
it('unmount no error', () => {
138+
const wrapper = mount(
139+
<Overflow<ItemType>
140+
data={getData(1)}
141+
itemKey="key"
142+
renderItem={renderItem}
143+
maxCount="responsive"
144+
/>,
145+
);
146+
147+
wrapper.initSize(100, 20);
148+
149+
wrapper.unmount();
150+
151+
act(() => {
152+
jest.runAllTimers();
153+
});
88154
});
89155
});

0 commit comments

Comments
 (0)