RedHatTraining/react-datetime.git - Gitblit

RedHatTraining / react-datetime

view | history | commit | commitdiff

Test viewDate in separate file

Simon Egersand

2018-02-11 db7315ac35b5257824ba2cdbf46b150450f961ed

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
7c6792	377	it('className -> type string', () => {
SE	378	const component = utils.createDatetimeShallow({ className: 'custom-class' });
290be5	379	expect(component.find('.custom-class').length).toEqual(1);
SE	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
704c18	525	it('disableOnClickOutside=true', () => {
DA	526	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	527	component = utils.createDatetime({ value: date, disableOnClickOutside: true });
	528
	529	expect(utils.isOpen(component)).toBeFalsy();
	530	utils.openDatepicker(component);
	531	expect(utils.isOpen(component)).toBeTruthy();
	532	document.dispatchEvent(new Event('mousedown'));
06f14d	533	component.update();
704c18	534	expect(utils.isOpen(component)).toBeTruthy();
DA	535	});
	536
	537	it('disableOnClickOutside=false', () => {
	538	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	539	component = utils.createDatetime({ value: date, disableOnClickOutside: false });
	540
	541	expect(utils.isOpen(component)).toBeFalsy();
	542	utils.openDatepicker(component);
	543	expect(utils.isOpen(component)).toBeTruthy();
	544	document.dispatchEvent(new Event('mousedown'));
06f14d	545	component.update();
704c18	546	expect(utils.isOpen(component)).toBeFalsy();
DA	547	});
	548
290be5	549	it('increase time', () => {
SE	550	let i = 0;
	551	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	552	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	553	defaultValue: date, onChange: (selected) => {
	554	// TODO: Trigger onChange when increasing time
	555	i++;
	556	if (i > 2) {
	557	expect(true).toEqual(false); // Proof that this is not called
	558	expect(selected.hour()).toEqual(3);
	559	expect(selected.minute()).toEqual(3);
	560	expect(selected.second()).toEqual(3);
	561	done();
	562	}
	563	}});
	564
	565	// Check hour
f3c055	566	expect(utils.getHours(component)).toEqual('2');
290be5	567	utils.increaseHour(component);
f3c055	568	expect(utils.getHours(component)).toEqual('3');
290be5	569
SE	570	// Check minute
f3c055	571	expect(utils.getMinutes(component)).toEqual('02');
290be5	572	utils.increaseMinute(component);
f3c055	573	expect(utils.getMinutes(component)).toEqual('03');
290be5	574
SE	575	// Check second
f3c055	576	expect(utils.getSeconds(component)).toEqual('02');
290be5	577	utils.increaseSecond(component);
f3c055	578	expect(utils.getSeconds(component)).toEqual('03');
290be5	579	});
SE	580
	581	it('decrease time', () => {
	582	let i = 0;
	583	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	584	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	585	defaultValue: date, onChange: (selected) => {
	586	// TODO: Trigger onChange when increasing time
	587	i++;
	588	if (i > 2) {
	589	expect(true).toEqual(false); // Proof that this is not called
	590	expect(selected.hour()).toEqual(1);
	591	expect(selected.minute()).toEqual(1);
	592	expect(selected.second()).toEqual(1);
	593	done();
	594	}
	595	}});
	596
	597	// Check hour
f3c055	598	expect(utils.getHours(component)).toEqual('2');
290be5	599	utils.decreaseHour(component);
f3c055	600	expect(utils.getHours(component)).toEqual('1');
290be5	601
SE	602	// Check minute
f3c055	603	expect(utils.getMinutes(component)).toEqual('02');
290be5	604	utils.decreaseMinute(component);
f3c055	605	expect(utils.getMinutes(component)).toEqual('01');
290be5	606
SE	607	// Check second
f3c055	608	expect(utils.getSeconds(component)).toEqual('02');
290be5	609	utils.decreaseSecond(component);
f3c055	610	expect(utils.getSeconds(component)).toEqual('01');
290be5	611	});
SE	612
34dbeb	613	it('long increase time', (done) => {
290be5	614	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
SE	615	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time', defaultValue: date });
	616
	617	utils.increaseHour(component);
	618	setTimeout(() => {
f3c055	619	expect(utils.getHours(component)).not.toEqual('2');
SE	620	expect(utils.getHours(component)).not.toEqual('3');
290be5	621	done();
SE	622	}, 920);
	623	});
	624
