2017-12-17 17:11:54 +08:00
|
|
|
|
import React from 'react';
|
|
|
|
|
import { mount } from 'enzyme';
|
2017-12-19 16:06:19 +08:00
|
|
|
|
import moment from 'moment';
|
|
|
|
|
import MockDate from 'mockdate';
|
2017-11-30 09:54:31 +08:00
|
|
|
|
import DatePicker from '..';
|
|
|
|
|
import focusTest from '../../../tests/shared/focusTest';
|
|
|
|
|
|
|
|
|
|
describe('DatePicker', () => {
|
2019-04-08 11:41:31 +08:00
|
|
|
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
|
|
|
|
|
2020-04-22 15:58:57 +08:00
|
|
|
|
focusTest(DatePicker, { refFocus: true });
|
2017-12-17 17:11:54 +08:00
|
|
|
|
|
2018-02-01 16:12:42 +08:00
|
|
|
|
beforeEach(() => {
|
2020-05-21 23:27:02 +08:00
|
|
|
|
MockDate.set(moment('2016-11-22').valueOf());
|
2018-02-01 16:12:42 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
|
MockDate.reset();
|
2019-04-08 11:41:31 +08:00
|
|
|
|
errorSpy.mockReset();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
afterAll(() => {
|
|
|
|
|
errorSpy.mockRestore();
|
2018-02-01 16:12:42 +08:00
|
|
|
|
});
|
|
|
|
|
|
2017-12-17 17:11:54 +08:00
|
|
|
|
it('prop locale should works', () => {
|
|
|
|
|
const locale = {
|
|
|
|
|
lang: {
|
2019-12-11 23:32:19 +08:00
|
|
|
|
locale: 'mk',
|
2017-12-17 17:11:54 +08:00
|
|
|
|
placeholder: 'Избери дата',
|
2018-12-07 20:02:01 +08:00
|
|
|
|
rangePlaceholder: ['Начална дата', 'Крайна дата'],
|
2017-12-17 17:11:54 +08:00
|
|
|
|
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: 'Избор на час',
|
|
|
|
|
},
|
|
|
|
|
};
|
2017-12-19 16:06:19 +08:00
|
|
|
|
const birthday = moment('2000-01-01', 'YYYY-MM-DD');
|
2018-12-07 20:02:01 +08:00
|
|
|
|
const wrapper = mount(<DatePicker open locale={locale} value={birthday} />);
|
2017-12-17 17:11:54 +08:00
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
2018-02-01 16:12:42 +08:00
|
|
|
|
});
|
|
|
|
|
|
2018-11-25 02:30:54 +08:00
|
|
|
|
it('disabled date', () => {
|
|
|
|
|
function disabledDate(current) {
|
|
|
|
|
return current && current < moment().endOf('day');
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-11 23:32:19 +08:00
|
|
|
|
const wrapper = mount(<DatePicker disabledDate={disabledDate} open />);
|
2018-11-25 02:30:54 +08:00
|
|
|
|
|
|
|
|
|
expect(wrapper.render()).toMatchSnapshot();
|
|
|
|
|
});
|
2020-05-02 21:55:23 +08:00
|
|
|
|
|
|
|
|
|
it('placeholder', () => {
|
|
|
|
|
const wrapper = mount(<DatePicker placeholder={undefined} />);
|
|
|
|
|
expect(wrapper.find('input').props().placeholder).toEqual('Select date');
|
|
|
|
|
});
|
2020-08-24 10:09:57 +08:00
|
|
|
|
|
|
|
|
|
it('showTime={{ showHour: true, showMinute: true }}', () => {
|
|
|
|
|
const wrapper = mount(
|
|
|
|
|
<DatePicker
|
|
|
|
|
defaultValue={moment()}
|
|
|
|
|
showTime={{ showHour: true, showMinute: true }}
|
|
|
|
|
format="YYYY-MM-DD"
|
|
|
|
|
open
|
|
|
|
|
/>,
|
|
|
|
|
);
|
|
|
|
|
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(24);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(60);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('showTime={{ showHour: true, showSecond: true }}', () => {
|
|
|
|
|
const wrapper = mount(
|
|
|
|
|
<DatePicker
|
|
|
|
|
defaultValue={moment()}
|
|
|
|
|
showTime={{ showHour: true, showSecond: true }}
|
|
|
|
|
format="YYYY-MM-DD"
|
|
|
|
|
open
|
|
|
|
|
/>,
|
|
|
|
|
);
|
|
|
|
|
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(24);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(60);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('showTime={{ showMinute: true, showSecond: true }}', () => {
|
|
|
|
|
const wrapper = mount(
|
|
|
|
|
<DatePicker
|
|
|
|
|
defaultValue={moment()}
|
|
|
|
|
showTime={{ showMinute: true, showSecond: true }}
|
|
|
|
|
format="YYYY-MM-DD"
|
|
|
|
|
open
|
|
|
|
|
/>,
|
|
|
|
|
);
|
|
|
|
|
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(60);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(60);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('12 hours', () => {
|
|
|
|
|
const wrapper = mount(
|
|
|
|
|
<DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
|
|
|
|
|
);
|
|
|
|
|
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(4);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(12);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(60);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(60);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(3).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(2);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('24 hours', () => {
|
|
|
|
|
const wrapper = mount(
|
|
|
|
|
<DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
|
|
|
|
|
);
|
|
|
|
|
expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(3);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(24);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(60);
|
|
|
|
|
expect(
|
|
|
|
|
wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell')
|
|
|
|
|
.length,
|
|
|
|
|
).toBe(60);
|
|
|
|
|
});
|
2017-11-30 09:54:31 +08:00
|
|
|
|
});
|