RedHatTraining/react-datetime.git - Gitblit

RedHatTraining / react-datetime

view | history | commit | commitdiff

Open calendar when clicking on input element

Simon Egersand

2017-11-05 f37c3f9af02c1528b41087125ea63791393222a4

commit \| author \| age
7f7ed5	1	/* global it, xit, describe, expect, jasmine, done, jest */
25757d	2
SE	3	import React from 'react'; // eslint-disable-line no-unused-vars
290be5	4	import moment from 'moment';
SE	5	import utils from './testUtils';
7f7ed5	6	import Enzyme from 'enzyme';
SE	7	import Adapter from 'enzyme-adapter-react-15';
	8
	9	Enzyme.configure({ adapter: new Adapter() });
290be5	10
SE	11	describe('Datetime', () => {
	12	it('create component', () => {
	13	const component = utils.createDatetime({});
	14
	15	expect(component).toBeDefined();
	16	expect(component.find('.rdt > .form-control').length).toEqual(1);
	17	expect(component.find('.rdt > .rdtPicker').length).toEqual(1);
25757d	18	});
SE	19
	20	it('viewMode=days: renders days, week days, month, year', () => {
	21	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	22	component = utils.createDatetime({ viewMode: 'days', defaultValue: date });
	23	utils.openDatepicker(component);
	24
	25	// Month and year
	26	expect(component.find('.rdtSwitch').text()).toEqual('January 2000');
	27
	28	// Week days
	29	const expectedWeekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
	30	actualWeekdays = component.find('.rdtDays .dow').map((element) =>
	31	element.text()
	32	);
	33	expect(actualWeekdays).toEqual(expectedWeekDays);
	34
	35	// Dates
	36	// "Old" dates belonging to prev month
	37	const oldDatesIndexes = [0, 1, 2, 3, 4, 5];
	38	oldDatesIndexes.forEach((index) => {
	39	expect(utils.getNthDay(component, index).hasClass('rdtOld')).toBeTruthy();
	40	});
	41
	42	// Dates belonging to current month
	43	for (let i = 6; i < 37; i++) {
	44	expect(utils.getNthDay(component, i).hasClass('rdtDay')).toBeTruthy();
	45	expect(utils.getNthDay(component, i).hasClass('rdtOld')).toBeFalsy();
	46	expect(utils.getNthDay(component, i).hasClass('rdtNew')).toBeFalsy();
	47	}
	48
	49	// "New" dates belonging to next month
	50	const nextDatesIndexes = [37, 38, 39, 40, 41];
	51	nextDatesIndexes.forEach((index) => {
	52	expect(utils.getNthDay(component, index).hasClass('rdtNew')).toBeTruthy();
	53	});
290be5	54	});
SE	55
39e146	56	it('switch from day view to time view and back', () => {
290be5	57	const component = utils.createDatetime({});
SE	58
	59	expect(utils.isDayView(component)).toBeTruthy();
	60	utils.clickOnElement(component.find('.rdtTimeToggle'));
	61	expect(utils.isTimeView(component)).toBeTruthy();
39e146	62	utils.clickOnElement(component.find('.rdtSwitch'));
SE	63	expect(utils.isDayView(component)).toBeTruthy();
290be5	64	});
SE	65
	66	it('persistent valid months going monthView->yearView->monthView', () => {
	67	const dateBefore = new Date().getFullYear() + '-06-01',
	68	component = utils.createDatetime({ viewMode: 'months', isValidDate: (current) =>
	69	current.isBefore(moment(dateBefore, 'YYYY-MM-DD'))
	70	});
	71
	72	expect(utils.isMonthView(component)).toBeTruthy();
	73	expect(utils.getNthMonth(component, 4).hasClass('rdtDisabled')).toEqual(false);
	74	expect(utils.getNthMonth(component, 5).hasClass('rdtDisabled')).toEqual(true);
	75
	76	// Go to year view
	77	utils.clickOnElement(component.find('.rdtSwitch'));
	78	expect(utils.isYearView(component)).toBeTruthy();
	79
	80	expect(utils.getNthYear(component, 0).hasClass('rdtDisabled')).toEqual(false);
	81	expect(utils.getNthYear(component, 9).hasClass('rdtDisabled')).toEqual(true);
	82
	83	utils.clickNthYear(component, 8);
	84	expect(utils.getNthMonth(component, 4).hasClass('rdtDisabled')).toEqual(false);
	85	expect(utils.getNthMonth(component, 5).hasClass('rdtDisabled')).toEqual(true);
	86	});
	87
	88	it('step through views', () => {
	89	const component = utils.createDatetime({ viewMode: 'time' });
	90
	91	expect(utils.isTimeView(component)).toBeTruthy();
	92	utils.clickOnElement(component.find('.rdtSwitch'));
	93	expect(utils.isDayView(component)).toBeTruthy();
	94	utils.clickOnElement(component.find('.rdtSwitch'));
	95	expect(utils.isMonthView(component)).toBeTruthy();
	96	utils.clickOnElement(component.find('.rdtSwitch'));
	97	expect(utils.isYearView(component)).toBeTruthy();
	98	});
	99
	100	it('selectYear', () => {
	101	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	102	component = utils.createDatetime({ viewMode: 'years', defaultValue: date });
	103	expect(utils.isYearView(component)).toBeTruthy();
	104	expect(component.find('.rdtSwitch').text()).toEqual('2000-2009');
	105
	106	// Click first year (1999)
	107	utils.clickOnElement(component.find('.rdtYear').at(0));
	108	expect(utils.isMonthView(component)).toBeTruthy();
	109	expect(component.find('.rdtSwitch').text()).toEqual('1999');
	110	});
	111
	112	it('increase decade', () => {
	113	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	114	component = utils.createDatetime({ viewMode: 'years', defaultValue: date });
	115
	116	expect(component.find('.rdtSwitch').text()).toEqual('2000-2009');
	117	utils.clickOnElement(component.find('.rdtNext span').at(0));
	118	expect(component.find('.rdtSwitch').text()).toEqual('2010-2019');
	119	utils.clickOnElement(component.find('.rdtNext span').at(0));
	120	expect(component.find('.rdtSwitch').text()).toEqual('2020-2029');
	121	});
	122
	123	it('decrease decade', () => {
	124	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	125	component = utils.createDatetime({ viewMode: 'years', defaultValue: date });
	126
	127	expect(component.find('.rdtSwitch').text()).toEqual('2000-2009');
	128	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	129	expect(component.find('.rdtSwitch').text()).toEqual('1990-1999');
	130	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	131	expect(component.find('.rdtSwitch').text()).toEqual('1980-1989');
	132	});
	133
	134	it('select month', () => {
	135	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	136	component = utils.createDatetime({ viewMode: 'months', defaultValue: date });
	137
	138	expect(utils.isMonthView(component)).toBeTruthy();
	139	expect(component.find('.rdtSwitch').text()).toEqual('2000');
	140	// Click any month to enter day view
	141	utils.clickNthMonth(component, 1);
	142	expect(utils.isDayView(component)).toBeTruthy();
	143	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('1');
	144	});
	145
	146	it('increase year', () => {
	147	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	148	component = utils.createDatetime({ viewMode: 'months', defaultValue: date });
	149
	150	expect(component.find('.rdtSwitch').text()).toEqual('2000');
	151	utils.clickOnElement(component.find('.rdtNext span').at(0));
	152	expect(component.find('.rdtSwitch').text()).toEqual('2001');
	153	utils.clickOnElement(component.find('.rdtNext span').at(0));
	154	expect(component.find('.rdtSwitch').text()).toEqual('2002');
	155	});
	156
	157	it('decrease year', () => {
	158	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	159	component = utils.createDatetime({ viewMode: 'months', defaultValue: date });
	160
	161	expect(component.find('.rdtSwitch').text()).toEqual('2000');
	162	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	163	expect(component.find('.rdtSwitch').text()).toEqual('1999');
	164	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	165	expect(component.find('.rdtSwitch').text()).toEqual('1998');
	166	});
	167
	168	it('increase month', () => {
	169	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	170	component = utils.createDatetime({ defaultValue: date });
	171
	172	expect(component.find('.rdtSwitch').text()).toEqual('January 2000');
	173	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('0');
	174	utils.clickOnElement(component.find('.rdtNext span').at(0));
	175	expect(component.find('.rdtSwitch').text()).toEqual('February 2000');
	176	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('1');
	177	utils.clickOnElement(component.find('.rdtNext span').at(0));
	178	expect(component.find('.rdtSwitch').text()).toEqual('March 2000');
	179	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('2');
	180	});
	181
	182	it('decrease month', () => {
	183	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	184	component = utils.createDatetime({ defaultValue: date });
	185
	186	expect(component.find('.rdtSwitch').text()).toEqual('January 2000');
	187	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('0');
	188	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	189	expect(component.find('.rdtSwitch').text()).toEqual('December 1999');
	190	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('11');
	191	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	192	expect(component.find('.rdtSwitch').text()).toEqual('November 1999');
	193	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('10');
	194	});
	195
	196	it('open picker', () => {
	197	const component = utils.createDatetime();
	198	expect(utils.isOpen(component)).toBeFalsy();
794700	199	utils.openDatepicker(component);
290be5	200	expect(utils.isOpen(component)).toBeTruthy();
39e146	201	});
SE	202
f37c3f	203	it('opens picker when clicking on input', () => {
SE	204	const component = utils.createDatetime();
	205	expect(utils.isOpen(component)).toBeFalsy();
	206	component.find('.form-control').simulate('click');
	207	expect(utils.isOpen(component)).toBeTruthy();
	208	});
	209
39e146	210	it('sets CSS class on selected item (day)', () => {
SE	211	const component = utils.createDatetime({ viewMode: 'days' });
	212	utils.openDatepicker(component);
	213	utils.clickNthDay(component, 13);
	214	expect(utils.getNthDay(component, 13).hasClass('rdtActive')).toBeTruthy();
	215	});
	216
	217	it('sets CSS class on selected item (month)', () => {
	218	const component = utils.createDatetime({ viewMode: 'months', dateFormat: 'YYYY-MM' });
	219	utils.openDatepicker(component);
	220	utils.clickNthMonth(component, 4);
	221	expect(utils.getNthMonth(component, 4).hasClass('rdtActive')).toBeTruthy();
	222	});
	223
	224	it('sets CSS class on selected item (year)', () => {
	225	const component = utils.createDatetime({ viewMode: 'years', dateFormat: 'YYYY' });
	226	utils.openDatepicker(component);
	227	utils.clickNthYear(component, 3);
	228	expect(utils.getNthYear(component, 3).hasClass('rdtActive')).toBeTruthy();
	229	});
	230
	231	it('sets CSS class on days outside of month', () => {
	232	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	233	prevMonthDaysIndexes = [0, 1, 2, 3, 4, 5],
	234	nextMonthDaysIndexes = [37, 38, 39, 40, 41],
	235	component = utils.createDatetime({ viewMode: 'days', defaultValue: date });
	236
	237	utils.openDatepicker(component);
	238
25757d	239	prevMonthDaysIndexes.forEach((index) => {
39e146	240	expect(utils.getNthDay(component, index).hasClass('rdtOld')).toBeTruthy();
SE	241	});
25757d	242	nextMonthDaysIndexes.forEach((index) => {
39e146	243	expect(utils.getNthDay(component, index).hasClass('rdtNew')).toBeTruthy();
SE	244	});
	245	});
	246
	247	it('selected day persists (in UI) when navigating to prev month', () => {
	248	const date = new Date(2000, 0, 3, 2, 2, 2, 2),
	249	component = utils.createDatetime({ viewMode: 'days', defaultValue: date });
	250
	251	utils.openDatepicker(component);
	252	expect(utils.getNthDay(component, 8).hasClass('rdtActive')).toBeTruthy();
	253	// Go to previous month
	254	utils.clickOnElement(component.find('.rdtDays .rdtPrev span'));
	255	expect(utils.getNthDay(component, 36).hasClass('rdtActive')).toBeTruthy();
25757d	256	});
SE	257
	258	it('sets CSS class on today date', () => {
	259	const specificDate = moment('2015-04-19'),
	260	component = utils.createDatetime({ defaultValue: specificDate });
	261
	262	// Mock the today date
	263	jasmine.clock().mockDate(specificDate.toDate());
	264
	265	utils.openDatepicker(component);
	266	expect(component.find('.rdtDay.rdtToday').text()).toEqual('19');
39e146	267	});
SE	268
436734	269	// Proof of bug [FIXED]
39e146	270	it('should show correct selected month when traversing view modes', () => {
SE	271	const date = new Date(2000, 4, 3, 2, 2, 2, 2),
	272	component = utils.createDatetime({ viewMode: 'days', defaultValue: date });
	273
	274	utils.openDatepicker(component);
	275
	276	// Go to month view
	277	utils.clickOnElement(component.find('.rdtSwitch'));
	278
	279	// Here the selected month is _May_, which is correct
	280	expect(component.find('.rdtMonth .rdtActive').text()).toEqual('May');
	281
	282	// Go to year view
	283	utils.clickOnElement(component.find('.rdtSwitch'));
	284
	285	// Click the selected year (2000)
	286	utils.clickNthYear(component, 1);
	287
	288	// The selected month is now _January_
436734	289	expect(component.find('.rdtMonth .rdtActive').text()).toEqual('May');
290be5	290	});
SE	291
	292	describe('with custom props', () => {
	293	it('input=false', () => {
	294	const component = utils.createDatetime({ input: false });
	295	expect(component.find('.rdt > .form-control').length).toEqual(0);
	296	expect(component.find('.rdt > .rdtPicker').length).toEqual(1);
	297	});
	298
	299	it('dateFormat', () => {
	300	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	301	mDate = moment(date),
	302	component = utils.createDatetime({ value: date, dateFormat: 'M&D' });
	303	expect(utils.getInputValue(component)).toEqual(mDate.format('M&D LT'));
	304	});
	305
	306	it('dateFormat=false', () => {
	307	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	308	mDate = moment(date),
	309	component = utils.createDatetime({ value: date, dateFormat: false });
	310	expect(utils.getInputValue(component)).toEqual(mDate.format('LT'));
	311	// Make sure time view is active
	312	expect(utils.isTimeView(component)).toBeTruthy();
	313	// Make sure the date toggle is not rendered
	314	expect(component.find('thead').length).toEqual(0);
	315	});
	316
	317	it('timeFormat', () => {
	318	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	319	mDate = moment(date),
	320	format = 'HH:mm:ss:SSS',
	321	component = utils.createDatetime({ value: date, timeFormat: format });
	322	expect(utils.getInputValue(component)).toEqual(mDate.format('L ' + format));
	323	});
	324
	325	it('timeFormat=false', () => {
	326	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	327	mDate = moment(date),
	328	component = utils.createDatetime({ value: date, timeFormat: false });
	329	expect(utils.getInputValue(component)).toEqual(mDate.format('L'));
	330	// Make sure day view is active
	331	expect(utils.isDayView(component)).toBeTruthy();
	332	// Make sure the time toggle is not rendered
	333	expect(component.find('.timeToggle').length).toEqual(0);
	334	});
	335
	336	it('timeFormat with lowercase \'am\'', () => {
	337	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	338	format = 'HH:mm:ss:SSS a',
	339	component = utils.createDatetime({ value: date, timeFormat: format });
	340	expect(utils.getInputValue(component)).toEqual(expect.stringMatching('.*am$'));
	341	});
	342
	343	it('timeFormat with uppercase \'AM\'', () => {
	344	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	345	format = 'HH:mm:ss:SSS A',
	346	component = utils.createDatetime({ value: date, timeFormat: format });
	347	expect(utils.getInputValue(component)).toEqual(expect.stringMatching('.*AM$'));
	348	});
	349
	350	it('viewMode=years', () => {
	351	const component = utils.createDatetime({ viewMode: 'years' });
	352	expect(utils.isYearView(component)).toBeTruthy();
	353	});
	354
	355	it('viewMode=months', () => {
	356	const component = utils.createDatetime({ viewMode: 'months' });
	357	expect(utils.isMonthView(component)).toBeTruthy();
	358	});
	359
	360	it('viewMode=time', () => {
	361	const component = utils.createDatetime({ viewMode: 'time' });
	362	expect(utils.isTimeView(component)).toBeTruthy();
	363	});
	364
7f7ed5	365	xit('className -> type string', () => {
290be5	366	const component = utils.createDatetime({ className: 'custom-class' });
SE	367	expect(component.find('.custom-class').length).toEqual(1);
	368	});
	369
	370	it('className -> type string array', () => {
	371	const component = utils.createDatetime({ className: ['custom-class1', 'custom-class2'] });
	372	expect(component.find('.custom-class1').length).toEqual(1);
	373	expect(component.find('.custom-class2').length).toEqual(1);
	374	});
	375
	376	it('inputProps', () => {
	377	const component = utils.createDatetime({
	378	inputProps: { className: 'custom-class', type: 'email', placeholder: 'custom-placeholder' }
	379	});
	380	expect(component.find('input.custom-class').length).toEqual(1);
	381	expect(component.find('input').getDOMNode().type).toEqual('email');
	382	expect(component.find('input').getDOMNode().placeholder).toEqual('custom-placeholder');
	383	});
	384
	385	it('renderDay', () => {
	386	let props = {},
	387	currentDate = '',
	388	selectedDate = '';
	389	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	390	mDate = moment(date),
	391	renderDayFn = (fnProps, current, selected) => {
	392	props = fnProps;
	393	currentDate = current;
	394	selectedDate = selected;
	395
	396	return <td {...fnProps}>custom-content</td>;
	397	};
	398
	399	const component = utils.createDatetime({ value: mDate, renderDay: renderDayFn });
	400
	401	// Last day should be 6th of february
	402	expect(currentDate.day()).toEqual(6);
	403	expect(currentDate.month()).toEqual(1);
	404
	405	// The date must be the same
	406	expect(selectedDate.isSame(mDate)).toEqual(true);
	407
	408	// There should be a onClick function in the props
	409	expect(typeof props.onClick).toEqual('function');
	410
	411	// The cell text should match
	412	expect(component.find('.rdtDay').at(0).text()).toEqual('custom-content');
	413	});
	414
	415	it('renderMonth', () => {
	416	let props = {},
	417	month = '',
	418	year = '',
	419	selectedDate = '';
	420	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	421	mDate = moment(date),
	422	renderMonthFn = (fnProps, fnMonth, fnYear, selected) => {
	423	props = fnProps;
	424	month = fnMonth;
	425	year = fnYear;
	426	selectedDate = selected;
	427
	428	return <td {...fnProps}>custom-content</td>;
	429	};
	430
	431	const component = utils.createDatetime({ value: mDate, viewMode: 'months', renderMonth: renderMonthFn });
	432
	433	expect(month).toEqual(11);
	434	expect(year).toEqual(2000);
	435
	436	// The date must be the same
	437	expect(selectedDate.isSame(mDate)).toEqual(true);
	438
	439	// There should be a onClick function in the props
	440	expect(typeof props.onClick).toEqual('function');
	441
	442	// The cell text should match
	443	expect(component.find('.rdtMonth').at(0).text()).toEqual('custom-content');
	444	});
	445
	446	it('renderYear', () => {
	447	let props = {},
	448	year = '',
	449	selectedDate = '';
	450	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	451	mDate = moment(date),
	452	renderYearFn = (fnProps, fnYear, selected) => {
	453	props = fnProps;
	454	year = fnYear;
	455	selectedDate = selected;
	456
	457	return <td {...fnProps}>custom-content</td>;
	458	};
	459
	460	const component = utils.createDatetime({ value: mDate, viewMode: 'years', renderYear: renderYearFn });
	461
	462	expect(year).toEqual(2010);
	463
	464	// The date must be the same
	465	expect(selectedDate.isSame(mDate)).toEqual(true);
	466
	467	// There should be a onClick function in the props
	468	expect(typeof props.onClick).toEqual('function');
	469
	470	// The cell text should match
	471	expect(component.find('.rdtYear').at(0).text()).toEqual('custom-content');
	472	});
	473
	474	it('closeOnTab=true', () => {
	475	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	476	component = utils.createDatetime({ value: date });
	477
	478	expect(utils.isOpen(component)).toBeFalsy();
794700	479	utils.openDatepicker(component);
290be5	480	expect(utils.isOpen(component)).toBeTruthy();
SE	481	component.find('.form-control').simulate('keyDown', { key: 'Tab', keyCode: 9, which: 9 });
	482	expect(utils.isOpen(component)).toBeFalsy();
	483	});
	484
	485	it('closeOnTab=false', () => {
	486	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	487	component = utils.createDatetime({ value: date, closeOnTab: false });
	488
	489	expect(utils.isOpen(component)).toBeFalsy();
794700	490	utils.openDatepicker(component);
290be5	491	expect(utils.isOpen(component)).toBeTruthy();
SE	492	component.find('.form-control').simulate('keyDown', { key: 'Tab', keyCode: 9, which: 9 });
	493	expect(utils.isOpen(component)).toBeTruthy();
	494	});
	495
	496	it('increase time', () => {
	497	let i = 0;
	498	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	499	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	500	defaultValue: date, onChange: (selected) => {
	501	// TODO: Trigger onChange when increasing time
	502	i++;
	503	if (i > 2) {
	504	expect(true).toEqual(false); // Proof that this is not called
	505	expect(selected.hour()).toEqual(3);
	506	expect(selected.minute()).toEqual(3);
	507	expect(selected.second()).toEqual(3);
	508	done();
	509	}
	510	}});
	511
	512	// Check hour
f3c055	513	expect(utils.getHours(component)).toEqual('2');
290be5	514	utils.increaseHour(component);
f3c055	515	expect(utils.getHours(component)).toEqual('3');
290be5	516
SE	517	// Check minute
f3c055	518	expect(utils.getMinutes(component)).toEqual('02');
290be5	519	utils.increaseMinute(component);
f3c055	520	expect(utils.getMinutes(component)).toEqual('03');
290be5	521
SE	522	// Check second
f3c055	523	expect(utils.getSeconds(component)).toEqual('02');
290be5	524	utils.increaseSecond(component);
f3c055	525	expect(utils.getSeconds(component)).toEqual('03');
290be5	526	});
SE	527
	528	it('decrease time', () => {
	529	let i = 0;
	530	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	531	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	532	defaultValue: date, onChange: (selected) => {
	533	// TODO: Trigger onChange when increasing time
	534	i++;
	535	if (i > 2) {
	536	expect(true).toEqual(false); // Proof that this is not called
	537	expect(selected.hour()).toEqual(1);
	538	expect(selected.minute()).toEqual(1);
	539	expect(selected.second()).toEqual(1);
	540	done();
	541	}
	542	}});
	543
	544	// Check hour
f3c055	545	expect(utils.getHours(component)).toEqual('2');
290be5	546	utils.decreaseHour(component);
f3c055	547	expect(utils.getHours(component)).toEqual('1');
290be5	548
SE	549	// Check minute
f3c055	550	expect(utils.getMinutes(component)).toEqual('02');
290be5	551	utils.decreaseMinute(component);
f3c055	552	expect(utils.getMinutes(component)).toEqual('01');
290be5	553
SE	554	// Check second
f3c055	555	expect(utils.getSeconds(component)).toEqual('02');
290be5	556	utils.decreaseSecond(component);
f3c055	557	expect(utils.getSeconds(component)).toEqual('01');
290be5	558	});
SE	559
34dbeb	560	it('long increase time', (done) => {
290be5	561	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
SE	562	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time', defaultValue: date });
	563
	564	utils.increaseHour(component);
	565	setTimeout(() => {
f3c055	566	expect(utils.getHours(component)).not.toEqual('2');
SE	567	expect(utils.getHours(component)).not.toEqual('3');
290be5	568	done();
SE	569	}, 920);
	570	});
	571