34dbeb	625	it('long decrease time', (done) => {
290be5	626	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
SE	627	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time', defaultValue: date });
	628
	629	utils.decreaseHour(component);
	630	setTimeout(() => {
f3c055	631	expect(utils.getHours(component)).not.toEqual('1');
SE	632	expect(utils.getHours(component)).not.toEqual('0');
290be5	633	done();
SE	634	}, 920);
	635	});
	636
	637	it('timeConstraints -> increase time', () => {
	638	let i = 0;
	639	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	640	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	641	defaultValue: date, timeConstraints: { hours: { max: 6, step: 8 }, minutes: { step: 15 }},
	642	onChange: (selected) => {
	643	// TODO
	644	i++;
	645	if (i > 2) {
	646	expect(selected.minute()).toEqual(17);
	647	expect(selected.second()).toEqual(3);
	648	done();
	649	}
	650	}
	651	});
	652
	653	utils.increaseHour(component);
f3c055	654	expect(utils.getHours(component)).toEqual('3');
290be5	655
SE	656	utils.increaseMinute(component);
f3c055	657	expect(utils.getMinutes(component)).toEqual('17');
290be5	658
SE	659	utils.increaseSecond(component);
f3c055	660	expect(utils.getSeconds(component)).toEqual('03');
290be5	661	});
SE	662
	663	it('timeConstraints -> decrease time', () => {
	664	let i = 0;
	665	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	666	component = utils.createDatetime({ timeFormat: 'HH:mm:ss:SSS', viewMode: 'time',
	667	defaultValue: date, timeConstraints: { minutes: { step: 15 }}, onChange: (selected) => {
	668	// TODO
	669	i++;
	670	if (i > 2) {
	671	expect(selected.minute()).toEqual(17);
	672	expect(selected.second()).toEqual(3);
	673	done();
	674	}
	675	}
	676	});
	677
	678	utils.decreaseMinute(component);
f3c055	679	expect(utils.getMinutes(component)).toEqual('47');
290be5	680	});
SE	681
	682	it('strictParsing=true', (done) => {
	683	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	684	mDate = moment(date),
	685	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	686	invalidStrDate = strDate + 'x',
	687	component = utils.createDatetime({ defaultValue: '', strictParsing: true,
	688	onChange: (updated) => {
	689	expect(updated, invalidStrDate);
	690	done();
	691	}});
	692
	693	component.find('.form-control').simulate('change', { target: { value: invalidStrDate }});
	694	});
	695
	696	it('strictParsing=false', (done) => {
	697	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	698	mDate = moment(date),
	699	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	700	invalidStrDate = strDate + 'x',
	701	component = utils.createDatetime({ defaultValue: '', strictParsing: false,
	702	onChange: (updated) => {
	703	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	704	done();
	705	}});
	706
	707	component.find('.form-control').simulate('change', { target: { value: invalidStrDate }});
	708	});
	709
	710	it('isValidDate -> disable months', () => {
	711	const dateBefore = new Date().getFullYear() + '-06-01',
	712	component = utils.createDatetime({ viewMode: 'months', isValidDate: (current) =>
	713	current.isBefore(moment(dateBefore, 'YYYY-MM-DD'))
	714	});
	715
	716	expect(utils.getNthMonth(component, 0).hasClass('rdtDisabled')).toEqual(false);
	717	expect(utils.getNthMonth(component, 4).hasClass('rdtDisabled')).toEqual(false);
	718	expect(utils.getNthMonth(component, 5).hasClass('rdtDisabled')).toEqual(true);
	719	expect(utils.getNthMonth(component, 11).hasClass('rdtDisabled')).toEqual(true);
	720	});
	721
	722	it('isValidDate -> disable years', () => {
	723	const component = utils.createDatetime({ viewMode: 'years', isValidDate: (current) =>
	724	current.isBefore(moment('2016-01-01', 'YYYY-MM-DD'))
	725	});
	726
	727	expect(utils.getNthYear(component, 0).hasClass('rdtDisabled')).toEqual(false);
	728	expect(utils.getNthYear(component, 6).hasClass('rdtDisabled')).toEqual(false);
	729	expect(utils.getNthYear(component, 7).hasClass('rdtDisabled')).toEqual(true);
	730	});
	731
	732	it('locale', () => {
	733	const component = utils.createDatetime({ locale: 'nl' }),
7f7ed5	734	expectedWeekDays = ['ma', 'di', 'wo', 'do', 'vr', 'za', 'zo'],
290be5	735	actualWeekDays = component.find('.rdtDays .dow').map((element) =>
7f7ed5	736	element.text().toLowerCase()
290be5	737	);
SE	738
	739	expect(actualWeekDays).toEqual(expectedWeekDays);
	740	});
	741
	742	it('locale with viewMode=months', () => {
	743	const component = utils.createDatetime({ locale: 'nl', viewMode: 'months' }),
	744	expectedMonths = ['Mrt', 'Mei'],
	745	actualMonths = [utils.getNthMonth(component, 2).text(), utils.getNthMonth(component, 4).text()];
	746
	747	expect(actualMonths).toEqual(expectedMonths);
	748	});
	749
