import { mount } from '@vue/test-utils' import Checkbox from '../src/checkbox.vue' import CheckboxButton from '../src/checkbox-button.vue' import CheckboxGroup from '../src/checkbox-group.vue' const _mount = (template: string, data, otherObj?) => mount({ components: { 'el-checkbox': Checkbox, 'el-checkbox-group': CheckboxGroup, 'el-checkbox-button': CheckboxButton, }, template, data, ...otherObj, }, { global: { provide: { elForm: {}, elFormItem: {}, CheckboxGroup: {}, }, }, }) describe('Checkbox', () => { test('create', async done => { const wrapper = _mount('', () => ({ checkbox: false })) const vm = wrapper.vm expect(wrapper.classes()).toContain('el-checkbox') await wrapper.trigger('click') vm.$nextTick(async () => { expect(wrapper.classes()).toContain('is-checked') await wrapper.trigger('click') expect(wrapper.classes('is-checked')).toBe(false) done() }) }) test('disabled', async done => { const wrapper = _mount('', () => ({ checkbox: false })) const vm = wrapper.vm expect(wrapper.classes()).toContain('is-disabled') await wrapper.trigger('click') vm.$nextTick(() => { expect(wrapper.classes()).toContain('is-disabled') done() }) }) test('change event', async done => { const wrapper = _mount( ` `, () => ({ data: '', checked: false, }), { methods: { onChange(val) { this.data = val }, }, }, ) const vm = wrapper.vm await wrapper.trigger('click') vm.$nextTick(() => { expect(vm.data).toBe(true) done() }) }) test('checkbox group', async done => { const wrapper = _mount( ` `, () => ({ checkList: [] }), ) const vm = wrapper.vm expect(vm.checkList.length).toBe(0) await wrapper.findComponent({ ref: 'a' }).trigger('click') vm.$nextTick(async () => { expect(vm.checkList.length).toBe(1) expect(vm.checkList).toContain('a') await wrapper.findComponent({ ref: 'b' }).trigger('click') vm.$nextTick(() => { expect(vm.checkList.length).toBe(2) expect(vm.checkList).toContain('a') expect(vm.checkList).toContain('b') done() }) }) }) test('checkbox group change', async done => { const wrapper = _mount( ` `, () => ({ checkList: [] }), { methods: { onChange(val) { this.data = val }, }, }, ) const vm = wrapper.vm await wrapper.findComponent({ ref: 'a' }).trigger('click') vm.$nextTick(() => { expect(vm.data.length).toBe(1) expect(vm.data).toEqual(['a']) done() }) }) test('nested group', async done => { const wrapper = _mount( `
`, () => ({ checkList: [] }), ) const vm = wrapper.vm expect(vm.checkList.length).toBe(0) await wrapper.findComponent({ ref: 'a' }).trigger('click') vm.$nextTick(() => { expect(vm.checkList).toEqual(['a']) done() }) }) test('true false lable', async done => { const wrapper = _mount( ``, () => ({ checked: 'a', }), ) const vm = wrapper.vm await wrapper.trigger('click') vm.$nextTick(() => { expect((vm as any).checked).toBe(3) done() }) }) test('check', () => { const wrapper = _mount( `
`, () => ({ checked: false, checklist: [], }), ) as any expect(wrapper.vm.checked).toBe(true) expect(wrapper.vm.checklist).toEqual(['a']) }) }) describe('check-button', () => { test('create', async done => { const wrapper = _mount('', () => ({ checkbox: false })) const vm = wrapper.vm expect(wrapper.classes()).toContain('el-checkbox-button') await wrapper.trigger('click') vm.$nextTick(async () => { expect(wrapper.classes()).toContain('is-checked') await wrapper.trigger('click') expect(wrapper.classes('is-checked')).toBe(false) done() }) }) test('disabled', async done => { const wrapper = _mount('', () => ({ checkbox: false })) const vm = wrapper.vm expect(wrapper.classes()).toContain('is-disabled') await wrapper.trigger('click') vm.$nextTick(() => { expect(wrapper.classes()).toContain('is-disabled') done() }) }) test('change event', async done => { const wrapper = _mount( ` `, () => ({ data: '', checked: false, }), { methods: { onChange(val) { this.data = val }, }, }, ) const vm = wrapper.vm await wrapper.trigger('click') vm.$nextTick(() => { expect(vm.data).toBe(true) done() }) }) test('button group change', async done => { const wrapper = _mount( ` `, () => ({ data: '', checkList: [], }), { methods: { onChange(val) { this.data = val }, }, }, ) const vm = wrapper.vm await wrapper.findComponent({ ref: 'a' }).trigger('click') vm.$nextTick(async () => { expect(vm.data).toEqual(['a']) await wrapper.findComponent({ ref: 'b' }).trigger('click') vm.$nextTick(() => { expect(vm.data).toEqual(['a', 'b']) done() }) }) }) test('button group props', () => { const wrapper = _mount( ` `, () => ({ checkList: ['a', 'b'] }), ) const vm = wrapper.vm expect(vm.checkList.length).toBe(2) expect((vm.$refs.a as any).$el.classList.contains('is-checked')).toBe(true) expect((vm.$refs.a as any).$el.querySelector('.el-checkbox-button__inner').style.borderColor).toEqual('#ff0000') }) test('button group min and max', async done => { const wrapper = _mount( ` `, () => ({ checkList: ['a'], lastEvent: null, }), ) const vm = wrapper.vm expect(vm.checkList.length).toBe(1) await wrapper.findComponent({ ref: 'a' }).trigger('click') vm.$nextTick(async () => { expect(vm.checkList.length).toBe(1) await wrapper.findComponent({ ref: 'b' }).trigger('click') vm.$nextTick(async () => { expect(vm.checkList.length).toBe(2) await wrapper.findComponent({ ref: 'c' }).trigger('click') vm.$nextTick(() => { expect(vm.checkList.length).toBe(2) expect(vm.checkList).toEqual(['a', 'b']) expect((wrapper.findComponent({ ref: 'c' }).vm as any).isDisabled).toBe(true) expect((wrapper.findComponent({ ref: 'd' }).vm as any).isDisabled).toBe(true) done() }) }) }) }) test('nested group', async done => { const wrapper = _mount( `
`, () => ({ checkList: [] }), ) const vm = wrapper.vm expect(vm.checkList.length).toBe(0) await wrapper.findComponent({ ref: 'a' }).trigger('click') vm.$nextTick(() => { expect(vm.checkList).toEqual(['a']) done() }) }) test('true false lable', async done => { const wrapper = _mount( ``, () => ({ checked: 'a', }), ) const vm = wrapper.vm await wrapper.trigger('click') vm.$nextTick(() => { expect((vm as any).checked).toBe(3) done() }) }) test('check', () => { const wrapper = _mount( `
`, () => ({ checked: false, checklist: [], }), ) as any expect(wrapper.vm.checked).toBe(true) expect(wrapper.vm.checklist).toEqual(['a']) }) })