34dbeb	572	it('long decrease time', (done) => {
290be5	573	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
SE	574	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time', defaultValue: date });
	575
	576	utils.decreaseHour(component);
	577	setTimeout(() => {
f3c055	578	expect(utils.getHours(component)).not.toEqual('1');
SE	579	expect(utils.getHours(component)).not.toEqual('0');
290be5	580	done();
SE	581	}, 920);
	582	});
	583
	584	it('timeConstraints -> increase time', () => {
	585	let i = 0;
	586	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	587	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	588	defaultValue: date, timeConstraints: { hours: { max: 6, step: 8 }, minutes: { step: 15 }},
	589	onChange: (selected) => {
	590	// TODO
	591	i++;
	592	if (i > 2) {
	593	expect(selected.minute()).toEqual(17);
	594	expect(selected.second()).toEqual(3);
	595	done();
	596	}
	597	}
	598	});
	599
	600	utils.increaseHour(component);
f3c055	601	expect(utils.getHours(component)).toEqual('3');
290be5	602
SE	603	utils.increaseMinute(component);
f3c055	604	expect(utils.getMinutes(component)).toEqual('17');
290be5	605
SE	606	utils.increaseSecond(component);
f3c055	607	expect(utils.getSeconds(component)).toEqual('03');
290be5	608	});
SE	609
	610	it('timeConstraints -> decrease time', () => {
	611	let i = 0;
	612	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	613	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	614	defaultValue: date, timeConstraints: { minutes: { step: 15 }}, onChange: (selected) => {
	615	// TODO
	616	i++;
	617	if (i > 2) {
	618	expect(selected.minute()).toEqual(17);
	619	expect(selected.second()).toEqual(3);
	620	done();
	621	}
	622	}
	623	});
	624
	625	utils.decreaseMinute(component);
