diff --git a/src/checkbox/test/__snapshots__/index.legacy.js.snap b/src/checkbox/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index 54400fded..000000000 --- a/src/checkbox/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,41 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`checked-color prop 1`] = ` -
- - -
-`; - -exports[`icon-size prop 1`] = ` -
- - -
-`; - -exports[`label disabled 1`] = ` - -`; - -exports[`label-position prop 1`] = ` - -`; diff --git a/src/checkbox/test/__snapshots__/index.spec.js.snap b/src/checkbox/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..ea5d33613 --- /dev/null +++ b/src/checkbox/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should adjust label position when using label-position prop 1`] = ` + +`; diff --git a/src/checkbox/test/index.legacy.js b/src/checkbox/test/index.legacy.js deleted file mode 100644 index 8d9f14af7..000000000 --- a/src/checkbox/test/index.legacy.js +++ /dev/null @@ -1,197 +0,0 @@ -import Checkbox from '..'; -import { mount, later } from '../../../test'; - -test('switch checkbox', async () => { - const wrapper = mount(Checkbox); - - wrapper.vm.$on('input', (value) => { - wrapper.setData({ value }); - }); - - const icon = wrapper.find('.van-checkbox__icon'); - icon.trigger('click'); - await later(); - icon.trigger('click'); - await later(); - expect(wrapper.emitted('input')).toEqual([[true], [false]]); - expect(wrapper.emitted('change')).toEqual([[true], [false]]); -}); - -test('disabled', () => { - const wrapper = mount(Checkbox, { - props: { - disabled: true, - }, - }); - - wrapper.find('.van-checkbox__icon').trigger('click'); - expect(wrapper.emitted('input')).toBeFalsy(); -}); - -test('label disabled', () => { - const wrapper = mount(Checkbox, { - slots: { - default: () => 'Label', - }, - props: { - labelDisabled: true, - }, - }); - - wrapper.find('.van-checkbox__label').trigger('click'); - expect(wrapper.emitted('input')).toBeFalsy(); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('checkbox group', async () => { - const wrapper = mount({ - template: ` - - - - - - `, - data() { - return { - result: [], - }; - }, - }); - - const icons = wrapper.findAll('.van-checkbox__icon'); - icons.at(0).trigger('click'); - await later(); - icons.at(1).trigger('click'); - await later(); - icons.at(2).trigger('click'); - expect(wrapper.vm.result).toEqual(['a', 'b']); - - await later(); - icons.at(0).trigger('click'); - await later(); - expect(wrapper.vm.result).toEqual(['b']); -}); - -test('click event', async () => { - const onClick = jest.fn(); - const wrapper = mount(Checkbox, { - listeners: { - click: onClick, - }, - }); - - wrapper.trigger('click'); - await later(); - expect(onClick).toHaveBeenCalledTimes(1); - - const icon = wrapper.find('.van-checkbox__icon'); - icon.trigger('click'); - await later(); - expect(onClick).toHaveBeenCalledTimes(2); -}); - -test('label-position prop', () => { - const wrapper = mount(Checkbox, { - slots: { - default: () => 'Label', - }, - props: { - labelPosition: 'left', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('icon-size prop', () => { - const wrapper = mount({ - template: ` - - label - label - - `, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('checked-color prop', () => { - const wrapper = mount({ - template: ` - - label - label - - `, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('bind-group prop', async () => { - const wrapper = mount({ - template: ` - - - - - `, - data() { - return { - value: false, - result: [], - list: ['a', 'b', 'c'], - }; - }, - }); - - const icons = wrapper.findAll('.van-checkbox__icon'); - icons.at(0).trigger('click'); - await later(); - expect(wrapper.vm.result).toEqual([]); - expect(wrapper.vm.value).toBeTruthy(); -}); - -test('toggleAll method', async () => { - const wrapper = mount({ - template: ` - - - - - - `, - data() { - return { - result: ['a'], - }; - }, - methods: { - toggleAll(checked) { - this.$refs.group.toggleAll(checked); - }, - }, - }); - - wrapper.vm.toggleAll(); - await later(); - expect(wrapper.vm.result).toEqual(['b', 'c']); - - wrapper.vm.toggleAll(false); - await later(); - expect(wrapper.vm.result).toEqual([]); - - wrapper.vm.toggleAll(true); - await later(); - expect(wrapper.vm.result).toEqual(['a', 'b', 'c']); - - wrapper.vm.toggleAll({ skipDisabled: true }); - await later(); - expect(wrapper.vm.result).toEqual(['c']); - - wrapper.vm.toggleAll({ checked: true, skipDisabled: true }); - await later(); - expect(wrapper.vm.result).toEqual(['a', 'b', 'c']); -}); diff --git a/src/checkbox/test/index.spec.js b/src/checkbox/test/index.spec.js new file mode 100644 index 000000000..84a3259e9 --- /dev/null +++ b/src/checkbox/test/index.spec.js @@ -0,0 +1,109 @@ +import Checkbox from '..'; +import { mount } from '../../../test'; + +test('should emit "update:modelValue" event when checkbox icon is clicked', async () => { + const wrapper = mount(Checkbox); + + const icon = wrapper.find('.van-checkbox__icon'); + icon.trigger('click'); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(true); + + await wrapper.setProps({ modelValue: true }); + icon.trigger('click'); + expect(wrapper.emitted('update:modelValue')[1][0]).toEqual(false); +}); + +test('should emit change event when modelValue is changed', async () => { + const wrapper = mount(Checkbox); + + const icon = wrapper.find('.van-checkbox__icon'); + icon.trigger('click'); + await wrapper.setProps({ modelValue: true }); + expect(wrapper.emitted('change')[0][0]).toEqual(true); + + icon.trigger('click'); + await wrapper.setProps({ modelValue: false }); + expect(wrapper.emitted('change')[1][0]).toEqual(false); +}); + +test('should not emit "update:modelValue" event when checkbox icon is disabled and clicked', () => { + const wrapper = mount(Checkbox, { + props: { + disabled: true, + }, + }); + + wrapper.find('.van-checkbox__icon').trigger('click'); + expect(wrapper.emitted('update:modelValue')).toBeFalsy(); +}); + +test('should render "van-checkbox--label-disabled" class when using label-disabled prop', () => { + const wrapper = mount(Checkbox, { + props: { + labelDisabled: true, + }, + slots: { + default: () => 'Label', + }, + }); + + expect( + wrapper.element.classList.contains('van-checkbox--label-disabled') + ).toBeTruthy(); +}); + +test('should emit "update:modelValue" event when label is clicked', () => { + const wrapper = mount(Checkbox, { + slots: { + default: () => 'Label', + }, + }); + + const icon = wrapper.find('.van-checkbox__label'); + icon.trigger('click'); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(true); +}); + +test('should not emit "update:modelValue" event when label is disabled and clicked', () => { + const wrapper = mount(Checkbox, { + props: { + labelDisabled: true, + }, + slots: { + default: () => 'Label', + }, + }); + + const icon = wrapper.find('.van-checkbox__label'); + icon.trigger('click'); + expect(wrapper.emitted('update:modelValue')).toBeFalsy(); +}); + +test('should adjust label position when using label-position prop', () => { + const wrapper = mount(Checkbox, { + props: { + labelPosition: 'left', + }, + slots: { + default: () => 'Label', + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should emit click event when checkbox icon is clicked', async () => { + const onClick = jest.fn(); + const wrapper = mount(Checkbox, { + props: { + onClick, + }, + }); + + wrapper.trigger('click'); + expect(onClick).toHaveBeenCalledTimes(1); + + const icon = wrapper.find('.van-checkbox__icon'); + icon.trigger('click'); + expect(onClick).toHaveBeenCalledTimes(2); +});