2019-11-28 12:34:33 +08:00
|
|
|
import { SearchOutlined } from '@ant-design/icons';
|
2020-09-02 18:30:27 +08:00
|
|
|
import { resetWarned } from 'rc-util/lib/warning';
|
2022-06-22 14:57:09 +08:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { act } from 'react-dom/test-utils';
|
2016-12-14 15:44:38 +08:00
|
|
|
import Button from '..';
|
2019-08-26 22:53:20 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2020-01-02 19:10:16 +08:00
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2022-06-22 14:57:09 +08:00
|
|
|
import { fireEvent, render, sleep } from '../../../tests/utils';
|
|
|
|
import ConfigProvider from '../../config-provider';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { SizeType } from '../../config-provider/SizeContext';
|
2016-12-14 15:44:38 +08:00
|
|
|
|
|
|
|
describe('Button', () => {
|
2019-08-26 22:53:20 +08:00
|
|
|
mountTest(Button);
|
2019-09-16 11:23:26 +08:00
|
|
|
mountTest(() => <Button size="large" />);
|
|
|
|
mountTest(() => <Button size="small" />);
|
2019-08-27 16:13:43 +08:00
|
|
|
mountTest(Button.Group);
|
2019-09-16 11:23:26 +08:00
|
|
|
mountTest(() => <Button.Group size="large" />);
|
|
|
|
mountTest(() => <Button.Group size="small" />);
|
2020-04-05 21:18:28 +08:00
|
|
|
mountTest(() => <Button.Group size="middle" />);
|
2019-08-26 22:53:20 +08:00
|
|
|
|
2020-01-02 19:10:16 +08:00
|
|
|
rtlTest(Button);
|
|
|
|
rtlTest(() => <Button size="large" />);
|
|
|
|
rtlTest(() => <Button size="small" />);
|
|
|
|
rtlTest(Button.Group);
|
|
|
|
rtlTest(() => <Button.Group size="large" />);
|
|
|
|
rtlTest(() => <Button.Group size="small" />);
|
2020-04-05 21:18:28 +08:00
|
|
|
rtlTest(() => <Button.Group size="middle" />);
|
2020-01-02 19:10:16 +08:00
|
|
|
|
2016-12-14 15:44:38 +08:00
|
|
|
it('renders correctly', () => {
|
2022-06-06 17:33:42 +08:00
|
|
|
const { container } = render(<Button>Follow</Button>);
|
|
|
|
expect(container.firstChild).toMatchSnapshot();
|
2016-12-14 15:44:38 +08:00
|
|
|
});
|
|
|
|
|
2018-08-24 12:11:44 +08:00
|
|
|
it('mount correctly', () => {
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(() => render(<Button>Follow</Button>)).not.toThrow();
|
2018-08-24 12:11:44 +08:00
|
|
|
});
|
|
|
|
|
2020-04-05 21:18:28 +08:00
|
|
|
it('warns if size is wrong', () => {
|
2022-04-22 17:40:52 +08:00
|
|
|
resetWarned();
|
|
|
|
const mockWarn = jest.spyOn(console, 'error').mockImplementation(() => {});
|
2021-06-11 16:32:46 +08:00
|
|
|
const size = 'who am I' as any as SizeType;
|
2022-04-22 17:40:52 +08:00
|
|
|
render(<Button.Group size={size} />);
|
|
|
|
expect(mockWarn).toHaveBeenCalledWith('Warning: [antd: Button.Group] Invalid prop `size`.');
|
|
|
|
|
|
|
|
mockWarn.mockRestore();
|
2020-04-05 21:18:28 +08:00
|
|
|
});
|
|
|
|
|
2016-12-14 15:44:38 +08:00
|
|
|
it('renders Chinese characters correctly', () => {
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(render(<Button>按钮</Button>).container.firstChild).toMatchSnapshot();
|
2017-05-02 20:16:18 +08:00
|
|
|
// should not insert space when there is icon
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(
|
|
|
|
render(<Button icon={<SearchOutlined />}>按钮</Button>).container.firstChild,
|
|
|
|
).toMatchSnapshot();
|
2017-05-02 20:16:18 +08:00
|
|
|
// should not insert space when there is icon
|
2022-04-06 11:07:15 +08:00
|
|
|
expect(
|
2022-06-06 17:33:42 +08:00
|
|
|
render(
|
2022-04-06 11:07:15 +08:00
|
|
|
<Button>
|
|
|
|
<SearchOutlined />
|
|
|
|
按钮
|
|
|
|
</Button>,
|
2022-06-06 17:33:42 +08:00
|
|
|
).container.firstChild,
|
2022-04-06 11:07:15 +08:00
|
|
|
).toMatchSnapshot();
|
2018-05-01 19:36:11 +08:00
|
|
|
// should not insert space when there is icon
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(
|
|
|
|
render(<Button icon={<SearchOutlined />}>按钮</Button>).container.firstChild,
|
|
|
|
).toMatchSnapshot();
|
2018-05-01 19:36:11 +08:00
|
|
|
// should not insert space when there is icon while loading
|
2020-04-06 12:05:38 +08:00
|
|
|
expect(
|
2022-06-06 17:33:42 +08:00
|
|
|
render(
|
2021-12-04 17:06:36 +08:00
|
|
|
<Button icon={<SearchOutlined />} loading>
|
|
|
|
按钮
|
|
|
|
</Button>,
|
2022-06-06 17:33:42 +08:00
|
|
|
).container.firstChild,
|
2021-12-04 17:06:36 +08:00
|
|
|
).toMatchSnapshot();
|
2018-05-01 19:36:11 +08:00
|
|
|
// should insert space while loading
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(render(<Button loading>按钮</Button>).container.firstChild).toMatchSnapshot();
|
2019-09-16 11:23:26 +08:00
|
|
|
|
|
|
|
// should insert space while only one nested element
|
2020-04-06 12:05:38 +08:00
|
|
|
expect(
|
2022-06-06 17:33:42 +08:00
|
|
|
render(
|
2021-12-04 17:06:36 +08:00
|
|
|
<Button>
|
|
|
|
<span>按钮</span>
|
|
|
|
</Button>,
|
2022-06-06 17:33:42 +08:00
|
|
|
).container.firstChild,
|
2021-12-04 17:06:36 +08:00
|
|
|
).toMatchSnapshot();
|
2016-12-14 15:44:38 +08:00
|
|
|
});
|
2017-02-16 14:03:05 +08:00
|
|
|
|
2018-03-23 22:23:03 +08:00
|
|
|
it('renders Chinese characters correctly in HOC', () => {
|
2020-04-13 13:36:23 +08:00
|
|
|
const Text = ({ children }: { children: React.ReactNode }) => <span>{children}</span>;
|
2022-04-18 21:02:11 +08:00
|
|
|
const { container, rerender } = render(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Button>
|
|
|
|
<Text>按钮</Text>
|
|
|
|
</Button>,
|
2018-03-23 22:23:03 +08:00
|
|
|
);
|
2022-04-18 21:02:11 +08:00
|
|
|
expect(container.querySelector('.ant-btn')).toHaveClass('ant-btn-two-chinese-chars');
|
|
|
|
|
|
|
|
rerender(
|
|
|
|
<Button>
|
|
|
|
<Text>大按钮</Text>
|
|
|
|
</Button>,
|
|
|
|
);
|
|
|
|
expect(container.querySelector('.ant-btn')).not.toHaveClass('ant-btn-two-chinese-chars');
|
|
|
|
|
|
|
|
rerender(
|
|
|
|
<Button>
|
|
|
|
<Text>按钮</Text>
|
|
|
|
</Button>,
|
|
|
|
);
|
|
|
|
expect(container.querySelector('.ant-btn')).toHaveClass('ant-btn-two-chinese-chars');
|
2018-03-23 22:23:03 +08:00
|
|
|
});
|
|
|
|
|
2019-09-16 11:23:26 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/18118
|
2020-05-06 10:15:33 +08:00
|
|
|
it('should not insert space to link or text button', () => {
|
2022-06-06 17:33:42 +08:00
|
|
|
const wrapper1 = render(<Button type="link">按钮</Button>);
|
|
|
|
expect(wrapper1.getByRole('button')).toHaveTextContent('按钮');
|
|
|
|
wrapper1.unmount();
|
|
|
|
const wrapper2 = render(<Button type="text">按钮</Button>);
|
|
|
|
expect(wrapper2.getByRole('button')).toHaveTextContent('按钮');
|
2019-09-16 11:23:26 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should render empty button without errors', () => {
|
2022-06-06 17:33:42 +08:00
|
|
|
const wrapper = render(
|
2019-09-16 11:23:26 +08:00
|
|
|
<Button>
|
|
|
|
{null}
|
|
|
|
{undefined}
|
|
|
|
</Button>,
|
|
|
|
);
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
2019-09-16 11:23:26 +08:00
|
|
|
});
|
|
|
|
|
2018-06-12 14:36:08 +08:00
|
|
|
it('have static property for type detecting', () => {
|
2022-08-24 17:00:40 +08:00
|
|
|
expect(Button.__ANT_BUTTON).toBe(true);
|
2017-02-16 14:03:05 +08:00
|
|
|
});
|
2017-03-28 15:50:46 +08:00
|
|
|
|
|
|
|
it('should change loading state instantly by default', () => {
|
|
|
|
class DefaultButton extends Component {
|
|
|
|
state = {
|
|
|
|
loading: false,
|
|
|
|
};
|
2018-06-22 21:05:13 +08:00
|
|
|
|
2017-03-28 15:50:46 +08:00
|
|
|
enterLoading = () => {
|
|
|
|
this.setState({ loading: true });
|
2018-12-07 16:17:45 +08:00
|
|
|
};
|
2018-06-22 21:05:13 +08:00
|
|
|
|
2017-03-28 15:50:46 +08:00
|
|
|
render() {
|
2018-06-22 21:05:13 +08:00
|
|
|
const { loading } = this.state;
|
2018-12-07 16:17:45 +08:00
|
|
|
return (
|
|
|
|
<Button loading={loading} onClick={this.enterLoading}>
|
|
|
|
Button
|
|
|
|
</Button>
|
|
|
|
);
|
2017-03-28 15:50:46 +08:00
|
|
|
}
|
|
|
|
}
|
2022-06-06 17:33:42 +08:00
|
|
|
const wrapper = render(<DefaultButton />);
|
|
|
|
fireEvent.click(wrapper.container.firstChild!);
|
|
|
|
expect(wrapper.container.querySelectorAll('.ant-btn-loading').length).toBe(1);
|
2017-03-28 15:50:46 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should change loading state with delay', () => {
|
|
|
|
class DefaultButton extends Component {
|
|
|
|
state = {
|
|
|
|
loading: false,
|
|
|
|
};
|
2018-06-22 21:05:13 +08:00
|
|
|
|
2017-03-28 15:50:46 +08:00
|
|
|
enterLoading = () => {
|
|
|
|
this.setState({ loading: { delay: 1000 } });
|
2018-12-07 16:17:45 +08:00
|
|
|
};
|
2018-06-22 21:05:13 +08:00
|
|
|
|
2017-03-28 15:50:46 +08:00
|
|
|
render() {
|
2018-06-22 21:05:13 +08:00
|
|
|
const { loading } = this.state;
|
2018-12-07 16:17:45 +08:00
|
|
|
return (
|
|
|
|
<Button loading={loading} onClick={this.enterLoading}>
|
|
|
|
Button
|
|
|
|
</Button>
|
|
|
|
);
|
2017-03-28 15:50:46 +08:00
|
|
|
}
|
|
|
|
}
|
2022-06-06 17:33:42 +08:00
|
|
|
const wrapper = render(<DefaultButton />);
|
|
|
|
fireEvent.click(wrapper.container.firstChild!);
|
|
|
|
expect(wrapper.container.firstChild).not.toHaveClass('ant-btn-loading');
|
2017-03-28 15:50:46 +08:00
|
|
|
});
|
2017-11-29 11:20:22 +08:00
|
|
|
|
2020-06-02 12:54:22 +08:00
|
|
|
it('reset when loading back of delay', () => {
|
|
|
|
jest.useFakeTimers();
|
2022-06-06 17:33:42 +08:00
|
|
|
const { rerender, container } = render(<Button loading={{ delay: 1000 }} />);
|
|
|
|
rerender(<Button loading={{ delay: 2000 }} />);
|
|
|
|
rerender(<Button loading={false} />);
|
2020-06-02 12:54:22 +08:00
|
|
|
|
|
|
|
act(() => {
|
|
|
|
jest.runAllTimers();
|
|
|
|
});
|
|
|
|
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(container.querySelectorAll('.ant-btn-loading')).toHaveLength(0);
|
2020-06-02 12:54:22 +08:00
|
|
|
|
|
|
|
jest.useRealTimers();
|
|
|
|
});
|
|
|
|
|
2019-09-16 11:23:26 +08:00
|
|
|
it('should not clickable when button is loading', () => {
|
|
|
|
const onClick = jest.fn();
|
2022-04-17 22:36:36 +08:00
|
|
|
const { container } = render(
|
2019-09-16 11:23:26 +08:00
|
|
|
<Button loading onClick={onClick}>
|
|
|
|
button
|
|
|
|
</Button>,
|
|
|
|
);
|
2022-04-17 22:36:36 +08:00
|
|
|
fireEvent.click(container.firstChild!);
|
2019-09-16 11:23:26 +08:00
|
|
|
expect(onClick).not.toHaveBeenCalledWith();
|
|
|
|
});
|
|
|
|
|
2017-11-29 11:20:22 +08:00
|
|
|
it('should support link button', () => {
|
2022-06-06 17:33:42 +08:00
|
|
|
const wrapper = render(
|
2020-05-15 17:18:55 +08:00
|
|
|
<Button target="_blank" href="https://ant.design">
|
2018-12-07 16:17:45 +08:00
|
|
|
link button
|
|
|
|
</Button>,
|
2017-11-29 11:20:22 +08:00
|
|
|
);
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
2017-11-29 11:20:22 +08:00
|
|
|
});
|
2018-01-09 16:18:20 +08:00
|
|
|
|
|
|
|
it('fixbug renders {0} , 0 and {false}', () => {
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(render(<Button>{0}</Button>).container.firstChild).toMatchSnapshot();
|
|
|
|
expect(render(<Button>0</Button>).container.firstChild).toMatchSnapshot();
|
|
|
|
expect(render(<Button>{false}</Button>).container.firstChild).toMatchSnapshot();
|
2018-01-09 16:18:20 +08:00
|
|
|
});
|
2018-11-12 12:38:02 +08:00
|
|
|
|
2018-12-03 10:39:00 +08:00
|
|
|
it('should not render as link button when href is undefined', async () => {
|
2022-06-06 17:33:42 +08:00
|
|
|
const wrapper = render(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Button type="primary" href={undefined}>
|
|
|
|
button
|
|
|
|
</Button>,
|
2018-12-03 10:39:00 +08:00
|
|
|
);
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
2018-12-03 10:39:00 +08:00
|
|
|
});
|
2019-05-17 12:04:47 +08:00
|
|
|
|
2022-06-06 17:33:42 +08:00
|
|
|
// // https://github.com/ant-design/ant-design/issues/15342
|
2019-05-17 12:04:47 +08:00
|
|
|
it('should merge text if children using variable', () => {
|
2022-06-06 17:33:42 +08:00
|
|
|
const wrapper = render(
|
2019-05-17 12:04:47 +08:00
|
|
|
<Button>
|
2019-10-05 17:35:49 +08:00
|
|
|
{/* eslint-disable-next-line react/jsx-curly-brace-presence */}
|
2019-05-17 12:04:47 +08:00
|
|
|
This {'is'} a test {1}
|
|
|
|
</Button>,
|
|
|
|
);
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
2019-05-17 12:04:47 +08:00
|
|
|
});
|
2019-09-16 11:23:26 +08:00
|
|
|
|
|
|
|
it('should support to change loading', async () => {
|
2022-08-24 17:00:40 +08:00
|
|
|
const { container, rerender, unmount } = render(<Button>Button</Button>);
|
2022-06-06 17:33:42 +08:00
|
|
|
rerender(<Button loading />);
|
|
|
|
expect(container.querySelectorAll('.ant-btn-loading').length).toBe(1);
|
|
|
|
rerender(<Button loading={false} />);
|
|
|
|
expect(container.querySelectorAll('.ant-btn-loading').length).toBe(0);
|
|
|
|
rerender(<Button loading={{ delay: 50 }} />);
|
|
|
|
expect(container.querySelectorAll('.ant-btn-loading').length).toBe(0);
|
2019-09-16 11:23:26 +08:00
|
|
|
await sleep(50);
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(container.querySelectorAll('.ant-btn-loading').length).toBe(1);
|
|
|
|
rerender(<Button loading={false} />);
|
2019-09-16 11:23:26 +08:00
|
|
|
await sleep(50);
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(container.querySelectorAll('.ant-btn-loading').length).toBe(0);
|
2022-08-24 17:00:40 +08:00
|
|
|
expect(unmount).not.toThrow();
|
2019-09-16 11:23:26 +08:00
|
|
|
});
|
2019-12-13 10:18:12 +08:00
|
|
|
|
|
|
|
it('should warning when pass a string as icon props', () => {
|
2020-09-02 18:30:27 +08:00
|
|
|
resetWarned();
|
2019-12-13 10:18:12 +08:00
|
|
|
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
2022-04-06 11:07:15 +08:00
|
|
|
|
|
|
|
render(<Button type="primary" icon="ab" />);
|
2019-12-13 10:18:12 +08:00
|
|
|
expect(warnSpy).not.toHaveBeenCalled();
|
2022-04-06 11:07:15 +08:00
|
|
|
|
|
|
|
render(<Button type="primary" icon="search" />);
|
2019-12-13 10:18:12 +08:00
|
|
|
expect(warnSpy).toHaveBeenCalledWith(
|
|
|
|
`Warning: [antd: Button] \`icon\` is using ReactNode instead of string naming in v4. Please check \`search\` at https://ant.design/components/icon`,
|
|
|
|
);
|
2022-04-06 11:07:15 +08:00
|
|
|
|
2019-12-13 10:18:12 +08:00
|
|
|
warnSpy.mockRestore();
|
|
|
|
});
|
2020-02-02 18:03:38 +08:00
|
|
|
|
2020-06-19 17:46:15 +08:00
|
|
|
it('should warning when pass type=link and ghost=true', () => {
|
2020-09-02 18:30:27 +08:00
|
|
|
resetWarned();
|
2020-06-19 17:46:15 +08:00
|
|
|
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
2022-06-06 17:33:42 +08:00
|
|
|
render(<Button type="link" ghost />);
|
2020-06-19 17:46:15 +08:00
|
|
|
expect(warnSpy).toHaveBeenCalledWith(
|
|
|
|
"Warning: [antd: Button] `link` or `text` button can't be a `ghost` button.",
|
|
|
|
);
|
|
|
|
warnSpy.mockRestore();
|
2020-09-02 18:30:27 +08:00
|
|
|
});
|
|
|
|
|
2020-06-19 17:46:15 +08:00
|
|
|
it('should warning when pass type=text and ghost=true', () => {
|
2020-09-02 18:30:27 +08:00
|
|
|
resetWarned();
|
2020-06-19 17:46:15 +08:00
|
|
|
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
2022-06-06 17:33:42 +08:00
|
|
|
render(<Button type="text" ghost />);
|
2020-06-19 17:46:15 +08:00
|
|
|
expect(warnSpy).toHaveBeenCalledWith(
|
|
|
|
"Warning: [antd: Button] `link` or `text` button can't be a `ghost` button.",
|
|
|
|
);
|
|
|
|
warnSpy.mockRestore();
|
2020-09-02 18:30:27 +08:00
|
|
|
});
|
2020-06-19 17:46:15 +08:00
|
|
|
|
2020-02-02 18:03:38 +08:00
|
|
|
it('skip check 2 words when ConfigProvider disable this', () => {
|
2022-06-06 17:33:42 +08:00
|
|
|
let buttonInstance: any;
|
|
|
|
render(
|
2020-02-02 18:03:38 +08:00
|
|
|
<ConfigProvider autoInsertSpaceInButton={false}>
|
2022-06-06 17:33:42 +08:00
|
|
|
<Button
|
|
|
|
ref={node => {
|
|
|
|
buttonInstance = node;
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
test
|
|
|
|
</Button>
|
2020-02-02 18:03:38 +08:00
|
|
|
</ConfigProvider>,
|
|
|
|
);
|
|
|
|
|
2022-06-06 17:33:42 +08:00
|
|
|
Object.defineProperty(buttonInstance, 'textContent', {
|
2020-02-02 18:03:38 +08:00
|
|
|
get() {
|
|
|
|
throw new Error('Should not called!!!');
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
2021-04-19 17:19:22 +08:00
|
|
|
|
|
|
|
it('should not redirect when button is disabled', () => {
|
|
|
|
const onClick = jest.fn();
|
2022-04-17 22:36:36 +08:00
|
|
|
const { container } = render(
|
2021-04-19 17:19:22 +08:00
|
|
|
<Button href="https://ant.design" onClick={onClick} disabled>
|
|
|
|
click me
|
|
|
|
</Button>,
|
|
|
|
);
|
2022-04-17 22:36:36 +08:00
|
|
|
fireEvent.click(container.firstChild!);
|
2021-04-19 17:19:22 +08:00
|
|
|
expect(onClick).not.toHaveBeenCalled();
|
|
|
|
});
|
2021-06-11 16:32:46 +08:00
|
|
|
|
2022-06-10 17:58:58 +08:00
|
|
|
it('should match class .ant-btn-disabled when button is disabled and href is not undefined', () => {
|
|
|
|
const wrapper = render(
|
|
|
|
<Button href="https://ant.design" disabled>
|
|
|
|
click me
|
|
|
|
</Button>,
|
|
|
|
);
|
|
|
|
expect(wrapper.container.querySelector('.ant-btn')).toHaveClass('ant-btn-disabled');
|
|
|
|
});
|
|
|
|
|
2021-06-11 16:32:46 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/30953
|
|
|
|
it('should handle fragment as children', () => {
|
2022-06-06 17:33:42 +08:00
|
|
|
const wrapper = render(
|
2021-06-11 16:32:46 +08:00
|
|
|
<Button>
|
2021-11-26 12:18:21 +08:00
|
|
|
{/* eslint-disable-next-line react/jsx-no-useless-fragment */}
|
2021-06-11 16:32:46 +08:00
|
|
|
<>text</>
|
|
|
|
</Button>,
|
|
|
|
);
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(wrapper.container.firstChild).toMatchSnapshot();
|
2021-06-11 16:32:46 +08:00
|
|
|
});
|
2016-12-14 15:44:38 +08:00
|
|
|
});
|