import { nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import { afterEach, describe, expect, it, vi } from 'vitest'
import dayjs from 'dayjs'
import triggerEvent from '@element-plus/test-utils/trigger-event'
import { rAF } from '@element-plus/test-utils/tick'
import { ElFormItem } from '@element-plus/components/form'
import TimePicker from '../src/time-picker'
import Picker from '../src/common/picker.vue'
const _mount = (template: string, data, otherObj?) =>
mount(
{
components: {
'el-time-picker': TimePicker,
'el-form-item': ElFormItem,
},
template,
data,
...otherObj,
},
{
attachTo: 'body',
}
)
const makeRange = (start, end) => {
const result = []
for (let i = start; i <= end; i++) {
result.push(i)
}
return result
}
const getSpinnerTextAsArray = (dom, selector) => {
return Array.prototype.slice
.call(dom.querySelectorAll(selector))
.map((node) => Number(node.textContent))
}
afterEach(() => {
document.documentElement.innerHTML = ''
})
describe('TimePicker', () => {
it('create & custom class & style', async () => {
const wrapper = _mount(
``,
() => ({ placeholder: 'test_', readonly: true })
)
const input = wrapper.find('input')
expect(input.attributes('placeholder')).toBe('test_')
expect(input.attributes('readonly')).not.toBeUndefined()
const outterInput = wrapper.find('.el-input')
expect(outterInput.classes()).toContain('customClass')
expect(outterInput.attributes().style).toBeDefined()
})
it('set format && default value && set AM/PM spinner && no $attr to panel', async () => {
const wrapper = _mount(
``,
() => ({ format: 'hh-mm:ss A', value: new Date(2016, 9, 10, 18, 40) })
)
await nextTick()
const input = wrapper.find('input')
expect(input.element.value).toBe('06-40:00 PM') // format
input.trigger('blur')
input.trigger('focus')
await nextTick()
const list = document.querySelectorAll('.el-time-spinner__list')
const hoursEl = list[0]
const items = hoursEl.querySelectorAll('.el-time-spinner__item')
expect(items[0].textContent).toBe('12 AM') // am pm
expect(items[1].textContent).toBe('01 AM')
expect(items[12].textContent).toBe('12 PM')
expect(items[15].textContent).toBe('03 PM')
const times = document.querySelectorAll('.el-time-spinner__list .is-active')
expect(times[0].textContent).toBe('06 PM')
expect(times[1].textContent).toBe('40') // default value
expect(times[2].textContent).toBe('00')
const panel = document.querySelector('.el-time-panel') as any
expect(panel.classList.contains('customClass')).toBeFalsy()
})
it('select time', async () => {
const wrapper = _mount(
``,
() => ({ value: '' })
)
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
const list = document.querySelectorAll('.el-time-spinner__list')
const hoursEl = list[0]
const minutesEl = list[1]
const secondsEl = list[2]
const hourEl = hoursEl.querySelectorAll('.el-time-spinner__item')[4] as any
const minuteEl = minutesEl.querySelectorAll(
'.el-time-spinner__item'
)[36] as any
const secondEl = secondsEl.querySelectorAll(
'.el-time-spinner__item'
)[20] as any
// click hour, minute, second one at a time.
hourEl.click()
await nextTick()
minuteEl.click()
await nextTick()
secondEl.click()
await nextTick()
const vm = wrapper.vm as any
const date = vm.value
expect(hourEl.classList.contains('is-active')).toBeTruthy()
expect(minuteEl.classList.contains('is-active')).toBeTruthy()
expect(secondEl.classList.contains('is-active')).toBeTruthy()
expect(date.getHours()).toBe(4)
expect(date.getMinutes()).toBe(36)
expect(date.getSeconds()).toBe(20)
})
it('click confirm / cancel button', async () => {
const wrapper = _mount(
``,
() => ({ value: '' })
)
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
;(document.querySelector('.el-time-panel__btn.cancel') as any).click()
const vm = wrapper.vm as any
expect(vm.value).toBe('')
input.trigger('blur')
input.trigger('focus')
await nextTick()
;(document.querySelector('.el-time-panel__btn.confirm') as any).click()
expect(vm.value instanceof Date).toBeTruthy()
})
it('should update oldValue when visible change', async () => {
const wrapper = _mount(
``,
() => ({ value: new Date(2016, 9, 10, 18, 40) })
)
// show picker panel
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
// select time
const list = document.querySelectorAll('.el-time-spinner__list')
const hoursEl = list[0]
const minutesEl = list[1]
const secondsEl = list[2]
const hourEl = hoursEl.querySelectorAll('.el-time-spinner__item')[4] as any
const minuteEl = minutesEl.querySelectorAll(
'.el-time-spinner__item'
)[36] as any
const secondEl = secondsEl.querySelectorAll(
'.el-time-spinner__item'
)[20] as any
hourEl.click()
await nextTick()
minuteEl.click()
await nextTick()
secondEl.click()
await nextTick()
// click confirm button
;(document.querySelector('.el-time-panel__btn.confirm') as any).click()
const date = (wrapper.vm as any).value
expect(date.getHours()).toBe(4)
expect(date.getMinutes()).toBe(36)
expect(date.getSeconds()).toBe(20)
// show picker panel and click cancel button
input.trigger('blur')
input.trigger('focus')
await nextTick()
;(document.querySelector('.el-time-panel__btn.cancel') as any).click()
expect(date.getHours()).toBe(4)
expect(date.getMinutes()).toBe(36)
expect(date.getSeconds()).toBe(20)
})
it('set format', async () => {
const wrapper = _mount(
``,
() => ({ value: '' })
)
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
const spinnerDom = document.querySelectorAll('.el-time-spinner__wrapper')
const minutesDom = spinnerDom[1]
const secondsDom = spinnerDom[2]
expect(minutesDom).not.toBeUndefined()
expect(secondsDom).toBeUndefined()
})
it('event change, focus, blur', async () => {
const changeHandler = vi.fn()
const focusHandler = vi.fn()
const blurHandler = vi.fn()
const wrapper = _mount(
``,
() => ({ value: new Date(2016, 9, 10, 18, 40) }),
{
methods: {
onChange(e) {
return changeHandler(e)
},
onFocus(e) {
return focusHandler(e)
},
onBlur(e) {
return blurHandler(e)
},
},
}
)
const input = wrapper.find('input')
input.trigger('focus')
await nextTick()
expect(focusHandler).toHaveBeenCalledTimes(1)
const list = document.querySelectorAll('.el-time-spinner__list')
const hoursEl = list[0]
const hourEl = hoursEl.querySelectorAll('.el-time-spinner__item')[4] as any
hourEl.click()
await nextTick()
expect(changeHandler).toHaveBeenCalledTimes(0)
;(document.querySelector('.el-time-panel__btn.confirm') as any).click()
await nextTick()
await nextTick() // onchange is triggered by props.modelValue update
expect(changeHandler).toHaveBeenCalledTimes(1)
expect(blurHandler).toHaveBeenCalledTimes(1)
})
it('selectableRange ', async () => {
// ['17:30:00 - 18:30:00', '18:50:00 - 20:30:00', '21:00:00 - 22:00:00']
const disabledHoursArr = [
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 23,
]
const wrapper = _mount(
``,
() => ({ value: '' }),
{
methods: {
disabledHours() {
return disabledHoursArr
},
disabledMinutes(hour) {
// ['17:30:00 - 18:30:00', '18:50:00 - 20:30:00', '21:00:00 - 22:00:00']
if (hour === 17) {
return makeRange(0, 29)
}
if (hour === 18) {
return makeRange(31, 49)
}
if (hour === 20) {
return makeRange(31, 59)
}
if (hour === 22) {
return makeRange(1, 59)
}
},
disabledSeconds(hour, minute) {
if (hour === 18 && minute === 30) {
return makeRange(1, 59)
}
if (hour === 20 && minute === 30) {
return makeRange(1, 59)
}
if (hour === 22 && minute === 0) {
return makeRange(1, 59)
}
},
},
}
)
const input = wrapper.find('input')
input.trigger('focus')
await nextTick()
const list = document.querySelectorAll('.el-time-spinner__list')
const hoursEl = list[0]
const minutesEl = list[1]
const secondsEl = list[2]
const disabledHours = getSpinnerTextAsArray(hoursEl, '.is-disabled')
expect(disabledHours).toEqual(disabledHoursArr)
const hourSpinners = hoursEl.querySelectorAll('.el-time-spinner__item')
;(hourSpinners[18] as any).click()
await nextTick()
const disabledMinutes = getSpinnerTextAsArray(minutesEl, '.is-disabled')
expect(disabledMinutes.every((t) => t > 30 && t < 50)).toBeTruthy()
expect(disabledMinutes.length).toEqual(19)
;(hourSpinners[22] as any).click()
await nextTick()
const enabledMinutes = getSpinnerTextAsArray(
minutesEl,
':not(.is-disabled)'
)
const enabledSeconds = getSpinnerTextAsArray(
secondsEl,
':not(.is-disabled)'
)
expect(enabledMinutes).toEqual([0])
expect(enabledSeconds).toEqual([0])
})
it('ref focus', async () => {
_mount(
``,
() => ({ value: new Date(2016, 9, 10, 18, 40) }),
{
mounted() {
this.$refs.input.focus()
},
}
)
// This one allows mounted to take effect
await nextTick()
// These following two allows popper to gets rendered.
await rAF()
const popperEl = document.querySelector('.el-picker__popper')
const attr = popperEl.getAttribute('aria-hidden')
expect(attr).toEqual('false')
})
it('ref blur', async () => {
_mount(
``,
() => ({ value: new Date(2016, 9, 10, 18, 40) }),
{
mounted() {
this.$refs.input.focus()
this.$refs.input.blur()
},
}
)
await nextTick()
const popperEl = document.querySelector('.el-picker__popper')
const attr = popperEl.getAttribute('aria-hidden')
expect(attr).toEqual('false')
})
it('model value should sync when disabled-hours was updated', async () => {
const wrapper = _mount(
`
`,
() => ({
value: '2000-01-01 00:00:00',
minHour: '8',
}),
{
computed: {
disabledHours() {
return () => {
return Array.from({ length: 24 })
.fill(null)
.map((_, i) => i)
.filter((h) => h < Number.parseInt(this.minHour, 10))
}
},
},
}
)
await nextTick()
const vm = wrapper.vm as any
expect(vm.value).toEqual('2000-01-01 08:00:00')
vm.minHour = '9'
await nextTick()
expect(vm.value).toEqual('2000-01-01 09:00:00')
vm.minHour = '8'
await nextTick()
expect(vm.value).toEqual('2000-01-01 09:00:00')
})
})
describe('TimePicker(range)', () => {
it('create', async () => {
const wrapper = _mount(
``,
() => ({
value: [new Date(2016, 9, 10, 18, 40), new Date(2016, 9, 10, 19, 40)],
})
)
expect(wrapper.find('.el-range-editor--small').exists()).toBeTruthy()
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
// For skipping Transition animation
await rAF()
const list = document.querySelectorAll(
'.el-time-spinner__list .el-time-spinner__item.is-active'
)
;['18', '40', '00', '19', '40', '00'].forEach((_, i) => {
expect(list[i].textContent).toBe(_)
})
})
it('default value', async () => {
const defaultValue = [
new Date(2000, 9, 1, 10, 20, 0),
new Date(2000, 9, 1, 11, 10, 0),
]
const wrapper = _mount(
``,
() => ({ value: '', defaultValue })
)
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
// For skipping Transition animation
await rAF()
const list = document.querySelectorAll(
'.el-time-spinner__list .el-time-spinner__item.is-active'
)
;['10', '20', '00', '11', '10', '00'].forEach((_, i) => {
expect(list[i].textContent).toBe(_)
})
})
it('cancel button', async () => {
const cancelDates = [
new Date(2016, 9, 10, 9, 40),
new Date(2016, 9, 10, 15, 40),
]
const wrapper = _mount(
``,
() => ({
value: cancelDates,
})
)
const input = wrapper.find('input')
input.trigger('blur')
await nextTick()
input.trigger('focus')
await nextTick()
// For skipping Transition animation
await rAF()
;(document.querySelector('.el-time-panel__btn.cancel') as any).click()
await rAF()
const vm = wrapper.vm as any
expect(vm.value).toEqual(cancelDates)
expect((wrapper.findComponent(Picker).vm as any).pickerVisible).toEqual(
false
)
expect(document.querySelector('.el-picker-panel')).toBeNull()
input.trigger('blur')
input.trigger('focus')
await nextTick()
;(document.querySelector('.el-time-panel__btn.confirm') as any).click()
expect(Array.isArray(vm.value)).toBeTruthy()
vm.value.forEach((_) => {
expect(_ instanceof Date).toBeTruthy()
})
})
it('selectableRange ', async () => {
// left ['08:00:00 - 12:59:59'] right ['11:00:00 - 16:59:59']
const wrapper = _mount(
``,
() => ({
value: [new Date(2016, 9, 10, 9, 40), new Date(2016, 9, 10, 15, 40)],
}),
{
methods: {
disabledHours(role) {
if (role === 'start') {
return makeRange(0, 7).concat(makeRange(13, 23))
}
return makeRange(0, 10).concat(makeRange(17, 23))
},
},
}
)
const input = wrapper.find('input')
input.trigger('focus')
await nextTick()
// For skipping Transition animation
await rAF()
const list = document.querySelectorAll('.el-time-spinner__list')
const leftHoursEl = list[0]
const leftEndbledHours = getSpinnerTextAsArray(
leftHoursEl,
':not(.is-disabled)'
)
expect(leftEndbledHours).toEqual([8, 9, 10, 11, 12])
const rightHoursEl = list[3]
const rightEndbledHours = getSpinnerTextAsArray(
rightHoursEl,
':not(.is-disabled)'
)
expect(rightEndbledHours).toEqual([11, 12, 13, 14, 15, 16])
;(leftHoursEl.querySelectorAll('.el-time-spinner__item')[12] as any).click()
await nextTick()
const NextRightEndbledHours = getSpinnerTextAsArray(
rightHoursEl,
':not(.is-disabled)'
)
expect(NextRightEndbledHours).toEqual([12, 13, 14, 15, 16])
})
it('arrow key', async () => {
const wrapper = _mount(
``,
() => ({ value: new Date(2016, 9, 10, 18, 40) })
)
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
const initValue = input.element.value
triggerEvent(input.element, 'keydown', 'ArrowDown')
await nextTick()
const addOneHour = input.element.value
triggerEvent(input.element, 'keydown', 'ArrowRight')
await nextTick()
triggerEvent(input.element, 'keydown', 'ArrowDown')
await nextTick()
const addOneHourOneMinute = input.element.value
expect(dayjs(initValue).diff(addOneHour, 'minute')).toEqual(-60)
expect(dayjs(initValue).diff(addOneHourOneMinute, 'minute')).toEqual(-61)
})
it('should be able to inherit options from parent injection', async () => {
const ElPopperOptions = {
strategy: 'fixed',
}
const wrapper = _mount(
``,
() => ({
value: new Date(2016, 9, 10, 18, 40),
options: ElPopperOptions,
}),
{
provide() {
return {
ElPopperOptions,
}
},
}
)
await nextTick()
expect((wrapper.findComponent(Picker).vm as any).elPopperOptions).toEqual(
ElPopperOptions
)
})
it('am/pm mode avoid render redundant content', async () => {
const wrapper = _mount(
`
`,
() => ({
timeRange: [],
})
)
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
// For skipping Transition animation
await rAF()
const list = document.querySelectorAll('.el-time-spinner__list')
expect(
list[0]
.querySelector('.el-time-spinner__item.is-active')
.innerHTML.split(' ').length
).toBe(2)
expect(
list[1]
.querySelector('.el-time-spinner__item.is-active')
.innerHTML.split(' ').length
).toBe(1)
expect(
list[2]
.querySelector('.el-time-spinner__item.is-active')
.innerHTML.split(' ').length
).toBe(1)
})
describe('form item accessibility integration', () => {
it('automatic id attachment', async () => {
const wrapper = _mount(
`
`,
() => ({})
)
await nextTick()
const formItem = wrapper.find('[data-test-ref="item"]')
const formItemLabel = formItem.find('.el-form-item__label')
const timePickerInput = wrapper.find('.el-input__inner')
expect(formItem.attributes().role).toBeFalsy()
expect(formItemLabel.attributes().for).toBe(
timePickerInput.attributes().id
)
})
it('specified id attachment', async () => {
const wrapper = _mount(
`
`,
() => ({})
)
await nextTick()
const formItem = wrapper.find('[data-test-ref="item"]')
const formItemLabel = formItem.find('.el-form-item__label')
const timePickerInput = wrapper.find('.el-input__inner')
expect(formItem.attributes().role).toBeFalsy()
expect(timePickerInput.attributes().id).toBe('foobar')
expect(formItemLabel.attributes().for).toBe(
timePickerInput.attributes().id
)
})
it('form item role is group when multiple inputs', async () => {
const wrapper = _mount(
`
`,
() => ({})
)
await nextTick()
const formItem = wrapper.find('[data-test-ref="item"]')
expect(formItem.attributes().role).toBe('group')
})
})
})