2017-03-28 15:50:46 +08:00
|
|
|
import React, { Component } from 'react';
|
2017-02-16 14:03:05 +08:00
|
|
|
import { render, mount } from 'enzyme';
|
2018-08-24 12:11:44 +08:00
|
|
|
import renderer from 'react-test-renderer';
|
2016-12-14 15:44:38 +08:00
|
|
|
import Button from '..';
|
2017-05-02 20:16:18 +08:00
|
|
|
import Icon from '../../icon';
|
2019-08-26 22:53:20 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2016-12-14 15:44:38 +08:00
|
|
|
|
|
|
|
describe('Button', () => {
|
2019-08-26 22:53:20 +08:00
|
|
|
mountTest(Button);
|
2019-09-07 19:45:06 +08:00
|
|
|
mountTest(() => <Button size="large" />);
|
|
|
|
mountTest(() => <Button size="small" />);
|
2019-08-27 16:13:43 +08:00
|
|
|
mountTest(Button.Group);
|
2019-09-07 19:45:06 +08:00
|
|
|
mountTest(() => <Button.Group size="large" />);
|
|
|
|
mountTest(() => <Button.Group size="small" />);
|
2019-08-26 22:53:20 +08:00
|
|
|
|
2016-12-14 15:44:38 +08:00
|
|
|
it('renders correctly', () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper = render(<Button>Follow</Button>);
|
2017-04-02 18:09:23 +08:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
2016-12-14 15:44:38 +08:00
|
|
|
});
|
|
|
|
|
2018-08-24 12:11:44 +08:00
|
|
|
it('mount correctly', () => {
|
2018-08-24 15:12:31 +08:00
|
|
|
if (process.env.REACT === '15') {
|
|
|
|
return;
|
|
|
|
}
|
2018-09-19 15:05:55 +08:00
|
|
|
expect(() => renderer.create(<Button>Follow</Button>)).not.toThrow();
|
2018-08-24 12:11:44 +08:00
|
|
|
});
|
|
|
|
|
2016-12-14 15:44:38 +08:00
|
|
|
it('renders Chinese characters correctly', () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper = render(<Button>按钮</Button>);
|
2017-04-02 18:09:23 +08:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
2017-05-02 20:16:18 +08:00
|
|
|
// should not insert space when there is icon
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper1 = render(<Button icon="search">按钮</Button>);
|
2017-05-02 20:16:18 +08:00
|
|
|
expect(wrapper1).toMatchSnapshot();
|
|
|
|
// should not insert space when there is icon
|
|
|
|
const wrapper2 = render(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Button>
|
|
|
|
<Icon type="search" />
|
|
|
|
按钮
|
|
|
|
</Button>,
|
2017-05-02 20:16:18 +08:00
|
|
|
);
|
|
|
|
expect(wrapper2).toMatchSnapshot();
|
2018-05-01 19:36:11 +08:00
|
|
|
// should not insert space when there is icon
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper3 = render(<Button icon="search">按钮</Button>);
|
2018-05-01 19:36:11 +08:00
|
|
|
expect(wrapper3).toMatchSnapshot();
|
|
|
|
// should not insert space when there is icon while loading
|
|
|
|
const wrapper4 = render(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Button icon="search" loading>
|
|
|
|
按钮
|
|
|
|
</Button>,
|
2018-05-01 19:36:11 +08:00
|
|
|
);
|
|
|
|
expect(wrapper4).toMatchSnapshot();
|
|
|
|
// should insert space while loading
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper5 = render(<Button loading>按钮</Button>);
|
2018-05-01 19:36:11 +08:00
|
|
|
expect(wrapper5).toMatchSnapshot();
|
2019-09-07 19:45:06 +08:00
|
|
|
|
|
|
|
// should insert space while only one nested element
|
|
|
|
const wrapper6 = render(<Button><span>按钮</span></Button>);
|
|
|
|
expect(wrapper6).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', () => {
|
2018-06-22 21:05:13 +08:00
|
|
|
const Text = ({ children }) => <span>{children}</span>;
|
2018-03-23 22:23:03 +08:00
|
|
|
const wrapper = mount(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Button>
|
|
|
|
<Text>按钮</Text>
|
|
|
|
</Button>,
|
2018-03-23 22:23:03 +08:00
|
|
|
);
|
|
|
|
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
|
|
|
|
wrapper.setProps({
|
|
|
|
children: <Text>大按钮</Text>,
|
|
|
|
});
|
|
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(false);
|
|
|
|
wrapper.setProps({
|
|
|
|
children: <Text>按钮</Text>,
|
|
|
|
});
|
|
|
|
wrapper.update();
|
|
|
|
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
|
|
|
|
});
|
|
|
|
|
2019-09-07 19:42:04 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/18118
|
|
|
|
it('should not insert space to link button', () => {
|
|
|
|
const wrapper = render(<Button type="link">按钮</Button>);
|
|
|
|
expect(wrapper).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
2019-09-07 19:45:06 +08:00
|
|
|
it('should render empty button without errors', () => {
|
|
|
|
const wrapper = mount(<Button />);
|
|
|
|
expect(wrapper).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
2018-06-12 14:36:08 +08:00
|
|
|
it('have static property for type detecting', () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper = mount(<Button>Button Text</Button>);
|
2017-02-16 14:03:05 +08:00
|
|
|
// eslint-disable-next-line
|
|
|
|
expect(wrapper.type().__ANT_BUTTON).toBe(true);
|
|
|
|
});
|
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
|
|
|
}
|
|
|
|
}
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper = mount(<DefaultButton />);
|
2017-03-28 15:50:46 +08:00
|
|
|
wrapper.simulate('click');
|
2017-09-20 16:26:18 +08:00
|
|
|
expect(wrapper.find('.ant-btn-loading').length).toBe(1);
|
2017-03-28 15:50:46 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should change loading state with delay', () => {
|
|
|
|
// eslint-disable-next-line
|
|
|
|
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
|
|
|
}
|
|
|
|
}
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper = mount(<DefaultButton />);
|
2017-03-28 15:50:46 +08:00
|
|
|
wrapper.simulate('click');
|
|
|
|
expect(wrapper.hasClass('ant-btn-loading')).toBe(false);
|
|
|
|
});
|
2017-11-29 11:20:22 +08:00
|
|
|
|
2019-09-07 19:45:06 +08:00
|
|
|
it('should not clickable when button is loading', () => {
|
|
|
|
const onClick = jest.fn();
|
|
|
|
const wrapper = mount(
|
|
|
|
<Button loading onClick={onClick}>
|
|
|
|
button
|
|
|
|
</Button>,
|
|
|
|
);
|
|
|
|
wrapper.simulate('click');
|
|
|
|
expect(onClick).not.toHaveBeenCalledWith();
|
|
|
|
});
|
|
|
|
|
2017-11-29 11:20:22 +08:00
|
|
|
it('should support link button', () => {
|
|
|
|
const wrapper = mount(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Button target="_blank" href="http://ant.design">
|
|
|
|
link button
|
|
|
|
</Button>,
|
2017-11-29 11:20:22 +08:00
|
|
|
);
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
});
|
2018-01-09 16:18:20 +08:00
|
|
|
|
|
|
|
it('fixbug renders {0} , 0 and {false}', () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper = render(<Button>{0}</Button>);
|
2018-01-09 16:18:20 +08:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper1 = render(<Button>0</Button>);
|
2018-01-09 16:18:20 +08:00
|
|
|
expect(wrapper1).toMatchSnapshot();
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper2 = render(<Button>{false}</Button>);
|
2018-01-09 16:18:20 +08:00
|
|
|
expect(wrapper2).toMatchSnapshot();
|
|
|
|
});
|
2018-11-12 12:38:02 +08:00
|
|
|
|
|
|
|
it('should has click wave effect', async () => {
|
2018-12-07 16:17:45 +08:00
|
|
|
const wrapper = mount(<Button type="primary">button</Button>);
|
|
|
|
wrapper
|
|
|
|
.find('.ant-btn')
|
|
|
|
.getDOMNode()
|
|
|
|
.click();
|
2018-11-12 12:38:02 +08:00
|
|
|
await new Promise(resolve => setTimeout(resolve, 0));
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
});
|
2018-12-03 10:39:00 +08:00
|
|
|
|
|
|
|
it('should not render as link button when href is undefined', async () => {
|
|
|
|
const wrapper = mount(
|
2018-12-07 16:17:45 +08:00
|
|
|
<Button type="primary" href={undefined}>
|
|
|
|
button
|
|
|
|
</Button>,
|
2018-12-03 10:39:00 +08:00
|
|
|
);
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
});
|
2019-05-17 12:04:47 +08:00
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/15342
|
|
|
|
it('should merge text if children using variable', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Button>
|
|
|
|
This {'is'} a test {1}
|
|
|
|
</Button>,
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
});
|
2019-09-07 19:45:06 +08:00
|
|
|
|
|
|
|
it('should support to change loading', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Button>
|
|
|
|
Button
|
|
|
|
</Button>,
|
|
|
|
);
|
|
|
|
wrapper.setProps({ loading: true });
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
wrapper.setProps({ loading: false });
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
wrapper.setProps({ loading: { delay: 200 } });
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
wrapper.setProps({ loading: false });
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
expect(() => {
|
|
|
|
wrapper.unmount();
|
|
|
|
}).not.toThrow();
|
|
|
|
});
|
2016-12-14 15:44:38 +08:00
|
|
|
});
|