f3c055	626	expect(utils.getMinutes(component)).toEqual('47');
290be5	627	});
SE	628
	629	it('strictParsing=true', (done) => {
	630	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	631	mDate = moment(date),
	632	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	633	invalidStrDate = strDate + 'x',
	634	component = utils.createDatetime({ defaultValue: '', strictParsing: true,
	635	onChange: (updated) => {
	636	expect(updated, invalidStrDate);
	637	done();
	638	}});
	639
	640	component.find('.form-control').simulate('change', { target: { value: invalidStrDate }});
	641	});
	642
	643	it('strictParsing=false', (done) => {
	644	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	645	mDate = moment(date),
	646	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	647	invalidStrDate = strDate + 'x',
	648	component = utils.createDatetime({ defaultValue: '', strictParsing: false,
	649	onChange: (updated) => {
	650	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	651	done();
	652	}});
	653
	654	component.find('.form-control').simulate('change', { target: { value: invalidStrDate }});
	655	});
	656
	657	it('isValidDate -> disable months', () => {
	658	const dateBefore = new Date().getFullYear() + '-06-01',
	659	component = utils.createDatetime({ viewMode: 'months', isValidDate: (current) =>
	660	current.isBefore(moment(dateBefore, 'YYYY-MM-DD'))
	661	});
	662
	663	expect(utils.getNthMonth(component, 0).hasClass('rdtDisabled')).toEqual(false);
	664	expect(utils.getNthMonth(component, 4).hasClass('rdtDisabled')).toEqual(false);
	665	expect(utils.getNthMonth(component, 5).hasClass('rdtDisabled')).toEqual(true);
	666	expect(utils.getNthMonth(component, 11).hasClass('rdtDisabled')).toEqual(true);
	667	});
	668
	669	it('isValidDate -> disable years', () => {
	670	const component = utils.createDatetime({ viewMode: 'years', isValidDate: (current) =>
	671	current.isBefore(moment('2016-01-01', 'YYYY-MM-DD'))
	672	});
	673
	674	expect(utils.getNthYear(component, 0).hasClass('rdtDisabled')).toEqual(false);
	675	expect(utils.getNthYear(component, 6).hasClass('rdtDisabled')).toEqual(false);
	676	expect(utils.getNthYear(component, 7).hasClass('rdtDisabled')).toEqual(true);
	677	});
	678
	679	it('locale', () => {
	680	const component = utils.createDatetime({ locale: 'nl' }),
7f7ed5	681	expectedWeekDays = ['ma', 'di', 'wo', 'do', 'vr', 'za', 'zo'],
290be5	682	actualWeekDays = component.find('.rdtDays .dow').map((element) =>
7f7ed5	683	element.text().toLowerCase()
290be5	684	);
SE	685
	686	expect(actualWeekDays).toEqual(expectedWeekDays);
	687	});
	688
	689	it('locale with viewMode=months', () => {
	690	const component = utils.createDatetime({ locale: 'nl', viewMode: 'months' }),
	691	expectedMonths = ['Mrt', 'Mei'],
	692	actualMonths = [utils.getNthMonth(component, 2).text(), utils.getNthMonth(component, 4).text()];
	693
	694	expect(actualMonths).toEqual(expectedMonths);
	695	});
	696
