84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
|
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);
|
||
|
|
});
|
||
|
|
});
|