import { nextTick } from 'vue' import { mount } from '@vue/test-utils' import dayjs from 'dayjs' import ConfigProvider from '@element-plus/components/config-provider' import { CommonPicker } from '@element-plus/components/time-picker' import Input from '@element-plus/components/input' import zhCn from '@element-plus/locale/lang/zh-cn' import enUs from '@element-plus/locale/lang/en' import 'dayjs/locale/zh-cn' import { EVENT_CODE } from '@element-plus/utils/aria' import DatePicker from '../src/date-picker' const _mount = (template: string, data = () => ({}), otherObj?) => mount( { components: { 'el-date-picker': DatePicker, }, template, data, ...otherObj, }, { attachTo: 'body', } ) afterEach(() => { document.documentElement.innerHTML = '' }) describe('DatePicker', () => { it('create & custom class & style', async () => { const popperClassName = 'popper-class-test' const customClassName = 'custom-class-test' const wrapper = _mount( ``, () => ({ popperClassName, customClassName }) ) 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(customClassName) expect(outterInput.attributes().style).toBeDefined() input.trigger('blur') input.trigger('focus') await nextTick() expect( document .querySelector('.el-picker__popper') .classList.contains(popperClassName) ).toBe(true) }) it('select date', async () => { const wrapper = _mount( ``, () => ({ value: '' }) ) const date = dayjs() const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() const spans = document.querySelectorAll('.el-date-picker__header-label') const arrowLeftElm = document.querySelector( '.el-date-picker__prev-btn.arrow-left' ) as HTMLElement const arrowRightElm = document.querySelector( '.el-date-picker__next-btn.arrow-right' ) as HTMLElement expect(spans[0].textContent).toContain(date.year()) expect(spans[1].textContent).toContain(date.format('MMMM')) const arrowLeftYeayElm = document.querySelector( '.el-date-picker__prev-btn.d-arrow-left' ) as HTMLElement arrowLeftYeayElm.click() let count = 20 while (--count) { arrowLeftElm.click() } count = 20 while (--count) { arrowRightElm.click() } await nextTick() expect(spans[0].textContent).toContain(date.add(-1, 'year').year()) expect(spans[1].textContent).toContain(date.format('MMMM')) ;(document.querySelector('td.available') as HTMLElement).click() await nextTick() const vm = wrapper.vm as any expect(vm.value).toBeDefined() }) it('defaultTime and clear value', async () => { const wrapper = _mount( ``, () => ({ value: '' }) ) const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() ;(document.querySelector('td.available') as HTMLElement).click() await nextTick() const vm = wrapper.vm as any expect(vm.value).toBeDefined() expect(vm.value.getHours()).toBe(12) expect(vm.value.getMinutes()).toBe(0) expect(vm.value.getSeconds()).toBe(1) const picker = wrapper.findComponent(CommonPicker) ;(picker.vm as any).showClose = true await nextTick() ;(document.querySelector('.clear-icon') as HTMLElement).click() expect(vm.value).toBeNull() }) it('event change, focus, blur', async () => { const changeHandler = jest.fn() const focusHandler = jest.fn() const blurHandler = jest.fn() let onChangeValue const wrapper = _mount( ``, () => ({ value: new Date(2016, 9, 10, 18, 40) }), { methods: { onChange(e) { onChangeValue = e return changeHandler(e) }, onFocus(e) { return focusHandler(e) }, onBlur(e) { return blurHandler(e) }, }, } ) const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() expect(focusHandler).toHaveBeenCalledTimes(1) ;(document.querySelector('td.available') as HTMLElement).click() await nextTick() await nextTick() // onchange is triggered by props.modelValue update expect(changeHandler).toHaveBeenCalledTimes(1) expect(blurHandler).toHaveBeenCalledTimes(1) expect(onChangeValue.getTime()).toBe(new Date(2016, 9, 1).getTime()) }) it('shortcuts', async () => { const text = 'Yesterday' const value = new Date(Date.now() - 86400000) value.setHours(0, 0, 0, 0) const wrapper = _mount( ``, () => ({ value: '', shortcuts: [ { text, value, }, ], }) ) const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() const shortcut = document.querySelector('.el-picker-panel__shortcut') expect(shortcut.textContent).toBe(text) expect(document.querySelector('.el-picker-panel__sidebar')).not.toBeNull() ;(shortcut as HTMLElement).click() await nextTick() const vm = wrapper.vm as any expect(vm.value.valueOf()).toBe(value.valueOf()) }) it('disabledDate', async () => { const wrapper = _mount( ``, () => ({ value: '', disabledDate(time) { return time.getTime() < Date.now() - 8.64e7 }, }) ) const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() expect(document.querySelector('.disabled')).not.toBeNull() }) it('ref focus', async () => { _mount( ``, () => ({ value: '' }), { mounted() { this.$refs.input.focus() }, } ) await nextTick() const popperEl = document.querySelector('.el-picker__popper') const attr = popperEl.getAttribute('aria-hidden') expect(attr).toEqual('false') }) it('custom content', async () => { const wrapper = _mount( ` `, () => ({ value: '' }), { mounted() { this.$refs.input.focus() }, } ) await nextTick() const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() { ;(document.querySelector('td.available .cell') as HTMLElement).click() } input.trigger('focus') await nextTick() expect( document.querySelector('td.available .cell').classList.contains('current') ).toBeTruthy() }) it('custom content comment', async () => { _mount( ` `, () => ({ value: '' }), { mounted() { this.$refs.input.focus() }, } ) await nextTick() const el = document.querySelector('td.available .el-date-table-cell') const text = el.textContent expect(text.includes('csw')).toBeFalsy() }) it('custom content value validate', async () => { _mount( ` `, () => ({ value: '' }), { mounted() { this.$refs.input.focus() }, } ) await nextTick() const el = document.querySelector('td.available .cell') const text = el.textContent expect(text.includes('csw')).toBeTruthy() }) describe('value-format', () => { it('with literal string', async () => { const day = dayjs() const format = 'YYYY-MM-DD' const valueFormat = '[Element-Plus] DD/MM YYYY' const value = day.format(valueFormat) const wrapper = _mount( ` `, () => { return { value, } }, { methods: { changeValue() { this.value = '[Element-Plus] 31/05 2021' }, }, } ) const vm = wrapper.vm as any const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() { ;(document.querySelector('td.available') as HTMLElement).click() } await nextTick() expect(vm.value).toBe( dayjs( `[Element-Plus] 01/${`0${day.month() + 1}`.slice(-2)} ${day.year()}`, valueFormat ).format(valueFormat) ) wrapper.find('button').trigger('click') await nextTick() expect(wrapper.findComponent(Input).vm.modelValue).toBe('2021-05-31') }) }) }) describe('DatePicker Navigation', () => { let prevMonth, prevYear, nextMonth, nextYear, getYearLabel, getMonthLabel const initNavigationTest = async (value) => { const wrapper = _mount( ``, () => ({ value }) ) const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() prevMonth = document.querySelector('button.arrow-left') prevYear = document.querySelector('button.d-arrow-left') nextMonth = document.querySelector('button.arrow-right') nextYear = document.querySelector('button.d-arrow-right') getYearLabel = () => document.querySelectorAll('.el-date-picker__header-label')[0].textContent getMonthLabel = () => document.querySelectorAll('.el-date-picker__header-label')[1].textContent } it('month, year', async () => { await initNavigationTest(new Date(2000, 0, 1)) expect(getYearLabel()).toContain('2000') expect(getMonthLabel()).toContain('January') prevMonth.click() await nextTick() expect(getYearLabel()).toContain('1999') expect(getMonthLabel()).toContain('December') prevYear.click() await nextTick() expect(getYearLabel()).toContain('1998') expect(getMonthLabel()).toContain('December') nextMonth.click() await nextTick() expect(getYearLabel()).toContain('1999') expect(getMonthLabel()).toContain('January') nextYear.click() await nextTick() expect(getYearLabel()).toContain('2000') expect(getMonthLabel()).toContain('January') }) it('month with fewer dates', async () => { // July has 31 days, June has 30 await initNavigationTest(new Date(2000, 6, 31)) prevMonth.click() await nextTick() expect(getYearLabel()).toContain('2000') expect(getMonthLabel()).toContain('June') }) it('year with fewer Feburary dates', async () => { // Feburary 2008 has 29 days, Feburary 2007 has 28 await initNavigationTest(new Date(2008, 1, 29)) prevYear.click() await nextTick() expect(getYearLabel()).toContain('2007') expect(getMonthLabel()).toContain('February') }) it('month label with fewer dates', async () => { await initNavigationTest(new Date(2000, 6, 31)) const yearLabel = document.querySelectorAll( '.el-date-picker__header-label' )[0] ;(yearLabel as HTMLElement).click() await nextTick() const year1999Label = document.querySelectorAll('.el-year-table td a')[1] ;(year1999Label as HTMLElement).click() await nextTick() const juneLabel = document.querySelectorAll('.el-month-table td a')[5] ;(juneLabel as HTMLElement).click() await nextTick() expect(getYearLabel()).toContain('2001') expect(getMonthLabel()).toContain('June') const monthLabel = document.querySelectorAll( '.el-date-picker__header-label' )[1] ;(monthLabel as HTMLElement).click() await nextTick() const janLabel = document.querySelectorAll('.el-month-table td a')[0] ;(janLabel as HTMLElement).click() await nextTick() expect(getYearLabel()).toContain('2001') expect(getMonthLabel()).toContain('January') }) }) describe('MonthPicker', () => { it('basic', async () => { const wrapper = _mount( ``, () => ({ value: new Date(2020, 7, 1) }) ) const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() expect( (document.querySelector('.el-month-table') as HTMLElement).style.display ).toBe('') expect(document.querySelector('.el-year-table')).toBeNull() ;(document.querySelector('.el-month-table a.cell') as HTMLElement).click() await nextTick() const vm = wrapper.vm as any expect(vm.value.getMonth()).toBe(0) }) it('value-format', async () => { const valueFormat = '[Element-Plus] YYYY.MM' const wrapper = _mount( ` `, () => ({ value: dayjs(new Date(2020, 7, 1)).format(valueFormat) }) ) await nextTick() expect(wrapper.findComponent(Input).vm.modelValue).toBe('2020-08') const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() { ;(document.querySelector('.el-month-table a.cell') as HTMLElement).click() } await nextTick() expect(wrapper.findComponent(Input).vm.modelValue).toBe('2020-01') expect((wrapper.vm as any).value).toBe( dayjs(new Date(2020, 0, 1)).format(valueFormat) ) }) }) describe('YearPicker', () => { it('basic', async () => { const wrapper = _mount( ``, () => ({ value: new Date(2020, 7, 1) }) ) const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() expect( (document.querySelector('.el-year-table') as HTMLElement).style.display ).toBe('') expect(document.querySelector('.el-month-table')).toBeNull() const leftBtn = document.querySelector('.d-arrow-left') as HTMLElement const rightBtn = document.querySelector('.d-arrow-right') as HTMLElement let count = 2 while (--count) { leftBtn.click() } count = 3 while (--count) { rightBtn.click() } await nextTick() ;(document.querySelector('.el-year-table a.cell') as HTMLElement).click() await nextTick() const vm = wrapper.vm as any expect(vm.value.getFullYear()).toBe(2030) }) it('value-format', async () => { const valueFormat = '[Element-Plus] YYYY' const wrapper = _mount( ` `, () => ({ value: dayjs(new Date(2005, 7, 1)).format(valueFormat) }) ) await nextTick() expect(wrapper.findComponent(Input).vm.modelValue).toBe('2005') const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() const cell = document.querySelector('.el-year-table a.cell') as HTMLElement cell.click() await nextTick() expect((wrapper.vm as any).value).toBe( dayjs(new Date(Number.parseInt(cell.innerHTML.trim()), 0, 1)).format( valueFormat ) ) }) }) describe('WeekPicker', () => { it('create', async () => { const wrapper = _mount( ``, () => ({ value: new Date(2020, 7, 15) }) ) const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() expect(document.querySelector('.is-week-mode')).not.toBeNull() // select month still is in week-mode ;( document.querySelectorAll( '.el-date-picker__header-label' )[1] as HTMLElement ).click() await nextTick() ;( document.querySelectorAll('.el-month-table .cell')[7] as HTMLElement ).click() await nextTick() expect(document.querySelector('.is-week-mode')).not.toBeNull() const numberOfHighlightRows = () => document.querySelectorAll('.el-date-table__row.current').length ;( document.querySelector( '.el-date-table__row ~ .el-date-table__row td.available' ) as HTMLElement ).click() await nextTick() const vm = wrapper.vm as any expect(vm.value).not.toBeNull() input.trigger('blur') input.trigger('focus') await nextTick() expect(numberOfHighlightRows()).toBe(1) // test: next month should not have highlight ;(document.querySelector('.arrow-right') as HTMLElement).click() await nextTick() expect(numberOfHighlightRows()).toBe(0) // test: next year should not have highlight ;(document.querySelector('.arrow-left') as HTMLElement).click() await nextTick() ;(document.querySelector('.d-arrow-right') as HTMLElement).click() await nextTick() expect(numberOfHighlightRows()).toBe(0) }) ;[ { locale: zhCn, name: 'Monday', value: 1 }, { locale: enUs, name: 'Sunday', value: 0 }, ].forEach((loObj) => { it(`emit first day of the week, ${loObj.locale.name} locale, ${loObj.name}`, async () => { const wrapper = mount( { components: { 'el-date-picker': DatePicker, 'el-config-provider': ConfigProvider, }, template: ` `, data() { return { locale: loObj.locale, value: '', } }, }, { attachTo: 'body', } ) const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() // click Wednesday ;( document.querySelectorAll( '.el-date-table__row ~ .el-date-table__row td' )[3] as HTMLElement ).click() await nextTick() const vm = wrapper.vm as any expect(vm.value).not.toBeNull() expect(+dayjs(vm.value).locale(loObj.locale.name)).toBe( +dayjs(vm.value).locale(loObj.locale.name).startOf('week') ) expect(dayjs(vm.value).locale(loObj.locale.name).day()).toBe(loObj.value) // Sunday or Monday }) }) }) describe('DatePicker dates', () => { it('create', async () => { const wrapper = _mount( ``, () => ({ value: '' }) ) const input = wrapper.find('input') input.trigger('blur') input.trigger('focus') await nextTick() const td = document.querySelectorAll( '.el-date-table__row .available' ) as NodeListOf const vm = wrapper.vm as any td[0].click() await nextTick() expect(vm.value.length).toBe(1) td[1].click() await nextTick() expect(vm.value.length).toBe(2) expect( document.querySelectorAll('.el-date-table__row .selected').length ).toBe(2) td[0].click() await nextTick() expect(vm.value.length).toBe(1) td[1].click() await nextTick() expect(vm.value.length).toBe(0) }) }) describe('DatePicker keyboard events', () => { it('enter', async () => { const wrapper = _mount( ``, () => ({ value: '' }) ) const input = wrapper.find('.el-input__inner') await input.trigger('focus') await input.trigger('click') await nextTick() const popperEl = document.querySelectorAll('.el-picker__popper')[0] const attr = popperEl.getAttribute('aria-hidden') expect(attr).toEqual('false') await input.trigger('keydown', { code: EVENT_CODE.enter, }) const popperEl2 = document.querySelectorAll('.el-picker__popper')[0] const attr2 = popperEl2.getAttribute('aria-hidden') expect(attr2).toEqual('true') }) it('numpadEnter', async () => { const wrapper = _mount( ``, () => ({ value: '' }) ) const input = wrapper.find('.el-input__inner') await input.trigger('focus') await input.trigger('click') await nextTick() const popperEl = document.querySelectorAll('.el-picker__popper')[0] const attr = popperEl.getAttribute('aria-hidden') expect(attr).toEqual('false') await input.trigger('keydown', { code: EVENT_CODE.numpadEnter, }) const popperEl2 = document.querySelectorAll('.el-picker__popper')[0] const attr2 = popperEl2.getAttribute('aria-hidden') expect(attr2).toEqual('true') }) }) describe('DateRangePicker', () => { it('create', async () => { let calendarChangeValue = null const changeHandler = jest.fn() const wrapper = _mount( ``, () => ({ value: '' }), { methods: { onCalendarChange(e) { calendarChangeValue = e changeHandler(e) }, }, } ) const inputs = wrapper.findAll('input') inputs[0].trigger('blur') inputs[0].trigger('focus') await nextTick() const panels = document.querySelectorAll('.el-date-range-picker__content') expect(panels.length).toBe(2) ;(panels[0].querySelector('td.available') as HTMLElement).click() await nextTick() ;(panels[1].querySelector('td.available') as HTMLElement).click() await nextTick() inputs[0].trigger('blur') inputs[0].trigger('focus') await nextTick() // correct highlight const startDate = document.querySelectorAll('.start-date') const endDate = document.querySelectorAll('.end-date') const inRangeDate = document.querySelectorAll('.in-range') expect(startDate.length).toBe(1) expect(endDate.length).toBe(1) expect(inRangeDate.length).toBeGreaterThan(28) // value is array const vm = wrapper.vm as any expect(Array.isArray(vm.value)).toBeTruthy() // input text is something like date string expect(inputs[0].element.value.length).toBe(10) expect(inputs[1].element.value.length).toBe(10) // calendar-change event expect(changeHandler).toHaveBeenCalledTimes(2) expect(calendarChangeValue.length).toBe(2) expect(calendarChangeValue[0]).toBeInstanceOf(Date) expect(calendarChangeValue[1]).toBeInstanceOf(Date) }) it('reverse selection', async () => { const wrapper = _mount( ``, () => ({ value: '' }) ) const inputs = wrapper.findAll('input') inputs[0].trigger('blur') inputs[0].trigger('focus') await nextTick() const panels = document.querySelectorAll('.el-date-range-picker__content') ;(panels[1].querySelector('td.available') as HTMLElement).click() await nextTick() ;(panels[0].querySelector('td.available') as HTMLElement).click() await nextTick() inputs[0].trigger('blur') inputs[0].trigger('focus') await nextTick() // correct highlight const startDate = document.querySelectorAll('.start-date') const endDate = document.querySelectorAll('.end-date') const inRangeDate = document.querySelectorAll('.in-range') expect(startDate.length).toBe(1) expect(endDate.length).toBe(1) expect(inRangeDate.length).toBeGreaterThan(28) const vm = wrapper.vm as any expect(vm.value[0].getTime() < vm.value[1].getTime()).toBeTruthy() }) it('reset selection', async () => { const wrapper = _mount( ``, () => ({ value: '' }) ) const inputs = wrapper.findAll('input') inputs[0].trigger('blur') inputs[0].trigger('focus') await nextTick() const panels = document.querySelectorAll('.el-date-range-picker__content') ;(panels[1].querySelector('td.available') as HTMLElement).click() await nextTick() ;(panels[0].querySelector('td.available') as HTMLElement).click() await nextTick() ;(wrapper.vm as any).value = '' inputs[0].trigger('blur') inputs[0].trigger('focus') await nextTick() const inRangeDate = document.querySelectorAll('.in-range') expect(inRangeDate.length).toBe(0) }) it('range, start-date and end-date', async () => { _mount( ``, () => ({ value: '' }) ) const table = document.querySelector('.el-date-table') const availableTds = (table as HTMLTableElement).querySelectorAll( 'td.available' ) ;(availableTds[0] as HTMLElement).click() await nextTick() ;(availableTds[1] as HTMLElement).click() await nextTick() expect(availableTds[0].classList.contains('in-range')).toBeTruthy() expect(availableTds[0].classList.contains('start-date')).toBeTruthy() expect(availableTds[1].classList.contains('in-range')).toBeTruthy() expect(availableTds[1].classList.contains('end-date')).toBeTruthy() ;(availableTds[1] as HTMLElement).click() await nextTick() ;(availableTds[0] as HTMLElement).click() await nextTick() expect(availableTds[0].classList.contains('in-range')).toBeTruthy() expect(availableTds[0].classList.contains('start-date')).toBeTruthy() expect(availableTds[1].classList.contains('in-range')).toBeTruthy() expect(availableTds[1].classList.contains('end-date')).toBeTruthy() const startDate = document.querySelectorAll('.start-date') const endDate = document.querySelectorAll('.end-date') const inRangeDate = document.querySelectorAll('.in-range') expect(startDate.length).toBe(1) expect(endDate.length).toBe(1) expect(inRangeDate.length).toBe(2) }) it('unlink:true', async () => { const wrapper = _mount( ``, () => ({ value: [new Date(2000, 9, 1), new Date(2000, 11, 2)] }) ) const inputs = wrapper.findAll('input') inputs[0].trigger('blur') inputs[0].trigger('focus') await nextTick() const panels = document.querySelectorAll('.el-date-range-picker__content') const left = panels[0].querySelector('.el-date-range-picker__header') const right = panels[1].querySelector( '.is-right .el-date-range-picker__header' ) expect(left.textContent).toBe('2000 October') expect(right.textContent).toBe('2000 December') ;(panels[1].querySelector('.d-arrow-right') as HTMLElement).click() await nextTick() ;(panels[1].querySelector('.arrow-right') as HTMLElement).click() await nextTick() expect(left.textContent).toBe('2000 October') expect(right.textContent).toBe('2002 January') }) it('daylight saving time highlight', async () => { // Run test with environment variable TZ=Australia/Sydney // The following test uses Australian Eastern Daylight Time (AEDT) // AEST -> AEDT shift happened on 2016-10-02 02:00:00 const wrapper = _mount( ``, () => ({ value: [new Date(2016, 9, 1), new Date(2016, 9, 3)] }) ) const inputs = wrapper.findAll('input') inputs[0].trigger('blur') inputs[0].trigger('focus') await nextTick() const startDate = document.querySelectorAll('.start-date') const endDate = document.querySelectorAll('.end-date') expect(startDate.length).toBe(1) expect(endDate.length).toBe(1) }) it('value-format', async () => { const valueFormat = 'DD/MM YYYY' const wrapper = _mount( ` `, () => ({ value: [ dayjs(new Date(2021, 4, 2)).format(valueFormat), dayjs(new Date(2021, 4, 12)).format(valueFormat), ], }) ) await nextTick() const [startInput, endInput] = wrapper.findAll('input') expect(startInput.element.value).toBe('2021-05-02') expect(endInput.element.value).toBe('2021-05-12') startInput.trigger('blur') startInput.trigger('focus') await nextTick() const panels = document.querySelectorAll('.el-date-range-picker__content') expect(panels.length).toBe(2) ;(panels[0].querySelector('td.available') as HTMLElement).click() await nextTick() ;(panels[1].querySelector('td.available') as HTMLElement).click() await nextTick() expect((wrapper.vm as any).value.toString()).toBe( ['01/05 2021', '01/06 2021'].toString() ) }) }) describe('MonthRange', () => { it('works', async () => { const wrapper = _mount( ``, () => ({ value: '' }) ) const inputs = wrapper.findAll('input') inputs[0].trigger('blur') inputs[0].trigger('focus') await nextTick() const panels = document.querySelectorAll('.el-date-range-picker__content') expect(panels.length).toBe(2) const p0 = panels[0].querySelector('td:not(.disabled)') p0.click() await nextTick() const p1 = panels[1].querySelector('td:not(.disabled)') p1.click() await nextTick() inputs[0].trigger('blur') inputs[0].trigger('focus') // correct highlight const startDate = document.querySelectorAll('.start-date') const endDate = document.querySelectorAll('.end-date') const inRangeDate = document.querySelectorAll('.in-range') expect(startDate.length).toBe(1) expect(endDate.length).toBe(1) expect(inRangeDate.length).toBeGreaterThan(0) // value is array const vm = wrapper.vm as any expect(Array.isArray(vm.value)).toBeTruthy() // input text is something like date string expect(inputs[0].element.value.length).toBe(7) expect(inputs[1].element.value.length).toBe(7) // reverse selection p1.click() await nextTick() p0.click() await nextTick() expect(vm.value[0].getTime() < vm.value[1].getTime()).toBeTruthy() }) it('range, start-date and end-date', async () => { _mount( ``, () => ({ value: '' }) ) const table = document.querySelector('.el-month-table') const tds = (table as HTMLTableElement).querySelectorAll('td') ;(tds[0] as HTMLElement).click() await nextTick() ;(tds[1] as HTMLElement).click() await nextTick() expect(tds[0].classList.contains('in-range')).toBeTruthy() expect(tds[0].classList.contains('start-date')).toBeTruthy() expect(tds[1].classList.contains('in-range')).toBeTruthy() expect(tds[1].classList.contains('end-date')).toBeTruthy() ;(tds[1] as HTMLElement).click() await nextTick() ;(tds[0] as HTMLElement).click() await nextTick() expect(tds[0].classList.contains('in-range')).toBeTruthy() expect(tds[0].classList.contains('start-date')).toBeTruthy() expect(tds[1].classList.contains('in-range')).toBeTruthy() expect(tds[1].classList.contains('end-date')).toBeTruthy() const startDate = document.querySelectorAll('.start-date') const endDate = document.querySelectorAll('.end-date') const inRangeDate = document.querySelectorAll('.in-range') expect(startDate.length).toBe(1) expect(endDate.length).toBe(1) expect(inRangeDate.length).toBe(2) }) it('type:monthrange unlink:true', async () => { const wrapper = _mount( ``, () => ({ value: [new Date(2000, 9), new Date(2002, 11)] }) ) const inputs = wrapper.findAll('input') inputs[0].trigger('blur') inputs[0].trigger('focus') await nextTick() const panels = document.querySelectorAll('.el-date-range-picker__content') const left = panels[0].querySelector('.el-date-range-picker__header') const right = panels[1].querySelector( '.is-right .el-date-range-picker__header' ) expect(left.textContent).toContain(2000) expect(right.textContent).toContain(2002) ;(panels[1].querySelector('.d-arrow-right') as HTMLElement).click() await nextTick() expect(left.textContent).toContain(2000) expect(right.textContent).toContain(2003) }) it('daylight saving time highlight', async () => { const wrapper = _mount( ``, () => ({ value: [new Date(2016, 6), new Date(2016, 12)] }) ) const inputs = wrapper.findAll('input') inputs[0].trigger('blur') inputs[0].trigger('focus') await nextTick() const startDate = document.querySelectorAll('.start-date') const endDate = document.querySelectorAll('.end-date') expect(startDate.length).toBe(1) expect(endDate.length).toBe(1) }) it('should accept popper options and pass down', async () => { const ElPopperOptions = { strategy: 'fixed', } const wrapper = _mount( ``, () => ({ value: [new Date(2016, 6), new Date(2016, 12)], options: ElPopperOptions, }), { provide() { return { ElPopperOptions, } }, } ) await nextTick() expect( (wrapper.findComponent(CommonPicker).vm as any).elPopperOptions ).toEqual(ElPopperOptions) }) })