Skip to content

Commit 16dc87b

Browse files
wojtekmajwojtekmaj
authored
Convert to TypeScript (#271)
1 parent bf53354 commit 16dc87b

File tree

5 files changed

+152
-67
lines changed

5 files changed

+152
-67
lines changed

‎src/DateRangePicker.spec.jsx‎ renamed to ‎src/DateRangePicker.spec.tsx‎

Lines changed: 60 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
55

66
import DateRangePicker from './DateRangePicker';
77

8-
async function waitForElementToBeRemovedOrHidden(callback) {
8+
async function waitForElementToBeRemovedOrHidden(callback: () => HTMLElement | null) {
99
const element = callback();
1010

1111
if (element) {
@@ -85,7 +85,9 @@ describe('DateRangePicker', () => {
8585
'button.react-daterange-picker__calendar-button',
8686
);
8787
const clearButton = container.querySelector('button.react-daterange-picker__clear-button');
88-
const dateInputs = container.querySelectorAll('.react-daterange-picker__inputGroup');
88+
const dateInputs = container.querySelectorAll(
89+
'.react-daterange-picker__inputGroup',
90+
) as unknown as [HTMLDivElement, HTMLDivElement];
8991

9092
const [dateFromInput, dateToInput] = dateInputs;
9193

@@ -122,7 +124,9 @@ describe('DateRangePicker', () => {
122124

123125
const { container } = render(<DateRangePicker {...placeholderProps} />);
124126

125-
const dateInputs = container.querySelectorAll('.react-daterange-picker__inputGroup');
127+
const dateInputs = container.querySelectorAll(
128+
'.react-daterange-picker__inputGroup',
129+
) as unknown as [HTMLDivElement, HTMLDivElement];
126130

127131
const [dateFromInput, dateToInput] = dateInputs;
128132

@@ -234,7 +238,9 @@ describe('DateRangePicker', () => {
234238
it('renders clear icon by default when clearIcon is not given', () => {
235239
const { container } = render(<DateRangePicker />);
236240

237-
const clearButton = container.querySelector('button.react-daterange-picker__clear-button');
241+
const clearButton = container.querySelector(
242+
'button.react-daterange-picker__clear-button',
243+
) as HTMLButtonElement;
238244

239245
const clearIcon = clearButton.querySelector('svg');
240246

@@ -251,7 +257,7 @@ describe('DateRangePicker', () => {
251257

252258
it('renders clear icon when given clearIcon as a React element', () => {
253259
function ClearIcon() {
254-
return '❌';
260+
return <>❌</>;
255261
}
256262

257263
const { container } = render(<DateRangePicker clearIcon={<ClearIcon />} />);
@@ -263,7 +269,7 @@ describe('DateRangePicker', () => {
263269

264270
it('renders clear icon when given clearIcon as a function', () => {
265271
function ClearIcon() {
266-
return '❌';
272+
return <>❌</>;
267273
}
268274

269275
const { container } = render(<DateRangePicker clearIcon={ClearIcon} />);
@@ -290,7 +296,7 @@ describe('DateRangePicker', () => {
290296

291297
const calendarButton = container.querySelector(
292298
'button.react-daterange-picker__calendar-button',
293-
);
299+
) as HTMLButtonElement;
294300

295301
const calendarIcon = calendarButton.querySelector('svg');
296302

@@ -309,7 +315,7 @@ describe('DateRangePicker', () => {
309315

310316
it('renders calendar icon when given calendarIcon as a React element', () => {
311317
function CalendarIcon() {
312-
return '📅';
318+
return <>📅</>;
313319
}
314320

315321
const { container } = render(<DateRangePicker calendarIcon={<CalendarIcon />} />);
@@ -323,7 +329,7 @@ describe('DateRangePicker', () => {
323329

324330
it('renders calendar icon when given calendarIcon as a function', () => {
325331
function CalendarIcon() {
326-
return '📅';
332+
return <>📅</>;
327333
}
328334

329335
const { container } = render(<DateRangePicker calendarIcon={CalendarIcon} />);
@@ -373,7 +379,9 @@ describe('DateRangePicker', () => {
373379

374380
expect(calendar).toBeFalsy();
375381

376-
const button = container.querySelector('button.react-daterange-picker__calendar-button');
382+
const button = container.querySelector(
383+
'button.react-daterange-picker__calendar-button',
384+
) as HTMLButtonElement;
377385

378386
fireEvent.click(button);
379387

@@ -390,7 +398,7 @@ describe('DateRangePicker', () => {
390398

391399
expect(calendar).toBeFalsy();
392400

393-
const input = container.querySelector('input[name="day"]');
401+
const input = container.querySelector('input[name="day"]') as HTMLInputElement;
394402

395403
fireEvent.focus(input);
396404

@@ -403,7 +411,7 @@ describe('DateRangePicker', () => {
403411
const { container } = render(<DateRangePicker openCalendarOnFocus />);
404412

405413
const calendar = container.querySelector('.react-calendar');
406-
const input = container.querySelector('input[name="day"]');
414+
const input = container.querySelector('input[name="day"]') as HTMLInputElement;
407415

408416
expect(calendar).toBeFalsy();
409417

@@ -418,7 +426,7 @@ describe('DateRangePicker', () => {
418426
const { container } = render(<DateRangePicker openCalendarOnFocus={false} />);
419427

420428
const calendar = container.querySelector('.react-calendar');
421-
const input = container.querySelector('input[name="day"]');
429+
const input = container.querySelector('input[name="day"]') as HTMLInputElement;
422430

423431
expect(calendar).toBeFalsy();
424432

@@ -433,7 +441,7 @@ describe('DateRangePicker', () => {
433441
const { container } = render(<DateRangePicker format="dd.MMMM.yyyy" />);
434442

435443
const calendar = container.querySelector('.react-calendar');
436-
const select = container.querySelector('select[name="month"]');
444+
const select = container.querySelector('select[name="month"]') as HTMLSelectElement;
437445

438446
expect(calendar).toBeFalsy();
439447

@@ -479,8 +487,8 @@ describe('DateRangePicker', () => {
479487
const { container } = render(<DateRangePicker isOpen />);
480488

481489
const customInputs = container.querySelectorAll('input[data-input]');
482-
const monthInput = customInputs[0];
483-
const dayInput = customInputs[1];
490+
const monthInput = customInputs[0] as HTMLInputElement;
491+
const dayInput = customInputs[1] as HTMLInputElement;
484492

485493
fireEvent.blur(monthInput);
486494
fireEvent.focus(dayInput);
@@ -493,7 +501,9 @@ describe('DateRangePicker', () => {
493501
it('closes Calendar when changing value by default', async () => {
494502
const { container } = render(<DateRangePicker isOpen />);
495503

496-
const [firstTile, secondTile] = container.querySelectorAll('.react-calendar__tile');
504+
const [firstTile, secondTile] = container.querySelectorAll(
505+
'.react-calendar__tile',
506+
) as unknown as [HTMLButtonElement, HTMLButtonElement];
497507

498508
act(() => {
499509
fireEvent.click(firstTile);
@@ -511,7 +521,9 @@ describe('DateRangePicker', () => {
511521
it('closes Calendar when changing value with prop closeCalendar = true', async () => {
512522
const { container } = render(<DateRangePicker closeCalendar isOpen />);
513523

514-
const [firstTile, secondTile] = container.querySelectorAll('.react-calendar__tile');
524+
const [firstTile, secondTile] = container.querySelectorAll(
525+
'.react-calendar__tile',
526+
) as unknown as [HTMLButtonElement, HTMLButtonElement];
515527

516528
act(() => {
517529
fireEvent.click(firstTile);
@@ -529,7 +541,9 @@ describe('DateRangePicker', () => {
529541
it('does not close Calendar when changing value with prop closeCalendar = false', () => {
530542
const { container } = render(<DateRangePicker closeCalendar={false} isOpen />);
531543

532-
const [firstTile, secondTile] = container.querySelectorAll('.react-calendar__tile');
544+
const [firstTile, secondTile] = container.querySelectorAll(
545+
'.react-calendar__tile',
546+
) as unknown as [HTMLButtonElement, HTMLButtonElement];
533547

534548
act(() => {
535549
fireEvent.click(firstTile);
@@ -547,7 +561,7 @@ describe('DateRangePicker', () => {
547561
it('does not close Calendar when changing value using inputs', () => {
548562
const { container } = render(<DateRangePicker isOpen />);
549563

550-
const dayInput = container.querySelector('input[name="day"]');
564+
const dayInput = container.querySelector('input[name="day"]') as HTMLInputElement;
551565

552566
act(() => {
553567
fireEvent.change(dayInput, { target: { value: '1' } });
@@ -564,13 +578,13 @@ describe('DateRangePicker', () => {
564578

565579
const { container } = render(<DateRangePicker onChange={onChange} value={value} />);
566580

567-
const dayInput = container.querySelector('input[name="day"]');
581+
const dayInput = container.querySelector('input[name="day"]') as HTMLInputElement;
568582

569583
act(() => {
570584
fireEvent.change(dayInput, { target: { value: '1' } });
571585
});
572586

573-
expect(onChange).toHaveBeenCalledWith([new Date(2023, 0, 1), undefined]);
587+
expect(onChange).toHaveBeenCalledWith([new Date(2023, 0, 1), null]);
574588
});
575589

576590
it('clears the value when clicking on a button', () => {
@@ -579,7 +593,9 @@ describe('DateRangePicker', () => {
579593
const { container } = render(<DateRangePicker onChange={onChange} />);
580594

581595
const calendar = container.querySelector('.react-calendar');
582-
const button = container.querySelector('button.react-daterange-picker__clear-button');
596+
const button = container.querySelector(
597+
'button.react-daterange-picker__clear-button',
598+
) as HTMLButtonElement;
583599

584600
expect(calendar).toBeFalsy();
585601

@@ -597,9 +613,9 @@ describe('DateRangePicker', () => {
597613
const nextValueFrom = new Date(2018, 1, 15);
598614

599615
const customInputs = container.querySelectorAll('input[data-input]');
600-
const monthInput = customInputs[0];
601-
const dayInput = customInputs[1];
602-
const yearInput = customInputs[2];
616+
const monthInput = customInputs[0] as HTMLInputElement;
617+
const dayInput = customInputs[1] as HTMLInputElement;
618+
const yearInput = customInputs[2] as HTMLInputElement;
603619

604620
act(() => {
605621
fireEvent.change(monthInput, { target: { value: '2' } });
@@ -614,7 +630,7 @@ describe('DateRangePicker', () => {
614630
});
615631

616632
expect(onChange).toHaveBeenCalled();
617-
expect(onChange).toHaveBeenCalledWith([nextValueFrom, undefined]);
633+
expect(onChange).toHaveBeenCalledWith([nextValueFrom, null]);
618634
});
619635

620636
it('calls onChange properly given single initial value', () => {
@@ -626,9 +642,9 @@ describe('DateRangePicker', () => {
626642
const nextValueFrom = new Date(2018, 1, 15);
627643

628644
const customInputs = container.querySelectorAll('input[data-input]');
629-
const monthInput = customInputs[0];
630-
const dayInput = customInputs[1];
631-
const yearInput = customInputs[2];
645+
const monthInput = customInputs[0] as HTMLInputElement;
646+
const dayInput = customInputs[1] as HTMLInputElement;
647+
const yearInput = customInputs[2] as HTMLInputElement;
632648

633649
act(() => {
634650
fireEvent.change(monthInput, { target: { value: '2' } });
@@ -643,7 +659,7 @@ describe('DateRangePicker', () => {
643659
});
644660

645661
expect(onChange).toHaveBeenCalled();
646-
expect(onChange).toHaveBeenCalledWith([nextValueFrom, undefined]);
662+
expect(onChange).toHaveBeenCalledWith([nextValueFrom, null]);
647663
});
648664

649665
it('calls onChange properly given initial value as an array', () => {
@@ -657,9 +673,9 @@ describe('DateRangePicker', () => {
657673
const nextValueFrom = new Date(2018, 1, 15);
658674

659675
const customInputs = container.querySelectorAll('input[data-input]');
660-
const monthInput = customInputs[0];
661-
const dayInput = customInputs[1];
662-
const yearInput = customInputs[2];
676+
const monthInput = customInputs[0] as HTMLInputElement;
677+
const dayInput = customInputs[1] as HTMLInputElement;
678+
const yearInput = customInputs[2] as HTMLInputElement;
663679

664680
act(() => {
665681
fireEvent.change(monthInput, { target: { value: '2' } });
@@ -689,9 +705,9 @@ describe('DateRangePicker', () => {
689705
nextValueTo.setTime(nextValueTo.getTime() - 1);
690706

691707
const customInputs = container.querySelectorAll('input[data-input]');
692-
const monthInput = customInputs[3];
693-
const dayInput = customInputs[4];
694-
const yearInput = customInputs[5];
708+
const monthInput = customInputs[3] as HTMLInputElement;
709+
const dayInput = customInputs[4] as HTMLInputElement;
710+
const yearInput = customInputs[5] as HTMLInputElement;
695711

696712
act(() => {
697713
fireEvent.change(dayInput, { target: { value: '15' } });
@@ -706,7 +722,7 @@ describe('DateRangePicker', () => {
706722
});
707723

708724
expect(onChange).toHaveBeenCalled();
709-
expect(onChange).toHaveBeenCalledWith([undefined, nextValueTo]);
725+
expect(onChange).toHaveBeenCalledWith([null, nextValueTo]);
710726
});
711727

712728
it('calls onChange properly given single initial value', () => {
@@ -720,9 +736,9 @@ describe('DateRangePicker', () => {
720736
nextValueTo.setTime(nextValueTo.getTime() - 1);
721737

722738
const customInputs = container.querySelectorAll('input[data-input]');
723-
const monthInput = customInputs[3];
724-
const dayInput = customInputs[4];
725-
const yearInput = customInputs[5];
739+
const monthInput = customInputs[3] as HTMLInputElement;
740+
const dayInput = customInputs[4] as HTMLInputElement;
741+
const yearInput = customInputs[5] as HTMLInputElement;
726742

727743
act(() => {
728744
fireEvent.change(dayInput, { target: { value: '15' } });
@@ -753,9 +769,9 @@ describe('DateRangePicker', () => {
753769
nextValueTo.setTime(nextValueTo.getTime() - 1);
754770

755771
const customInputs = container.querySelectorAll('input[data-input]');
756-
const monthInput = customInputs[3];
757-
const dayInput = customInputs[4];
758-
const yearInput = customInputs[5];
772+
const monthInput = customInputs[3] as HTMLInputElement;
773+
const dayInput = customInputs[4] as HTMLInputElement;
774+
const yearInput = customInputs[5] as HTMLInputElement;
759775

760776
act(() => {
761777
fireEvent.change(dayInput, { target: { value: '15' } });

0 commit comments

Comments
 (0)