RedHatTraining/react-datetime.git - Gitblit

RedHatTraining / react-datetime

view | history | commit | commitdiff

Tidy up input rendering, add test & docs for renderInput

Dan Forster

2017-07-28 b6f2dd9653561a18e0ae8094240ac192f366601b

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
b6f2dd	385	it('renderInput', () => {
DF	386	const renderInput = (props, openCalendar) => {
	387	return (
	388	<div>
	389	<input {...props} />
	390	<button className="custom-open" onClick={openCalendar}>open calendar</button>
	391	</div>
	392	);
	393	};
	394	const component = utils.createDatetime({ renderInput });
	395
	396	expect(component.find('button.custom-open').length).toEqual(1);
	397	expect(utils.isOpen(component)).toBeFalsy();
	398	utils.clickOnElement(component.find('button.custom-open'));
	399	expect(utils.isOpen(component)).toBeTruthy();
	400	});
	401
290be5	402	it('renderDay', () => {
SE	403	let props = {},
	404	currentDate = '',
	405	selectedDate = '';
	406	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	407	mDate = moment(date),
	408	renderDayFn = (fnProps, current, selected) => {
	409	props = fnProps;
	410	currentDate = current;
	411	selectedDate = selected;
	412
	413	return <td {...fnProps}>custom-content</td>;
	414	};
	415
	416	const component = utils.createDatetime({ value: mDate, renderDay: renderDayFn });
	417
	418	// Last day should be 6th of february
	419	expect(currentDate.day()).toEqual(6);
	420	expect(currentDate.month()).toEqual(1);
	421
	422	// The date must be the same
	423	expect(selectedDate.isSame(mDate)).toEqual(true);
	424
	425	// There should be a onClick function in the props
	426	expect(typeof props.onClick).toEqual('function');
	427
	428	// The cell text should match
	429	expect(component.find('.rdtDay').at(0).text()).toEqual('custom-content');
	430	});
	431
	432	it('renderMonth', () => {
	433	let props = {},
	434	month = '',
	435	year = '',
	436	selectedDate = '';
	437	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	438	mDate = moment(date),
	439	renderMonthFn = (fnProps, fnMonth, fnYear, selected) => {
	440	props = fnProps;
	441	month = fnMonth;
	442	year = fnYear;
	443	selectedDate = selected;
	444
	445	return <td {...fnProps}>custom-content</td>;
	446	};
	447
	448	const component = utils.createDatetime({ value: mDate, viewMode: 'months', renderMonth: renderMonthFn });
	449
	450	expect(month).toEqual(11);
	451	expect(year).toEqual(2000);
	452
	453	// The date must be the same
	454	expect(selectedDate.isSame(mDate)).toEqual(true);
	455
	456	// There should be a onClick function in the props
	457	expect(typeof props.onClick).toEqual('function');
	458
	459	// The cell text should match
	460	expect(component.find('.rdtMonth').at(0).text()).toEqual('custom-content');
	461	});
	462
	463	it('renderYear', () => {
	464	let props = {},
	465	year = '',
	466	selectedDate = '';
	467	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	468	mDate = moment(date),
	469	renderYearFn = (fnProps, fnYear, selected) => {
	470	props = fnProps;
	471	year = fnYear;
	472	selectedDate = selected;
	473
	474	return <td {...fnProps}>custom-content</td>;
	475	};
	476
	477	const component = utils.createDatetime({ value: mDate, viewMode: 'years', renderYear: renderYearFn });
	478
	479	expect(year).toEqual(2010);
	480
	481	// The date must be the same
	482	expect(selectedDate.isSame(mDate)).toEqual(true);
	483
	484	// There should be a onClick function in the props
	485	expect(typeof props.onClick).toEqual('function');
	486
	487	// The cell text should match
	488	expect(component.find('.rdtYear').at(0).text()).toEqual('custom-content');
	489	});
	490
	491	it('closeOnTab=true', () => {
	492	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	493	component = utils.createDatetime({ value: date });
	494
	495	expect(utils.isOpen(component)).toBeFalsy();
794700	496	utils.openDatepicker(component);
290be5	497	expect(utils.isOpen(component)).toBeTruthy();
SE	498	component.find('.form-control').simulate('keyDown', { key: 'Tab', keyCode: 9, which: 9 });
	499	expect(utils.isOpen(component)).toBeFalsy();
	500	});
	501
	502	it('closeOnTab=false', () => {
	503	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	504	component = utils.createDatetime({ value: date, closeOnTab: false });
	505
	506	expect(utils.isOpen(component)).toBeFalsy();
794700	507	utils.openDatepicker(component);
290be5	508	expect(utils.isOpen(component)).toBeTruthy();
SE	509	component.find('.form-control').simulate('keyDown', { key: 'Tab', keyCode: 9, which: 9 });
	510	expect(utils.isOpen(component)).toBeTruthy();
	511	});
	512
	513	it('increase time', () => {
	514	let i = 0;
	515	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	516	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	517	defaultValue: date, onChange: (selected) => {
	518	// TODO: Trigger onChange when increasing time
	519	i++;
	520	if (i > 2) {
	521	expect(true).toEqual(false); // Proof that this is not called
	522	expect(selected.hour()).toEqual(3);
	523	expect(selected.minute()).toEqual(3);
	524	expect(selected.second()).toEqual(3);
	525	done();
	526	}
	527	}});
	528
	529	// Check hour
f3c055	530	expect(utils.getHours(component)).toEqual('2');
290be5	531	utils.increaseHour(component);
f3c055	532	expect(utils.getHours(component)).toEqual('3');
290be5	533
SE	534	// Check minute
f3c055	535	expect(utils.getMinutes(component)).toEqual('02');
290be5	536	utils.increaseMinute(component);
f3c055	537	expect(utils.getMinutes(component)).toEqual('03');
290be5	538
SE	539	// Check second
f3c055	540	expect(utils.getSeconds(component)).toEqual('02');
290be5	541	utils.increaseSecond(component);
f3c055	542	expect(utils.getSeconds(component)).toEqual('03');
290be5	543	});
SE	544
	545	it('decrease time', () => {
	546	let i = 0;
	547	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	548	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	549	defaultValue: date, onChange: (selected) => {
	550	// TODO: Trigger onChange when increasing time
	551	i++;
	552	if (i > 2) {
	553	expect(true).toEqual(false); // Proof that this is not called
	554	expect(selected.hour()).toEqual(1);
	555	expect(selected.minute()).toEqual(1);
	556	expect(selected.second()).toEqual(1);
	557	done();
	558	}
	559	}});
	560
	561	// Check hour
f3c055	562	expect(utils.getHours(component)).toEqual('2');
290be5	563	utils.decreaseHour(component);
f3c055	564	expect(utils.getHours(component)).toEqual('1');
290be5	565
SE	566	// Check minute
f3c055	567	expect(utils.getMinutes(component)).toEqual('02');
290be5	568	utils.decreaseMinute(component);
f3c055	569	expect(utils.getMinutes(component)).toEqual('01');
290be5	570
SE	571	// Check second
f3c055	572	expect(utils.getSeconds(component)).toEqual('02');
290be5	573	utils.decreaseSecond(component);
f3c055	574	expect(utils.getSeconds(component)).toEqual('01');
290be5	575	});
SE	576
34dbeb	577	it('long increase time', (done) => {
290be5	578	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
SE	579	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time', defaultValue: date });
	580
	581	utils.increaseHour(component);
	582	setTimeout(() => {
f3c055	583	expect(utils.getHours(component)).not.toEqual('2');
SE	584	expect(utils.getHours(component)).not.toEqual('3');
290be5	585	done();
SE	586	}, 920);
	587	});
	588
34dbeb	589	it('long decrease 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.decreaseHour(component);
	594	setTimeout(() => {
f3c055	595	expect(utils.getHours(component)).not.toEqual('1');
SE	596	expect(utils.getHours(component)).not.toEqual('0');
290be5	597	done();
SE	598	}, 920);
	599	});
	600
	601	it('timeConstraints -> increase time', () => {
	602	let i = 0;
	603	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	604	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	605	defaultValue: date, timeConstraints: { hours: { max: 6, step: 8 }, minutes: { step: 15 }},
	606	onChange: (selected) => {
	607	// TODO
	608	i++;
	609	if (i > 2) {
	610	expect(selected.minute()).toEqual(17);
	611	expect(selected.second()).toEqual(3);
	612	done();
	613	}
	614	}
	615	});
	616
	617	utils.increaseHour(component);
f3c055	618	expect(utils.getHours(component)).toEqual('3');
290be5	619
SE	620	utils.increaseMinute(component);
f3c055	621	expect(utils.getMinutes(component)).toEqual('17');
290be5	622
SE	623	utils.increaseSecond(component);
f3c055	624	expect(utils.getSeconds(component)).toEqual('03');
290be5	625	});
SE	626
	627	it('timeConstraints -> decrease time', () => {
	628	let i = 0;
	629	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	630	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	631	defaultValue: date, timeConstraints: { minutes: { step: 15 }}, onChange: (selected) => {
	632	// TODO
	633	i++;
	634	if (i > 2) {
	635	expect(selected.minute()).toEqual(17);
	636	expect(selected.second()).toEqual(3);
	637	done();
	638	}
	639	}
	640	});
	641
	642	utils.decreaseMinute(component);
f3c055	643	expect(utils.getMinutes(component)).toEqual('47');
290be5	644	});
SE	645
	646	it('strictParsing=true', (done) => {
	647	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	648	mDate = moment(date),
	649	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	650	invalidStrDate = strDate + 'x',
	651	component = utils.createDatetime({ defaultValue: '', strictParsing: true,
	652	onChange: (updated) => {
	653	expect(updated, invalidStrDate);
	654	done();
	655	}});
	656
	657	component.find('.form-control').simulate('change', { target: { value: invalidStrDate }});
	658	});
	659
	660	it('strictParsing=false', (done) => {
	661	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	662	mDate = moment(date),
	663	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	664	invalidStrDate = strDate + 'x',
	665	component = utils.createDatetime({ defaultValue: '', strictParsing: false,
	666	onChange: (updated) => {
	667	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	668	done();
	669	}});
	670
	671	component.find('.form-control').simulate('change', { target: { value: invalidStrDate }});
	672	});
	673
	674	it('isValidDate -> disable months', () => {
	675	const dateBefore = new Date().getFullYear() + '-06-01',
	676	component = utils.createDatetime({ viewMode: 'months', isValidDate: (current) =>
	677	current.isBefore(moment(dateBefore, 'YYYY-MM-DD'))
	678	});
	679
	680	expect(utils.getNthMonth(component, 0).hasClass('rdtDisabled')).toEqual(false);
	681	expect(utils.getNthMonth(component, 4).hasClass('rdtDisabled')).toEqual(false);
	682	expect(utils.getNthMonth(component, 5).hasClass('rdtDisabled')).toEqual(true);
	683	expect(utils.getNthMonth(component, 11).hasClass('rdtDisabled')).toEqual(true);
	684	});
	685
	686	it('isValidDate -> disable years', () => {
	687	const component = utils.createDatetime({ viewMode: 'years', isValidDate: (current) =>
	688	current.isBefore(moment('2016-01-01', 'YYYY-MM-DD'))
	689	});
	690
	691	expect(utils.getNthYear(component, 0).hasClass('rdtDisabled')).toEqual(false);
	692	expect(utils.getNthYear(component, 6).hasClass('rdtDisabled')).toEqual(false);
	693	expect(utils.getNthYear(component, 7).hasClass('rdtDisabled')).toEqual(true);
	694	});
	695
	696	it('locale', () => {
	697	const component = utils.createDatetime({ locale: 'nl' }),
7f7ed5	698	expectedWeekDays = ['ma', 'di', 'wo', 'do', 'vr', 'za', 'zo'],
290be5	699	actualWeekDays = component.find('.rdtDays .dow').map((element) =>
7f7ed5	700	element.text().toLowerCase()
290be5	701	);
SE	702
	703	expect(actualWeekDays).toEqual(expectedWeekDays);
	704	});
	705
	706	it('locale with viewMode=months', () => {
	707	const component = utils.createDatetime({ locale: 'nl', viewMode: 'months' }),
	708	expectedMonths = ['Mrt', 'Mei'],
	709	actualMonths = [utils.getNthMonth(component, 2).text(), utils.getNthMonth(component, 4).text()];
	710
	711	expect(actualMonths).toEqual(expectedMonths);
	712	});
	713
25757d	714	it('closeOnSelect=false', (done) => {
290be5	715	const component = utils.createDatetime({ closeOnSelect: false });
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)).toBeTruthy();
25757d	727	done();
39e146	728	}, 0);
290be5	729	});
SE	730
25757d	731	it('closeOnSelect=true', (done) => {
290be5	732	const component = utils.createDatetime({ closeOnSelect: true });
SE	733
25757d	734	// A unknown race condition is causing this test to fail without this time out,
SE	735	// and when the test fails it says:
	736	// 'Timeout - Async callback was not invoked within timeout'
	737	// Ideally it would say something else but at least we know the tests are passing now
39e146	738	setTimeout(() => {
SE	739	expect(utils.isOpen(component)).toBeFalsy();
	740	utils.openDatepicker(component);
	741	expect(utils.isOpen(component)).toBeTruthy();
	742	utils.clickNthDay(component, 2);
	743	expect(utils.isOpen(component)).toBeFalsy();
25757d	744	done();
39e146	745	}, 0);
290be5	746	});
SE	747
	748	describe('defaultValue of type', () => {
	749	it('date', () => {
	750	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	751	momentDate = moment(date),
	752	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	753	component = utils.createDatetime({ defaultValue: date });
	754	expect(utils.getInputValue(component)).toEqual(strDate);
	755	});
	756
	757	it('moment', () => {
	758	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	759	momentDate = moment(date),
	760	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	761	component = utils.createDatetime({ defaultValue: momentDate });
	762	expect(utils.getInputValue(component)).toEqual(strDate);
	763	});
	764
	765	it('string', () => {
	766	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	767	momentDate = moment(date),
	768	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	769	component = utils.createDatetime({ defaultValue: strDate });
	770	expect(utils.getInputValue(component)).toEqual(strDate);
	771	});
	772	});
	773
	774	describe('timeFormat with', () => {
	775	it('milliseconds', () => {
	776	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm:ss:SSS' });
	777	expect(component.find('.rdtCounter').length).toEqual(4);
	778	// TODO: Test that you can input a value in milli seconds input
	779	});
	780
	781	it('seconds', () => {
	782	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm:ss' });
	783	expect(component.find('.rdtCounter').length).toEqual(3);
	784	});
	785
	786	it('minutes', () => {
	787	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm' });
	788	expect(component.find('.rdtCounter').length).toEqual(2);
	789	});
	790
	791	it('hours', () => {
	792	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH' });
	793	expect(component.find('.rdtCounter').length).toEqual(1);
	794	});
	795	});
