parent
921a13baad
commit
165a4cc469
@ -0,0 +1,83 @@
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
|
||||
import { queryAllByRole, render, screen } from '../../../../jest/test-helpers';
|
||||
import Datepicker from '../datepicker';
|
||||
|
||||
describe('<Datepicker />', () => {
|
||||
it('defaults to the current date', () => {
|
||||
const handler = jest.fn();
|
||||
render(<Datepicker onChange={handler} />);
|
||||
const today = new Date();
|
||||
|
||||
expect(screen.getByTestId('datepicker-month')).toHaveValue(String(today.getMonth()));
|
||||
expect(screen.getByTestId('datepicker-day')).toHaveValue(String(today.getDate()));
|
||||
expect(screen.getByTestId('datepicker-year')).toHaveValue(String(today.getFullYear()));
|
||||
});
|
||||
|
||||
it('changes number of days based on selected month and year', async() => {
|
||||
const handler = jest.fn();
|
||||
render(<Datepicker onChange={handler} />);
|
||||
|
||||
await userEvent.selectOptions(
|
||||
screen.getByTestId('datepicker-month'),
|
||||
screen.getByRole('option', { name: 'February' }),
|
||||
);
|
||||
|
||||
await userEvent.selectOptions(
|
||||
screen.getByTestId('datepicker-year'),
|
||||
screen.getByRole('option', { name: '2020' }),
|
||||
);
|
||||
|
||||
let daySelect: HTMLElement;
|
||||
daySelect = document.querySelector('[data-testid="datepicker-day"]');
|
||||
expect(queryAllByRole(daySelect, 'option')).toHaveLength(29);
|
||||
|
||||
await userEvent.selectOptions(
|
||||
screen.getByTestId('datepicker-year'),
|
||||
screen.getByRole('option', { name: '2021' }),
|
||||
);
|
||||
|
||||
daySelect = document.querySelector('[data-testid="datepicker-day"]') as HTMLElement;
|
||||
expect(queryAllByRole(daySelect, 'option')).toHaveLength(28);
|
||||
});
|
||||
|
||||
it('ranges from the current year to 120 years ago', () => {
|
||||
const handler = jest.fn();
|
||||
render(<Datepicker onChange={handler} />);
|
||||
const today = new Date();
|
||||
|
||||
const yearSelect = document.querySelector('[data-testid="datepicker-year"]') as HTMLElement;
|
||||
expect(queryAllByRole(yearSelect, 'option')).toHaveLength(121);
|
||||
expect(queryAllByRole(yearSelect, 'option')[0]).toHaveValue(String(today.getFullYear()));
|
||||
expect(queryAllByRole(yearSelect, 'option')[120]).toHaveValue(String(today.getFullYear() - 120));
|
||||
});
|
||||
|
||||
it('calls the onChange function when the inputs change', async() => {
|
||||
const handler = jest.fn();
|
||||
render(<Datepicker onChange={handler} />);
|
||||
|
||||
expect(handler.mock.calls.length).toEqual(1);
|
||||
|
||||
await userEvent.selectOptions(
|
||||
screen.getByTestId('datepicker-month'),
|
||||
screen.getByRole('option', { name: 'February' }),
|
||||
);
|
||||
|
||||
expect(handler.mock.calls.length).toEqual(2);
|
||||
|
||||
await userEvent.selectOptions(
|
||||
screen.getByTestId('datepicker-year'),
|
||||
screen.getByRole('option', { name: '2020' }),
|
||||
);
|
||||
|
||||
expect(handler.mock.calls.length).toEqual(3);
|
||||
|
||||
await userEvent.selectOptions(
|
||||
screen.getByTestId('datepicker-day'),
|
||||
screen.getByRole('option', { name: '5' }),
|
||||
);
|
||||
|
||||
expect(handler.mock.calls.length).toEqual(4);
|
||||
});
|
||||
});
|
@ -0,0 +1,94 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
import Select from '../select/select';
|
||||
import Stack from '../stack/stack';
|
||||
import Text from '../text/text';
|
||||
|
||||
const getDaysInMonth = (month: number, year: number) => new Date(year, month + 1, 0).getDate();
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
interface IDatepicker {
|
||||
onChange(date: Date): void
|
||||
}
|
||||
|
||||
/**
|
||||
* Datepicker that allows a user to select month, day, and year.
|
||||
*/
|
||||
const Datepicker = ({ onChange }: IDatepicker) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const [month, setMonth] = useState<number>(new Date().getMonth());
|
||||
const [day, setDay] = useState<number>(new Date().getDate());
|
||||
const [year, setYear] = useState<number>(2022);
|
||||
|
||||
const numberOfDays = useMemo(() => {
|
||||
return getDaysInMonth(month, year);
|
||||
}, [month, year]);
|
||||
|
||||
useEffect(() => {
|
||||
onChange(new Date(year, month, day));
|
||||
}, [month, day, year]);
|
||||
|
||||
return (
|
||||
<div className='grid grid-cols-1 gap-y-2 gap-x-2 sm:grid-cols-3'>
|
||||
<div className='sm:col-span-1'>
|
||||
<Stack>
|
||||
<Text size='sm' weight='medium' theme='muted'>
|
||||
<FormattedMessage id='datepicker.month' defaultMessage='Month' />
|
||||
</Text>
|
||||
|
||||
<Select
|
||||
value={month}
|
||||
onChange={(event) => setMonth(Number(event.target.value))}
|
||||
data-testid='datepicker-month'
|
||||
>
|
||||
{[...Array(12)].map((_, idx) => (
|
||||
<option key={idx} value={idx}>
|
||||
{intl.formatDate(new Date(year, idx, 1), { month: 'long' })}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div className='sm:col-span-1'>
|
||||
<Stack>
|
||||
<Text size='sm' weight='medium' theme='muted'>
|
||||
<FormattedMessage id='datepicker.day' defaultMessage='Day' />
|
||||
</Text>
|
||||
|
||||
<Select
|
||||
value={day}
|
||||
onChange={(event) => setDay(Number(event.target.value))}
|
||||
data-testid='datepicker-day'
|
||||
>
|
||||
{[...Array(numberOfDays)].map((_, idx) => (
|
||||
<option key={idx} value={idx + 1}>{idx + 1}</option>
|
||||
))}
|
||||
</Select>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div className='sm:col-span-1'>
|
||||
<Stack>
|
||||
<Text size='sm' weight='medium' theme='muted'>
|
||||
<FormattedMessage id='datepicker.year' defaultMessage='Year' />
|
||||
</Text>
|
||||
|
||||
<Select
|
||||
value={year}
|
||||
onChange={(event) => setYear(Number(event.target.value))}
|
||||
data-testid='datepicker-year'
|
||||
>
|
||||
{[...Array(121)].map((_, idx) => (
|
||||
<option key={idx} value={currentYear - idx}>{currentYear - idx}</option>
|
||||
))}
|
||||
</Select>
|
||||
</Stack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Datepicker;
|
Loading…
Reference in new issue