Skip to content

Commit a59b0f0

Browse files
HichamELBSIHichamELBSI
committed
fix: datepicker unit tests
1 parent ace623b commit a59b0f0

File tree

1 file changed

+28
-27
lines changed

1 file changed

+28
-27
lines changed

‎packages/design-system/src/components/DatePicker/DatePicker.test.tsx‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ describe('DatePicker', () => {
3535

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

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

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

@@ -64,7 +64,7 @@ describe('DatePicker', () => {
6464

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

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

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

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

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

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

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

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

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

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

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

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

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

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

272-
const name = key === 'ArrowDown' ? 'Thursday 23 September 2021' : 'Thursday 9 September 2021';
272+
const name = key === 'ArrowDown' ? 'Thursday, 23 September 2021' : 'Thursday, 9 September 2021';
273273

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

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

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

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

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

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

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

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

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

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

352352
expect(getByRole('gridcell', { hidden: true, name: 'Su' })).toBeInTheDocument();
353-
expect(getByRole('gridcell', { name: 'Wednesday 7 September 2022' })).toBeInTheDocument();
353+
expect(getByRole('gridcell', { name: 'Wednesday, 7 September 2022' })).toBeInTheDocument();
354354
});
355355

356356
it('should format by en locale', async () => {
@@ -472,8 +472,8 @@ describe('DatePicker', () => {
472472
});
473473

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

570-
expect(getByRole('gridcell', { name: 'Tuesday 4 September 2001' })).toHaveAttribute('aria-selected', 'true');
571+
expect(getByRole('gridcell', { name: 'Tuesday, 4 September 2001' })).toHaveAttribute('aria-selected', 'true');
571572
});
572573
});
573574
});

0 commit comments

Comments
 (0)