25757d	697	it('closeOnSelect=false', (done) => {
290be5	698	const component = utils.createDatetime({ closeOnSelect: false });
SE	699
25757d	700	// A unknown race condition is causing this test to fail without this time out,
SE	701	// and when the test fails it says:
	702	// 'Timeout - Async callback was not invoked within timeout'
	703	// Ideally it would say something else but at least we know the tests are passing now
39e146	704	setTimeout(() => {
SE	705	expect(utils.isOpen(component)).toBeFalsy();
	706	utils.openDatepicker(component);
	707	expect(utils.isOpen(component)).toBeTruthy();
	708	utils.clickNthDay(component, 2);
	709	expect(utils.isOpen(component)).toBeTruthy();
25757d	710	done();
39e146	711	}, 0);
290be5	712	});
SE	713
25757d	714	it('closeOnSelect=true', (done) => {
290be5	715	const component = utils.createDatetime({ closeOnSelect: true });
SE	716
25757d	717	// A unknown race condition is causing this test to fail without this time out,
SE	718	// and when the test fails it says:
	719	// 'Timeout - Async callback was not invoked within timeout'
	720	// Ideally it would say something else but at least we know the tests are passing now
39e146	721	setTimeout(() => {
SE	722	expect(utils.isOpen(component)).toBeFalsy();
	723	utils.openDatepicker(component);
	724	expect(utils.isOpen(component)).toBeTruthy();
	725	utils.clickNthDay(component, 2);
	726	expect(utils.isOpen(component)).toBeFalsy();
25757d	727	done();
39e146	728	}, 0);
290be5	729	});
SE	730
	731	describe('defaultValue of type', () => {
	732	it('date', () => {
	733	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	734	momentDate = moment(date),
	735	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	736	component = utils.createDatetime({ defaultValue: date });
	737	expect(utils.getInputValue(component)).toEqual(strDate);
	738	});
	739
	740	it('moment', () => {
	741	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	742	momentDate = moment(date),
	743	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	744	component = utils.createDatetime({ defaultValue: momentDate });
	745	expect(utils.getInputValue(component)).toEqual(strDate);
	746	});
	747
	748	it('string', () => {
	749	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	750	momentDate = moment(date),
	751	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	752	component = utils.createDatetime({ defaultValue: strDate });
	753	expect(utils.getInputValue(component)).toEqual(strDate);
	754	});
	755	});
	756
	757	describe('timeFormat with', () => {
	758	it('milliseconds', () => {
	759	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm:ss:SSS' });
	760	expect(component.find('.rdtCounter').length).toEqual(4);
	761	// TODO: Test that you can input a value in milli seconds input
	762	});
	763
	764	it('seconds', () => {
	765	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm:ss' });
	766	expect(component.find('.rdtCounter').length).toEqual(3);
	767	});
	768
	769	it('minutes', () => {
	770	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm' });
	771	expect(component.find('.rdtCounter').length).toEqual(2);
	772	});
	773
	774	it('hours', () => {
	775	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH' });
	776	expect(component.find('.rdtCounter').length).toEqual(1);
	777	});
	778	});
