import Button from '../index';
import Icon from '../../icon';
import { mount } from '@vue/test-utils';
import Vue from 'vue';
import { asyncExpect } from '@/tests/utils';
import { sleep } from '../../../tests/utils';
import mountTest from '../../../tests/shared/mountTest';
describe('Button', () => {
mountTest(Button);
mountTest(Button.Group);
it('renders correctly', () => {
const wrapper = mount({
render() {
return ;
},
});
expect(wrapper.html()).toMatchSnapshot();
});
it('create primary button', () => {
const wrapper = mount({
render() {
return ;
},
});
expect(wrapper.contains('.ant-btn-primary')).toBe(true);
});
it('renders Chinese characters correctly', done => {
const wrapper = mount({
render() {
return ;
},
});
expect(wrapper.text()).toBe('按 钮');
const wrapper1 = mount({
render() {
return ;
},
});
expect(wrapper1.html()).toMatchSnapshot();
const wrapper2 = mount({
render() {
return (
);
},
});
expect(wrapper2.html()).toMatchSnapshot();
// should not insert space when there is icon
const wrapper3 = mount({
render() {
return ;
},
});
expect(wrapper3.html()).toMatchSnapshot();
// should not insert space when there is icon while loading
const wrapper4 = mount({
render() {
return (
);
},
});
expect(wrapper4.html()).toMatchSnapshot();
// should insert space while loading
const wrapper5 = mount({
render() {
return ;
},
});
expect(wrapper5.html()).toMatchSnapshot();
const wrapper6 = mount({
render() {
return (
);
},
});
Vue.nextTick(() => {
expect(wrapper6.find('.ant-btn').contains('.ant-btn-two-chinese-chars')).toBe(true);
done();
});
});
it('should change loading state instantly by default', async () => {
const DefaultButton = {
data() {
return {
loading: false,
};
},
methods: {
enterLoading() {
this.loading = true;
},
},
render() {
return (
);
},
};
const wrapper = mount(DefaultButton, { sync: false });
await asyncExpect(() => {
wrapper.trigger('click');
});
await asyncExpect(() => {
expect(wrapper.findAll('.ant-btn-loading').length).toBe(1);
});
});
it('should change loading state with delay', async () => {
const DefaultButton = {
data() {
return {
loading: false,
};
},
methods: {
enterLoading() {
this.loading = { delay: 1000 };
},
},
render() {
return (
);
},
};
const wrapper = mount(DefaultButton, { sync: false });
await asyncExpect(() => {
wrapper.trigger('click');
});
await asyncExpect(() => {
expect(wrapper.contains('.ant-btn-loading')).toBe(false);
});
});
it('should not clickable when button is loading', () => {
const onClick = jest.fn();
const wrapper = mount({
render() {
return (
);
},
});
wrapper.trigger('click');
expect(onClick).not.toHaveBeenCalledWith();
});
it('should support link button', () => {
const wrapper = mount({
render() {
return (
);
},
});
expect(wrapper.html()).toMatchSnapshot();
});
it('fixbug renders {0} , 0 and {false}', () => {
const wrapper = mount({
render() {
return ;
},
});
expect(wrapper.html()).toMatchSnapshot();
const wrapper1 = mount({
render() {
return ;
},
});
expect(wrapper1.html()).toMatchSnapshot();
const wrapper2 = mount({
render() {
return ;
},
});
expect(wrapper2.html()).toMatchSnapshot();
});
it('should not render as link button when href is undefined', async () => {
const wrapper = mount({
render() {
return (
);
},
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should support to change loading', async () => {
const wrapper = mount(Button, {
slots: {
default: ['button'],
},
});
wrapper.setProps({ loading: true });
expect(wrapper.findAll('.ant-btn-loading').length).toBe(1);
wrapper.setProps({ loading: false });
expect(wrapper.findAll('.ant-btn-loading').length).toBe(0);
wrapper.setProps({ loading: { delay: 50 } });
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(() => {
wrapper.destroy();
}).not.toThrow();
});
});