mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 01:41:20 +08:00
2d2e0c33f9
* refactor(components): [switch] use JSX in Unit test * style(test-utils): [switch] use self-closing sign
360 lines
11 KiB
TypeScript
360 lines
11 KiB
TypeScript
// @ts-nocheck
|
|
import { markRaw, nextTick, ref } from 'vue'
|
|
import { mount } from '@vue/test-utils'
|
|
import { afterEach, describe, expect, test, vi } from 'vitest'
|
|
import { debugWarn } from '@element-plus/utils'
|
|
import { Checked, CircleClose } from '@element-plus/icons-vue'
|
|
import { ElFormItem } from '@element-plus/components/form'
|
|
import Switch from '../src/switch.vue'
|
|
import type { VueWrapper } from '@vue/test-utils'
|
|
import type { SwitchInstance } from '../src/switch'
|
|
|
|
vi.mock('@element-plus/utils/error', () => ({
|
|
debugWarn: vi.fn(),
|
|
}))
|
|
|
|
describe('Switch.vue', () => {
|
|
afterEach(() => {
|
|
vi.clearAllMocks()
|
|
})
|
|
|
|
test('create', () => {
|
|
const props = {
|
|
activeText: 'on',
|
|
inactiveText: 'off',
|
|
activeColor: '#0f0',
|
|
inactiveColor: '#f00',
|
|
width: 100,
|
|
}
|
|
const wrapper = mount(() => <Switch {...props} />)
|
|
const vm = wrapper.vm
|
|
expect(vm.$el.style.getPropertyValue('--el-switch-on-color')).toEqual(
|
|
'#0f0'
|
|
)
|
|
expect(vm.$el.style.getPropertyValue('--el-switch-off-color')).toEqual(
|
|
'#f00'
|
|
)
|
|
expect(vm.$el.classList.contains('is-checked')).false
|
|
const coreEl = vm.$el.querySelector('.el-switch__core')
|
|
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 size="large" />)
|
|
expect(wrapper.find('.el-switch--large').exists()).toBe(true)
|
|
})
|
|
|
|
test('tabindex', () => {
|
|
const wrapper = mount(() => <Switch tabindex="0" />)
|
|
expect(wrapper.find('.el-switch__input').attributes().tabindex).toBe('0')
|
|
})
|
|
|
|
test('inline prompt', () => {
|
|
const props = {
|
|
inlinePrompt: true,
|
|
activeText: 'on',
|
|
inactiveText: 'off',
|
|
activeColor: '#0f0',
|
|
inactiveColor: '#f00',
|
|
width: 100,
|
|
}
|
|
const wrapper = mount(() => <Switch {...props} />)
|
|
const vm = wrapper.vm
|
|
expect(vm.$el.style.getPropertyValue('--el-switch-on-color')).toEqual(
|
|
'#0f0'
|
|
)
|
|
expect(vm.$el.style.getPropertyValue('--el-switch-off-color')).toEqual(
|
|
'#f00'
|
|
)
|
|
expect(vm.$el.classList.contains('is-checked')).false
|
|
const coreEl = vm.$el.querySelector('.el-switch__core')
|
|
expect(coreEl.style.width).toEqual('100px')
|
|
const leftLabelWrapper = wrapper.find('.el-switch__inner span')
|
|
expect(leftLabelWrapper.text()).toEqual('on')
|
|
})
|
|
|
|
test('switch with icons', () => {
|
|
const wrapper = mount(() => (
|
|
<Switch
|
|
activeIcon={markRaw(Checked)}
|
|
inactiveIcon={markRaw(CircleClose)}
|
|
/>
|
|
))
|
|
|
|
expect(wrapper.findComponent(Checked).exists()).toBe(true)
|
|
})
|
|
|
|
test('value correctly update', async () => {
|
|
const value = ref(true)
|
|
const wrapper = mount(() => (
|
|
<Switch v-model={value.value} activeColor="#0f0" inactiveColor="#f00" />
|
|
))
|
|
const vm = wrapper.vm
|
|
expect(vm.$el.style.getPropertyValue('--el-switch-on-color')).toEqual(
|
|
'#0f0'
|
|
)
|
|
expect(vm.$el.style.getPropertyValue('--el-switch-off-color')).toEqual(
|
|
'#f00'
|
|
)
|
|
expect(vm.$el.classList.contains('is-checked')).true
|
|
const coreWrapper = wrapper.find('.el-switch__core')
|
|
await coreWrapper.trigger('click')
|
|
expect(vm.$el.classList.contains('is-checked')).false
|
|
expect(value.value).toEqual(false)
|
|
await coreWrapper.trigger('click')
|
|
expect(vm.$el.classList.contains('is-checked')).true
|
|
expect(value.value).toEqual(true)
|
|
})
|
|
|
|
test('change event', async () => {
|
|
const target = ref(1)
|
|
const value = ref(true)
|
|
const handleChange = (val: boolean) => {
|
|
target.value = val
|
|
}
|
|
const wrapper = mount(() => (
|
|
<Switch v-model={value.value} onUpdate:modelValue={handleChange} />
|
|
))
|
|
|
|
expect(target.value).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(target.value).toEqual(false)
|
|
})
|
|
|
|
test('disabled switch should not respond to user click', async () => {
|
|
const value = ref(true)
|
|
const wrapper = mount(() => <Switch disabled v-model={value.value} />)
|
|
|
|
expect(value.value).toEqual(true)
|
|
const coreWrapper = wrapper.find('.el-switch__core')
|
|
await coreWrapper.trigger('click')
|
|
expect(value.value).toEqual(true)
|
|
})
|
|
|
|
test('expand switch value', async () => {
|
|
const value = ref('100')
|
|
const onValue = ref('100')
|
|
const offValue = ref('0')
|
|
const wrapper = mount(() => (
|
|
<div>
|
|
<Switch
|
|
v-model={value.value}
|
|
active-value={onValue.value}
|
|
inactive-value={offValue.value}
|
|
/>
|
|
</div>
|
|
))
|
|
|
|
const coreWrapper = wrapper.find('.el-switch__core')
|
|
await coreWrapper.trigger('click')
|
|
expect(value.value).toEqual('0')
|
|
await coreWrapper.trigger('click')
|
|
expect(value.value).toEqual('100')
|
|
})
|
|
|
|
test('default switch active-value is false', async () => {
|
|
const value = ref(false)
|
|
const onValue = ref(false)
|
|
const offValue = ref(true)
|
|
const wrapper = mount(() => (
|
|
<div>
|
|
<Switch
|
|
v-model={value.value}
|
|
active-value={onValue.value}
|
|
inactive-value={offValue.value}
|
|
/>
|
|
</div>
|
|
))
|
|
|
|
const coreWrapper = wrapper.find('.el-switch__core')
|
|
await coreWrapper.trigger('click')
|
|
expect(value.value).toEqual(true)
|
|
await coreWrapper.trigger('click')
|
|
expect(value.value).toEqual(false)
|
|
})
|
|
|
|
test('value is the single source of truth', async () => {
|
|
const wrapper = mount(() => <Switch value={true} />)
|
|
|
|
const vm = wrapper.vm
|
|
const coreWrapper = wrapper.find('.el-switch__core')
|
|
const switchWrapper: VueWrapper<SwitchInstance> =
|
|
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(() => <Switch model-value={true} />)
|
|
|
|
const vm = wrapper.vm
|
|
const coreWrapper = wrapper.find('.el-switch__core')
|
|
const switchWrapper: VueWrapper<SwitchInstance> =
|
|
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 value = ref(false)
|
|
const wrapper = mount(() => (
|
|
<div>
|
|
<Switch v-model={value.value} />
|
|
</div>
|
|
))
|
|
const vm = wrapper.vm
|
|
const inputEl = vm.$el.querySelector('input')
|
|
|
|
value.value = true
|
|
await vm.$nextTick()
|
|
expect(inputEl.checked).toEqual(true)
|
|
value.value = false
|
|
await vm.$nextTick()
|
|
expect(inputEl.checked).toEqual(false)
|
|
})
|
|
|
|
test('beforeChange function return promise', async () => {
|
|
const value = ref(true)
|
|
const loading = ref(false)
|
|
const asyncResult = ref('error')
|
|
const beforeChange = () => {
|
|
loading.value = true
|
|
return new Promise((resolve, reject) => {
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
return asyncResult.value == 'success'
|
|
? resolve(true)
|
|
: reject(new Error('Error'))
|
|
}, 1000)
|
|
})
|
|
}
|
|
const wrapper = mount(() => (
|
|
<div>
|
|
<Switch
|
|
v-model={value.value}
|
|
loading={loading.value}
|
|
beforeChange={beforeChange}
|
|
/>
|
|
</div>
|
|
))
|
|
|
|
const coreWrapper = wrapper.find('.el-switch__core')
|
|
|
|
vi.useFakeTimers()
|
|
|
|
await coreWrapper.trigger('click')
|
|
vi.runAllTimers()
|
|
await nextTick()
|
|
expect(value.value).toEqual(true)
|
|
expect(debugWarn).toHaveBeenCalledTimes(0)
|
|
|
|
asyncResult.value = 'success'
|
|
|
|
await coreWrapper.trigger('click')
|
|
vi.runAllTimers()
|
|
await nextTick()
|
|
expect(value.value).toEqual(false)
|
|
expect(debugWarn).toHaveBeenCalledTimes(1)
|
|
|
|
await coreWrapper.trigger('click')
|
|
vi.runAllTimers()
|
|
await nextTick()
|
|
expect(value.value).toEqual(true)
|
|
expect(debugWarn).toHaveBeenCalledTimes(1)
|
|
})
|
|
|
|
test('beforeChange function return boolean', async () => {
|
|
const value = ref(true)
|
|
const result = ref(false)
|
|
const beforeChange = () => {
|
|
// do something ...
|
|
return result.value
|
|
}
|
|
const wrapper = mount(() => (
|
|
<div>
|
|
<Switch v-model={value.value} beforeChange={beforeChange} />
|
|
</div>
|
|
))
|
|
|
|
const coreWrapper = wrapper.find('.el-switch__core')
|
|
|
|
await coreWrapper.trigger('click')
|
|
expect(value.value).toEqual(true)
|
|
|
|
result.value = true
|
|
|
|
await coreWrapper.trigger('click')
|
|
expect(value.value).toEqual(false)
|
|
|
|
await coreWrapper.trigger('click')
|
|
expect(value.value).toEqual(true)
|
|
})
|
|
|
|
describe('form item accessibility integration', () => {
|
|
test('automatic id attachment', async () => {
|
|
const wrapper = mount(() => (
|
|
<ElFormItem label="Foobar" data-test-ref="item">
|
|
<Switch />
|
|
</ElFormItem>
|
|
))
|
|
|
|
await nextTick()
|
|
const formItem = wrapper.find('[data-test-ref="item"]')
|
|
const formItemLabel = formItem.find('.el-form-item__label')
|
|
const switchInput = wrapper.find('.el-switch__input')
|
|
expect(formItem.attributes().role).toBeFalsy()
|
|
expect(formItemLabel.attributes().for).toBe(switchInput.attributes().id)
|
|
})
|
|
|
|
test('specified id attachment', async () => {
|
|
const wrapper = mount(() => (
|
|
<ElFormItem label="Foobar" data-test-ref="item">
|
|
<Switch id="foobar" />
|
|
</ElFormItem>
|
|
))
|
|
|
|
await nextTick()
|
|
const formItem = wrapper.find('[data-test-ref="item"]')
|
|
const formItemLabel = formItem.find('.el-form-item__label')
|
|
const switchInput = wrapper.find('.el-switch__input')
|
|
expect(formItem.attributes().role).toBeFalsy()
|
|
expect(switchInput.attributes().id).toBe('foobar')
|
|
expect(formItemLabel.attributes().for).toBe(switchInput.attributes().id)
|
|
})
|
|
|
|
test('form item role is group when multiple inputs', async () => {
|
|
const wrapper = mount(() => (
|
|
<ElFormItem label="Foobar" data-test-ref="item">
|
|
<Switch />
|
|
<Switch />
|
|
</ElFormItem>
|
|
))
|
|
|
|
await nextTick()
|
|
const formItem = wrapper.find('[data-test-ref="item"]')
|
|
expect(formItem.attributes().role).toBe('group')
|
|
})
|
|
})
|
|
})
|