ant-design-vue/components/date-picker/__tests__/DatePicker.test.js

192 lines
5.0 KiB
JavaScript
Raw Normal View History

2018-06-09 05:14:14 +00:00
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import moment from 'moment'
import MockDate from 'mockdate'
import DatePicker from '..'
import {
selectDateFromBody,
openPanel,
clearInput,
nextYear,
nextMonth,
hasSelected,
$$,
} from './utils'
import focusTest from '../../../tests/shared/focusTest'
describe('DatePicker', () => {
focusTest(DatePicker)
beforeEach(() => {
document.body.outerHTML = ''
MockDate.set(moment('2016-11-22'))
})
afterEach(() => {
MockDate.reset()
})
it('prop locale should works', async () => {
const locale = {
lang: {
placeholder: 'Избери дата',
rangePlaceholder: [
'Начална дата',
'Крайна дата',
],
today: 'Днес',
now: 'Сега',
backToToday: 'Към днес',
ok: 'Добре',
clear: 'Изчистване',
month: 'Месец',
year: 'Година',
timeSelect: 'Избор на час',
dateSelect: 'Избор на дата',
monthSelect: 'Избор на месец',
yearSelect: 'Избор на година',
decadeSelect: 'Десетилетие',
previousMonth: 'Предишен месец (PageUp)',
nextMonth: 'Следващ месец (PageDown)',
previousYear: 'Последна година (Control + left)',
nextYear: 'Следваща година (Control + right)',
previousDecade: 'Предишно десетилетие',
nextDecade: 'Следващо десетилетие',
previousCentury: 'Последен век',
nextCentury: 'Следващ век',
yearFormat: 'YYYY',
dateFormat: 'D M YYYY',
dayFormat: 'D',
dateTimeFormat: 'D M YYYY HH:mm:ss',
monthBeforeYear: true,
},
timePickerLocale: {
placeholder: 'Избор на час',
},
}
const birthday = moment('2000-01-01', 'YYYY-MM-DD')
const wrapper = mount({
render () {
return <DatePicker open locale={locale} value={birthday} />
},
})
await asyncExpect(() => {
expect(wrapper.html()).toMatchSnapshot()
})
})
// Fix https://github.com/ant-design/ant-design/issues/8885
it('control value after panel closed', async () => {
const Test = {
data () {
return {
cleared: false,
value: moment(),
}
},
methods: {
onChange (value) {
let cleared = this.cleared
if (cleared) {
value = moment(moment(value).format('YYYY-MM-DD 12:12:12'))
cleared = false
}
if (!value) {
cleared = true
}
this.value = value
this.cleared = cleared
},
},
render () {
return (
<DatePicker
showTime
value={this.value}
format='YYYY-MM-DD HH:mm:ss'
onChange={this.onChange}
/>
)
},
}
const wrapper = mount(Test, { sync: false, attachToDocument: true })
await asyncExpect(() => {
// clear input
clearInput(wrapper)
})
await asyncExpect(() => {
openPanel(wrapper)
})
await asyncExpect(() => {
selectDateFromBody(moment('2016-11-13'))
}, 0)
await asyncExpect(() => {
expect($$('.ant-calendar-input')[0].value).toBe('2016-11-13 12:12:12')
})
await asyncExpect(() => {
selectDateFromBody(moment('2016-11-14'))
})
await asyncExpect(() => {
expect($$('.ant-calendar-input')[0].value).toBe('2016-11-14 12:12:12')
})
await asyncExpect(() => {
})
})
it('triggers onChange only when date was selected', async () => {
const handleChange = jest.fn()
const wrapper = mount({
render () {
return <DatePicker onChange={handleChange} />
},
}, { sync: false, attachToDocument: true })
await asyncExpect(() => {
openPanel(wrapper)
})
await asyncExpect(() => {
nextYear()
}, 0)
await asyncExpect(() => {
expect(handleChange).not.toBeCalled()
})
await asyncExpect(() => {
nextMonth()
})
await asyncExpect(() => {
expect(handleChange).not.toBeCalled()
})
await asyncExpect(() => {
selectDateFromBody(moment('2017-12-22'))
})
await asyncExpect(() => {
expect(handleChange).toBeCalled()
})
await asyncExpect(() => {
})
})
it('clear input', async () => {
const wrapper = mount(DatePicker, { sync: false, attachToDocument: true })
await asyncExpect(() => {
openPanel(wrapper)
})
await asyncExpect(() => {
selectDateFromBody(moment('2016-11-23'))
}, 0)
await asyncExpect(() => {
clearInput(wrapper)
2018-07-03 02:24:17 +00:00
}, 0)
2018-06-09 05:14:14 +00:00
await asyncExpect(() => {
openPanel(wrapper)
2018-07-03 02:24:17 +00:00
}, 0)
2018-06-09 05:14:14 +00:00
await asyncExpect(() => {
expect(hasSelected(wrapper, moment('2016-11-22'))).toBe(true)
}, 0)
})
})