Skip to content

Commit 8906237

Browse files
wojtekmajwojtekmaj
committed
Add unit tests for NativeInput
1 parent b41395e commit 8906237

File tree

3 files changed

+227
-9
lines changed

3 files changed

+227
-9
lines changed

‎src/DateTimeInput/NativeInput.jsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,40 @@
11
import React, { PureComponent } from 'react';
22
import PropTypes from 'prop-types';
33

4-
import { getISOLocalDateTime } from '../shared/dates';
4+
import {
5+
getHours,
6+
getHoursMinutes,
7+
getISOLocalDate,
8+
getISOLocalDateTime,
9+
} from '../shared/dates';
510
import { isMaxDate, isMinDate, isValueType } from '../shared/propTypes';
611

712
export default class NativeInput extends PureComponent {
8-
get step() {
13+
get nativeValueParser() {
914
const { valueType } = this.props;
1015

1116
switch (valueType) {
1217
case 'hour':
13-
return 3600;
18+
return value => `${getISOLocalDate(value)}T${getHours(value)}:00`;
1419
case 'minute':
15-
return 60;
20+
return value => `${getISOLocalDate(value)}T${getHoursMinutes(value)}`;
1621
case 'second':
17-
return 1;
22+
return getISOLocalDateTime;
1823
default:
1924
throw new Error('Invalid valueType.');
2025
}
2126
}
2227

23-
get nativeValueParser() {
28+
get step() {
2429
const { valueType } = this.props;
2530

2631
switch (valueType) {
2732
case 'hour':
28-
return value => `${getISOLocalDateTime(value).slice(0, -6)}:00`;
33+
return 3600;
2934
case 'minute':
30-
return value => getISOLocalDateTime(value).slice(0, -3);
35+
return 60;
3136
case 'second':
32-
return getISOLocalDateTime;
37+
return 1;
3338
default:
3439
throw new Error('Invalid valueType.');
3540
}

‎src/DateTimeInput/__tests__/NativeInput.jsx

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
4+
import NativeInput from '../NativeInput';
5+
6+
/* eslint-disable comma-dangle */
7+
8+
describe('NativeInput', () => {
9+
const defaultProps = {
10+
onChange: () => {},
11+
valueType: 'second',
12+
};
13+
14+
it('renders an input', () => {
15+
const component = shallow(
16+
<NativeInput {...defaultProps} />
17+
);
18+
19+
const input = component.find('input');
20+
21+
expect(input).toHaveLength(1);
22+
});
23+
24+
it('has proper name defined', () => {
25+
const name = 'testName';
26+
27+
const component = shallow(
28+
<NativeInput
29+
{...defaultProps}
30+
name={name}
31+
/>
32+
);
33+
34+
const input = component.find('input');
35+
36+
expect(input.prop('name')).toBe(name);
37+
});
38+
39+
/* eslint-disable indent */
40+
it.each`
41+
valueType | parsedValue
42+
${'second'} | ${'2017-09-30T22:17:41'}
43+
${'minute'} | ${'2017-09-30T22:17'}
44+
${'hour'} | ${'2017-09-30T22:00'}
45+
`('displays given value properly if valueType is $valueType',
46+
({ valueType, parsedValue }) => {
47+
const value = new Date(2017, 8, 30, 22, 17, 41);
48+
49+
const component = shallow(
50+
<NativeInput
51+
{...defaultProps}
52+
valueType={valueType}
53+
value={value}
54+
/>
55+
);
56+
57+
const input = component.find('input');
58+
59+
expect(input.prop('value')).toBe(parsedValue);
60+
});
61+
/* eslint-enable indent */
62+
63+
it('does not disable input by default', () => {
64+
const component = shallow(
65+
<NativeInput {...defaultProps} />
66+
);
67+
68+
const input = component.find('input');
69+
70+
expect(input.prop('disabled')).toBeFalsy();
71+
});
72+
73+
it('disables input given disabled flag', () => {
74+
const component = shallow(
75+
<NativeInput
76+
{...defaultProps}
77+
disabled
78+
/>
79+
);
80+
81+
const input = component.find('input');
82+
83+
expect(input.prop('disabled')).toBeTruthy();
84+
});
85+
86+
it('is not required input by default', () => {
87+
const component = shallow(
88+
<NativeInput {...defaultProps} />
89+
);
90+
91+
const input = component.find('input');
92+
93+
expect(input.prop('required')).toBeFalsy();
94+
});
95+
96+
it('required input given required flag', () => {
97+
const component = shallow(
98+
<NativeInput
99+
{...defaultProps}
100+
required
101+
/>
102+
);
103+
104+
const input = component.find('input');
105+
106+
expect(input.prop('required')).toBeTruthy();
107+
});
108+
109+
it('has no min by default', () => {
110+
const component = shallow(
111+
<NativeInput {...defaultProps} />
112+
);
113+
114+
const input = component.find('input');
115+
116+
expect(input.prop('min')).toBeFalsy();
117+
});
118+
119+
it.each`
120+
valueType | parsedMin
121+
${'second'} | ${'2017-09-30T22:00:00'}
122+
${'minute'} | ${'2017-09-30T22:00'}
123+
${'hour'} | ${'2017-09-30T22:00'}
124+
`('has proper min for minDate which is a full hour if valueType is $valueType',
125+
({ valueType, parsedMin }) => {
126+
const component = shallow(
127+
<NativeInput
128+
{...defaultProps}
129+
minDate={new Date(2017, 8, 30, 22, 0, 0)}
130+
valueType={valueType}
131+
/>
132+
);
133+
134+
const input = component.find('input');
135+
136+
expect(input.prop('min')).toBe(parsedMin);
137+
});
138+
139+
it.each`
140+
valueType | parsedMin
141+
${'second'} | ${'2017-09-30T22:17:41'}
142+
${'minute'} | ${'2017-09-30T22:17'}
143+
${'hour'} | ${'2017-09-30T22:00'}
144+
`('has proper min for minDate which is not a full hour if valueType is $valueType',
145+
({ valueType, parsedMin }) => {
146+
const component = shallow(
147+
<NativeInput
148+
{...defaultProps}
149+
minDate={new Date(2017, 8, 30, 22, 17, 41)}
150+
valueType={valueType}
151+
/>
152+
);
153+
154+
const input = component.find('input');
155+
156+
expect(input.prop('min')).toBe(parsedMin);
157+
});
158+
159+
it('has no max by default', () => {
160+
const component = shallow(
161+
<NativeInput {...defaultProps} />
162+
);
163+
164+
const input = component.find('input');
165+
166+
expect(input.prop('max')).toBeFalsy();
167+
});
168+
169+
it.each`
170+
valueType | parsedMax
171+
${'second'} | ${'2017-09-30T22:00:00'}
172+
${'minute'} | ${'2017-09-30T22:00'}
173+
${'hour'} | ${'2017-09-30T22:00'}
174+
`('has proper max for maxDate which is a full hour if valueType is $valueType',
175+
({ valueType, parsedMax }) => {
176+
const component = shallow(
177+
<NativeInput
178+
{...defaultProps}
179+
maxDate={new Date(2017, 8, 30, 22, 0, 0)}
180+
valueType={valueType}
181+
/>
182+
);
183+
184+
const input = component.find('input');
185+
186+
expect(input.prop('max')).toBe(parsedMax);
187+
});
188+
189+
it.each`
190+
valueType | parsedMax
191+
${'second'} | ${'2017-09-30T22:17:41'}
192+
${'minute'} | ${'2017-09-30T22:17'}
193+
${'hour'} | ${'2017-09-30T22:00'}
194+
`('has proper max for maxDate which is not a full hour if valueType is $valueType',
195+
({ valueType, parsedMax }) => {
196+
const component = shallow(
197+
<NativeInput
198+
{...defaultProps}
199+
maxDate={new Date(2017, 8, 30, 22, 17, 41)}
200+
valueType={valueType}
201+
/>
202+
);
203+
204+
const input = component.find('input');
205+
206+
expect(input.prop('max')).toBe(parsedMax);
207+
});
208+
});

‎src/shared/dates.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,15 @@ export {
1414
} from 'react-clock/dist/shared/dates';
1515

1616
export {
17+
getHoursMinutes,
1718
convert12to24,
1819
convert24to12,
1920
} from 'react-time-picker/dist/shared/dates';
2021

22+
export {
23+
getISOLocalDate,
24+
};
25+
2126
// eslint-disable-next-line import/prefer-default-export
2227
export const getISOLocalDateTime = (value) => {
2328
if (!value) {

0 commit comments

Comments
 (0)