Skip to content

fix: DatePicker update unit tests #332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrismanciero merged 3 commits into from
Jan 31, 2019
Merged

fix: DatePicker update unit tests #332

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ffa3763
fix: update unit tests
chrismanciero Jan 31, 2019
cc951f0
fix comments, remove unnecessary test code
chrismanciero Jan 31, 2019
67a39a3
added assertion check after MouseDown event
chrismanciero Jan 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 94 additions & 10 deletions src/DatePicker/DatePicker.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,27 +33,36 @@ describe('<DatePicker />', () => {

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

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

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

// click to hide calendar
Copy link
Contributor

@greg-a-smith greg-a-smith Jan 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like the wrong comment. It's simulating a click in the input, which based on the next assertion, should not hide the calendar.

Copy link
Contributor Author

@chrismanciero chrismanciero Jan 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@greg-a-smith - thanks for noticing, i just updated the comment

wrapper.find('input[type="text"]').simulate('click', { type: 'input' });

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

wrapper.instance().componentWillMount();

// click on body element
let event = new MouseEvent('mousedown', {
target: document.querySelector('body')
});
document.dispatchEvent(event);

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

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

// check to make sure calendar is shown
expect(wrapper.state('hidden')).toBeFalsy();
});

Expand All @@ -62,33 +71,57 @@ describe('<DatePicker />', () => {
//open date picker calendar
expect(wrapper.state('hidden')).toBeTruthy();

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

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

wrapper.instance().componentWillMount();

// click on body element
let event = new MouseEvent('mousedown', {
target: document.querySelector('body')
});
document.dispatchEvent(event);

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

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

// check to make sure calendar is shown
expect(wrapper.state('hidden')).toBeFalsy();
});

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

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

expect(wrapper.state('arrSelectedDates').length).toEqual(2);

// click on body element
let event = new MouseEvent('mousedown', {
target: document.querySelector('body')
});
document.dispatchEvent(event);
Copy link
Contributor

@greg-a-smith greg-a-smith Jan 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand why the added mousedown event, but then no additional assertions. I'm probably just missing something.

Copy link
Contributor Author

@chrismanciero chrismanciero Jan 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed MouseEvent code since it was not necessary

Copy link
Contributor

@greg-a-smith greg-a-smith Jan 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am still seeing a couple of these in the files changed diff.

Copy link
Contributor Author

@chrismanciero chrismanciero Jan 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry, missed that mouseDown event. Just added an assertion to check that calendar is hidden.

});

test('check start date greater than end date for range', () => {
wrapper = mount(rangeDatePicker);
// set dates
let startRangeDate = new Date();
let endRangeDate = new Date();
endRangeDate.setDate(endRangeDate.getDate() + 3);

let arrDates = [startRangeDate, endRangeDate];

// make start date bigger than end date
arrDates = [endRangeDate, startRangeDate];
Expand All @@ -101,10 +134,34 @@ describe('<DatePicker />', () => {
expect(wrapper.state('formattedDate')).toEqual(switchFormattedDate);
expect(wrapper.state('arrSelectedDates').length).toEqual(2);

// click on body element
let event = new MouseEvent('mousedown', {
target: document.querySelector('body')
});
document.dispatchEvent(event);
Copy link
Contributor

@greg-a-smith greg-a-smith Jan 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand why the added mousedown event, but then no additional assertions. I'm probably just missing something.

Copy link
Contributor Author

@chrismanciero chrismanciero Jan 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added assertion to check that calendar is hidden

});

test('update date method', () => {
test('entering invalid range dates', () => {
wrapper = mount(rangeDatePicker);
// set dates
let startRangeDate = new Date();
let endRangeDate = new Date();
endRangeDate.setDate(endRangeDate.getDate() + 3);

let startDate = `${startRangeDate.getMonth() +
1}/${startRangeDate.getDate()}/${startRangeDate.getFullYear()}`;
let endDate = `${endRangeDate.getMonth() +
1}/${endRangeDate.getDate()}/${endRangeDate.getFullYear() + 4000}`;

wrapper.find('input[type="text"]')
.simulate('change', { target: { value: `${startDate}-${endDate}` } });

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

expect(wrapper.state('arrSelectedDates')).toEqual('undefined');
});

test('updateDate method', () => {
// choose one day in default picker
wrapper = mount(defaultDatePicker);
const date = new Date();
Expand Down Expand Up @@ -143,7 +200,7 @@ describe('<DatePicker />', () => {
expect(wrapper.state('arrSelectedDates').length).toEqual(2);
});

test('enter date value', () => {
test('pressing enter key on date input', () => {
wrapper = mount(rangeDatePicker);

let startRangeDate = new Date();
Expand Down Expand Up @@ -175,20 +232,25 @@ describe('<DatePicker />', () => {

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


// press Esc key
wrapper.find('input[type="text"]').simulate('keypress', { key: 'Esc' });
Copy link
Contributor

@greg-a-smith greg-a-smith Jan 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't each test block end with an assertion?

Copy link
Contributor Author

@chrismanciero chrismanciero Jan 31, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added assertions at the end of test

});

test('enter an invalid date string', () => {
wrapper = mount(defaultDatePicker);
let date = new Date();
wrapper.instance().updateDate(date);
expect(wrapper.state('selectedDate')).toEqual(date);
formattedDate = `${date.getMonth() +
1}/${date.getDate()}/${date.getFullYear()}`;
expect(wrapper.state('formattedDate')).toEqual(formattedDate);
let formattedDate = `${date.getMonth() +
1}/${date.getDate()}/${date.getFullYear() + 4000}`;
wrapper.find('input[type="text"]')
.simulate('change', { target: { value: formattedDate } });

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

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

test('format date', () => {
test('formatDate method', () => {
wrapper = mount(rangeDatePicker);
let startRangeDate = new Date();
let endRangeDate = new Date();
Expand Down Expand Up @@ -225,6 +287,28 @@ describe('<DatePicker />', () => {
expect(wrapper.instance().formatDate(startRangeDate)).toEqual('');
});

test('enter text string for date', () => {
wrapper = mount(defaultDatePicker);

wrapper.find('input[type="text"]')
.simulate('change', { target: { value: 'May 14th, 2018' } });

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

expect(wrapper.state('formattedDate')).toEqual('');
});

test('enter text string for date on date range component', () => {
wrapper = mount(rangeDatePicker);

wrapper.find('input[type="text"]')
.simulate('change', { target: { value: 'May 14th, 2018-May 15th, 2018' } });

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

expect(wrapper.state('formattedDate')).toEqual('');
});

test('modify date on change', () => {
wrapper = mount(defaultDatePicker);
wrapper
Expand Down