Skip to content
This repository was archived by the owner on Mar 9, 2023. It is now read-only.

Commit 27b02f3

Browse files
ljmottaljmotta
authored
Merge pull request #86 from ljmotta/improve-time-field
Improvements on TextField and DateField components
2 parents 733e3a8 + fd7a7d6 commit 27b02f3

File tree

7 files changed

+454
-105
lines changed

7 files changed

+454
-105
lines changed

‎__tests__/DateField.tsx‎

Lines changed: 73 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -88,17 +88,10 @@ test('<DateField> - renders a input with correct value (model)', () => {
8888
createContext({ x: { type: Date } }, { model: { x: now } })
8989
);
9090

91-
let isAm = true;
92-
let hours = now.getHours();
93-
if (hours > 12) {
94-
hours %= 12;
95-
isAm = false;
96-
}
97-
const minutes = now.getMinutes();
98-
const time = `${hours}:${minutes} ${isAm ? 'AM' : 'PM'}`;
99-
10091
expect(wrapper.find('input')).toHaveLength(2);
101-
expect(wrapper.find('TimePicker').prop('value')).toEqual(time);
92+
expect(wrapper.find('TimePicker').prop('value')).toEqual(
93+
`${now.getUTCHours()}:${now.getUTCMinutes()}`
94+
);
10295
});
10396

10497
test('<DateField> - renders a input with correct value (specified)', () => {
@@ -128,7 +121,7 @@ test('<DateField> - renders a input which correctly reacts on change (DatePicker
128121
} as any);
129122
});
130123

131-
expect(onChange).toHaveBeenLastCalledWith('x', new Date(`${now}T00:00:00`));
124+
expect(onChange).toHaveBeenLastCalledWith('x', new Date(`${now}T00:00:00Z`));
132125
});
133126