64fc6a	796
SE	797	describe('being updated and should trigger update', () => {
25757d	798	it('dateFormat -> value should change format', (done) => {
64fc6a	799	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
SE	800	component = utils.createDatetime({
	801	dateFormat: 'YYYY-MM-DD', timeFormat: false, defaultValue: date
	802	});
	803
	804	const valueBefore = utils.getInputValue(component);
25757d	805	// A unknown race condition is causing this test to fail without this time out,
SE	806	// and when the test fails it says:
	807	// 'Timeout - Async callback was not invoked within timeout'
	808	// Ideally it would say something else but at least we know the tests are passing now
39e146	809	setTimeout(() => {
SE	810	component.setProps({ dateFormat: 'DD.MM.YYYY' });
	811	const valueAfter = utils.getInputValue(component);
64fc6a	812
39e146	813	expect(valueBefore).not.toEqual(valueAfter);
25757d	814	done();
39e146	815	}, 0);
64fc6a	816	});
SE	817
	818	it('UTC -> value should change format (true->false)', () => {
	819	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	820	momentDate = moment(date),
	821	component = utils.createDatetime({ value: momentDate, utc: true });
	822
	823	const valueBefore = utils.getInputValue(component);
	824	component.setProps({ utc: false }, () => {
	825	const valueAfter = utils.getInputValue(component);
	826
	827	expect(valueBefore).not.toEqual(valueAfter);
	828	});
	829	});
	830
	831	it('UTC -> value should change format (false->true)', () => {
	832	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	833	momentDate = moment(date),
	834	component = utils.createDatetime({ value: momentDate, utc: false });
	835
	836	const valueBefore = utils.getInputValue(component);
	837	component.setProps({ utc: true }, () => {
	838	const valueAfter = utils.getInputValue(component);
	839
	840	expect(valueBefore).not.toEqual(valueAfter);
	841	});
	842	});
	843
	844	it('locale -> picker should change language (viewMode=days)', () => {
	845	const component = utils.createDatetime({ viewMode: 'days', locale: 'nl' }),
	846	weekdaysBefore = component.find('.rdtDays .dow').map((element) =>
	847	element.text()
	848	);
	849
	850	component.setProps({ locale: 'sv' });
	851	const weekdaysAfter = component.find('.rdtDays .dow').map((element) =>
	852	element.text()
	853	);
	854
	855	expect(weekdaysBefore).not.toEqual(weekdaysAfter);
	856	});
	857
	858	it('locale -> picker should change language (viewMode=months)', () => {
	859	const component = utils.createDatetime({ viewMode: 'months', locale: 'nl' }),
	860	monthsBefore = [utils.getNthMonth(component, 2).text(), utils.getNthMonth(component, 4).text()];
	861
	862	component.setProps({ locale: 'sv' });
	863	const monthsAfter = [utils.getNthMonth(component, 2).text(), utils.getNthMonth(component, 4).text()];
	864
	865	expect(monthsBefore).not.toEqual(monthsAfter);
	866	});
	867	});
