fix: Clear delay loading timer after Button is unmounted

This commit is contained in:
Di Wu 2022-01-26 14:41:10 +08:00
parent dc019dca56
commit 16cfb89d24
2 changed files with 106 additions and 3 deletions

View File

@ -0,0 +1,93 @@
import React, { useState } from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import Button from '../button';
const specialDelay = 9529;
const Content = () => {
const [loading, setLoading] = useState(false);
const toggleLoading = () => {
setLoading(!loading);
};
const [visible, setVisible] = useState(true);
const toggleVisible = () => {
setVisible(!visible);
};
return (
<div>
<button type="button" id="toggle_loading" onClick={toggleLoading}>
Toggle Loading
</button>
<button type="button" id="toggle_visible" onClick={toggleVisible}>
Toggle Visible
</button>
{visible && <Button type="text" loading={loading ? { delay: specialDelay } : false} />}
</div>
);
};
it('Delay loading timer in Button component', () => {
const otherTimer: any = 9528;
jest.spyOn(window, 'setTimeout').mockReturnValue(otherTimer);
jest.restoreAllMocks();
const wrapper = mount(<Content />);
const btnTimer: any = 9527;
jest.spyOn(window, 'setTimeout').mockReturnValue(btnTimer);
jest.spyOn(window, 'clearTimeout');
const setTimeoutMock = window.setTimeout as any as jest.Mock;
const clearTimeoutMock = window.clearTimeout as any as jest.Mock;
// other component may call setTimeout or clearTimeout
const setTimeoutCount = () => {
const items = setTimeoutMock.mock.calls.filter(item => {
return item[1] === specialDelay;
});
return items.length;
};
const clearTimeoutCount = () => {
const items = clearTimeoutMock.mock.calls.filter(item => {
return item[0] === btnTimer;
});
return items.length;
};
// switch loading state to true
wrapper.find('#toggle_loading').at(0).simulate('click');
expect(setTimeoutCount()).toBe(1);
expect(clearTimeoutCount()).toBe(0);
// trigger timer handler
act(() => {
setTimeoutMock.mock.calls[0][0]();
});
expect(setTimeoutCount()).toBe(1);
expect(clearTimeoutCount()).toBe(0);
// switch loading state to false
wrapper.find('#toggle_loading').at(0).simulate('click');
expect(setTimeoutCount()).toBe(1);
expect(clearTimeoutCount()).toBe(0);
// switch loading state to true
wrapper.find('#toggle_loading').at(0).simulate('click');
expect(setTimeoutCount()).toBe(2);
expect(clearTimeoutCount()).toBe(0);
// switch loading state to false
wrapper.find('#toggle_loading').at(0).simulate('click');
expect(setTimeoutCount()).toBe(2);
expect(clearTimeoutCount()).toBe(1);
// switch loading state to true
wrapper.find('#toggle_loading').at(0).simulate('click');
// remove Button component
wrapper.find('#toggle_visible').at(0).simulate('click');
expect(setTimeoutCount()).toBe(3);
expect(clearTimeoutCount()).toBe(2);
jest.restoreAllMocks();
});

View File

@ -156,7 +156,6 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
const { getPrefixCls, autoInsertSpaceInButton, direction } = React.useContext(ConfigContext);
const buttonRef = (ref as any) || React.createRef<HTMLElement>();
const delayTimeoutRef = React.useRef<number>();
const isNeedInserted = () =>
React.Children.count(children) === 1 && !icon && !isUnborderedButtonType(type);
@ -181,14 +180,25 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
typeof loading === 'object' && loading.delay ? loading.delay || true : !!loading;
React.useEffect(() => {
clearTimeout(delayTimeoutRef.current);
let delayTimer: number | null = null;
if (typeof loadingOrDelay === 'number') {
delayTimeoutRef.current = window.setTimeout(() => {
delayTimer = window.setTimeout(() => {
delayTimer = null;
setLoading(loadingOrDelay);
}, loadingOrDelay);
} else {
setLoading(loadingOrDelay);
}
return () => {
if (delayTimer) {
// in order to not perform a React state update on an unmounted component
// and clear timer after 'loadingOrDelay' updated.
window.clearTimeout(delayTimer);
delayTimer = null;
}
};
}, [loadingOrDelay]);
React.useEffect(fixTwoCNChar, [buttonRef]);