25757d	750	it('closeOnSelect=false', (done) => {
290be5	751	const component = utils.createDatetime({ closeOnSelect: false });
SE	752
25757d	753	// A unknown race condition is causing this test to fail without this time out,
SE	754	// and when the test fails it says:
	755	// 'Timeout - Async callback was not invoked within timeout'
	756	// Ideally it would say something else but at least we know the tests are passing now
39e146	757	setTimeout(() => {
SE	758	expect(utils.isOpen(component)).toBeFalsy();
	759	utils.openDatepicker(component);
	760	expect(utils.isOpen(component)).toBeTruthy();
	761	utils.clickNthDay(component, 2);
	762	expect(utils.isOpen(component)).toBeTruthy();
25757d	763	done();
39e146	764	}, 0);
290be5	765	});
SE	766
25757d	767	it('closeOnSelect=true', (done) => {
290be5	768	const component = utils.createDatetime({ closeOnSelect: true });
SE	769
25757d	770	// A unknown race condition is causing this test to fail without this time out,
SE	771	// and when the test fails it says:
	772	// 'Timeout - Async callback was not invoked within timeout'
	773	// Ideally it would say something else but at least we know the tests are passing now
39e146	774	setTimeout(() => {
SE	775	expect(utils.isOpen(component)).toBeFalsy();
	776	utils.openDatepicker(component);
	777	expect(utils.isOpen(component)).toBeTruthy();
	778	utils.clickNthDay(component, 2);
	779	expect(utils.isOpen(component)).toBeFalsy();
25757d	780	done();
39e146	781	}, 0);
290be5	782	});
SE	783
	784	describe('defaultValue of type', () => {
	785	it('date', () => {
	786	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	787	momentDate = moment(date),
	788	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	789	component = utils.createDatetime({ defaultValue: date });
	790	expect(utils.getInputValue(component)).toEqual(strDate);
	791	});
	792
	793	it('moment', () => {
	794	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	795	momentDate = moment(date),
	796	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	797	component = utils.createDatetime({ defaultValue: momentDate });
	798	expect(utils.getInputValue(component)).toEqual(strDate);
	799	});
	800
	801	it('string', () => {
	802	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	803	momentDate = moment(date),
	804	strDate = momentDate.format('L') + ' ' + momentDate.format('LT'),
	805	component = utils.createDatetime({ defaultValue: strDate });
	806	expect(utils.getInputValue(component)).toEqual(strDate);
	807	});
	808	});
	809
	810	describe('timeFormat with', () => {
	811	it('milliseconds', () => {
	812	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm:ss:SSS' });
	813	expect(component.find('.rdtCounter').length).toEqual(4);
	814	// TODO: Test that you can input a value in milli seconds input
	815	});
	816
	817	it('seconds', () => {
	818	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm:ss' });
	819	expect(component.find('.rdtCounter').length).toEqual(3);
	820	});
	821
	822	it('minutes', () => {
	823	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH:mm' });
	824	expect(component.find('.rdtCounter').length).toEqual(2);
	825	});
	826
	827	it('hours', () => {
	828	const component = utils.createDatetime({ viewMode: 'time', timeFormat: 'HH' });
	829	expect(component.find('.rdtCounter').length).toEqual(1);
	830	});
	831	});
