[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:
parent
7c65953ed9
commit
d4dd403e48
2 changed files with 32 additions and 0 deletions
|
@ -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))
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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}}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue