mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-16 02:11:48 +08:00
848265cb9c
* fix(time-select): input value not changed with v-model bindings fix#1724 * test(time-select): add v-model test cases * test(time-select): add test case of value updates
111 lines
3.0 KiB
TypeScript
111 lines
3.0 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
|
import { nextTick } from 'vue'
|
|
import Option from '@element-plus/option'
|
|
import TimeSelect from '../src/time-select.vue'
|
|
|
|
const _mount = (template: string, data, otherObj?) =>
|
|
mount(
|
|
{
|
|
components: {
|
|
'el-time-select': TimeSelect,
|
|
},
|
|
template,
|
|
data,
|
|
...otherObj,
|
|
},
|
|
{
|
|
attachTo: 'body',
|
|
},
|
|
)
|
|
|
|
afterEach(() => {
|
|
document.documentElement.innerHTML = ''
|
|
})
|
|
|
|
describe('TimeSelect', () => {
|
|
it('create', async () => {
|
|
const wrapper = _mount(
|
|
`<el-time-select :style="{color:'red'}" class="customClass" />`,
|
|
() => ({
|
|
readonly: true,
|
|
}),
|
|
)
|
|
const outerInput = wrapper.find('.el-select')
|
|
expect(outerInput.classes()).toContain('customClass')
|
|
expect(outerInput.attributes().style).toBeDefined()
|
|
})
|
|
|
|
it('set default value', async () => {
|
|
const wrapper = _mount(`<el-time-select v-model="value" />`, () => ({
|
|
value: '14:30',
|
|
}))
|
|
const input = wrapper.find('input')
|
|
input.trigger('blur')
|
|
input.trigger('focus')
|
|
await nextTick()
|
|
expect(document.querySelector('.selected')).toBeDefined()
|
|
expect(document.querySelector('.selected').textContent).toBe('14:30')
|
|
})
|
|
|
|
it('set minTime', async () => {
|
|
const wrapper = _mount(`<el-time-select minTime='14:30' />`, () => ({}))
|
|
const input = wrapper.find('input')
|
|
input.trigger('blur')
|
|
input.trigger('focus')
|
|
await nextTick()
|
|
const elms = document.querySelectorAll('.is-disabled')
|
|
const elm = elms[elms.length - 1]
|
|
expect(elm.textContent).toBe('14:30')
|
|
})
|
|
|
|
it('set maxTime', async () => {
|
|
const wrapper = _mount(`<el-time-select maxTime='14:30' />`, () => ({}))
|
|
const input = wrapper.find('input')
|
|
input.trigger('blur')
|
|
input.trigger('focus')
|
|
await nextTick()
|
|
const elm = document.querySelector('.is-disabled')
|
|
expect(elm.textContent).toBe('14:30')
|
|
})
|
|
|
|
it('set value update', async () => {
|
|
const wrapper = _mount(`<el-time-select v-model="value" />`, () => ({
|
|
value: '10:00',
|
|
}))
|
|
await nextTick()
|
|
|
|
const input = wrapper.find('input')
|
|
|
|
expect(input.exists()).toBe(true)
|
|
expect(input.element.value).toBe('10:00')
|
|
// wrapper.setData is not supported until version 2.0.0-beta.8
|
|
// change value directly on `wrapper.vm`
|
|
const vm = wrapper.vm as any
|
|
vm.value = '10:30'
|
|
await nextTick()
|
|
expect(vm.value).toBe('10:30')
|
|
expect(input.element.value).toBe('10:30')
|
|
})
|
|
|
|
it('update value', async () => {
|
|
const wrapper = _mount(`<el-time-select v-model="value" />`, () => ({
|
|
value: '10:00',
|
|
}))
|
|
await nextTick()
|
|
const vm = wrapper.vm as any
|
|
const input = wrapper.find('input')
|
|
expect(vm.value).toBe('10:00')
|
|
expect(input.element.value).toBe('10:00')
|
|
|
|
const option = wrapper
|
|
.findAllComponents(Option)
|
|
.filter(w => w.text().trim() === '11:00')[0]
|
|
|
|
expect(option.exists()).toBe(true)
|
|
option.trigger('click')
|
|
await nextTick()
|
|
expect(vm.value).toBe('11:00')
|
|
expect(input.element.value).toBe('11:00')
|
|
})
|
|
})
|