Skip to content

Commit

Permalink
Improve testing second input in unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@wojtekmaj
wojtekmaj committed Oct 3, 2023
1 parent fa13173 commit 85568d7
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 22 deletions.
42 changes: 21 additions & 21 deletions packages/react-datetime-picker/src/DateTimeInput.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ describe('DateTimeInput', () => {
});

it('shows a given date in all inputs correctly given Date (12-hour format)', () => {
const date = new Date(2017, 8, 30, 22, 17, 0);
const date = new Date(2017, 8, 30, 22, 17, 3);

const { container } = render(
<DateTimeInput {...defaultProps} maxDetail="second" value={date} />,
Expand All @@ -95,17 +95,17 @@ describe('DateTimeInput', () => {
const nativeInput = container.querySelector('input[type="datetime-local"]');
const customInputs = container.querySelectorAll('input[data-input]');

expect(nativeInput).toHaveValue('2017-09-30T22:17');
expect(nativeInput).toHaveValue('2017-09-30T22:17:03');
expect(customInputs[0]).toHaveValue(9);
expect(customInputs[1]).toHaveValue(30);
expect(customInputs[2]).toHaveValue(2017);
expect(customInputs[3]).toHaveValue(10);
expect(customInputs[4]).toHaveValue(17);
expect(customInputs[5]).toHaveValue(0);
expect(customInputs[5]).toHaveValue(3);
});

it('shows a given date in all inputs correctly given ISO string (12-hour format)', () => {
const date = '2017-09-30T22:17:00.000';
const date = '2017-09-30T22:17:03.000';

const { container } = render(
<DateTimeInput {...defaultProps} maxDetail="second" value={date} />,
Expand All @@ -114,17 +114,17 @@ describe('DateTimeInput', () => {
const nativeInput = container.querySelector('input[type="datetime-local"]');
const customInputs = container.querySelectorAll('input[data-input]');

expect(nativeInput).toHaveValue('2017-09-30T22:17');
expect(nativeInput).toHaveValue('2017-09-30T22:17:03');
expect(customInputs[0]).toHaveValue(9);
expect(customInputs[1]).toHaveValue(30);
expect(customInputs[2]).toHaveValue(2017);
expect(customInputs[3]).toHaveValue(10);
expect(customInputs[4]).toHaveValue(17);
expect(customInputs[5]).toHaveValue(0);
expect(customInputs[5]).toHaveValue(3);
});

itIfFullICU('shows a given date in all inputs correctly given Date (24-hour format)', () => {
const date = new Date(2017, 8, 30, 22, 17, 0);
const date = new Date(2017, 8, 30, 22, 17, 3);

const { container } = render(
<DateTimeInput {...defaultProps} locale="de-DE" maxDetail="second" value={date} />,
Expand All @@ -133,19 +133,19 @@ describe('DateTimeInput', () => {
const nativeInput = container.querySelector('input[type="datetime-local"]');
const customInputs = container.querySelectorAll('input[data-input]');

expect(nativeInput).toHaveValue('2017-09-30T22:17');
expect(nativeInput).toHaveValue('2017-09-30T22:17:03');
expect(customInputs[0]).toHaveValue(30);
expect(customInputs[1]).toHaveValue(9);
expect(customInputs[2]).toHaveValue(2017);
expect(customInputs[3]).toHaveValue(22);
expect(customInputs[4]).toHaveValue(17);
expect(customInputs[5]).toHaveValue(0);
expect(customInputs[5]).toHaveValue(3);
});

itIfFullICU(
'shows a given date in all inputs correctly given ISO string (24-hour format)',
() => {
const date = '2017-09-30T22:17:00.000';
const date = '2017-09-30T22:17:03.000';

const { container } = render(
<DateTimeInput {...defaultProps} locale="de-DE" maxDetail="second" value={date} />,
Expand All @@ -154,13 +154,13 @@ describe('DateTimeInput', () => {
const nativeInput = container.querySelector('input[type="datetime-local"]');
const customInputs = container.querySelectorAll('input[data-input]');

expect(nativeInput).toHaveValue('2017-09-30T22:17');
expect(nativeInput).toHaveValue('2017-09-30T22:17:03');
expect(customInputs[0]).toHaveValue(30);
expect(customInputs[1]).toHaveValue(9);
expect(customInputs[2]).toHaveValue(2017);
expect(customInputs[3]).toHaveValue(22);
expect(customInputs[4]).toHaveValue(17);
expect(customInputs[5]).toHaveValue(0);
expect(customInputs[5]).toHaveValue(3);
},
);

Expand All @@ -182,7 +182,7 @@ describe('DateTimeInput', () => {
});

it('clears the value correctly', () => {
const date = new Date(2017, 8, 30, 22, 17, 0);
const date = new Date(2017, 8, 30, 22, 17, 3);

const { container, rerender } = render(
<DateTimeInput {...defaultProps} maxDetail="second" value={date} />,
Expand Down Expand Up @@ -704,7 +704,7 @@ describe('DateTimeInput', () => {

it('triggers onChange correctly when cleared custom inputs', () => {
const onChange = vi.fn();
const date = new Date(2017, 8, 30, 22, 17, 0);
const date = new Date(2017, 8, 30, 22, 17, 3);

const { container } = render(
<DateTimeInput {...defaultProps} maxDetail="second" onChange={onChange} value={date} />,
Expand All @@ -722,45 +722,45 @@ describe('DateTimeInput', () => {

it('triggers onChange correctly when changed native input', () => {
const onChange = vi.fn();
const date = new Date(2017, 8, 30, 22, 17, 0);
const date = new Date(2017, 8, 30, 22, 17, 3);

const { container } = render(
<DateTimeInput {...defaultProps} onChange={onChange} value={date} />,
);

const nativeInput = container.querySelector('input[type="datetime-local"]') as HTMLInputElement;

fireEvent.change(nativeInput, { target: { value: '2017-09-30T20:17:00' } });
fireEvent.change(nativeInput, { target: { value: '2017-09-30T20:17:03' } });

expect(onChange).toHaveBeenCalled();
expect(onChange).toHaveBeenCalledWith(new Date(2017, 8, 30, 20, 17, 0), false);
expect(onChange).toHaveBeenCalledWith(new Date(2017, 8, 30, 20, 17, 3), false);
});

it('triggers onChange correctly when changed native input with year < 100', () => {
const onChange = vi.fn();
const date = new Date();
date.setFullYear(19, 8, 20);
date.setHours(22, 17, 0, 0);
date.setHours(22, 17, 3, 0);

const { container } = render(
<DateTimeInput {...defaultProps} onChange={onChange} value={date} />,
);

const nativeInput = container.querySelector('input[type="datetime-local"]') as HTMLInputElement;

fireEvent.change(nativeInput, { target: { value: '0019-09-20T20:17:00' } });
fireEvent.change(nativeInput, { target: { value: '0019-09-20T20:17:03' } });

const nextDate = new Date();
nextDate.setFullYear(19, 8, 20);
nextDate.setHours(20, 17, 0, 0);
nextDate.setHours(20, 17, 3, 0);

expect(onChange).toHaveBeenCalled();
expect(onChange).toHaveBeenCalledWith(nextDate, false);
});

it('triggers onChange correctly when cleared native input', () => {
const onChange = vi.fn();
const date = new Date(2017, 8, 30, 22, 17, 0);
const date = new Date(2017, 8, 30, 22, 17, 3);

const { container } = render(
<DateTimeInput {...defaultProps} onChange={onChange} value={date} />,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-datetime-picker/src/DateTimeInput/NativeInput.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ describe('NativeInput', () => {
// TODO: Investigate why ".000" is added here
it.each`
valueType | parsedValue
${'second'} | ${'2017-09-30T22:17:41.000'}
${'second'} | ${'2017-09-30T22:17:41'}
${'minute'} | ${'2017-09-30T22:17'}
${'hour'} | ${'2017-09-30T22:00'}
`('displays given value properly if valueType is $valueType', ({ valueType, parsedValue }) => {
Expand Down

0 comments on commit 85568d7

Please sign in to comment.