Skip to content

Commit 7fffa2a

Browse files
chrismancierochrismanciero
authored
fix: DatePicker update unit tests (#332)
* fix: update unit tests * fix comments, remove unnecessary test code * added assertion check after MouseDown event
1 parent 68899f0 commit 7fffa2a

File tree

1 file changed

+97
-19
lines changed

1 file changed

+97
-19
lines changed

‎src/DatePicker/DatePicker.test.js‎

Lines changed: 97 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -33,27 +33,25 @@ describe('<DatePicker />', () => {
3333

3434
test('open/close calendar', () => {
3535
wrapper = mount(defaultDatePicker);
36+
// check to make sure calendar is hidden
3637
expect(wrapper.state('hidden')).toBeTruthy();
3738

39+
// click to show calendar
3840
wrapper.find('input[type="text"]').simulate('click', { type: 'input' });
3941

42+
// check to make sure calendar is shown
4043
expect(wrapper.state('hidden')).toBeFalsy();
4144

45+
// clicking on input text should keep calendar displayed
4246
wrapper.find('input[type="text"]').simulate('click', { type: 'input' });
4347

48+
// check to make sure calendar is shown
4449
expect(wrapper.state('hidden')).toBeFalsy();
4550

46-
wrapper.instance().componentWillMount();
47-
48-
let event = new MouseEvent('mousedown', {
49-
target: document.querySelector('body')
50-
});
51-
document.dispatchEvent(event);
52-
53-
expect(wrapper.state('hidden')).toBeTruthy();
54-
51+
// click to show calendar
5552
wrapper.find('input[type="text"]').simulate('click', { type: '' });
5653

54+
// check to make sure calendar is shown
5755
expect(wrapper.state('hidden')).toBeFalsy();
5856
});
5957

@@ -62,34 +60,61 @@ describe('<DatePicker />', () => {
6260
//open date picker calendar
6361
expect(wrapper.state('hidden')).toBeTruthy();
6462

63+
// click to show calendar
6564
wrapper.find('input[type="text"]').simulate('click', { type: 'input' });
6665

66+
// check to make sure calendar is shown
6767
expect(wrapper.state('hidden')).toBeFalsy();
6868

6969
wrapper.instance().componentWillMount();
7070

71+
// click on body element
7172
let event = new MouseEvent('mousedown', {
7273
target: document.querySelector('body')
7374
});
7475
document.dispatchEvent(event);
7576

77+
// check to make sure calendar is hidden
7678
expect(wrapper.state('hidden')).toBeTruthy();
7779

7880
// show date picker, select date range then close
7981
wrapper.find('input[type="text"]').simulate('click', { type: '' });
8082

83+
// check to make sure calendar is shown
8184
expect(wrapper.state('hidden')).toBeFalsy();
85+
});
8286

87+
test('start date and end date range', () => {
8388
wrapper = mount(rangeDatePicker);
89+
// set dates
8490
let startRangeDate = new Date();
8591
let endRangeDate = new Date();
8692
endRangeDate.setDate(endRangeDate.getDate() + 3);
8793

8894
let arrDates = [startRangeDate, endRangeDate];
8995
wrapper.instance().updateDate(arrDates);
9096

97+
expect(wrapper.state('arrSelectedDates').length).toEqual(2);
98+
99+
// click on body element
100+
let event = new MouseEvent('mousedown', {
101+
target: document.querySelector('body')
102+
});
91103
document.dispatchEvent(event);
92104

105+
// check to make sure calendar is hidden
106+
expect(wrapper.state('hidden')).toBeTruthy();
107+
});
108+
109+
test('check start date greater than end date for range', () => {
110+
wrapper = mount(rangeDatePicker);
111+
// set dates
112+
let startRangeDate = new Date();
113+
let endRangeDate = new Date();
114+
endRangeDate.setDate(endRangeDate.getDate() + 3);
115+
116+
let arrDates = [startRangeDate, endRangeDate];
117+
93118
// make start date bigger than end date
94119
arrDates = [endRangeDate, startRangeDate];
95120
wrapper.instance().updateDate(arrDates);
@@ -101,10 +126,37 @@ describe('<DatePicker />', () => {
101126
expect(wrapper.state('formattedDate')).toEqual(switchFormattedDate);
102127
expect(wrapper.state('arrSelectedDates').length).toEqual(2);
103128

129+
// click on body element to hide calendar
130+
let event = new MouseEvent('mousedown', {
131+
target: document.querySelector('body')
132+
});
104133
document.dispatchEvent(event);
134+
135+
// check to make sure calendar is hidden
136+
expect(wrapper.state('hidden')).toBeTruthy();
137+
});
138+
139+
test('entering invalid range dates', () => {
140+
wrapper = mount(rangeDatePicker);
141+
// set dates
142+
let startRangeDate = new Date();
143+
let endRangeDate = new Date();
144+
endRangeDate.setDate(endRangeDate.getDate() + 3);
145+
146+
let startDate = `${startRangeDate.getMonth() +
147+
1}/${startRangeDate.getDate()}/${startRangeDate.getFullYear()}`;
148+
let endDate = `${endRangeDate.getMonth() +
149+
1}/${endRangeDate.getDate()}/${endRangeDate.getFullYear() + 4000}`;
150+
151+
wrapper.find('input[type="text"]')
152+
.simulate('change', { target: { value: `${startDate}-${endDate}` } });
153+
154+
wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' });
155+
156+
expect(wrapper.state('arrSelectedDates')).toEqual('undefined');
105157
});
106158

107-
test('update date method', () => {
159+
test('updateDate method', () => {
108160
// choose one day in default picker
109161
wrapper = mount(defaultDatePicker);
110162
const date = new Date();
@@ -143,7 +195,7 @@ describe('<DatePicker />', () => {
143195
expect(wrapper.state('arrSelectedDates').length).toEqual(2);
144196
});
145197

146-
test('enter date value', () => {
198+
test('pressing enter key on date input', () => {
147199
wrapper = mount(rangeDatePicker);
148200

149201
let startRangeDate = new Date();
@@ -175,20 +227,24 @@ describe('<DatePicker />', () => {
175227

176228
wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' });
177229

230+
expect(wrapper.state('formattedDate')).toBe('');
231+
expect(wrapper.state('selectedDate')).toBe('undefined');
232+
});
233+
234+
test('enter an invalid date string', () => {
178235
wrapper = mount(defaultDatePicker);
179236
let date = new Date();
180-
wrapper.instance().updateDate(date);
181-
expect(wrapper.state('selectedDate')).toEqual(date);
182-
formattedDate = `${date.getMonth() +
183-
1}/${date.getDate()}/${date.getFullYear()}`;
184-
expect(wrapper.state('formattedDate')).toEqual(formattedDate);
237+
let formattedDate = `${date.getMonth() +
238+
1}/${date.getDate()}/${date.getFullYear() + 4000}`;
239+
wrapper.find('input[type="text"]')
240+
.simulate('change', { target: { value: formattedDate } });
241+
185242
wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' });
186243

187-
// press Esc key
188-
wrapper.find('input[type="text"]').simulate('keypress', { key: 'Esc' });
244+
expect(wrapper.state('selectedDate')).toEqual('undefined');
189245
});
190246

191-
test('format date', () => {
247+
test('formatDate method', () => {
192248
wrapper = mount(rangeDatePicker);
193249
let startRangeDate = new Date();
194250
let endRangeDate = new Date();
@@ -225,6 +281,28 @@ describe('<DatePicker />', () => {
225281
expect(wrapper.instance().formatDate(startRangeDate)).toEqual('');
226282
});
227283

284+
test('enter text string for date', () => {
285+
wrapper = mount(defaultDatePicker);
286+
287+
wrapper.find('input[type="text"]')
288+
.simulate('change', { target: { value: 'May 14th, 2018' } });
289+
290+
wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' });
291+
292+
expect(wrapper.state('formattedDate')).toEqual('');
293+
});
294+
295+
test('enter text string for date on date range component', () => {
296+
wrapper = mount(rangeDatePicker);
297+
298+
wrapper.find('input[type="text"]')
299+
.simulate('change', { target: { value: 'May 14th, 2018-May 15th, 2018' } });
300+
301+
wrapper.find('input[type="text"]').simulate('keypress', { key: 'Enter' });
302+
303+
expect(wrapper.state('formattedDate')).toEqual('');
304+
});
305+
228306
test('modify date on change', () => {
229307
wrapper = mount(defaultDatePicker);
230308
wrapper

0 commit comments

Comments
 (0)