290be5	868	});
SE	869
	870	describe('event listeners', () => {
39e146	871	describe('onBlur', () => {
SE	872	it('when selecting a date', () => {
	873	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	874	onBlurFn = jest.fn(),
	875	component = utils.createDatetime({ value: date, onBlur: onBlurFn, closeOnSelect: true });
290be5	876
39e146	877	utils.openDatepicker(component);
SE	878	// Close component by selecting a date
	879	utils.clickNthDay(component, 2);
	880	expect(onBlurFn).toHaveBeenCalledTimes(1);
	881	});
	882
	883	it('when selecting date (value=null and closeOnSelect=true)', () => {
	884	const onBlurFn = jest.fn(),
	885	component = utils.createDatetime({ value: null, onBlur: onBlurFn, closeOnSelect: true });
	886
	887	utils.openDatepicker(component);
	888	// Close component by selecting a date
	889	utils.clickNthDay(component, 2);
	890	expect(onBlurFn).toHaveBeenCalledTimes(1);
	891	});
	892
	893	it('when selecting date (value=null and closeOnSelect=false)', () => {
	894	const onBlurFn = jest.fn(),
	895	component = utils.createDatetime({ value: null, onBlur: onBlurFn, closeOnSelect: false });
	896
	897	utils.openDatepicker(component);
	898	// Close component by selecting a date
	899	utils.clickNthDay(component, 2);
	900	expect(onBlurFn).not.toHaveBeenCalled();
	901	});
794700	902	});
SE	903
39e146	904	it('onFocus when opening datepicker', () => {
290be5	905	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
SE	906	onFocusFn = jest.fn(),
	907	component = utils.createDatetime({ value: date, onFocus: onFocusFn });
	908
794700	909	utils.openDatepicker(component);
290be5	910	expect(onFocusFn).toHaveBeenCalledTimes(1);
SE	911	});
	912
5377a9	913	describe('onViewModeChange', () => {
SE	914	it('when switch from days to time view mode', () => {
	915	const component = utils.createDatetime({ onViewModeChange: (viewMode) => {
	916	expect(viewMode).toEqual('time');
	917	}});
	918	expect(utils.isDayView(component)).toBeTruthy();
	919	utils.clickOnElement(component.find('.rdtTimeToggle'));
	920	expect(utils.isTimeView(component)).toBeTruthy();
	921	});
	922
	923	it('when switch from time to days view mode', () => {
	924	const component = utils.createDatetime({ viewMode: 'time', onViewModeChange: (viewMode) => {
	925	expect(viewMode).toEqual('days');
	926	}});
	927	expect(utils.isTimeView(component)).toBeTruthy();
	928	utils.clickOnElement(component.find('.rdtSwitch'));
	929	expect(utils.isDayView(component)).toBeTruthy();
	930	});
	931
	932	it('when switch from days to months view mode', () => {
	933	const component = utils.createDatetime({ onViewModeChange: (viewMode) => {
	934	expect(viewMode).toEqual('months');
	935	}});
	936	expect(utils.isDayView(component)).toBeTruthy();
	937	utils.clickOnElement(component.find('.rdtSwitch'));
	938	expect(utils.isMonthView(component)).toBeTruthy();
	939	});
	940
	941	it('when switch from months to years view mode', () => {
	942	const component = utils.createDatetime({ viewMode: 'months', onViewModeChange: (viewMode) => {
	943	expect(viewMode).toEqual('years');
	944	}});
	945	expect(utils.isMonthView(component)).toBeTruthy();
	946	utils.clickOnElement(component.find('.rdtSwitch'));
	947	expect(utils.isYearView(component)).toBeTruthy();
	948	});
	949
	950	it('only when switch from years to months view mode', () => {
	951	const component = utils.createDatetime({ viewMode: 'years', onViewModeChange: (viewMode) => {
	952	expect(viewMode).toEqual('months');
	953	}});
	954	expect(utils.isYearView(component)).toBeTruthy();
	955	utils.clickOnElement(component.find('.rdtSwitch'));
	956	expect(utils.isYearView(component)).toBeTruthy();
	957	utils.clickNthYear(component, 2);
	958	expect(utils.isMonthView(component)).toBeTruthy();
	959	});
	960
	961	it('when switch from months to days view mode', () => {
	962	const component = utils.createDatetime({ viewMode: 'months', onViewModeChange: (viewMode) => {
	963	expect(viewMode).toEqual('days');
	964	}});
	965	expect(utils.isMonthView(component)).toBeTruthy();
	966	utils.clickNthMonth(component, 2);
	967	expect(utils.isDayView(component)).toBeTruthy();
	968	});
	969	});
	970
39e146	971	describe('onChange', () => {
SE	972	it('trigger only when last selection type is selected', () => {
	973	// By selection type I mean if you CAN select day, then selecting a month
	974	// should not trigger onChange
	975	const onChangeFn = jest.fn(),
	976	component = utils.createDatetime({ viewMode: 'years', onChange: onChangeFn });
290be5	977
39e146	978	utils.openDatepicker(component);
290be5	979
39e146	980	utils.clickNthYear(component, 2);
SE	981	expect(onChangeFn).not.toHaveBeenCalled();
	982
	983	utils.clickNthMonth(component, 2);
	984	expect(onChangeFn).not.toHaveBeenCalled();
	985
	986	utils.clickNthDay(component, 2);
	987	expect(onChangeFn).toHaveBeenCalled();
	988	});
	989
	990	it('when selecting date', (done) => {
	991	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	992	mDate = moment(date),
	993	component = utils.createDatetime({ defaultValue: date, onChange: (selected) => {
	994	expect(selected.date()).toEqual(2);
290be5	995	expect(selected.month()).toEqual(mDate.month());
SE	996	expect(selected.year()).toEqual(mDate.year());
	997	done();
39e146	998	}});
290be5	999
39e146	1000	utils.clickNthDay(component, 7);
SE	1001	});
	1002
	1003	it('when selecting multiple date in a row', (done) => {
	1004	let i = 0;
	1005	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1006	mDate = moment(date),
	1007	component = utils.createDatetime({ defaultValue: date, onChange: (selected) => {
	1008	i++;
	1009	if (i > 2) {
	1010	expect(selected.date()).toEqual(4);
	1011	expect(selected.month()).toEqual(mDate.month());
	1012	expect(selected.year()).toEqual(mDate.year());
	1013	done();
	1014	}
	1015	}});
	1016
	1017	utils.clickNthDay(component, 7);
	1018	utils.clickNthDay(component, 8);
	1019	utils.clickNthDay(component, 9);
	1020	});
	1021
	1022	it('when selecting month', () => {
752fa8	1023	const date = Date.UTC(2000, 0, 15, 2, 2, 2, 2),
39e146	1024	onChangeFn = jest.fn(),
SE	1025	component = utils.createDatetime({ defaultValue: date, dateFormat: 'YYYY-MM', onChange: onChangeFn });
	1026
	1027	utils.clickNthMonth(component, 2);
	1028	expect(onChangeFn).toHaveBeenCalledTimes(1);
752fa8	1029	expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2000-03-15T02:02:02.002Z');
39e146	1030	});
SE	1031
7f7ed5	1032	xit('when selecting year', () => {
752fa8	1033	const date = Date.UTC(2000, 0, 15, 2, 2, 2, 2),
39e146	1034	onChangeFn = jest.fn(),
SE	1035	component = utils.createDatetime({ defaultValue: date, dateFormat: 'YYYY', onChange: onChangeFn });
	1036
	1037	utils.clickNthYear(component, 2);
	1038	expect(onChangeFn).toHaveBeenCalledTimes(1);
752fa8	1039	expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2001-01-15T02:02:02.002Z');
39e146	1040	});
SE	1041
	1042	it('when selecting time', () => {
	1043	// Did not manage to be able to get onChange to trigger, even though I know it does.
	1044	// The listener for the time buttons are set up differently because of having to handle both
	1045	// onMouseDown and onMouseUp. Not sure how to test it.
	1046	expect(true).toEqual(true);
	1047	});
	1048
290be5	1049	});
39e146	1050
290be5	1051	});
SE	1052
	1053	describe('with set value', () => {
	1054	it('date value', () => {
	1055	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1056	mDate = moment(date),
	1057	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1058	component = utils.createDatetime({ value: date });
	1059	expect(utils.getInputValue(component)).toEqual(strDate);
	1060	});
	1061
	1062	it('moment value', () => {
	1063	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1064	mDate = moment(date),
	1065	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1066	component = utils.createDatetime({ value: mDate });
	1067	expect(utils.getInputValue(component)).toEqual(strDate);
	1068	});
	1069
	1070	it('string value', () => {
	1071	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1072	mDate = moment(date),
	1073	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1074	component = utils.createDatetime({ value: strDate });
	1075	expect(utils.getInputValue(component)).toEqual(strDate);
	1076	});
	1077
	1078	it('UTC value from local moment', () => {
	1079	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1080	momentDate = moment(date),
	1081	momentDateUTC = moment.utc(date),
	1082	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	1083	component = utils.createDatetime({ value: momentDate, utc: true });
	1084	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	1085	});
	1086
	1087	it('UTC value from UTC moment', () => {
	1088	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1089	momentDateUTC = moment.utc(date),
	1090	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	1091	component = utils.createDatetime({ value: momentDateUTC, utc: true });
	1092	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	1093	});
	1094
	1095	it('UTC value from UTC string', () => {
	1096	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1097	momentDateUTC = moment.utc(date),
	1098	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	1099	component = utils.createDatetime({ value: strDateUTC, utc: true });
	1100	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	1101	});
	1102
	1103	it('invalid string value', (done) => {
	1104	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1105	mDate = moment(date),
	1106	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1107	component = utils.createDatetime({ defaultValue: 'invalid-value', onChange: (updated) => {
	1108	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	1109	done();
	1110	}});
	1111
	1112	expect(component.find('.form-control').getDOMNode().value).toEqual('invalid-value');
	1113	component.find('.form-control').simulate('change', { target: { value: strDate }});
	1114	});
	1115
	1116	it('delete invalid string value', (done) => {
	1117	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1118	component = utils.createDatetime({ defaultValue: date, onChange: (date) => {
	1119	expect(date).toEqual('');
	1120	done();
	1121	}});
	1122
	1123	component.find('.form-control').simulate('change', { target: { value: '' }});
	1124	});
	1125
	1126	it('invalid moment object', (done) => {
	1127	const invalidValue = moment(null),
	1128	date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1129	mDate = moment(date),
	1130	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1131	component = utils.createDatetime({ value: invalidValue, onChange: (updated) => {
	1132	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	1133	done();
	1134	}});
	1135
	1136	expect(component.find('.form-control').getDOMNode().value).toEqual('');
	1137	component.find('.form-control').simulate('change', { target: { value: strDate }});
	1138	});
	1139
	1140	});
	1141	});