RedHatTraining/react-datetime.git - Gitblit

RedHatTraining / react-datetime

view | history | commit | commitdiff

Don't rely on dynamic data in test

Simon Egersand

2018-01-27 957b12b196150051e9ede1c94286a20f9a036c5a

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