2024-02-27 19:11:46 +08:00
|
|
|
import React, { Suspense, useRef, useState } from 'react';
|
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';
|
2024-02-27 19:11:46 +08:00
|
|
|
|
2016-12-14 15:44:38 +08:00
|
|
|
import Button from '..';
|
2024-04-09 16:49:47 +08:00
|
|
|
import type { GetRef } from '../../_util/type';
|
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';
|
2024-04-28 09:52:54 +08:00
|
|
|
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
|
2022-06-22 14:57:09 +08:00
|
|
|
import ConfigProvider from '../../config-provider';
|
2022-12-19 11:25:21 +08:00
|
|
|
import type { BaseButtonProps } from '../button';
|
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();
|
2023-06-07 21:59:21 +08:00
|
|
|
const mockWarn = jest.spyOn(console, 'error').mockImplementation(() => {});
|
2022-10-19 11:50:18 +08:00
|
|
|
const size = 'who am I';
|
|
|
|
// @ts-expect-error: Type '"who am I"' is not assignable to type 'SizeType'.ts(2322)
|
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', () => {
|
2022-12-19 11:25:21 +08:00
|
|
|
const DefaultButton: React.FC = () => {
|
|
|
|
const [loading, setLoading] = useState<BaseButtonProps['loading']>(false);
|
|
|
|
return (
|
|
|
|
<Button loading={loading} onClick={() => setLoading(true)}>
|
|
|
|
Button
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
};
|
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', () => {
|
2022-12-19 11:25:21 +08:00
|
|
|
const DefaultButton: React.FC = () => {
|
|
|
|
const [loading, setLoading] = useState<BaseButtonProps['loading']>(false);
|
|
|
|
return (
|
|
|
|
<Button loading={loading} onClick={() => setLoading({ delay: 1000 })}>
|
|
|
|
Button
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
};
|
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
|
|
|
|
2023-04-11 11:37:31 +08:00
|
|
|
it('should support custom icon className', () => {
|
|
|
|
const { container } = render(
|
|
|
|
<Button type="primary" icon={<SearchOutlined />} classNames={{ icon: 'custom-icon' }} />,
|
|
|
|
);
|
|
|
|
expect(container.querySelectorAll('.custom-icon').length).toBe(1);
|
|
|
|
expect(container).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should support custom icon styles', () => {
|
|
|
|
const { container } = render(
|
|
|
|
<Button type="primary" icon={<SearchOutlined />} styles={{ icon: { color: 'red' } }} />,
|
|
|
|
);
|
|
|
|
expect(container).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
2020-06-02 12:54:22 +08:00
|
|
|
it('reset when loading back of delay', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
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(() => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.runAllTimers();
|
2020-06-02 12:54:22 +08:00
|
|
|
});
|
|
|
|
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(container.querySelectorAll('.ant-btn-loading')).toHaveLength(0);
|
2020-06-02 12:54:22 +08:00
|
|
|
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useRealTimers();
|
2020-06-02 12:54:22 +08:00
|
|
|
});
|
|
|
|
|
2019-09-16 11:23:26 +08:00
|
|
|
it('should not clickable when button is loading', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
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 () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useFakeTimers();
|
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);
|
2022-11-21 10:00:13 +08:00
|
|
|
await waitFakeTimer();
|
2022-06-06 17:33:42 +08:00
|
|
|
expect(container.querySelectorAll('.ant-btn-loading').length).toBe(1);
|
|
|
|
rerender(<Button loading={false} />);
|
2022-11-21 10:00:13 +08:00
|
|
|
await waitFakeTimer();
|
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();
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.useRealTimers();
|
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();
|
2023-06-07 21:59:21 +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();
|
2023-06-07 21:59:21 +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();
|
2023-06-07 21:59:21 +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', () => {
|
2024-04-09 16:49:47 +08:00
|
|
|
const buttonInstance = React.createRef<GetRef<typeof Button>>();
|
2022-06-06 17:33:42 +08:00
|
|
|
render(
|
2020-02-02 18:03:38 +08:00
|
|
|
<ConfigProvider autoInsertSpaceInButton={false}>
|
2023-02-05 10:51:51 +08:00
|
|
|
<Button ref={buttonInstance}>test</Button>
|
2020-02-02 18:03:38 +08:00
|
|
|
</ConfigProvider>,
|
|
|
|
);
|
2023-02-05 10:51:51 +08:00
|
|
|
Object.defineProperty(buttonInstance.current, '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', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
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
|
|
|
});
|
2023-06-12 10:22:32 +08:00
|
|
|
|
|
|
|
it("should prevent children's event when button is disabled", () => {
|
|
|
|
const { container } = render(
|
|
|
|
<Button disabled>
|
|
|
|
<a id="link">test</a>
|
|
|
|
</Button>,
|
|
|
|
);
|
|
|
|
expect(window.getComputedStyle(container.querySelector('#link')!).pointerEvents).toBe('none');
|
|
|
|
});
|
2023-07-18 23:59:53 +08:00
|
|
|
|
|
|
|
it('Correct type', () => {
|
|
|
|
const onBtnClick: React.MouseEventHandler<HTMLButtonElement> = () => {};
|
|
|
|
const onAnchorClick: React.MouseEventHandler<HTMLAnchorElement> = () => {};
|
|
|
|
|
|
|
|
const button = <Button onClick={onBtnClick} />;
|
|
|
|
const anchor = <Button href="https://ant.design" onClick={onAnchorClick} />;
|
|
|
|
|
2023-07-20 09:46:26 +08:00
|
|
|
const defaultBtn = (
|
|
|
|
<Button
|
|
|
|
onClick={(e) => {
|
|
|
|
expect(e).toBeTruthy();
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
const defaultABtn = (
|
|
|
|
<Button
|
|
|
|
href="https://ant.design"
|
|
|
|
onClick={(e) => {
|
|
|
|
expect(e).toBeTruthy();
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2024-04-09 16:49:47 +08:00
|
|
|
const btnRef = React.createRef<GetRef<typeof Button>>();
|
2023-07-20 09:46:26 +08:00
|
|
|
const refBtn = <Button ref={btnRef} />;
|
|
|
|
|
2024-04-09 16:49:47 +08:00
|
|
|
const anchorRef = React.createRef<GetRef<typeof Button>>();
|
2023-07-20 09:46:26 +08:00
|
|
|
const refAnchor = <Button ref={anchorRef} />;
|
|
|
|
|
2024-04-09 16:49:47 +08:00
|
|
|
const htmlRef = React.createRef<GetRef<typeof Button>>();
|
2023-07-20 09:46:26 +08:00
|
|
|
const refHtml = <Button ref={htmlRef} />;
|
|
|
|
|
2023-07-21 23:36:11 +08:00
|
|
|
const btnAttr = <Button name="hello" />;
|
|
|
|
|
2023-07-18 23:59:53 +08:00
|
|
|
expect(button).toBeTruthy();
|
|
|
|
expect(anchor).toBeTruthy();
|
2023-07-20 09:46:26 +08:00
|
|
|
expect(defaultBtn).toBeTruthy();
|
|
|
|
expect(defaultABtn).toBeTruthy();
|
|
|
|
expect(refBtn).toBeTruthy();
|
|
|
|
expect(refAnchor).toBeTruthy();
|
|
|
|
expect(refHtml).toBeTruthy();
|
2023-07-21 23:36:11 +08:00
|
|
|
expect(btnAttr).toBeTruthy();
|
2023-07-18 23:59:53 +08:00
|
|
|
});
|
2023-09-26 11:57:03 +08:00
|
|
|
|
|
|
|
it('should not display loading when not set', () => {
|
|
|
|
function Suspender({ freeze }: { freeze: boolean }) {
|
|
|
|
const promiseCache = useRef<{
|
|
|
|
promise?: Promise<void>;
|
|
|
|
resolve?: (value: void | PromiseLike<void>) => void;
|
|
|
|
}>({}).current;
|
|
|
|
if (freeze && !promiseCache.promise) {
|
|
|
|
promiseCache.promise = new Promise((resolve) => {
|
|
|
|
promiseCache.resolve = resolve;
|
|
|
|
});
|
|
|
|
throw promiseCache.promise;
|
|
|
|
} else if (freeze) {
|
|
|
|
throw promiseCache.promise;
|
|
|
|
} else if (promiseCache.promise) {
|
|
|
|
promiseCache.resolve?.();
|
|
|
|
promiseCache.promise = undefined;
|
|
|
|
}
|
|
|
|
return <Button>button</Button>;
|
|
|
|
}
|
|
|
|
const MyCom: React.FC = () => {
|
|
|
|
const [freeze, setFreeze] = useState(false);
|
|
|
|
return (
|
|
|
|
<div className="foo">
|
|
|
|
<Button className="change-btn" onClick={() => setFreeze(!freeze)}>
|
|
|
|
Change
|
|
|
|
</Button>
|
|
|
|
<Suspense fallback={<>frozen</>}>
|
|
|
|
<Suspender freeze={freeze} />
|
|
|
|
</Suspense>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
const { container } = render(<MyCom />);
|
|
|
|
|
|
|
|
fireEvent.click(container.querySelector('.change-btn')!);
|
|
|
|
expect(container.querySelector('.foo')).toHaveTextContent('frozen');
|
|
|
|
fireEvent.click(container.querySelector('.change-btn')!);
|
|
|
|
expect(container.querySelectorAll('.ant-btn-loading-icon').length).toBe(0);
|
|
|
|
});
|
2023-10-13 18:52:47 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/45273
|
|
|
|
it('should display loading when delay is zero', () => {
|
|
|
|
const { container } = render(<Button loading={{ delay: 0 }}>Button</Button>);
|
|
|
|
expect(container.querySelectorAll('.ant-btn-loading').length).toBe(1);
|
|
|
|
});
|
2024-02-27 19:11:46 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/47605
|
|
|
|
it('Compatible with original `type` behavior', async () => {
|
|
|
|
const { container } = render(<Button type={'' as any} />);
|
|
|
|
expect(container.querySelector('.ant-btn-default')).toBeTruthy();
|
|
|
|
});
|
2024-04-11 15:29:10 +08:00
|
|
|
|
|
|
|
it('should support autoInsertSpace', () => {
|
|
|
|
const text = '确定';
|
|
|
|
const { container } = render(<Button autoInsertSpace={false}>{text}</Button>);
|
|
|
|
expect(container.querySelector<HTMLButtonElement>('button')?.textContent).toBe(text);
|
|
|
|
});
|
2016-12-14 15:44:38 +08:00
|
|
|
});
|