64fc6a	832
SE	833	describe('being updated and should trigger update', () => {
25757d	834	it('dateFormat -> value should change format', (done) => {
64fc6a	835	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
SE	836	component = utils.createDatetime({
	837	dateFormat: 'YYYY-MM-DD', timeFormat: false, defaultValue: date
	838	});
	839
	840	const valueBefore = utils.getInputValue(component);
25757d	841	// A unknown race condition is causing this test to fail without this time out,
SE	842	// and when the test fails it says:
	843	// 'Timeout - Async callback was not invoked within timeout'
	844	// Ideally it would say something else but at least we know the tests are passing now
39e146	845	setTimeout(() => {
SE	846	component.setProps({ dateFormat: 'DD.MM.YYYY' });
	847	const valueAfter = utils.getInputValue(component);
64fc6a	848
39e146	849	expect(valueBefore).not.toEqual(valueAfter);
25757d	850	done();
39e146	851	}, 0);
64fc6a	852	});
SE	853
	854	it('UTC -> value should change format (true->false)', () => {
	855	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	856	momentDate = moment(date),
	857	component = utils.createDatetime({ value: momentDate, utc: true });
	858
	859	const valueBefore = utils.getInputValue(component);
	860	component.setProps({ utc: false }, () => {
	861	const valueAfter = utils.getInputValue(component);
	862
	863	expect(valueBefore).not.toEqual(valueAfter);
	864	});
	865	});
	866
	867	it('UTC -> value should change format (false->true)', () => {
	868	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	869	momentDate = moment(date),
	870	component = utils.createDatetime({ value: momentDate, utc: false });
	871
	872	const valueBefore = utils.getInputValue(component);
	873	component.setProps({ utc: true }, () => {
	874	const valueAfter = utils.getInputValue(component);
	875
	876	expect(valueBefore).not.toEqual(valueAfter);
	877	});
	878	});
	879
	880	it('locale -> picker should change language (viewMode=days)', () => {
	881	const component = utils.createDatetime({ viewMode: 'days', locale: 'nl' }),
	882	weekdaysBefore = component.find('.rdtDays .dow').map((element) =>
	883	element.text()
	884	);
	885
	886	component.setProps({ locale: 'sv' });
	887	const weekdaysAfter = component.find('.rdtDays .dow').map((element) =>
	888	element.text()
	889	);
	890
	891	expect(weekdaysBefore).not.toEqual(weekdaysAfter);
	892	});
	893
	894	it('locale -> picker should change language (viewMode=months)', () => {
	895	const component = utils.createDatetime({ viewMode: 'months', locale: 'nl' }),
	896	monthsBefore = [utils.getNthMonth(component, 2).text(), utils.getNthMonth(component, 4).text()];
	897
	898	component.setProps({ locale: 'sv' });
	899	const monthsAfter = [utils.getNthMonth(component, 2).text(), utils.getNthMonth(component, 4).text()];
	900
	901	expect(monthsBefore).not.toEqual(monthsAfter);
	902	});
	903	});
