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

184 lines
5.8 KiB
JavaScript
Raw Normal View History

import React from 'react';
import { mount } from 'enzyme';
2017-12-19 16:06:19 +08:00
import moment from 'moment';
import MockDate from 'mockdate';
import DatePicker from '..';
import focusTest from '../../../tests/shared/focusTest';
describe('DatePicker', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
focusTest(DatePicker, { refFocus: true });
beforeEach(() => {
MockDate.set(moment('2016-11-22').valueOf());
});
afterEach(() => {
MockDate.reset();
errorSpy.mockReset();
});
afterAll(() => {
errorSpy.mockRestore();
});
it('prop locale should works', () => {
const locale = {
lang: {
feat: New Picker (#20023) * init generate * basic style * basic panel style * update mode panel style * update style * generate More picker * default clear icon * chore: Update separator type * feat: Add ranged start & end className * update range style * Add transition effect * support size config * adjust range style * chore: Auto fill time by showTime * auto set time by format * update disabled style * update seperator style * ranges style * support extra footer style * remove useless test case part is not usable anymore part is already tested in rc-picker * init calendar * all demos * fix calendar basic test * fix time-picker test case * update snapshot * fix tooltip test case & lint * fix locale & style lint * fix compile * fix style * fix style lint * fix calendar style * update rc-picker version * adjust style * move picker placeholder into locale file * update snapshot * add hover style * update picker version * fix icon position & style * update picker version * update deps for pading * fix: align of suffix * feat: Year & Month support range effect * adjust range style to support up-down placement * update rc-picker * update range picker style * adjust extra footer line style * update snapshot * fix: Locale error * fix: style lint * fix: add missing button style deps * update test case * fix firefox additional white line style issue * rollback demo * fix ff additional blue color * docs: Remove placeholder in demo * rangepicker ranges is tag now * connect start / end background color with picker range * update deps * update deps for fixing blur text issue * hide start-end demo * range hover style update * hover range with ranged value * black magic of inner hover style * hover style of range adjust * fix css select miss hit on DatePicker * remove one eslint rule * fade range hovered color * week should alway not show the cell selection * update style of selection * update snapshot * fix style * add margin back * update rc-picker deps * update date & time picker & form style * fix disabled demo & update form style * update docs about allowEmpty * hide arrow in time range picker * add hover & focused style * fix lint * fix style & update snapshot * raise disabled selector proirity * fix disabled today border color * extra footer provides an bottom line * time picker hover support transition background * add padding style * fix Firefox not correct calculate inline-flex * fix style * fix week picker missing today border color * rm useless padding * Force padding to 0 * test coverage * dedup eslint rule * adjust logic to imporve coverage * fix render cell logic
2019-12-11 23:32:19 +08:00
locale: 'mk',
placeholder: 'Избери дата',
2018-12-07 20:02:01 +08:00
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: 'Избор на час',
},
};
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} />);
expect(wrapper.render()).toMatchSnapshot();
});
2018-11-25 02:30:54 +08:00
it('disabled date', () => {
function disabledDate(current) {
return current && current < moment().endOf('day');
}
feat: New Picker (#20023) * init generate * basic style * basic panel style * update mode panel style * update style * generate More picker * default clear icon * chore: Update separator type * feat: Add ranged start & end className * update range style * Add transition effect * support size config * adjust range style * chore: Auto fill time by showTime * auto set time by format * update disabled style * update seperator style * ranges style * support extra footer style * remove useless test case part is not usable anymore part is already tested in rc-picker * init calendar * all demos * fix calendar basic test * fix time-picker test case * update snapshot * fix tooltip test case & lint * fix locale & style lint * fix compile * fix style * fix style lint * fix calendar style * update rc-picker version * adjust style * move picker placeholder into locale file * update snapshot * add hover style * update picker version * fix icon position & style * update picker version * update deps for pading * fix: align of suffix * feat: Year & Month support range effect * adjust range style to support up-down placement * update rc-picker * update range picker style * adjust extra footer line style * update snapshot * fix: Locale error * fix: style lint * fix: add missing button style deps * update test case * fix firefox additional white line style issue * rollback demo * fix ff additional blue color * docs: Remove placeholder in demo * rangepicker ranges is tag now * connect start / end background color with picker range * update deps * update deps for fixing blur text issue * hide start-end demo * range hover style update * hover range with ranged value * black magic of inner hover style * hover style of range adjust * fix css select miss hit on DatePicker * remove one eslint rule * fade range hovered color * week should alway not show the cell selection * update style of selection * update snapshot * fix style * add margin back * update rc-picker deps * update date & time picker & form style * fix disabled demo & update form style * update docs about allowEmpty * hide arrow in time range picker * add hover & focused style * fix lint * fix style & update snapshot * raise disabled selector proirity * fix disabled today border color * extra footer provides an bottom line * time picker hover support transition background * add padding style * fix Firefox not correct calculate inline-flex * fix style * fix week picker missing today border color * rm useless padding * Force padding to 0 * test coverage * dedup eslint rule * adjust logic to imporve coverage * fix render cell logic
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();
});
it('placeholder', () => {
const wrapper = mount(<DatePicker placeholder={undefined} />);
expect(wrapper.find('input').props().placeholder).toEqual('Select date');
});
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);
});
});