64fc6a	779
SE	780	describe('being updated and should trigger update', () => {
25757d	781	it('dateFormat -> value should change format', (done) => {
64fc6a	782	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
SE	783	component = utils.createDatetime({
	784	dateFormat: 'YYYY-MM-DD', timeFormat: false, defaultValue: date
	785	});
	786
	787	const valueBefore = utils.getInputValue(component);
25757d	788	// A unknown race condition is causing this test to fail without this time out,
SE	789	// and when the test fails it says:
	790	// 'Timeout - Async callback was not invoked within timeout'
	791	// Ideally it would say something else but at least we know the tests are passing now
39e146	792	setTimeout(() => {
SE	793	component.setProps({ dateFormat: 'DD.MM.YYYY' });
	794	const valueAfter = utils.getInputValue(component);
64fc6a	795
39e146	796	expect(valueBefore).not.toEqual(valueAfter);
25757d	797	done();
39e146	798	}, 0);
64fc6a	799	});
SE	800
	801	it('UTC -> value should change format (true->false)', () => {
	802	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	803	momentDate = moment(date),
	804	component = utils.createDatetime({ value: momentDate, utc: true });
	805
	806	const valueBefore = utils.getInputValue(component);
	807	component.setProps({ utc: false }, () => {
	808	const valueAfter = utils.getInputValue(component);
	809
	810	expect(valueBefore).not.toEqual(valueAfter);
	811	});
	812	});
	813
	814	it('UTC -> value should change format (false->true)', () => {
	815	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	816	momentDate = moment(date),
	817	component = utils.createDatetime({ value: momentDate, utc: false });
	818
	819	const valueBefore = utils.getInputValue(component);
	820	component.setProps({ utc: true }, () => {
	821	const valueAfter = utils.getInputValue(component);
	822
	823	expect(valueBefore).not.toEqual(valueAfter);
	824	});
	825	});
	826
	827	it('locale -> picker should change language (viewMode=days)', () => {
	828	const component = utils.createDatetime({ viewMode: 'days', locale: 'nl' }),
	829	weekdaysBefore = component.find('.rdtDays .dow').map((element) =>
	830	element.text()
	831	);
	832
	833	component.setProps({ locale: 'sv' });
	834	const weekdaysAfter = component.find('.rdtDays .dow').map((element) =>
	835	element.text()
	836	);
	837
	838	expect(weekdaysBefore).not.toEqual(weekdaysAfter);
	839	});
	840
	841	it('locale -> picker should change language (viewMode=months)', () => {
	842	const component = utils.createDatetime({ viewMode: 'months', locale: 'nl' }),
	843	monthsBefore = [utils.getNthMonth(component, 2).text(), utils.getNthMonth(component, 4).text()];
	844
	845	component.setProps({ locale: 'sv' });
	846	const monthsAfter = [utils.getNthMonth(component, 2).text(), utils.getNthMonth(component, 4).text()];
	847
	848	expect(monthsBefore).not.toEqual(monthsAfter);
	849	});
	850	});
