RedHatTraining/react-datetime.git - Gitblit

RedHatTraining / react-datetime

view | history | commit | commitdiff

Add test for updating dateFormat

Simon Egersand

2017-02-09 89e53205334226b3f0654e86f93f5a5fba285840

commit \| author \| age
290be5	1	import React from 'react';
SE	2	import moment from 'moment';
	3	import utils from './testUtils';
	4
	5	describe('Datetime', () => {
	6	it('create component', () => {
	7	const component = utils.createDatetime({});
	8
	9	expect(component).toBeDefined();
	10	expect(component.find('.rdt > .form-control').length).toEqual(1);
	11	expect(component.find('.rdt > .rdtPicker').length).toEqual(1);
	12	});
	13
	14	it('switch from day view to time view', () => {
	15	const component = utils.createDatetime({});
	16
	17	expect(utils.isDayView(component)).toBeTruthy();
	18	utils.clickOnElement(component.find('.rdtTimeToggle'));
	19	expect(utils.isTimeView(component)).toBeTruthy();
	20	});
	21
	22	it('persistent valid months going monthView->yearView->monthView', () => {
	23	const dateBefore = new Date().getFullYear() + '-06-01',
	24	component = utils.createDatetime({ viewMode: 'months', isValidDate: (current) =>
	25	current.isBefore(moment(dateBefore, 'YYYY-MM-DD'))
	26	});
	27
	28	expect(utils.isMonthView(component)).toBeTruthy();
	29	expect(utils.getNthMonth(component, 4).hasClass('rdtDisabled')).toEqual(false);
	30	expect(utils.getNthMonth(component, 5).hasClass('rdtDisabled')).toEqual(true);
	31
	32	// Go to year view
	33	utils.clickOnElement(component.find('.rdtSwitch'));
	34	expect(utils.isYearView(component)).toBeTruthy();
	35
	36	expect(utils.getNthYear(component, 0).hasClass('rdtDisabled')).toEqual(false);
	37	expect(utils.getNthYear(component, 9).hasClass('rdtDisabled')).toEqual(true);
	38
	39	utils.clickNthYear(component, 8);
	40	expect(utils.getNthMonth(component, 4).hasClass('rdtDisabled')).toEqual(false);
	41	expect(utils.getNthMonth(component, 5).hasClass('rdtDisabled')).toEqual(true);
	42	});
	43
	44	it('step through views', () => {
	45	const component = utils.createDatetime({ viewMode: 'time' });
	46
	47	expect(utils.isTimeView(component)).toBeTruthy();
	48	utils.clickOnElement(component.find('.rdtSwitch'));
	49	expect(utils.isDayView(component)).toBeTruthy();
	50	utils.clickOnElement(component.find('.rdtSwitch'));
	51	expect(utils.isMonthView(component)).toBeTruthy();
	52	utils.clickOnElement(component.find('.rdtSwitch'));
	53	expect(utils.isYearView(component)).toBeTruthy();
	54	});
	55
	56	it('selectYear', () => {
	57	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	58	component = utils.createDatetime({ viewMode: 'years', defaultValue: date });
	59	expect(utils.isYearView(component)).toBeTruthy();
	60	expect(component.find('.rdtSwitch').text()).toEqual('2000-2009');
	61
	62	// Click first year (1999)
	63	utils.clickOnElement(component.find('.rdtYear').at(0));
	64	expect(utils.isMonthView(component)).toBeTruthy();
	65	expect(component.find('.rdtSwitch').text()).toEqual('1999');
	66	});
	67
	68	it('increase decade', () => {
	69	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	70	component = utils.createDatetime({ viewMode: 'years', defaultValue: date });
	71
	72	expect(component.find('.rdtSwitch').text()).toEqual('2000-2009');
	73	utils.clickOnElement(component.find('.rdtNext span').at(0));
	74	expect(component.find('.rdtSwitch').text()).toEqual('2010-2019');
	75	utils.clickOnElement(component.find('.rdtNext span').at(0));
	76	expect(component.find('.rdtSwitch').text()).toEqual('2020-2029');
	77	});
	78
	79	it('decrease decade', () => {
	80	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	81	component = utils.createDatetime({ viewMode: 'years', defaultValue: date });
	82
	83	expect(component.find('.rdtSwitch').text()).toEqual('2000-2009');
	84	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	85	expect(component.find('.rdtSwitch').text()).toEqual('1990-1999');
	86	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	87	expect(component.find('.rdtSwitch').text()).toEqual('1980-1989');
	88	});
	89
	90	it('select month', () => {
	91	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	92	component = utils.createDatetime({ viewMode: 'months', defaultValue: date });
	93
	94	expect(utils.isMonthView(component)).toBeTruthy();
	95	expect(component.find('.rdtSwitch').text()).toEqual('2000');
	96	// Click any month to enter day view
	97	utils.clickNthMonth(component, 1);
	98	expect(utils.isDayView(component)).toBeTruthy();
	99	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('1');
	100	});
	101
	102	it('increase year', () => {
	103	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	104	component = utils.createDatetime({ viewMode: 'months', defaultValue: date });
	105
	106	expect(component.find('.rdtSwitch').text()).toEqual('2000');
	107	utils.clickOnElement(component.find('.rdtNext span').at(0));
	108	expect(component.find('.rdtSwitch').text()).toEqual('2001');
	109	utils.clickOnElement(component.find('.rdtNext span').at(0));
	110	expect(component.find('.rdtSwitch').text()).toEqual('2002');
	111	});
	112
	113	it('decrease year', () => {
	114	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	115	component = utils.createDatetime({ viewMode: 'months', defaultValue: date });
	116
	117	expect(component.find('.rdtSwitch').text()).toEqual('2000');
	118	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	119	expect(component.find('.rdtSwitch').text()).toEqual('1999');
	120	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	121	expect(component.find('.rdtSwitch').text()).toEqual('1998');
	122	});
	123
	124	it('increase month', () => {
	125	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	126	component = utils.createDatetime({ defaultValue: date });
	127
	128	expect(component.find('.rdtSwitch').text()).toEqual('January 2000');
	129	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('0');
	130	utils.clickOnElement(component.find('.rdtNext span').at(0));
	131	expect(component.find('.rdtSwitch').text()).toEqual('February 2000');
	132	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('1');
	133	utils.clickOnElement(component.find('.rdtNext span').at(0));
	134	expect(component.find('.rdtSwitch').text()).toEqual('March 2000');
	135	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('2');
	136	});
	137
	138	it('decrease month', () => {
	139	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	140	component = utils.createDatetime({ defaultValue: date });
	141
	142	expect(component.find('.rdtSwitch').text()).toEqual('January 2000');
	143	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('0');
	144	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	145	expect(component.find('.rdtSwitch').text()).toEqual('December 1999');
	146	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('11');
	147	utils.clickOnElement(component.find('.rdtPrev span').at(0));
	148	expect(component.find('.rdtSwitch').text()).toEqual('November 1999');
	149	expect(component.find('.rdtSwitch').getDOMNode().getAttribute('data-value')).toEqual('10');
	150	});
	151
	152	it('open picker', () => {
	153	const component = utils.createDatetime();
	154	expect(utils.isOpen(component)).toBeFalsy();
	155	component.find('.form-control').simulate('focus');
	156	expect(utils.isOpen(component)).toBeTruthy();
	157	});
	158
89e532	159	it('dateFormat -> prop changes and value updates accordingly', () => {
SE	160	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	161	component = utils.createDatetime({
	162	dateFormat: 'YYYY-MM-DD', timeFormat: false, defaultValue: date
	163	});
	164
	165	const valueBefore = utils.getInputValue(component);
	166	component.setProps({ dateFormat: 'DD.MM.YYYY'});
	167	const valueAfter = utils.getInputValue(component);
	168
	169	expect(valueBefore).not.toEqual(valueAfter);
	170	});
	171
290be5	172	describe('with custom props', () => {
SE	173	it('input=false', () => {
	174	const component = utils.createDatetime({ input: false });
	175	expect(component.find('.rdt > .form-control').length).toEqual(0);
	176	expect(component.find('.rdt > .rdtPicker').length).toEqual(1);
	177	});
	178
	179	it('dateFormat', () => {
	180	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	181	mDate = moment(date),
	182	component = utils.createDatetime({ value: date, dateFormat: 'M&D' });
	183	expect(utils.getInputValue(component)).toEqual(mDate.format('M&D LT'));
	184	});
	185
	186	it('dateFormat=false', () => {
	187	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	188	mDate = moment(date),
	189	component = utils.createDatetime({ value: date, dateFormat: false });
	190	expect(utils.getInputValue(component)).toEqual(mDate.format('LT'));
	191	// Make sure time view is active
	192	expect(utils.isTimeView(component)).toBeTruthy();
	193	// Make sure the date toggle is not rendered
	194	expect(component.find('thead').length).toEqual(0);
	195	});
	196
	197	it('timeFormat', () => {
	198	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	199	mDate = moment(date),
	200	format = 'HH:mm:ss:SSS',
	201	component = utils.createDatetime({ value: date, timeFormat: format });
	202	expect(utils.getInputValue(component)).toEqual(mDate.format('L ' + format));
	203	});
	204
	205	it('timeFormat=false', () => {
	206	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	207	mDate = moment(date),
	208	component = utils.createDatetime({ value: date, timeFormat: false });
	209	expect(utils.getInputValue(component)).toEqual(mDate.format('L'));
	210	// Make sure day view is active
	211	expect(utils.isDayView(component)).toBeTruthy();
	212	// Make sure the time toggle is not rendered
	213	expect(component.find('.timeToggle').length).toEqual(0);
	214	});
	215
	216	it('timeFormat with lowercase \'am\'', () => {
	217	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	218	format = 'HH:mm:ss:SSS a',
	219	component = utils.createDatetime({ value: date, timeFormat: format });
	220	expect(utils.getInputValue(component)).toEqual(expect.stringMatching('.*am$'));
	221	});
	222
	223	it('timeFormat with uppercase \'AM\'', () => {
	224	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	225	format = 'HH:mm:ss:SSS A',
	226	component = utils.createDatetime({ value: date, timeFormat: format });
	227	expect(utils.getInputValue(component)).toEqual(expect.stringMatching('.*AM$'));
	228	});
	229
	230	it('viewMode=years', () => {
	231	const component = utils.createDatetime({ viewMode: 'years' });
	232	expect(utils.isYearView(component)).toBeTruthy();
	233	});
	234
	235	it('viewMode=months', () => {
	236	const component = utils.createDatetime({ viewMode: 'months' });
	237	expect(utils.isMonthView(component)).toBeTruthy();
	238	});
	239
	240	it('viewMode=time', () => {
	241	const component = utils.createDatetime({ viewMode: 'time' });
	242	expect(utils.isTimeView(component)).toBeTruthy();
	243	});
	244
	245	it('className -> type string', () => {
	246	const component = utils.createDatetime({ className: 'custom-class' });
	247	expect(component.find('.custom-class').length).toEqual(1);
	248	});
	249
	250	it('className -> type string array', () => {
	251	const component = utils.createDatetime({ className: ['custom-class1', 'custom-class2'] });
	252	expect(component.find('.custom-class1').length).toEqual(1);
	253	expect(component.find('.custom-class2').length).toEqual(1);
	254	});
	255
	256	it('inputProps', () => {
	257	const component = utils.createDatetime({
	258	inputProps: { className: 'custom-class', type: 'email', placeholder: 'custom-placeholder' }
	259	});
	260	expect(component.find('input.custom-class').length).toEqual(1);
	261	expect(component.find('input').getDOMNode().type).toEqual('email');
	262	expect(component.find('input').getDOMNode().placeholder).toEqual('custom-placeholder');
	263	});
	264
	265	it('renderDay', () => {
	266	let props = {},
	267	currentDate = '',
	268	selectedDate = '';
	269	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	270	mDate = moment(date),
	271	renderDayFn = (fnProps, current, selected) => {
	272	props = fnProps;
	273	currentDate = current;
	274	selectedDate = selected;
	275
	276	return <td {...fnProps}>custom-content</td>;
	277	};
	278
	279	const component = utils.createDatetime({ value: mDate, renderDay: renderDayFn });
	280
	281	// Last day should be 6th of february
	282	expect(currentDate.day()).toEqual(6);
	283	expect(currentDate.month()).toEqual(1);
	284
	285	// The date must be the same
	286	expect(selectedDate.isSame(mDate)).toEqual(true);
	287
	288	// There should be a onClick function in the props
	289	expect(typeof props.onClick).toEqual('function');
	290
	291	// The cell text should match
	292	expect(component.find('.rdtDay').at(0).text()).toEqual('custom-content');
	293	});
	294
	295	it('renderMonth', () => {
	296	let props = {},
	297	month = '',
	298	year = '',
	299	selectedDate = '';
	300	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	301	mDate = moment(date),
	302	renderMonthFn = (fnProps, fnMonth, fnYear, selected) => {
	303	props = fnProps;
	304	month = fnMonth;
	305	year = fnYear;
	306	selectedDate = selected;
	307
	308	return <td {...fnProps}>custom-content</td>;
	309	};
	310
	311	const component = utils.createDatetime({ value: mDate, viewMode: 'months', renderMonth: renderMonthFn });
	312
	313	expect(month).toEqual(11);
	314	expect(year).toEqual(2000);
	315
	316	// The date must be the same
	317	expect(selectedDate.isSame(mDate)).toEqual(true);
	318
	319	// There should be a onClick function in the props
	320	expect(typeof props.onClick).toEqual('function');
	321
	322	// The cell text should match
	323	expect(component.find('.rdtMonth').at(0).text()).toEqual('custom-content');
	324	});
	325
	326	it('renderYear', () => {
	327	let props = {},
	328	year = '',
	329	selectedDate = '';
	330	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	331	mDate = moment(date),
	332	renderYearFn = (fnProps, fnYear, selected) => {
	333	props = fnProps;
	334	year = fnYear;
	335	selectedDate = selected;
	336
	337	return <td {...fnProps}>custom-content</td>;
	338	};
	339
	340	const component = utils.createDatetime({ value: mDate, viewMode: 'years', renderYear: renderYearFn });
	341
	342	expect(year).toEqual(2010);
	343
	344	// The date must be the same
	345	expect(selectedDate.isSame(mDate)).toEqual(true);
	346
	347	// There should be a onClick function in the props
	348	expect(typeof props.onClick).toEqual('function');
	349
	350	// The cell text should match
	351	expect(component.find('.rdtYear').at(0).text()).toEqual('custom-content');
	352	});
	353
	354	it('closeOnTab=true', () => {
	355	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	356	component = utils.createDatetime({ value: date });
	357
	358	expect(utils.isOpen(component)).toBeFalsy();
	359	component.find('.form-control').simulate('focus');
	360	expect(utils.isOpen(component)).toBeTruthy();
	361	component.find('.form-control').simulate('keyDown', { key: 'Tab', keyCode: 9, which: 9 });
	362	expect(utils.isOpen(component)).toBeFalsy();
	363	});
	364
	365	it('closeOnTab=false', () => {
	366	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	367	component = utils.createDatetime({ value: date, closeOnTab: false });
	368
	369	expect(utils.isOpen(component)).toBeFalsy();
	370	component.find('.form-control').simulate('focus');
	371	expect(utils.isOpen(component)).toBeTruthy();
	372	component.find('.form-control').simulate('keyDown', { key: 'Tab', keyCode: 9, which: 9 });
	373	expect(utils.isOpen(component)).toBeTruthy();
	374	});
	375
	376	it('increase time', () => {
	377	let i = 0;
	378	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	379	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	380	defaultValue: date, onChange: (selected) => {
	381	// TODO: Trigger onChange when increasing time
	382	i++;
	383	if (i > 2) {
	384	expect(true).toEqual(false); // Proof that this is not called
	385	expect(selected.hour()).toEqual(3);
	386	expect(selected.minute()).toEqual(3);
	387	expect(selected.second()).toEqual(3);
	388	done();
	389	}
	390	}});
	391
	392	// Check hour
	393	expect(component.find('.rdtCount').at(0).text()).toEqual('2');
	394	utils.increaseHour(component);
	395	expect(component.find('.rdtCount').at(0).text()).toEqual('3');
	396
	397	// Check minute
	398	expect(component.find('.rdtCount').at(1).text()).toEqual('02');
	399	utils.increaseMinute(component);
	400	expect(component.find('.rdtCount').at(1).text()).toEqual('03');
	401
	402	// Check second
	403	expect(component.find('.rdtCount').at(2).text()).toEqual('02');
	404	utils.increaseSecond(component);
	405	expect(component.find('.rdtCount').at(2).text()).toEqual('03');
	406	});
	407
	408	it('decrease time', () => {
	409	let i = 0;
	410	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	411	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	412	defaultValue: date, onChange: (selected) => {
	413	// TODO: Trigger onChange when increasing time
	414	i++;
	415	if (i > 2) {
	416	expect(true).toEqual(false); // Proof that this is not called
	417	expect(selected.hour()).toEqual(1);
	418	expect(selected.minute()).toEqual(1);
	419	expect(selected.second()).toEqual(1);
	420	done();
	421	}
	422	}});
	423
	424	// Check hour
	425	expect(component.find('.rdtCount').at(0).text()).toEqual('2');
	426	utils.decreaseHour(component);
	427	expect(component.find('.rdtCount').at(0).text()).toEqual('1');
	428
	429	// Check minute
	430	expect(component.find('.rdtCount').at(1).text()).toEqual('02');
	431	utils.decreaseMinute(component);
	432	expect(component.find('.rdtCount').at(1).text()).toEqual('01');
	433
	434	// Check second
	435	expect(component.find('.rdtCount').at(2).text()).toEqual('02');
	436	utils.decreaseSecond(component);
	437	expect(component.find('.rdtCount').at(2).text()).toEqual('01');
	438	});
	439
	440	it('long increase time', (done) => {
	441	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	442	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time', defaultValue: date });
	443
	444	utils.increaseHour(component);
	445	setTimeout(() => {
	446	expect(component.find('.rdtCount').at(0).text()).not.toEqual('2');
	447	expect(component.find('.rdtCount').at(0).text()).not.toEqual('3');
	448	done();
	449	}, 920);
	450	});
	451
	452	it('long decrease time', (done) => {
	453	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	454	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time', defaultValue: date });
	455
	456	utils.decreaseHour(component);
	457	setTimeout(() => {
	458	expect(component.find('.rdtCount').at(0).text()).not.toEqual('1');
	459	expect(component.find('.rdtCount').at(0).text()).not.toEqual('0');
	460	done();
	461	}, 920);
	462	});
	463
	464	it('timeConstraints -> increase time', () => {
	465	let i = 0;
	466	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	467	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	468	defaultValue: date, timeConstraints: { hours: { max: 6, step: 8 }, minutes: { step: 15 }},
	469	onChange: (selected) => {
	470	// TODO
	471	i++;
	472	if (i > 2) {
	473	expect(selected.minute()).toEqual(17);
	474	expect(selected.second()).toEqual(3);
	475	done();
	476	}
	477	}
	478	});
	479
	480	utils.increaseHour(component);
	481	expect(component.find('.rdtCount').at(0).text()).toEqual('3');
	482
	483	utils.increaseMinute(component);
	484	expect(component.find('.rdtCount').at(1).text()).toEqual('17');
	485
	486	utils.increaseSecond(component);
	487	expect(component.find('.rdtCount').at(2).text()).toEqual('03');
	488	});
	489
	490	it('timeConstraints -> decrease time', () => {
	491	let i = 0;
	492	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	493	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	494	defaultValue: date, timeConstraints: { minutes: { step: 15 }}, onChange: (selected) => {
	495	// TODO
	496	i++;
	497	if (i > 2) {
	498	expect(selected.minute()).toEqual(17);
	499	expect(selected.second()).toEqual(3);
	500	done();
	501	}
	502	}
	503	});
	504
	505	utils.decreaseMinute(component);
	506	expect(component.find('.rdtCount').at(1).text()).toEqual('47');
	507	});
	508
	509	it('strictParsing=true', (done) => {
	510	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	511	mDate = moment(date),
	512	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	513	invalidStrDate = strDate + 'x',
	514	component = utils.createDatetime({ defaultValue: '', strictParsing: true,
	515	onChange: (updated) => {
	516	expect(updated, invalidStrDate);
	517	done();
	518	}});
	519
	520	component.find('.form-control').simulate('change', { target: { value: invalidStrDate }});
	521	});
	522
	523	it('strictParsing=false', (done) => {
	524	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	525	mDate = moment(date),
	526	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	527	invalidStrDate = strDate + 'x',
	528	component = utils.createDatetime({ defaultValue: '', strictParsing: false,
	529	onChange: (updated) => {
	530	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	531	done();
	532	}});
	533
	534	component.find('.form-control').simulate('change', { target: { value: invalidStrDate }});
	535	});
	536
	537	it('isValidDate -> disable months', () => {
	538	const dateBefore = new Date().getFullYear() + '-06-01',
	539	component = utils.createDatetime({ viewMode: 'months', isValidDate: (current) =>
	540	current.isBefore(moment(dateBefore, 'YYYY-MM-DD'))
	541	});
	542
	543	expect(utils.getNthMonth(component, 0).hasClass('rdtDisabled')).toEqual(false);
	544	expect(utils.getNthMonth(component, 4).hasClass('rdtDisabled')).toEqual(false);
	545	expect(utils.getNthMonth(component, 5).hasClass('rdtDisabled')).toEqual(true);
	546	expect(utils.getNthMonth(component, 11).hasClass('rdtDisabled')).toEqual(true);
	547	});
	548
	549	it('isValidDate -> disable years', () => {
	550	const component = utils.createDatetime({ viewMode: 'years', isValidDate: (current) =>
	551	current.isBefore(moment('2016-01-01', 'YYYY-MM-DD'))
	552	});
	553
	554	expect(utils.getNthYear(component, 0).hasClass('rdtDisabled')).toEqual(false);
	555	expect(utils.getNthYear(component, 6).hasClass('rdtDisabled')).toEqual(false);
	556	expect(utils.getNthYear(component, 7).hasClass('rdtDisabled')).toEqual(true);
	557	});
	558
	559	it('locale', () => {
	560	const component = utils.createDatetime({ locale: 'nl' }),
	561	expectedWeekDays = ['Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za', 'Zo'],
	562	actualWeekDays = component.find('.rdtDays .dow').map((element) =>
	563	element.text()
	564	);
	565
	566	expect(actualWeekDays).toEqual(expectedWeekDays);
	567	});
	568
	569	it('locale with viewMode=months', () => {
	570	const component = utils.createDatetime({ locale: 'nl', viewMode: 'months' }),
	571	expectedMonths = ['Mrt', 'Mei'],
	572	actualMonths = [utils.getNthMonth(component, 2).text(), utils.getNthMonth(component, 4).text()];
	573
	574	expect(actualMonths).toEqual(expectedMonths);
	575	});
	576
	577	it('closeOnSelect=false', () => {
	578	const component = utils.createDatetime({ closeOnSelect: false });
	579
	580	expect(utils.isOpen(component)).toBeFalsy();
	581	component.find('.form-control').simulate('focus');
	582	expect(utils.isOpen(component)).toBeTruthy();
	583	utils.clickNthDay(component, 2);
	584	expect(utils.isOpen(component)).toBeTruthy();
	585	});
	586
	587	it('closeOnSelect=true', () => {
	588	const component = utils.createDatetime({ closeOnSelect: true });
	589
	590	expect(utils.isOpen(component)).toBeFalsy();
	591	component.find('.form-control').simulate('focus');
	592	expect(utils.isOpen(component)).toBeTruthy();
	593	utils.clickNthDay(component, 2);
	594	expect(utils.isOpen(component)).toBeFalsy();
	595	});
	596
	597	describe('defaultValue of type', () => {
	598	it('date', () => {
	599	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	600	momentDate = moment(date),
	601	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	602	component = utils.createDatetime({ defaultValue: date });
	603	expect(utils.getInputValue(component)).toEqual(strDate);
	604	});
	605
	606	it('moment', () => {
	607	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	608	momentDate = moment(date),
	609	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	610	component = utils.createDatetime({ defaultValue: momentDate });
	611	expect(utils.getInputValue(component)).toEqual(strDate);
	612	});
	613
	614	it('string', () => {
	615	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	616	momentDate = moment(date),
	617	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	618	component = utils.createDatetime({ defaultValue: strDate });
	619	expect(utils.getInputValue(component)).toEqual(strDate);
	620	});
	621	});
	622
	623	describe('timeFormat with', () => {
	624	it('milliseconds', () => {
	625	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm:ss:SSS' });
	626	expect(component.find('.rdtCounter').length).toEqual(4);
	627	// TODO: Test that you can input a value in milli seconds input
	628	});
	629
	630	it('seconds', () => {
	631	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm:ss' });
	632	expect(component.find('.rdtCounter').length).toEqual(3);
	633	});
	634
	635	it('minutes', () => {
	636	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm' });
	637	expect(component.find('.rdtCounter').length).toEqual(2);
	638	});
	639
	640	it('hours', () => {
	641	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH' });
	642	expect(component.find('.rdtCounter').length).toEqual(1);
	643	});
	644	});
	645	});
	646
	647	describe('event listeners', () => {
	648	it('onBlur', () => {
	649	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	650	onBlurFn = jest.fn(),
	651	component = utils.createDatetime({ value: date, onBlur: onBlurFn, closeOnSelect: true });
	652
	653	component.find('.form-control').simulate('focus');
	654	// Close component by selecting a date
	655	utils.clickNthDay(component, 2);
	656	expect(onBlurFn).toHaveBeenCalledTimes(1);
	657	});
	658
	659	it('onFocus', () => {
	660	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	661	onFocusFn = jest.fn(),
	662	component = utils.createDatetime({ value: date, onFocus: onFocusFn });
	663
	664	component.find('.form-control').simulate('focus');
	665	expect(onFocusFn).toHaveBeenCalledTimes(1);
	666	});
	667
	668	it('onChange', (done) => {
	669	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	670	mDate = moment(date),
	671	component = utils.createDatetime({ defaultValue: date, onChange: (selected) => {
	672	expect(selected.date()).toEqual(2);
	673	expect(selected.month()).toEqual(mDate.month());
	674	expect(selected.year()).toEqual(mDate.year());
	675	done();
	676	}});
	677
	678	utils.clickNthDay(component, 7);
	679	});
	680
	681	it('multiple onChange', (done) => {
	682	let i = 0;
	683	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	684	mDate = moment(date),
	685	component = utils.createDatetime({ defaultValue: date, onChange: (selected) => {
	686	i++;
	687	if (i > 2) {
	688	expect(selected.date()).toEqual(4);
	689	expect(selected.month()).toEqual(mDate.month());
	690	expect(selected.year()).toEqual(mDate.year());
	691	done();
	692	}
	693	}});
	694
	695	utils.clickNthDay(component, 7);
	696	utils.clickNthDay(component, 8);
	697	utils.clickNthDay(component, 9);
	698	});
	699	});
	700
	701	describe('with set value', () => {
	702	it('date value', () => {
	703	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	704	mDate = moment(date),
	705	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	706	component = utils.createDatetime({ value: date });
	707	expect(utils.getInputValue(component)).toEqual(strDate);
	708	});
	709
	710	it('moment value', () => {
	711	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	712	mDate = moment(date),
	713	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	714	component = utils.createDatetime({ value: mDate });
	715	expect(utils.getInputValue(component)).toEqual(strDate);
	716	});
	717
	718	it('string value', () => {
	719	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	720	mDate = moment(date),
	721	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	722	component = utils.createDatetime({ value: strDate });
	723	expect(utils.getInputValue(component)).toEqual(strDate);
	724	});
	725
	726	it('UTC value from local moment', () => {
	727	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	728	momentDate = moment(date),
	729	momentDateUTC = moment.utc(date),
	730	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	731	component = utils.createDatetime({ value: momentDate, utc: true });
	732	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	733	});
	734
	735	it('UTC value from UTC moment', () => {
	736	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	737	momentDateUTC = moment.utc(date),
	738	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	739	component = utils.createDatetime({ value: momentDateUTC, utc: true });
	740	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	741	});
	742
	743	it('UTC value from UTC string', () => {
	744	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	745	momentDateUTC = moment.utc(date),
	746	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	747	component = utils.createDatetime({ value: strDateUTC, utc: true });
	748	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	749	});
	750
	751	it('invalid string value', (done) => {
	752	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	753	mDate = moment(date),
	754	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	755	component = utils.createDatetime({ defaultValue: 'invalid-value', onChange: (updated) => {
	756	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	757	done();
	758	}});
	759
	760	expect(component.find('.form-control').getDOMNode().value).toEqual('invalid-value');
	761	component.find('.form-control').simulate('change', { target: { value: strDate }});
	762	});
	763
	764	it('delete invalid string value', (done) => {
	765	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	766	component = utils.createDatetime({ defaultValue: date, onChange: (date) => {
	767	expect(date).toEqual('');
	768	done();
	769	}});
	770
	771	component.find('.form-control').simulate('change', { target: { value: '' }});
	772	});
	773
	774	it('invalid moment object', (done) => {
	775	const invalidValue = moment(null),
	776	date = new Date(2000, 0, 15, 2, 2, 2, 2),
	777	mDate = moment(date),
	778	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	779	component = utils.createDatetime({ value: invalidValue, onChange: (updated) => {
	780	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	781	done();
	782	}});
	783
	784	expect(component.find('.form-control').getDOMNode().value).toEqual('');
	785	component.find('.form-control').simulate('change', { target: { value: strDate }});
	786	});
	787
	788	});
	789	});