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

225 lines
6.5 KiB
JavaScript
Raw Normal View History

import React, { Component } from 'react';
import { render, mount } from 'enzyme';
import renderer from 'react-test-renderer';
2016-12-14 15:44:38 +08:00
import Button from '..';
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);
mountTest(() => <Button size="large" />);
mountTest(() => <Button size="small" />);
2019-08-27 16:13:43 +08:00
mountTest(Button.Group);
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
});
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();
});
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();
// should not insert space when there is icon
2018-12-07 16:17:45 +08:00
const wrapper1 = render(<Button icon="search">按钮</Button>);
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>,
);
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();
// 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
});
it('renders Chinese characters correctly in HOC', () => {
const Text = ({ children }) => <span>{children}</span>;
const wrapper = mount(
2018-12-07 16:17:45 +08:00
<Button>
<Text>按钮</Text>
</Button>,
);
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);
});
// 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();
});
it('should render empty button without errors', () => {
const wrapper = mount(<Button />);
expect(wrapper).toMatchSnapshot();
});
it('have static property for type detecting', () => {
2018-12-07 16:17:45 +08:00
const wrapper = mount(<Button>Button Text</Button>);
// eslint-disable-next-line
expect(wrapper.type().__ANT_BUTTON).toBe(true);
});
it('should change loading state instantly by default', () => {
class DefaultButton extends Component {
state = {
loading: false,
};
enterLoading = () => {
this.setState({ loading: true });
2018-12-07 16:17:45 +08:00
};
render() {
const { loading } = this.state;
2018-12-07 16:17:45 +08:00
return (
<Button loading={loading} onClick={this.enterLoading}>
Button
</Button>
);
}
}
2018-12-07 16:17:45 +08:00
const wrapper = mount(<DefaultButton />);
wrapper.simulate('click');
2017-09-20 16:26:18 +08:00
expect(wrapper.find('.ant-btn-loading').length).toBe(1);
});
it('should change loading state with delay', () => {
// eslint-disable-next-line
class DefaultButton extends Component {
state = {
loading: false,
};
enterLoading = () => {
this.setState({ loading: { delay: 1000 } });
2018-12-07 16:17:45 +08:00
};
render() {
const { loading } = this.state;
2018-12-07 16:17:45 +08:00
return (
<Button loading={loading} onClick={this.enterLoading}>
Button
</Button>
);
}
}
2018-12-07 16:17:45 +08:00
const wrapper = mount(<DefaultButton />);
wrapper.simulate('click');
expect(wrapper.hasClass('ant-btn-loading')).toBe(false);
});
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();
});
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>,
);
expect(wrapper.render()).toMatchSnapshot();
});
it('fixbug renders {0} , 0 and {false}', () => {
2018-12-07 16:17:45 +08:00
const wrapper = render(<Button>{0}</Button>);
expect(wrapper).toMatchSnapshot();
2018-12-07 16:17:45 +08:00
const wrapper1 = render(<Button>0</Button>);
expect(wrapper1).toMatchSnapshot();
2018-12-07 16:17:45 +08:00
const wrapper2 = render(<Button>{false}</Button>);
expect(wrapper2).toMatchSnapshot();
});
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();
await new Promise(resolve => setTimeout(resolve, 0));
expect(wrapper.render()).toMatchSnapshot();
});
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>,
);
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();
});
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
});