Skip to content

Datepicker unit tests #1969

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

Closed
wants to merge 1 commit into from
Closed

Datepicker unit tests #1969

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
55 changes: 28 additions & 27 deletions packages/design-system/src/components/DatePicker/DatePicker.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ describe('DatePicker', () => {

expect(getByRole('dialog')).toBeInTheDocument();

await user.click(getByRole('gridcell', { name: 'Wednesday 1 September 2021' }));
await user.click(getByRole('gridcell', { name: 'Wednesday, 1 September 2021' }));

expect(onChange).toHaveBeenCalledWith(new Date('Sep 01 2021'));

Expand Down Expand Up @@ -64,7 +64,7 @@ describe('DatePicker', () => {

await user.click(getByRole('combobox', { name: 'date picker' }));

await user.click(getByRole('gridcell', { name: 'Wednesday 8 September 2021' }));
await user.click(getByRole('gridcell', { name: 'Wednesday, 8 September 2021' }));

expect(onChange).toHaveBeenCalledWith(new Date('Sep 08 2021'));
});
Expand Down Expand Up @@ -156,7 +156,7 @@ describe('DatePicker', () => {

await user.click(getByRole('combobox', { name: 'date picker' }));

await user.click(getByRole('gridcell', { name: 'Wednesday 8 September 2021' }));
await user.click(getByRole('gridcell', { name: 'Wednesday, 8 September 2021' }));

expect(getByRole('combobox', { name: 'date picker' })).toHaveValue('08/09/2021');

Expand All @@ -170,7 +170,7 @@ describe('DatePicker', () => {

await user.click(getByRole('combobox', { name: 'date picker' }));

await user.click(getByRole('gridcell', { name: 'Wednesday 8 September 2021' }));
await user.click(getByRole('gridcell', { name: 'Wednesday, 8 September 2021' }));

expect((getByRole('combobox') as HTMLInputElement).validity.patternMismatch).toBe(false);
});
Expand Down Expand Up @@ -239,7 +239,7 @@ describe('DatePicker', () => {

await user.click(getByRole('combobox', { name: 'date picker' }));

await user.click(getByRole('gridcell', { name: 'Wednesday 1 September 2021' }));
await user.click(getByRole('gridcell', { name: 'Wednesday, 1 September 2021' }));

expect(onChange).toHaveBeenCalledWith(new Date('Sep 01 2021'));
});
Expand Down Expand Up @@ -269,7 +269,7 @@ describe('DatePicker', () => {

await user.click(getByRole('combobox', { name: 'date picker' }));

const name = key === 'ArrowDown' ? 'Thursday 23 September 2021' : 'Thursday 9 September 2021';
const name = key === 'ArrowDown' ? 'Thursday, 23 September 2021' : 'Thursday, 9 September 2021';

expect(getByRole('gridcell', { name })).toHaveAttribute('aria-selected', 'false');

Expand All @@ -287,7 +287,7 @@ describe('DatePicker', () => {

await user.click(getByRole('combobox', { name: 'date picker' }));

const name = key === 'ArrowLeft' ? 'Wednesday 15 September 2021' : 'Friday 17 September 2021';
const name = key === 'ArrowLeft' ? 'Wednesday, 15 September 2021' : 'Friday, 17 September 2021';

expect(getByRole('gridcell', { name })).toHaveAttribute('aria-selected', 'false');

Expand All @@ -307,12 +307,12 @@ describe('DatePicker', () => {
await user.keyboard('[ArrowRight]');

expect(getByRole('combobox', { name: 'Month' })).toHaveTextContent('October');
expect(getByRole('gridcell', { name: 'Friday 1 October 2021' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Friday, 1 October 2021' })).toHaveAttribute('aria-selected', 'true');

await user.keyboard('[ArrowUp]');

expect(getByRole('combobox', { name: 'Month' })).toHaveTextContent('September');
expect(getByRole('gridcell', { name: 'Friday 24 September 2021' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Friday, 24 September 2021' })).toHaveAttribute('aria-selected', 'true');
});
});

Expand Down Expand Up @@ -350,7 +350,7 @@ describe('DatePicker', () => {
await user.click(getByRole('combobox', { name: 'date picker' }));

expect(getByRole('gridcell', { hidden: true, name: 'Su' })).toBeInTheDocument();
expect(getByRole('gridcell', { name: 'Wednesday 7 September 2022' })).toBeInTheDocument();
expect(getByRole('gridcell', { name: 'Wednesday, 7 September 2022' })).toBeInTheDocument();
});

it('should format by en locale', async () => {
Expand Down Expand Up @@ -472,8 +472,8 @@ describe('DatePicker', () => {
});

await user.click(getByRole('combobox', { name: 'date picker' }));
expect(getByRole('gridcell', { name: 'Thursday 3 September 2020' })).toHaveAttribute('aria-disabled', 'true');
expect(getByRole('gridcell', { name: 'Saturday 5 September 2020' })).toHaveAttribute('aria-disabled', 'false');
expect(getByRole('gridcell', { name: 'Thursday, 3 September 2020' })).toHaveAttribute('aria-disabled', 'true');
expect(getByRole('gridcell', { name: 'Saturday, 5 September 2020' })).toHaveAttribute('aria-disabled', 'false');
});

it('should limit the date selection to given max date', async () => {
Expand All @@ -483,8 +483,8 @@ describe('DatePicker', () => {
});

await user.click(getByRole('combobox', { name: 'date picker' }));
expect(getByRole('gridcell', { name: 'Thursday 3 September 2020' })).toHaveAttribute('aria-disabled', 'false');
expect(getByRole('gridcell', { name: 'Saturday 5 September 2020' })).toHaveAttribute('aria-disabled', 'true');
expect(getByRole('gridcell', { name: 'Thursday, 3 September 2020' })).toHaveAttribute('aria-disabled', 'false');
expect(getByRole('gridcell', { name: 'Saturday, 5 September 2020' })).toHaveAttribute('aria-disabled', 'true');
});

it('should set the initial calendar date to the minimum date if today is before that date', async () => {
Expand All @@ -494,7 +494,7 @@ describe('DatePicker', () => {

await user.click(getByRole('combobox', { name: 'date picker' }));

expect(getByRole('gridcell', { name: 'Monday 4 September 4000' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Monday, 4 September 4000' })).toHaveAttribute('aria-selected', 'true');
});

it('should set the intial calendar date to the maximum date if today is after that date', async () => {
Expand All @@ -504,7 +504,7 @@ describe('DatePicker', () => {

await user.click(getByRole('combobox', { name: 'date picker' }));

expect(getByRole('gridcell', { name: 'Monday 4 September 2000' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Monday, 4 September 2000' })).toHaveAttribute('aria-selected', 'true');
});
});

Expand All @@ -513,43 +513,44 @@ describe('DatePicker', () => {
const { getByRole, user } = render({ initialDate: new Date('Sept 04 2020'), locale: 'en-GB' });

await user.click(getByRole('combobox', { name: 'date picker' }));
expect(getByRole('gridcell', { name: 'Friday 4 September 2020' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Friday, 4 September 2020' })).toHaveAttribute('aria-selected', 'true');

await user.clear(getByRole('combobox', { name: 'date picker' }));

getByRole('combobox', { name: 'date picker' }).focus();

await user.keyboard('05');
expect(getByRole('gridcell', { name: 'Saturday 5 September 2020' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Saturday, 5 September 2020' })).toHaveAttribute('aria-selected', 'true');

await user.keyboard('/10');
expect(getByRole('gridcell', { name: 'Monday 5 October 2020' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Monday, 5 October 2020' })).toHaveAttribute('aria-selected', 'true');

await user.keyboard('/2022');
expect(getByRole('gridcell', { name: 'Wednesday 5 October 2022' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Wednesday, 5 October 2022' })).toHaveAttribute('aria-selected', 'true');
});

it('should correctly update the calendar when typing D/M/Y & D/M/YY', async () => {
const { getByRole, user } = render({ initialDate: new Date('Sept 04 2020'), locale: 'en-GB' });

await user.click(getByRole('combobox', { name: 'date picker' }));
expect(getByRole('gridcell', { name: 'Friday 4 September 2020' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Friday, 4 September 2020' })).toHaveAttribute('aria-selected', 'true');

await user.clear(getByRole('combobox', { name: 'date picker' }));

getByRole('combobox', { name: 'date picker' }).focus();

await user.keyboard('5');
expect(getByRole('gridcell', { name: 'Saturday 5 September 2020' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Saturday, 5 September 2020' })).toHaveAttribute('aria-selected', 'true');

await user.keyboard('/1');
expect(getByRole('gridcell', { name: 'Sunday 5 January 2020' })).toHaveAttribute('aria-selected', 'true');
expect(document.body).toMatchSnapshot();
expect(getByRole('gridcell', { name: 'Sunday, 5 January 2020' })).toHaveAttribute('aria-selected', 'true');

await user.keyboard('/2');
expect(getByRole('gridcell', { name: 'Saturday 5 January 2002' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Saturday, 5 January 2002' })).toHaveAttribute('aria-selected', 'true');

await user.keyboard('2');
expect(getByRole('gridcell', { name: 'Wednesday 5 January 2022' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Wednesday, 5 January 2022' })).toHaveAttribute('aria-selected', 'true');
});

it('should not go past the minimum date when typing in the input', async () => {
Expand All @@ -558,7 +559,7 @@ describe('DatePicker', () => {
await user.click(getByRole('combobox', { name: 'date picker' }));
await user.type(getByRole('combobox', { name: 'date picker' }), '09/03/1994');

expect(getByRole('gridcell', { name: 'Tuesday 4 September 2001' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Tuesday, 4 September 2001' })).toHaveAttribute('aria-selected', 'true');
});

it('should not go past the maximum date when typing in the input', async () => {
Expand All @@ -567,7 +568,7 @@ describe('DatePicker', () => {
await user.click(getByRole('combobox', { name: 'date picker' }));
await user.type(getByRole('combobox', { name: 'date picker' }), '09/03/2004');

expect(getByRole('gridcell', { name: 'Tuesday 4 September 2001' })).toHaveAttribute('aria-selected', 'true');
expect(getByRole('gridcell', { name: 'Tuesday, 4 September 2001' })).toHaveAttribute('aria-selected', 'true');
});
});
});
Loading