diff --git a/src/checkbox-group/test/index.spec.js b/src/checkbox-group/test/index.spec.js new file mode 100644 index 000000000..c9c1048e8 --- /dev/null +++ b/src/checkbox-group/test/index.spec.js @@ -0,0 +1,138 @@ +import { mount } from '@vue/test-utils'; +import Checkbox from '../../checkbox'; +import CheckboxGroup from '..'; +import { ref, nextTick } from 'vue'; + +test('should emit "update:modelValue" event when checkbox is clicked', async () => { + const wrapper = mount({ + setup() { + return { + value: ref([]), + }; + }, + render() { + return ( + + + + + ); + }, + }); + + const items = wrapper.findAll('.van-checkbox'); + + items[0].trigger('click'); + expect(wrapper.vm.value).toEqual(['a']); + + await nextTick(); + items[1].trigger('click'); + expect(wrapper.vm.value).toEqual(['a', 'b']); + + await nextTick(); + items[0].trigger('click'); + expect(wrapper.vm.value).toEqual(['b']); +}); + +test('should change icon size when using icon-size prop', () => { + const wrapper = mount({ + render() { + return ( + + + + + ); + }, + }); + + const icons = wrapper.findAll('.van-checkbox__icon'); + expect(icons[0].element.style.fontSize).toEqual('10rem'); + expect(icons[1].element.style.fontSize).toEqual('5rem'); +}); + +test('should change checked color when using checked-color prop', () => { + const wrapper = mount({ + render() { + return ( + + + + + ); + }, + }); + + const icons = wrapper.findAll('.van-icon'); + expect(icons[0].element.style.backgroundColor).toEqual('black'); + expect(icons[1].element.style.backgroundColor).toEqual('white'); +}); + +test('should ignore Checkbox if bind-group is false', async () => { + const wrapper = mount({ + setup() { + return { + value: ref(false), + groupValue: ref([]), + toggleAll(checked) { + this.$refs.group.toggleAll(checked); + }, + }; + }, + render() { + return ( + + + + + + ); + }, + }); + + const items = wrapper.findAll('.van-checkbox'); + items[0].trigger('click'); + expect(wrapper.vm.value).toBeTruthy(); + expect(wrapper.vm.groupValue).toEqual([]); + + wrapper.vm.toggleAll(true); + expect(wrapper.vm.groupValue).toEqual(['b', 'c']); +}); + +test('should toggle all checkboxes when toggleAll method is called', async () => { + const wrapper = mount({ + setup() { + return { + value: ref(['a']), + toggleAll(checked) { + this.$refs.group.toggleAll(checked); + }, + }; + }, + render() { + return ( + + + + + + ); + }, + }); + + wrapper.vm.toggleAll(); + expect(wrapper.vm.value).toEqual(['b', 'c']); + + wrapper.vm.toggleAll(false); + expect(wrapper.vm.value).toEqual([]); + + wrapper.vm.toggleAll(true); + await nextTick(); + expect(wrapper.vm.value).toEqual(['a', 'b', 'c']); + + wrapper.vm.toggleAll({ skipDisabled: true }); + expect(wrapper.vm.value).toEqual(['c']); + + wrapper.vm.toggleAll({ checked: true, skipDisabled: true }); + expect(wrapper.vm.value).toEqual(['a', 'b', 'c']); +});