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(); }); });