2019-01-12 11:33:27 +08:00
|
|
|
import Button from '../index';
|
2020-03-24 15:49:14 +08:00
|
|
|
import SearchOutlined from '@ant-design/icons-vue/SearchOutlined';
|
2019-01-12 11:33:27 +08:00
|
|
|
import { mount } from '@vue/test-utils';
|
2020-06-11 15:58:41 +08:00
|
|
|
import { nextTick } from 'vue';
|
2019-01-12 11:33:27 +08:00
|
|
|
import { asyncExpect } from '@/tests/utils';
|
2020-03-07 19:45:13 +08:00
|
|
|
import { sleep } from '../../../tests/utils';
|
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
2018-05-13 23:11:51 +08:00
|
|
|
|
|
|
|
describe('Button', () => {
|
2020-03-07 19:45:13 +08:00
|
|
|
mountTest(Button);
|
|
|
|
mountTest(Button.Group);
|
2018-05-14 09:49:26 +08:00
|
|
|
it('renders correctly', () => {
|
2018-09-05 21:28:54 +08:00
|
|
|
const wrapper = mount({
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
|
|
|
return <Button>Follow</Button>;
|
2018-05-14 09:49:26 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
|
|
});
|
2018-05-14 09:49:26 +08:00
|
|
|
|
2018-05-13 23:11:51 +08:00
|
|
|
it('create primary button', () => {
|
|
|
|
const wrapper = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2019-01-12 11:33:27 +08:00
|
|
|
return <Button type="primary">按钮</Button>;
|
2018-05-13 23:11:51 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2020-06-11 15:58:41 +08:00
|
|
|
expect(wrapper.find('.ant-btn-primary').exists()).toBe(true);
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-05-13 23:11:51 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
it('renders Chinese characters correctly', done => {
|
|
|
|
const wrapper = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2019-01-12 11:33:27 +08:00
|
|
|
return <Button>按钮</Button>;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
expect(wrapper.text()).toBe('按 钮');
|
2018-05-13 23:11:51 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper1 = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2020-03-24 15:49:14 +08:00
|
|
|
return (
|
|
|
|
<Button>
|
|
|
|
<SearchOutlined slot="icon" />
|
|
|
|
按钮
|
|
|
|
</Button>
|
|
|
|
);
|
2019-01-12 11:33:27 +08:00
|
|
|
},
|
|
|
|
});
|
2018-05-13 23:11:51 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(wrapper1.html()).toMatchSnapshot();
|
2018-09-05 21:28:54 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper2 = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2019-01-12 11:33:27 +08:00
|
|
|
return (
|
|
|
|
<Button>
|
2020-03-24 15:49:14 +08:00
|
|
|
<SearchOutlined />
|
2019-01-12 11:33:27 +08:00
|
|
|
按钮
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
expect(wrapper2.html()).toMatchSnapshot();
|
2018-09-05 21:28:54 +08:00
|
|
|
// should not insert space when there is icon
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper3 = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2020-03-24 15:49:14 +08:00
|
|
|
return (
|
|
|
|
<Button>
|
|
|
|
<SearchOutlined slot="icon" />
|
|
|
|
按钮
|
|
|
|
</Button>
|
|
|
|
);
|
2019-01-12 11:33:27 +08:00
|
|
|
},
|
|
|
|
});
|
|
|
|
expect(wrapper3.html()).toMatchSnapshot();
|
2018-09-05 21:28:54 +08:00
|
|
|
// should not insert space when there is icon while loading
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper4 = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2019-01-12 11:33:27 +08:00
|
|
|
return (
|
2020-03-24 15:49:14 +08:00
|
|
|
<Button loading>
|
|
|
|
<SearchOutlined slot="icon" />
|
2019-01-12 11:33:27 +08:00
|
|
|
按钮
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
expect(wrapper4.html()).toMatchSnapshot();
|
2018-09-05 21:28:54 +08:00
|
|
|
// should insert space while loading
|
2019-01-12 11:33:27 +08:00
|
|
|
const wrapper5 = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2019-01-12 11:33:27 +08:00
|
|
|
return <Button loading>按钮</Button>;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
expect(wrapper5.html()).toMatchSnapshot();
|
|
|
|
const wrapper6 = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2019-01-12 11:33:27 +08:00
|
|
|
return (
|
|
|
|
<Button>
|
|
|
|
<span>按钮</span>
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|
2020-06-11 15:58:41 +08:00
|
|
|
nextTick(() => {
|
|
|
|
expect(wrapper6.find('.ant-btn-two-chinese-chars').exists()).toBe(true);
|
2019-01-12 11:33:27 +08:00
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
2018-09-05 21:28:54 +08:00
|
|
|
it('should change loading state instantly by default', async () => {
|
2018-05-14 09:49:26 +08:00
|
|
|
const DefaultButton = {
|
2019-01-12 11:33:27 +08:00
|
|
|
data() {
|
2018-05-14 09:49:26 +08:00
|
|
|
return {
|
|
|
|
loading: false,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-05-14 09:49:26 +08:00
|
|
|
},
|
|
|
|
methods: {
|
2019-01-12 11:33:27 +08:00
|
|
|
enterLoading() {
|
|
|
|
this.loading = true;
|
2018-05-14 09:49:26 +08:00
|
|
|
},
|
|
|
|
},
|
2018-05-13 23:11:51 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<Button loading={this.loading} onClick={this.enterLoading}>
|
|
|
|
Button
|
|
|
|
</Button>
|
|
|
|
);
|
2018-05-14 09:49:26 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
const wrapper = mount(DefaultButton, { sync: false });
|
2018-09-05 21:28:54 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
wrapper.trigger('click');
|
|
|
|
});
|
2018-09-05 21:28:54 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
expect(wrapper.findAll('.ant-btn-loading').length).toBe(1);
|
|
|
|
});
|
|
|
|
});
|
2018-05-13 23:11:51 +08:00
|
|
|
|
2018-09-05 21:28:54 +08:00
|
|
|
it('should change loading state with delay', async () => {
|
2018-05-14 09:49:26 +08:00
|
|
|
const DefaultButton = {
|
2019-01-12 11:33:27 +08:00
|
|
|
data() {
|
2018-05-14 09:49:26 +08:00
|
|
|
return {
|
|
|
|
loading: false,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-05-14 09:49:26 +08:00
|
|
|
},
|
|
|
|
methods: {
|
2019-01-12 11:33:27 +08:00
|
|
|
enterLoading() {
|
|
|
|
this.loading = { delay: 1000 };
|
2018-05-14 09:49:26 +08:00
|
|
|
},
|
|
|
|
},
|
2018-05-13 23:11:51 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<Button loading={this.loading} onClick={this.enterLoading}>
|
|
|
|
Button
|
|
|
|
</Button>
|
|
|
|
);
|
2018-05-14 09:49:26 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
const wrapper = mount(DefaultButton, { sync: false });
|
2018-09-05 21:28:54 +08:00
|
|
|
await asyncExpect(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
wrapper.trigger('click');
|
|
|
|
});
|
2018-09-05 21:28:54 +08:00
|
|
|
await asyncExpect(() => {
|
2020-06-11 15:58:41 +08:00
|
|
|
expect(wrapper.find('.ant-btn-loading').exists()).toBe(false);
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
});
|
2020-03-07 19:45:13 +08:00
|
|
|
it('should not clickable when button is loading', () => {
|
|
|
|
const onClick = jest.fn();
|
|
|
|
const wrapper = mount({
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<Button loading onClick={onClick}>
|
|
|
|
button
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|
|
|
|
wrapper.trigger('click');
|
|
|
|
expect(onClick).not.toHaveBeenCalledWith();
|
|
|
|
});
|
2018-05-14 09:49:26 +08:00
|
|
|
it('should support link button', () => {
|
|
|
|
const wrapper = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2019-01-12 11:33:27 +08:00
|
|
|
return (
|
|
|
|
<Button target="_blank" href="http://ant.design">
|
|
|
|
link button
|
|
|
|
</Button>
|
|
|
|
);
|
2018-05-14 09:49:26 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
|
|
});
|
2018-05-13 23:11:51 +08:00
|
|
|
|
2018-05-14 09:49:26 +08:00
|
|
|
it('fixbug renders {0} , 0 and {false}', () => {
|
|
|
|
const wrapper = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2019-01-12 11:33:27 +08:00
|
|
|
return <Button>{0}</Button>;
|
2018-05-14 09:49:26 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
2018-05-13 23:11:51 +08:00
|
|
|
|
2018-05-14 09:49:26 +08:00
|
|
|
const wrapper1 = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2019-01-12 11:33:27 +08:00
|
|
|
return <Button>0</Button>;
|
2018-05-14 09:49:26 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
expect(wrapper1.html()).toMatchSnapshot();
|
2018-05-13 23:11:51 +08:00
|
|
|
|
2018-05-14 09:49:26 +08:00
|
|
|
const wrapper2 = mount({
|
2019-02-01 17:23:00 +08:00
|
|
|
render() {
|
2019-01-12 11:33:27 +08:00
|
|
|
return <Button>{false}</Button>;
|
2018-05-14 09:49:26 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
expect(wrapper2.html()).toMatchSnapshot();
|
|
|
|
});
|
2019-01-02 20:18:13 +08:00
|
|
|
|
|
|
|
it('should not render as link button when href is undefined', async () => {
|
|
|
|
const wrapper = mount({
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
2019-01-02 20:18:13 +08:00
|
|
|
return (
|
2019-01-12 11:33:27 +08:00
|
|
|
<Button type="primary" href={undefined}>
|
|
|
|
button
|
|
|
|
</Button>
|
|
|
|
);
|
2019-01-02 20:18:13 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
|
|
});
|
2020-03-07 19:45:13 +08:00
|
|
|
|
|
|
|
it('should support to change loading', async () => {
|
2020-06-11 15:58:41 +08:00
|
|
|
const wrapper = mount(Button);
|
2020-03-07 19:45:13 +08:00
|
|
|
wrapper.setProps({ loading: true });
|
2020-06-11 15:58:41 +08:00
|
|
|
await sleep();
|
2020-03-07 19:45:13 +08:00
|
|
|
expect(wrapper.findAll('.ant-btn-loading').length).toBe(1);
|
|
|
|
wrapper.setProps({ loading: false });
|
2020-06-11 15:58:41 +08:00
|
|
|
await sleep();
|
2020-03-07 19:45:13 +08:00
|
|
|
expect(wrapper.findAll('.ant-btn-loading').length).toBe(0);
|
|
|
|
wrapper.setProps({ loading: { delay: 50 } });
|
2020-06-11 15:58:41 +08:00
|
|
|
await sleep();
|
2020-03-07 19:45:13 +08:00
|
|
|
expect(wrapper.findAll('.ant-btn-loading').length).toBe(0);
|
|
|
|
await sleep(50);
|
|
|
|
expect(wrapper.findAll('.ant-btn-loading').length).toBe(1);
|
|
|
|
wrapper.setProps({ loading: false });
|
|
|
|
await sleep(50);
|
|
|
|
expect(wrapper.findAll('.ant-btn-loading').length).toBe(0);
|
|
|
|
expect(() => {
|
2020-06-11 15:58:41 +08:00
|
|
|
wrapper.unmount();
|
2020-03-07 19:45:13 +08:00
|
|
|
}).not.toThrow();
|
|
|
|
});
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|