134127
test('<DateField> - renders a input which correctly reacts on change (DatePicker - empty)', () => {
@@ -152,7 +145,7 @@ test('<DateField> - renders a input which correctly reacts on change (DatePicker
152145
test('<DateField> - renders a input which correctly reacts on change (TimePicker - invalid)', () => {
153146
const onChange = jest.fn();
154147

155-
const now = '10:00 AM';
148+
const now = '10:00';
156149
const element = <DateField name="x" />;
157150
const wrapper = mount(
158151
element,
@@ -168,12 +161,12 @@ test('<DateField> - renders a input which correctly reacts on change (TimePicker
168161
expect(onChange).not.toHaveBeenCalled();
169162
});
170163

171-
test.skip('<DateField> - renders a input which correctly reacts on change (TimePicker - valid)', () => {
164+
test('<DateField> - renders a input which correctly reacts on change (TimePicker - valid)', () => {
172165
const onChange = jest.fn();
173166

174167
const date = '2000-04-04';
175-
const time = '10:30 AM';
176-
const element = <DateField name="x" value={new Date(`${date}T00:00:00`)} />;
168+
const time = '10:30';
169+
const element = <DateField name="x" value={new Date(`${date}T00:00:00Z`)} />;
177170
const wrapper = mount(
178171
element,
179172
createContext({ x: { type: Date } }, { onChange })
@@ -185,7 +178,7 @@ test.skip('<DateField> - renders a input which correctly reacts on change (TimeP
185178
} as any);
186179
});
187180

188-
expect(onChange).toHaveBeenLastCalledWith('x', new Date(`${date}T10:30:00`));
181+
expect(onChange).toHaveBeenLastCalledWith('x', new Date(`${date}T10:30:00Z`));
189182
});
190183

191184
test('<DateField> - renders a wrapper with unknown props', () => {
@@ -196,3 +189,67 @@ test('<DateField> - renders a wrapper with unknown props', () => {
196189
expect(wrapper.find('div').at(0).prop('data-y')).toBe('y');
197190
expect(wrapper.find('div').at(0).prop('data-z')).toBe('z');
198191
});
192+
193+
test('<DateField> - test max property - valid', () => {
194+
const onChange = jest.fn();
195+
196+
const date = '1998-12-31';
197+
const max = '1999-01-01T00:00:00Z';
198+
const element = (
199+
<DateField name="x" max={max} value={new Date(`${date}T00:00:00Z`)} />
200+
);
201+
const wrapper = mount(
202+
element,
203+
createContext({ x: { type: Date } }, { onChange })
204+
);
205+
206+
expect(wrapper.text().includes('Should be before')).toBe(false);
207+
});
208+
209+
test('<DateField> - test max property - invalid', () => {
210+
const onChange = jest.fn();
211+
212+
const date = '1999-01-02';
213+
const max = '1999-01-01T00:00:00Z';
214+
const element = (
215+
<DateField name="x" max={max} value={new Date(`${date}T00:00:00Z`)} />
216+
);
217+
const wrapper = mount(
218+
element,
219+
createContext({ x: { type: Date } }, { onChange })
220+
);
221+
222+
expect(wrapper.text().includes('Should be before')).toBe(true);
223+
});
224+
225+
test('<DateField> - test min property - valid', () => {
226+
const onChange = jest.fn();
227+
228+
const date = '1999-01-02';
229+
const min = '1999-01-01T00:00:00Z';
230+
const element = (
231+
<DateField name="x" min={min} value={new Date(`${date}T00:00:00Z`)} />
232+
);
233+
const wrapper = mount(
234+
element,
235+
createContext({ x: { type: Date } }, { onChange })
236+
);
237+
238+
expect(wrapper.text().includes('Should be after')).toBe(false);
239+
});
240+
241+
test('<DateField> - test min property - invalid', () => {
242+
const onChange = jest.fn();
243+
244+
const date = '1998-12-31';
245+
const min = '1999-01-01T00:00:00Z';
246+
const element = (
247+
<DateField name="x" min={min} value={new Date(`${date}T00:00:00Z`)} />
248+
);
249+
const wrapper = mount(
250+
element,
251+
createContext({ x: { type: Date } }, { onChange })
252+
);
253+
254+
expect(wrapper.text().includes('Should be after')).toBe(true);
255+
});

‎__tests__/TextField.tsx‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,3 +243,168 @@ test('<TextField> - renders a input which correctly reacts on change (DatePicker
243243

244244
expect(onChange).toHaveBeenLastCalledWith('x', date);
245245
});
246+
247+
test('<TextField> - renders a initial value on time field (TimePicker)', () => {
248+
const time = '10:00';
249+
const element = (
250+
<TextField required={true} name="x" label="y" type={'time'} />
251+
);
252+
const wrapper = mount(
253+
element,
254+
createContext({ x: { type: String } }, { model: { x: time } })
255+
);
256+
257+
expect(wrapper.find('TimePicker')).toHaveLength(1);
258+
expect(wrapper.find('TimePicker').prop('value')).toBe(time);
259+
});
260+
261+
test('<TextField> - renders a disabled date field (TimePicker)', () => {
262+
const element = (
263+
<TextField
264+
required={true}
265+
name="x"
266+
label="y"
267+
type={'time'}
268+
disabled={true}
269+
/>
270+
);
271+
const wrapper = mount(element, createContext({ x: { type: String } }));
272+
273+
expect(wrapper.find('TimePicker')).toHaveLength(1);
274+
expect(wrapper.find('input').prop('disabled')).toBe(true);
275+
});
276+
277+
test('<TextField> - renders a input which correctly reacts on change (TimePicker)', () => {
278+
const onChange = jest.fn();
279+
280+
const time = '10:10';
281+
const element = (
282+
<TextField required={true} name="x" label="y" type={'time'} />
283+
);
284+
const wrapper = mount(
285+
element,
286+
createContext({ x: { type: String } }, { onChange })
287+
);
288+
289+
act(() => {
290+
wrapper.find('TimePicker').find('input').prop('onChange')!({
291+
currentTarget: { value: time },
292+
} as any);
293+
});
294+
295+
expect(wrapper.find('label')).toHaveLength(1);
296+
expect(wrapper.find('label').text()).toBe('y *');
297+
expect(onChange).toHaveBeenLastCalledWith('x', '10:10:00');
298+
});
299+
300+
test('<TextField> - renders a input which correctly reacts on change (TimePicker - empty)', () => {
301+
const onChange = jest.fn();
302+
303+
const time = '';
304+
const element = (
305+
<TextField required={true} name="x" label="y" type={'time'} />
306+
);
307+
const wrapper = mount(
308+
element,
309+
createContext({ x: { type: String } }, { onChange })
310+
);
311+
312+
expect(wrapper.find('label')).toHaveLength(1);
313+
expect(wrapper.find('label').text()).toBe('y *');
314+
315+
act(() => {
316+
wrapper.find('TimePicker').find('input').prop('onChange')!({
317+
currentTarget: { value: time },
318+
} as any);
319+
});
320+
321+
expect(onChange).toHaveBeenLastCalledWith('x', time);
322+
});
323+
324+
test('<TextField> - test max property (TimePicker - valid)', () => {
325+
const time = '10:00';
326+
const max = '12:00';
327+
const element = (
328+
<TextField name="x" label="y" max={max} type={'time'} value={time} />
329+
);
330+
const wrapper = mount(element, createContext({ x: { type: String } }));
331+
332+
expect(wrapper.text().includes('Should be before')).toBe(false);
333+
});
334+
335+
test('<TextField> - test max property (TimePicker - invalid)', () => {
336+
const time = '13:00';
337+
const max = '12:00';
338+
const element = (
339+
<TextField name="x" label="y" max={max} type={'time'} value={time} />
340+
);
341+
const wrapper = mount(element, createContext({ x: { type: String } }));
342+
343+
expect(wrapper.text().includes('Should be before')).toBe(true);
344+
});
345+
346+
test('<TextField> - test min property (TimePicker - valid)', () => {
347+
const time = '13:00';
348+
const min = '12:00';
349+
const element = (
350+
<TextField name="x" label="y" min={min} type={'time'} value={time} />
351+
);
352+
const wrapper = mount(element, createContext({ x: { type: String } }));
353+
354+
expect(wrapper.text().includes('Should be after')).toBe(false);
355+
});
356+
357+
test('<TextField> - test min property (TimePicker - invalid)', () => {
358+
const time = '10:00';
359+
const min = '12:00';
360+
const element = (
361+
<TextField name="x" label="y" min={min} type={'time'} value={time} />
362+
);
363+
const wrapper = mount(element, createContext({ x: { type: String } }));
364+
365+
expect(wrapper.text().includes('Should be after')).toBe(true);
366+
});
367+
368+
test('<TextField> - test max property (DatePicker - valid)', () => {
369+
const date = '2000-01-01';
370+
const max = '2000-01-02';
371+
const element = (
372+
<TextField name="x" label="y" max={max} type={'date'} value={date} />
373+
);
374+
const wrapper = mount(element, createContext({ x: { type: String } }));
375+
376+
expect(wrapper.text().includes('Should be before')).toBe(false);
377+
});
378+
379+
test('<TextField> - test max property (DatePicker - invalid)', () => {
380+
const date = '2000-01-02';
381+
const max = '2000-01-01';
382+
const element = (
383+
<TextField name="x" label="y" max={max} type={'date'} value={date} />
384+
);
385+
const wrapper = mount(element, createContext({ x: { type: String } }));
386+
387+
expect(wrapper.text().includes('Should be before')).toBe(true);
388+
});
389+
390+
test('<TextField> - test min property (DatePicker - valid)', () => {
391+
const date = '2000-01-02';
392+
const min = '2000-01-01';
393+
const element = (
394+
<TextField name="x" label="y" min={min} type={'date'} value={date} />
395+
);
396+
const wrapper = mount(element, createContext({ x: { type: String } }));
397+
398+
expect(wrapper.text().includes('Should be after')).toBe(false);
399+
});
400+
401+
test('<TextField> - test min property (DatePicker - invalid)', () => {
402+
const date = '2000-01-01';
403+
const min = '2000-01-02';
404+
const element = (
405+
<TextField name="x" label="y" min={min} type={'date'} value={date} />
406+
);
407+
const wrapper = mount(element, createContext({ x: { type: String } }));
408+
409+
expect(wrapper.text().includes('Should be after')).toBe(true);
410+
});

‎examples/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
"start": "parcel serve --no-cache index.html"
88
},
99
"dependencies": {
10-
"@patternfly/react-core": "4.115.2",
11-
"@patternfly/react-icons": "4.10.2",
10+
"@patternfly/react-core": "4.135.0",
11+
"@patternfly/react-icons": "4.11.0",
1212
"ajv": "6.10.2",
1313
"react": "16.13.1",
1414
"react-dom": "16.13.1",
@@ -19,7 +19,7 @@
1919
"uniforms-bridge-json-schema": "3.5.1",
2020
"uniforms-bridge-simple-schema": "3.5.1",
2121
"uniforms-bridge-simple-schema-2": "3.5.1",
22-
"uniforms-patternfly": "4.6.1"
22+
"uniforms-patternfly": "4.6.2"
2323
},
2424
"devDependencies": {
2525
"parcel-bundler": "^1.12.5",

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "uniforms-patternfly",
3-
"version": "4.6.1",
3+
"version": "4.6.2",
44
"description": "Patternfly forms for uniforms",
55
"repository": "[email protected]:aerogear/uniforms-patternfly.git",
66
"author": "Gianluca <[email protected]>",
@@ -25,8 +25,8 @@
2525
"@babel/preset-env": "7.11.0",
2626
"@babel/preset-react": "7.10.4",
2727
"@babel/preset-typescript": "7.10.4",
28-
"@patternfly/react-core": "4.115.2",
29-
"@patternfly/react-icons": "4.10.2",
28+
"@patternfly/react-core": "4.135.0",
29+
"@patternfly/react-icons": "4.11.0",
3030
"@testing-library/react": "10.4.9",
3131
"@types/classnames": "2.2.11",
3232
"@types/enzyme": "3.10.8",
@@ -66,8 +66,8 @@
6666
"uniforms-bridge-simple-schema-2": "3.5.1"
6767
},
6868
"peerDependencies": {
69-
"@patternfly/react-core": "^4.115.2",
70-
"@patternfly/react-icons": "^4.10.2"
69+
"@patternfly/react-core": "^4.135.0",
70+
"@patternfly/react-icons": "^4.11.0"
7171
},
7272
"engines": {
7373
"npm": ">=5.0.0"

0 commit comments

Comments
 (0)