import { mount } from '@vue/test-utils' import { nextTick } from 'vue' import TimePicker from '../src/time-picker' const _mount = (template: string, data, otherObj?) => mount({ components: { 'el-time-picker': TimePicker, }, 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 [].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', 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 .active') expect(times[0].textContent).toBe('06 PM') expect(times[1].textContent).toBe('40') // default value expect(times[2].textContent).toBe('00') }) 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('active')).toBeTruthy() expect(minuteEl.classList.contains('active')).toBeTruthy() expect(secondEl.classList.contains('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('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 = jest.fn() const focusHandler = jest.fn() const blurHandler = jest.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(1); (document.querySelector('.el-time-panel__btn.cancel') as any).click() await nextTick() 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, '.disabled') expect(disabledHours).toEqual(disabledHoursArr) const hourSpinners = hoursEl.querySelectorAll('.el-time-spinner__item'); (hourSpinners[18] as any).click() await nextTick() const disabledMinutes = getSpinnerTextAsArray(minutesEl, '.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(.disabled)') const enabledSeconds = getSpinnerTextAsArray(secondsEl, ':not(.disabled)') expect(enabledMinutes).toEqual([0]) expect(enabledSeconds).toEqual([0]) }) }) 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--mini').exists()).toBeTruthy() const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() const list = document.querySelectorAll('.el-time-spinner__list .el-time-spinner__item.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() const list = document.querySelectorAll('.el-time-spinner__list .el-time-spinner__item.active'); ['10','20','00','11','10','00'].forEach((_, i) => { expect(list[i].textContent).toBe(_) }) }) it('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() await nextTick() 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 Array).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() const list = document.querySelectorAll('.el-time-spinner__list') const leftHoursEl = list[0] const leftEndbledHours = getSpinnerTextAsArray(leftHoursEl, ':not(.disabled)') expect(leftEndbledHours).toEqual([ 8, 9, 10, 11, 12 ]) const rightHoursEl = list[3] const rightEndbledHours = getSpinnerTextAsArray(rightHoursEl, ':not(.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(.disabled)') expect(NextRightEndbledHours).toEqual([ 12, 13, 14, 15, 16 ]) }) })