[GH-1130] Fixes 'Today' button not selecting date and entered date not being selected in calendar (#1149)

* [GH-1130] Fix 'Today' button not selecting date

* [GH-1130] Fix entered day not selected in calendar

* [GH-1130] Add test for calendar Today button

Co-authored-by: Harshil Sharma <harshilsharma63@gmail.com>
This commit is contained in:
CuriousCorrelation 2021-09-09 10:57:15 +05:30 committed by GitHub
parent 7c65953ed9
commit d4dd403e48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 0 deletions

View file

@ -242,4 +242,34 @@ describe('components/properties/dateRange', () => {
const retVal = '{"from":' + June15.getTime().toString() + ',"to":' + June20.getTime().toString() + '}'
expect(callback).toHaveBeenCalledWith(retVal)
})
test('handles `Today` button click event', () => {
const callback = jest.fn()
const component = wrapIntl(
<DateRange
className='octo-propertyvalue'
value={''}
onChange={callback}
/>,
)
// To see if 'Today' button correctly selects today's date,
// we can check it against `new Date()`.
// About `Date()`
// > "When called as a function, returns a string representation of the current date and time"
const date = new Date()
const today = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
const {getByText, getByTitle} = render(component)
const dayDisplay = getByTitle('Empty')
userEvent.click(dayDisplay)
const day = getByText('Today')
const modal = getByTitle('Close').children[0]
userEvent.click(day)
userEvent.click(modal)
const rObject = {from: today}
expect(callback).toHaveBeenCalledWith(JSON.stringify(rObject))
})
})

View file

@ -233,6 +233,8 @@ function DateRange(props: Props): JSX.Element {
locale={locale}
localeUtils={MomentLocaleUtils}
todayButton={intl.formatMessage({id: 'DateRange.today', defaultMessage: 'Today'})}
onTodayButtonClick={handleDayClick}
month={dateFrom}
selectedDays={[dateFrom, dateTo ? {from: dateFrom, to: dateTo} : {from: dateFrom, to: dateFrom}]}
modifiers={dateTo ? {start: dateFrom, end: dateTo} : {start: dateFrom, end: dateFrom}}
/>