import { nextTick } from 'vue' import { mount } from '@vue/test-utils' import { Checked, CircleClose } from '@element-plus/icons-vue' import Switch from '../src/switch.vue' jest.useFakeTimers() describe('Switch.vue', () => { test('create', () => { const wrapper = mount(Switch, { props: { activeText: 'on', inactiveText: 'off', activeColor: '#0f0', inactiveColor: '#f00', width: 100, }, }) const vm = wrapper.vm const coreEl = vm.$el.querySelector('.el-switch__core') expect(coreEl.style.backgroundColor).toEqual('rgb(255, 0, 0)') expect(coreEl.style.width).toEqual('100px') const leftLabelWrapper = wrapper.find('.el-switch__label--left span') expect(leftLabelWrapper.text()).toEqual('off') }) test('size', () => { const wrapper = mount(Switch, { props: { size: 'large', }, }) expect(wrapper.find('.el-switch--large').exists()).toBe(true) }) test('inline prompt', () => { const wrapper = mount(Switch, { props: { inlinePrompt: true, activeText: 'on', inactiveText: 'off', activeColor: '#0f0', inactiveColor: '#f00', width: 100, }, }) const vm = wrapper.vm const coreEl = vm.$el.querySelector('.el-switch__core') expect(coreEl.style.backgroundColor).toEqual('rgb(255, 0, 0)') expect(coreEl.style.width).toEqual('100px') const leftLabelWrapper = wrapper.find('.el-switch__inner span') expect(leftLabelWrapper.text()).toEqual('o') }) test('switch with icons', () => { const wrapper = mount(Switch, { props: { activeIcon: Checked, inactiveIcon: CircleClose, }, }) expect(wrapper.findComponent(Checked).exists()).toBe(true) }) test('value correctly update', async () => { const wrapper = mount({ components: { 'el-switch': Switch, }, template: `
`, data() { return { value: true, } }, }) const vm = wrapper.vm const coreEl = vm.$el.querySelector('.el-switch__core') expect(coreEl.style.backgroundColor).toEqual('rgb(0, 255, 0)') const coreWrapper = wrapper.find('.el-switch__core') await coreWrapper.trigger('click') expect(coreEl.style.backgroundColor).toEqual('rgb(255, 0, 0)') expect(vm.value).toEqual(false) await coreWrapper.trigger('click') expect(vm.value).toEqual(true) }) test('change event', async () => { const wrapper = mount({ components: { 'el-switch': Switch, }, template: `
`, methods: { handleChange(val) { this.target = val }, }, data() { return { target: 1, value: true, } }, }) const vm = wrapper.vm expect(vm.target).toEqual(1) const coreWrapper = wrapper.find('.el-switch__core') await coreWrapper.trigger('click') const switchWrapper = wrapper.findComponent(Switch) expect(switchWrapper.emitted()['update:modelValue']).toBeTruthy() expect(vm.target).toEqual(false) }) test('disabled switch should not respond to user click', async () => { const wrapper = mount({ components: { 'el-switch': Switch, }, template: `
`, data() { return { value: true, } }, }) const vm = wrapper.vm expect(vm.value).toEqual(true) const coreWrapper = wrapper.find('.el-switch__core') await coreWrapper.trigger('click') expect(vm.value).toEqual(true) }) test('expand switch value', async () => { const wrapper = mount({ components: { 'el-switch': Switch, }, template: `
`, data() { return { value: '100', onValue: '100', offValue: '0', } }, }) const vm = wrapper.vm const coreWrapper = wrapper.find('.el-switch__core') await coreWrapper.trigger('click') expect(vm.value).toEqual('0') await coreWrapper.trigger('click') expect(vm.value).toEqual('100') }) test('value is the single source of truth', async () => { const wrapper = mount({ components: { 'el-switch': Switch, }, template: `
`, }) const vm = wrapper.vm const coreWrapper = wrapper.find('.el-switch__core') const switchWrapper = wrapper.findComponent(Switch) const switchVm = switchWrapper.vm const inputEl = vm.$el.querySelector('input') expect(switchVm.checked).toBe(true) expect(switchWrapper.classes('is-checked')).toEqual(true) expect(inputEl.checked).toEqual(true) await coreWrapper.trigger('click') expect(switchVm.checked).toBe(true) expect(switchWrapper.classes('is-checked')).toEqual(true) expect(inputEl.checked).toEqual(true) }) test('model-value is the single source of truth', async () => { const wrapper = mount({ components: { 'el-switch': Switch, }, template: `
`, }) const vm = wrapper.vm const coreWrapper = wrapper.find('.el-switch__core') const switchWrapper = wrapper.findComponent(Switch) const switchVm = switchWrapper.vm const inputEl = vm.$el.querySelector('input') expect(switchVm.checked).toBe(true) expect(switchWrapper.classes('is-checked')).toEqual(true) expect(inputEl.checked).toEqual(true) await coreWrapper.trigger('click') expect(switchVm.checked).toBe(true) expect(switchWrapper.classes('is-checked')).toEqual(true) expect(inputEl.checked).toEqual(true) }) test('sets checkbox value', async () => { const wrapper = mount({ components: { 'el-switch': Switch, }, template: `
`, data() { return { value: false, } }, }) const vm = wrapper.vm const inputEl = vm.$el.querySelector('input') vm.value = true await vm.$nextTick() expect(inputEl.checked).toEqual(true) vm.value = false await vm.$nextTick() expect(inputEl.checked).toEqual(false) }) test('beforeChange function return promise', async () => { const wrapper = mount({ components: { 'el-switch': Switch, }, template: `
`, data() { return { value: true, loading: false, asyncResult: 'error', } }, methods: { beforeChange() { this.loading = true return new Promise((resolve, reject) => { setTimeout(() => { this.loading = false return this.asyncResult == 'success' ? resolve(true) : reject(new Error('Error')) }, 1000) }) }, }, }) const vm = wrapper.vm const coreWrapper = wrapper.find('.el-switch__core') coreWrapper.trigger('click') jest.runAllTimers() await nextTick() expect(vm.value).toEqual(true) vm.asyncResult = 'success' coreWrapper.trigger('click') jest.runAllTimers() await nextTick() expect(vm.value).toEqual(false) coreWrapper.trigger('click') jest.runAllTimers() await nextTick() expect(vm.value).toEqual(true) }) test('beforeChange function return boolean', async () => { const wrapper = mount({ components: { 'el-switch': Switch, }, template: `
`, data() { return { value: true, result: false, } }, methods: { beforeChange() { // do something ... return this.result }, }, }) const vm = wrapper.vm const coreWrapper = wrapper.find('.el-switch__core') await coreWrapper.trigger('click') expect(vm.value).toEqual(true) vm.result = true await coreWrapper.trigger('click') expect(vm.value).toEqual(false) await coreWrapper.trigger('click') expect(vm.value).toEqual(true) }) })