290be5	851	});
SE	852
	853	describe('event listeners', () => {
39e146	854	describe('onBlur', () => {
SE	855	it('when selecting a date', () => {
	856	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	857	onBlurFn = jest.fn(),
	858	component = utils.createDatetime({ value: date, onBlur: onBlurFn, closeOnSelect: true });
290be5	859
39e146	860	utils.openDatepicker(component);
SE	861	// Close component by selecting a date
	862	utils.clickNthDay(component, 2);
	863	expect(onBlurFn).toHaveBeenCalledTimes(1);
	864	});
	865
	866	it('when selecting date (value=null and closeOnSelect=true)', () => {
	867	const onBlurFn = jest.fn(),
	868	component = utils.createDatetime({ value: null, onBlur: onBlurFn, closeOnSelect: true });
	869
	870	utils.openDatepicker(component);
	871	// Close component by selecting a date
	872	utils.clickNthDay(component, 2);
	873	expect(onBlurFn).toHaveBeenCalledTimes(1);
	874	});
	875
	876	it('when selecting date (value=null and closeOnSelect=false)', () => {
	877	const onBlurFn = jest.fn(),
	878	component = utils.createDatetime({ value: null, onBlur: onBlurFn, closeOnSelect: false });
	879
	880	utils.openDatepicker(component);
	881	// Close component by selecting a date
	882	utils.clickNthDay(component, 2);
	883	expect(onBlurFn).not.toHaveBeenCalled();
	884	});
794700	885	});
SE	886
39e146	887	it('onFocus when opening datepicker', () => {
290be5	888	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
SE	889	onFocusFn = jest.fn(),
	890	component = utils.createDatetime({ value: date, onFocus: onFocusFn });
	891
794700	892	utils.openDatepicker(component);
290be5	893	expect(onFocusFn).toHaveBeenCalledTimes(1);
SE	894	});
	895
5377a9	896	describe('onViewModeChange', () => {
SE	897	it('when switch from days to time view mode', () => {
	898	const component = utils.createDatetime({ onViewModeChange: (viewMode) => {
	899	expect(viewMode).toEqual('time');
	900	}});
	901	expect(utils.isDayView(component)).toBeTruthy();
	902	utils.clickOnElement(component.find('.rdtTimeToggle'));
	903	expect(utils.isTimeView(component)).toBeTruthy();
	904	});
	905
	906	it('when switch from time to days view mode', () => {
	907	const component = utils.createDatetime({ viewMode: 'time', onViewModeChange: (viewMode) => {
	908	expect(viewMode).toEqual('days');
	909	}});
	910	expect(utils.isTimeView(component)).toBeTruthy();
	911	utils.clickOnElement(component.find('.rdtSwitch'));
	912	expect(utils.isDayView(component)).toBeTruthy();
	913	});
	914
	915	it('when switch from days to months view mode', () => {
	916	const component = utils.createDatetime({ onViewModeChange: (viewMode) => {
	917	expect(viewMode).toEqual('months');
	918	}});
	919	expect(utils.isDayView(component)).toBeTruthy();
	920	utils.clickOnElement(component.find('.rdtSwitch'));
	921	expect(utils.isMonthView(component)).toBeTruthy();
	922	});
	923
	924	it('when switch from months to years view mode', () => {
	925	const component = utils.createDatetime({ viewMode: 'months', onViewModeChange: (viewMode) => {
	926	expect(viewMode).toEqual('years');
	927	}});
	928	expect(utils.isMonthView(component)).toBeTruthy();
	929	utils.clickOnElement(component.find('.rdtSwitch'));
	930	expect(utils.isYearView(component)).toBeTruthy();
	931	});
	932
	933	it('only when switch from years to months view mode', () => {
	934	const component = utils.createDatetime({ viewMode: 'years', onViewModeChange: (viewMode) => {
	935	expect(viewMode).toEqual('months');
	936	}});
	937	expect(utils.isYearView(component)).toBeTruthy();
	938	utils.clickOnElement(component.find('.rdtSwitch'));
	939	expect(utils.isYearView(component)).toBeTruthy();
	940	utils.clickNthYear(component, 2);
	941	expect(utils.isMonthView(component)).toBeTruthy();
	942	});
	943
	944	it('when switch from months to days view mode', () => {
	945	const component = utils.createDatetime({ viewMode: 'months', onViewModeChange: (viewMode) => {
	946	expect(viewMode).toEqual('days');
	947	}});
	948	expect(utils.isMonthView(component)).toBeTruthy();
	949	utils.clickNthMonth(component, 2);
	950	expect(utils.isDayView(component)).toBeTruthy();
	951	});
	952	});
	953
39e146	954	describe('onChange', () => {
SE	955	it('trigger only when last selection type is selected', () => {
	956	// By selection type I mean if you CAN select day, then selecting a month
	957	// should not trigger onChange
	958	const onChangeFn = jest.fn(),
	959	component = utils.createDatetime({ viewMode: 'years', onChange: onChangeFn });
290be5	960
39e146	961	utils.openDatepicker(component);
290be5	962
39e146	963	utils.clickNthYear(component, 2);
SE	964	expect(onChangeFn).not.toHaveBeenCalled();
	965
	966	utils.clickNthMonth(component, 2);
	967	expect(onChangeFn).not.toHaveBeenCalled();
	968
	969	utils.clickNthDay(component, 2);
	970	expect(onChangeFn).toHaveBeenCalled();
	971	});
	972
	973	it('when selecting date', (done) => {
	974	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	975	mDate = moment(date),
	976	component = utils.createDatetime({ defaultValue: date, onChange: (selected) => {
	977	expect(selected.date()).toEqual(2);
290be5	978	expect(selected.month()).toEqual(mDate.month());
SE	979	expect(selected.year()).toEqual(mDate.year());
	980	done();
39e146	981	}});
290be5	982
39e146	983	utils.clickNthDay(component, 7);
SE	984	});
	985
	986	it('when selecting multiple date in a row', (done) => {
	987	let i = 0;
	988	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	989	mDate = moment(date),
	990	component = utils.createDatetime({ defaultValue: date, onChange: (selected) => {
	991	i++;
	992	if (i > 2) {
	993	expect(selected.date()).toEqual(4);
	994	expect(selected.month()).toEqual(mDate.month());
	995	expect(selected.year()).toEqual(mDate.year());
	996	done();
	997	}
	998	}});
	999
	1000	utils.clickNthDay(component, 7);
	1001	utils.clickNthDay(component, 8);
	1002	utils.clickNthDay(component, 9);
	1003	});
	1004
	1005	it('when selecting month', () => {
752fa8	1006	const date = Date.UTC(2000, 0, 15, 2, 2, 2, 2),
39e146	1007	onChangeFn = jest.fn(),
SE	1008	component = utils.createDatetime({ defaultValue: date, dateFormat: 'YYYY-MM', onChange: onChangeFn });
	1009
	1010	utils.clickNthMonth(component, 2);
	1011	expect(onChangeFn).toHaveBeenCalledTimes(1);
752fa8	1012	expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2000-03-15T02:02:02.002Z');
39e146	1013	});
SE	1014
7f7ed5	1015	xit('when selecting year', () => {
752fa8	1016	const date = Date.UTC(2000, 0, 15, 2, 2, 2, 2),
39e146	1017	onChangeFn = jest.fn(),
SE	1018	component = utils.createDatetime({ defaultValue: date, dateFormat: 'YYYY', onChange: onChangeFn });
	1019
	1020	utils.clickNthYear(component, 2);
	1021	expect(onChangeFn).toHaveBeenCalledTimes(1);
752fa8	1022	expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2001-01-15T02:02:02.002Z');
39e146	1023	});
SE	1024
	1025	it('when selecting time', () => {
	1026	// Did not manage to be able to get onChange to trigger, even though I know it does.
	1027	// The listener for the time buttons are set up differently because of having to handle both
	1028	// onMouseDown and onMouseUp. Not sure how to test it.
	1029	expect(true).toEqual(true);
	1030	});
	1031
290be5	1032	});
39e146	1033
290be5	1034	});
SE	1035
	1036	describe('with set value', () => {
	1037	it('date value', () => {
	1038	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1039	mDate = moment(date),
	1040	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1041	component = utils.createDatetime({ value: date });
	1042	expect(utils.getInputValue(component)).toEqual(strDate);
	1043	});
	1044
	1045	it('moment value', () => {
	1046	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1047	mDate = moment(date),
	1048	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1049	component = utils.createDatetime({ value: mDate });
	1050	expect(utils.getInputValue(component)).toEqual(strDate);
	1051	});
	1052
	1053	it('string value', () => {
	1054	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1055	mDate = moment(date),
	1056	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1057	component = utils.createDatetime({ value: strDate });
	1058	expect(utils.getInputValue(component)).toEqual(strDate);
	1059	});
	1060
	1061	it('UTC value from local moment', () => {
	1062	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1063	momentDate = moment(date),
	1064	momentDateUTC = moment.utc(date),
	1065	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	1066	component = utils.createDatetime({ value: momentDate, utc: true });
	1067	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	1068	});
	1069
	1070	it('UTC value from UTC moment', () => {
	1071	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1072	momentDateUTC = moment.utc(date),
	1073	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	1074	component = utils.createDatetime({ value: momentDateUTC, utc: true });
	1075	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	1076	});
	1077
	1078	it('UTC value from UTC string', () => {
	1079	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1080	momentDateUTC = moment.utc(date),
	1081	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	1082	component = utils.createDatetime({ value: strDateUTC, utc: true });
	1083	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	1084	});
	1085
	1086	it('invalid string value', (done) => {
	1087	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1088	mDate = moment(date),
	1089	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1090	component = utils.createDatetime({ defaultValue: 'invalid-value', onChange: (updated) => {
	1091	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	1092	done();
	1093	}});
	1094
	1095	expect(component.find('.form-control').getDOMNode().value).toEqual('invalid-value');
	1096	component.find('.form-control').simulate('change', { target: { value: strDate }});
	1097	});
	1098
	1099	it('delete invalid string value', (done) => {
	1100	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1101	component = utils.createDatetime({ defaultValue: date, onChange: (date) => {
	1102	expect(date).toEqual('');
	1103	done();
	1104	}});
	1105
	1106	component.find('.form-control').simulate('change', { target: { value: '' }});
	1107	});
	1108
	1109	it('invalid moment object', (done) => {
	1110	const invalidValue = moment(null),
	1111	date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1112	mDate = moment(date),
	1113	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1114	component = utils.createDatetime({ value: invalidValue, onChange: (updated) => {
	1115	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	1116	done();
	1117	}});
	1118
	1119	expect(component.find('.form-control').getDOMNode().value).toEqual('');
	1120	component.find('.form-control').simulate('change', { target: { value: strDate }});
	1121	});
	1122
	1123	});
	1124	});