290be5	904	});
SE	905
	906	describe('event listeners', () => {
39e146	907	describe('onBlur', () => {
SE	908	it('when selecting a date', () => {
	909	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	910	onBlurFn = jest.fn(),
	911	component = utils.createDatetime({ value: date, onBlur: onBlurFn, closeOnSelect: true });
290be5	912
39e146	913	utils.openDatepicker(component);
SE	914	// Close component by selecting a date
	915	utils.clickNthDay(component, 2);
	916	expect(onBlurFn).toHaveBeenCalledTimes(1);
	917	});
	918
	919	it('when selecting date (value=null and closeOnSelect=true)', () => {
	920	const onBlurFn = jest.fn(),
	921	component = utils.createDatetime({ value: null, onBlur: onBlurFn, closeOnSelect: true });
	922
	923	utils.openDatepicker(component);
	924	// Close component by selecting a date
	925	utils.clickNthDay(component, 2);
	926	expect(onBlurFn).toHaveBeenCalledTimes(1);
	927	});
	928
	929	it('when selecting date (value=null and closeOnSelect=false)', () => {
	930	const onBlurFn = jest.fn(),
	931	component = utils.createDatetime({ value: null, onBlur: onBlurFn, closeOnSelect: false });
	932
	933	utils.openDatepicker(component);
	934	// Close component by selecting a date
	935	utils.clickNthDay(component, 2);
	936	expect(onBlurFn).not.toHaveBeenCalled();
	937	});
794700	938	});
SE	939
39e146	940	it('onFocus when opening datepicker', () => {
290be5	941	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
SE	942	onFocusFn = jest.fn(),
	943	component = utils.createDatetime({ value: date, onFocus: onFocusFn });
	944
794700	945	utils.openDatepicker(component);
290be5	946	expect(onFocusFn).toHaveBeenCalledTimes(1);
SE	947	});
	948
5377a9	949	describe('onViewModeChange', () => {
SE	950	it('when switch from days to time view mode', () => {
	951	const component = utils.createDatetime({ onViewModeChange: (viewMode) => {
	952	expect(viewMode).toEqual('time');
	953	}});
	954	expect(utils.isDayView(component)).toBeTruthy();
	955	utils.clickOnElement(component.find('.rdtTimeToggle'));
	956	expect(utils.isTimeView(component)).toBeTruthy();
	957	});
	958
	959	it('when switch from time to days view mode', () => {
	960	const component = utils.createDatetime({ viewMode: 'time', onViewModeChange: (viewMode) => {
	961	expect(viewMode).toEqual('days');
	962	}});
	963	expect(utils.isTimeView(component)).toBeTruthy();
	964	utils.clickOnElement(component.find('.rdtSwitch'));
	965	expect(utils.isDayView(component)).toBeTruthy();
	966	});
	967
	968	it('when switch from days to months view mode', () => {
	969	const component = utils.createDatetime({ onViewModeChange: (viewMode) => {
	970	expect(viewMode).toEqual('months');
	971	}});
	972	expect(utils.isDayView(component)).toBeTruthy();
	973	utils.clickOnElement(component.find('.rdtSwitch'));
	974	expect(utils.isMonthView(component)).toBeTruthy();
	975	});
	976
	977	it('when switch from months to years view mode', () => {
	978	const component = utils.createDatetime({ viewMode: 'months', onViewModeChange: (viewMode) => {
	979	expect(viewMode).toEqual('years');
	980	}});
	981	expect(utils.isMonthView(component)).toBeTruthy();
	982	utils.clickOnElement(component.find('.rdtSwitch'));
	983	expect(utils.isYearView(component)).toBeTruthy();
	984	});
	985
	986	it('only when switch from years to months view mode', () => {
	987	const component = utils.createDatetime({ viewMode: 'years', onViewModeChange: (viewMode) => {
	988	expect(viewMode).toEqual('months');
	989	}});
	990	expect(utils.isYearView(component)).toBeTruthy();
	991	utils.clickOnElement(component.find('.rdtSwitch'));
	992	expect(utils.isYearView(component)).toBeTruthy();
	993	utils.clickNthYear(component, 2);
	994	expect(utils.isMonthView(component)).toBeTruthy();
	995	});
	996
	997	it('when switch from months to days view mode', () => {
	998	const component = utils.createDatetime({ viewMode: 'months', onViewModeChange: (viewMode) => {
	999	expect(viewMode).toEqual('days');
	1000	}});
	1001	expect(utils.isMonthView(component)).toBeTruthy();
	1002	utils.clickNthMonth(component, 2);
	1003	expect(utils.isDayView(component)).toBeTruthy();
	1004	});
	1005	});
	1006
39e146	1007	describe('onChange', () => {
SE	1008	it('trigger only when last selection type is selected', () => {
	1009	// By selection type I mean if you CAN select day, then selecting a month
	1010	// should not trigger onChange
	1011	const onChangeFn = jest.fn(),
	1012	component = utils.createDatetime({ viewMode: 'years', onChange: onChangeFn });
290be5	1013
39e146	1014	utils.openDatepicker(component);
290be5	1015
39e146	1016	utils.clickNthYear(component, 2);
SE	1017	expect(onChangeFn).not.toHaveBeenCalled();
	1018
	1019	utils.clickNthMonth(component, 2);
	1020	expect(onChangeFn).not.toHaveBeenCalled();
	1021
	1022	utils.clickNthDay(component, 2);
	1023	expect(onChangeFn).toHaveBeenCalled();
	1024	});
	1025
	1026	it('when selecting date', (done) => {
	1027	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1028	mDate = moment(date),
	1029	component = utils.createDatetime({ defaultValue: date, onChange: (selected) => {
	1030	expect(selected.date()).toEqual(2);
290be5	1031	expect(selected.month()).toEqual(mDate.month());
SE	1032	expect(selected.year()).toEqual(mDate.year());
	1033	done();
39e146	1034	}});
290be5	1035
39e146	1036	utils.clickNthDay(component, 7);
SE	1037	});
	1038
	1039	it('when selecting multiple date in a row', (done) => {
	1040	let i = 0;
	1041	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1042	mDate = moment(date),
	1043	component = utils.createDatetime({ defaultValue: date, onChange: (selected) => {
	1044	i++;
	1045	if (i > 2) {
	1046	expect(selected.date()).toEqual(4);
	1047	expect(selected.month()).toEqual(mDate.month());
	1048	expect(selected.year()).toEqual(mDate.year());
	1049	done();
	1050	}
	1051	}});
	1052
	1053	utils.clickNthDay(component, 7);
	1054	utils.clickNthDay(component, 8);
	1055	utils.clickNthDay(component, 9);
	1056	});
	1057
	1058	it('when selecting month', () => {
752fa8	1059	const date = Date.UTC(2000, 0, 15, 2, 2, 2, 2),
39e146	1060	onChangeFn = jest.fn(),
SE	1061	component = utils.createDatetime({ defaultValue: date, dateFormat: 'YYYY-MM', onChange: onChangeFn });
	1062
	1063	utils.clickNthMonth(component, 2);
	1064	expect(onChangeFn).toHaveBeenCalledTimes(1);
752fa8	1065	expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2000-03-15T02:02:02.002Z');
39e146	1066	});
SE	1067
31d47f	1068	// Passes locally but not on Travis
7f7ed5	1069	xit('when selecting year', () => {
752fa8	1070	const date = Date.UTC(2000, 0, 15, 2, 2, 2, 2),
39e146	1071	onChangeFn = jest.fn(),
SE	1072	component = utils.createDatetime({ defaultValue: date, dateFormat: 'YYYY', onChange: onChangeFn });
	1073
	1074	utils.clickNthYear(component, 2);
	1075	expect(onChangeFn).toHaveBeenCalledTimes(1);
752fa8	1076	expect(onChangeFn.mock.calls[0][0].toJSON()).toEqual('2001-01-15T02:02:02.002Z');
39e146	1077	});
SE	1078
	1079	it('when selecting time', () => {
	1080	// Did not manage to be able to get onChange to trigger, even though I know it does.
	1081	// The listener for the time buttons are set up differently because of having to handle both
	1082	// onMouseDown and onMouseUp. Not sure how to test it.
	1083	expect(true).toEqual(true);
	1084	});
	1085
290be5	1086	});
39e146	1087
290be5	1088	});
SE	1089
	1090	describe('with set value', () => {
	1091	it('date value', () => {
	1092	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1093	mDate = moment(date),
	1094	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1095	component = utils.createDatetime({ value: date });
	1096	expect(utils.getInputValue(component)).toEqual(strDate);
	1097	});
	1098
	1099	it('moment value', () => {
	1100	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1101	mDate = moment(date),
	1102	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1103	component = utils.createDatetime({ value: mDate });
	1104	expect(utils.getInputValue(component)).toEqual(strDate);
	1105	});
	1106
	1107	it('string value', () => {
	1108	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1109	mDate = moment(date),
	1110	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1111	component = utils.createDatetime({ value: strDate });
	1112	expect(utils.getInputValue(component)).toEqual(strDate);
	1113	});
	1114
	1115	it('UTC value from local moment', () => {
	1116	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1117	momentDate = moment(date),
	1118	momentDateUTC = moment.utc(date),
	1119	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	1120	component = utils.createDatetime({ value: momentDate, utc: true });
	1121	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	1122	});
	1123
	1124	it('UTC value from UTC moment', () => {
	1125	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1126	momentDateUTC = moment.utc(date),
	1127	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	1128	component = utils.createDatetime({ value: momentDateUTC, utc: true });
	1129	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	1130	});
	1131
	1132	it('UTC value from UTC string', () => {
	1133	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1134	momentDateUTC = moment.utc(date),
	1135	strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
	1136	component = utils.createDatetime({ value: strDateUTC, utc: true });
	1137	expect(utils.getInputValue(component)).toEqual(strDateUTC);
	1138	});
	1139
	1140	it('invalid string value', (done) => {
	1141	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1142	mDate = moment(date),
	1143	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1144	component = utils.createDatetime({ defaultValue: 'invalid-value', onChange: (updated) => {
	1145	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	1146	done();
	1147	}});
	1148
	1149	expect(component.find('.form-control').getDOMNode().value).toEqual('invalid-value');
	1150	component.find('.form-control').simulate('change', { target: { value: strDate }});
	1151	});
	1152
	1153	it('delete invalid string value', (done) => {
	1154	const date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1155	component = utils.createDatetime({ defaultValue: date, onChange: (date) => {
	1156	expect(date).toEqual('');
	1157	done();
	1158	}});
	1159
	1160	component.find('.form-control').simulate('change', { target: { value: '' }});
	1161	});
	1162
	1163	it('invalid moment object', (done) => {
	1164	const invalidValue = moment(null),
	1165	date = new Date(2000, 0, 15, 2, 2, 2, 2),
	1166	mDate = moment(date),
	1167	strDate = mDate.format('L') + ' ' + mDate.format('LT'),
	1168	component = utils.createDatetime({ value: invalidValue, onChange: (updated) => {
	1169	expect(mDate.format('L LT')).toEqual(updated.format('L LT'));
	1170	done();
	1171	}});
	1172
	1173	expect(component.find('.form-control').getDOMNode().value).toEqual('');
	1174	component.find('.form-control').simulate('change', { target: { value: strDate }});
	1175	});
	1176
	1177	});
	1178	});