ant-design/components/button/__tests__/index.test.tsx

451 lines
15 KiB
TypeScript
Raw Normal View History

2024-02-27 19:11:46 +08:00
import React, { Suspense, useRef, useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
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 '..';
import type { GetRef } from '../../_util/type';
2019-08-26 22:53:20 +08:00
import mountTest from '../../../tests/shared/mountTest';
feat: added rtl direction to all of ant-design components (#19380) * rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
2020-01-02 19:10:16 +08:00
import rtlTest from '../../../tests/shared/rtlTest';
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" />);
mountTest(() => <Button.Group size="middle" />);
2019-08-26 22:53:20 +08:00
feat: added rtl direction to all of ant-design components (#19380) * rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
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" />);
rtlTest(() => <Button.Group size="middle" />);
feat: added rtl direction to all of ant-design components (#19380) * rtl demo change en-us description * change bundlesize css limit * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * fix select component arrow issue * RTL: form component * add pagination rtl test * fix test lint error * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * some fixes to RTL components * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * fix switch component text rtl issue * fix table grouped header text-align * add rtl support to whole demo with RTL button * Update rtl demo responsive * RTL: page-header component * RTL: typography component * RTL: Dropdown (Partial) * update config-provider doc * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * fix lost changes after rebase * fix lint errors * RTL: Transfer Component * RTL: upload component * RTL: update avatar demo * RTL: comment component * RTL: collapse component * RTL: carousel component * update snapshots * RTL: Card component * RTL: descriptions component * RTL: Empty component * RTL: list component * RTL: slider component * slider component import/order * add shared rtlTest * RTL: Statistic component * RTL: tooltip components * RTL: popover component * RTL: timeline component * RTL: tag component * RTL: alert component * RTL: drawer component * RTL: Tab component * change direction definition * RTL: progress component * input.tsx, remove duplicate after rebase * fix demo.less after rebase * fix ant-row-rtl after rebase * fix upload issues in rtl * badge rtl demo margin fix * fix: tabs with icon margin * fix: radio-wrapper margin * fix: table component after rebase * fix: centered modal text-align * update slider snapshot * RTL: popconfirm component * RTL: back-top component * RTL: spin component * RTL: result component * RTL: skeleton component * RTL: menu component * RTL: time-picker component * RTL: calendar component * RTL: date-picker component * RTL: home page * update snapshots * test: add auto-complete rtl test * test: add avatar component rtl tests * test: add badge component rtl tests * test: add breadcrumb component rtl tests * test: add button components rtl tests * test: add card component rtl tests * test: add carousel component rtl tests * test: add cascader component rtl tests * test: add checkbox component rtl tests * test: add collapse component rtl tests * test: add comment component rtl tests * test: add dropdown component rtl tests * test: add empty component rtl tests * test: add form component rtl tests * test: add grid component rtl tests * test: add input component rtl tests * test: add search component rtl tests * test: add input-number component rtl tests * test: add layout component rtl tests * test: add list component rtl tests * test: add mentions component rtl tests * test: add modal component rtl tests * test: add page-header component rtl tests * test: add pagination component rtl tests * test: add radio component rtl tests * test: add rate component rtl tests * test: add select component rtl tests * test: add slider component rtl tests * test: add steps component rtl tests * test: add switch component rtl tests * test: add table component rtl tests * test: add transfer component rtl tests * test: add tree component rtl tests * test: add tree-select component rtl tests * test: add typography component rtl tests * test: add upload component rtl tests * test: add affix component rtl tests * update calendar tests * increase css file maxSize * update snapshots * remove workflows to allow push * remove duplicate reverse prop from slider * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * Added direction property to ConfigProvider * cascader rtl tests added * update config-provider doc * RTL: grid system * RTL: input component * RTL: switch component * fix rtl demo lint * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * fix pagination.tsx compile error * RTL: button and button-group * RTL: Steps component * fix rtl demo style * RTL: form component * add pagination rtl test * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * RTL: input component * RTL: select component * RTL: switch component * RTL: tree component * fix rtl demo lint * rtl demo change en-us description * RTL: modal component (exclude confirm) * RTL: table component * RTL: pagination component * cleanup rtl demo * RTL: button and button-group * RTL: Steps component * fix rtl demo style * fix input suffix icon alignment * RTL: form component * RTL: rate component * RTL: radio and radio group components * RTL: tree-select component * RTL: badge component * fix rtl issue in inline form * fix input component rtl padding issue * add rtl support to whole demo with RTL button * input.tsx, remove duplicate after rebase * fix ant-row-rtl after rebase * update snapshots * test: add cascader component rtl tests * test: add pagination component rtl tests * update calendar tests * update snapshots * fix: remove table demo from config-provider * fix: remove table demo from config-provider * fix lint error * update direction.md icons * dropdown and cascader default placement in rtl * update snapshots * fix lint errors * remove duplicate import * update snapshots * update snapshot * update calendar snapshot * update snapshots * integrate with new rc-picker * update snapshots * fix lint errors * update snapshot * update snapshots * update snapshots * update snapshots :| * update snapshots * fix compile error. * fix typo after rebase * update snapshots * remove workflows to allow push * update snapshots * update snapshots * fix dist error * front-page css fix * update snapshots * fix lint and test issues * restore cascader index.less * update snapshots * fix logo in rtl and demo controls * ci errors * resolve steps/index.tsx conflicts * tooltip family demo remove inline style * resolve table/Table.tsx conflicts * resolve modal/Modal.tsx conflicts * resolve cascader/index.tsx conflicts * add workflows from upstream * update snapshots * revert logo to default * fix codebox demo direction of placements * resolve tooltip overlayClassName conflicts * update snapshots * update popover test * fix: cascader miss popupClassName * fix: fix select missing dropdownClassName * chore: Update snapshot * chore: Adjust menu use rtl logic * docs: Update demo line color Co-authored-by: 二货机器人 <smith3816@gmail.com>
2020-01-02 19:10:16 +08:00
2016-12-14 15:44:38 +08:00
it('renders correctly', () => {
const { container } = render(<Button>Follow</Button>);
expect(container.firstChild).toMatchSnapshot();
2016-12-14 15:44:38 +08:00
});
it('mount correctly', () => {
expect(() => render(<Button>Follow</Button>)).not.toThrow();
});
it('warns if size is wrong', () => {
resetWarned();
const mockWarn = jest.spyOn(console, 'error').mockImplementation(() => {});
const size = 'who am I';
// @ts-expect-error: Type '"who am I"' is not assignable to type 'SizeType'.ts(2322)
render(<Button.Group size={size} />);
expect(mockWarn).toHaveBeenCalledWith('Warning: [antd: Button.Group] Invalid prop `size`.');
mockWarn.mockRestore();
});
2016-12-14 15:44:38 +08:00
it('renders Chinese characters correctly', () => {
expect(render(<Button></Button>).container.firstChild).toMatchSnapshot();
// should not insert space when there is icon
expect(
render(<Button icon={<SearchOutlined />}></Button>).container.firstChild,
).toMatchSnapshot();
// should not insert space when there is icon
expect(
render(
<Button>
<SearchOutlined />
</Button>,
).container.firstChild,
).toMatchSnapshot();
2018-05-01 19:36:11 +08:00
// should not insert space when there is icon
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
expect(
render(
2021-12-04 17:06:36 +08:00
<Button icon={<SearchOutlined />} loading>
</Button>,
).container.firstChild,
2021-12-04 17:06:36 +08:00
).toMatchSnapshot();
2018-05-01 19:36:11 +08:00
// should insert space while loading
expect(render(<Button loading></Button>).container.firstChild).toMatchSnapshot();
2019-09-16 11:23:26 +08:00
// should insert space while only one nested element
expect(
render(
2021-12-04 17:06:36 +08:00
<Button>
<span></span>
</Button>,
).container.firstChild,
2021-12-04 17:06:36 +08:00
).toMatchSnapshot();
2016-12-14 15:44:38 +08:00
});
it('renders Chinese characters correctly in HOC', () => {
const Text = ({ children }: { children: React.ReactNode }) => <span>{children}</span>;
const { container, rerender } = render(
2018-12-07 16:17:45 +08:00
<Button>
<Text></Text>
</Button>,
);
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');
});
2019-09-16 11:23:26 +08:00
// https://github.com/ant-design/ant-design/issues/18118
it('should not insert space to link or text button', () => {
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', () => {
const wrapper = render(
2019-09-16 11:23:26 +08:00
<Button>
{null}
{undefined}
</Button>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
2019-09-16 11:23:26 +08:00
});
it('have static property for type detecting', () => {
expect(Button.__ANT_BUTTON).toBe(true);
});
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>
);
};
const wrapper = render(<DefaultButton />);
fireEvent.click(wrapper.container.firstChild!);
expect(wrapper.container.querySelectorAll('.ant-btn-loading').length).toBe(1);
});
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>
);
};
const wrapper = render(<DefaultButton />);
fireEvent.click(wrapper.container.firstChild!);
expect(wrapper.container.firstChild).not.toHaveClass('ant-btn-loading');
});
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', () => {
jest.useFakeTimers();
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();
2020-06-02 12:54:22 +08:00
});
expect(container.querySelectorAll('.ant-btn-loading')).toHaveLength(0);
2020-06-02 12:54:22 +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', () => {
const onClick = jest.fn();
const { container } = render(
2019-09-16 11:23:26 +08:00
<Button loading onClick={onClick}>
button
</Button>,
);
fireEvent.click(container.firstChild!);
2019-09-16 11:23:26 +08:00
expect(onClick).not.toHaveBeenCalledWith();
});
it('should support link button', () => {
const wrapper = render(
<Button target="_blank" href="https://ant.design">
2018-12-07 16:17:45 +08:00
link button
</Button>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
});
it('fixbug renders {0} , 0 and {false}', () => {
expect(render(<Button>{0}</Button>).container.firstChild).toMatchSnapshot();
expect(render(<Button>0</Button>).container.firstChild).toMatchSnapshot();
expect(render(<Button>{false}</Button>).container.firstChild).toMatchSnapshot();
});
it('should not render as link button when href is undefined', async () => {
const wrapper = render(
2018-12-07 16:17:45 +08:00
<Button type="primary" href={undefined}>
button
</Button>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
});
2019-05-17 12:04:47 +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', () => {
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>,
);
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 () => {
jest.useFakeTimers();
const { container, rerender, unmount } = render(<Button>Button</Button>);
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);
await waitFakeTimer();
expect(container.querySelectorAll('.ant-btn-loading').length).toBe(1);
rerender(<Button loading={false} />);
await waitFakeTimer();
expect(container.querySelectorAll('.ant-btn-loading').length).toBe(0);
expect(unmount).not.toThrow();
jest.useRealTimers();
2019-09-16 11:23:26 +08:00
});
it('should warning when pass a string as icon props', () => {
resetWarned();
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Button type="primary" icon="ab" />);
expect(warnSpy).not.toHaveBeenCalled();
render(<Button type="primary" icon="search" />);
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`,
);
warnSpy.mockRestore();
});
it('should warning when pass type=link and ghost=true', () => {
resetWarned();
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Button type="link" ghost />);
expect(warnSpy).toHaveBeenCalledWith(
"Warning: [antd: Button] `link` or `text` button can't be a `ghost` button.",
);
warnSpy.mockRestore();
});
it('should warning when pass type=text and ghost=true', () => {
resetWarned();
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Button type="text" ghost />);
expect(warnSpy).toHaveBeenCalledWith(
"Warning: [antd: Button] `link` or `text` button can't be a `ghost` button.",
);
warnSpy.mockRestore();
});
it('skip check 2 words when ConfigProvider disable this', () => {
const buttonInstance = React.createRef<GetRef<typeof Button>>();
render(
<ConfigProvider autoInsertSpaceInButton={false}>
<Button ref={buttonInstance}>test</Button>
</ConfigProvider>,
);
Object.defineProperty(buttonInstance.current, 'textContent', {
get() {
throw new Error('Should not called!!!');
},
});
});
it('should not redirect when button is disabled', () => {
const onClick = jest.fn();
const { container } = render(
<Button href="https://ant.design" onClick={onClick} disabled>
click me
</Button>,
);
fireEvent.click(container.firstChild!);
expect(onClick).not.toHaveBeenCalled();
});
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');
});
// https://github.com/ant-design/ant-design/issues/30953
it('should handle fragment as children', () => {
const wrapper = render(
<Button>
{/* eslint-disable-next-line react/jsx-no-useless-fragment */}
<>text</>
</Button>,
);
expect(wrapper.container.firstChild).toMatchSnapshot();
});
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} />;
const defaultBtn = (
<Button
onClick={(e) => {
expect(e).toBeTruthy();
}}
/>
);
const defaultABtn = (
<Button
href="https://ant.design"
onClick={(e) => {
expect(e).toBeTruthy();
}}
/>
);
const btnRef = React.createRef<GetRef<typeof Button>>();
const refBtn = <Button ref={btnRef} />;
const anchorRef = React.createRef<GetRef<typeof Button>>();
const refAnchor = <Button ref={anchorRef} />;
const htmlRef = React.createRef<GetRef<typeof Button>>();
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();
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
});
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);
});
// 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();
});
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
});