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

Commit d61c373

Browse files
ljmottaljmotta
authored
BREAKING: DateField derrived from TextField
TextField component will check if the format type is a "date" so it could render a "DatePicker" component instead of an default TextInput.
1 parent 6b15fc3 commit d61c373

File tree

7 files changed

+353
-158
lines changed

7 files changed

+353
-158
lines changed

‎__tests__/DateField.tsx‎

Lines changed: 87 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,62 @@
11
import React from 'react';
2+
import { act } from 'react-dom/test-utils';
23
import { DateField } from 'uniforms-patternfly';
3-
44
import createContext from './_createContext';
55
import mount from './_mount';
66

77
test('<DateField> - renders an input', () => {
88
const element = <DateField name="x" />;
99
const wrapper = mount(element, createContext({ x: { type: Date } }));
1010

11-
expect(wrapper.find('input')).toHaveLength(1);
11+
expect(wrapper.find('input')).toHaveLength(2);
1212
});
1313

1414
test('<DateField> - renders a input with correct id (inherited)', () => {
1515
const element = <DateField name="x" />;
1616
const wrapper = mount(element, createContext({ x: { type: Date } }));
1717

18-
expect(wrapper.find('input')).toHaveLength(1);
19-
expect(wrapper.find('input').prop('id')).toBeTruthy();
18+
expect(wrapper.find('input')).toHaveLength(2);
19+
expect(wrapper.find('DatePicker').prop('id')).toBeTruthy();
20+
expect(wrapper.find('TimePicker').prop('id')).toBeTruthy();
2021
});
2122

2223
test('<DateField> - renders a input with correct id (specified)', () => {
2324
const element = <DateField name="x" id="y" />;
2425
const wrapper = mount(element, createContext({ x: { type: Date } }));
2526

26-
expect(wrapper.find('input')).toHaveLength(1);
27-
expect(wrapper.find('input').prop('id')).toBe('y');
27+
expect(wrapper.find('input')).toHaveLength(2);
28+
expect(wrapper.find('Flex').prop('id')).toBe('y');
29+
expect(wrapper.find('DatePicker').prop('id')).toBe('date-picker-y');
30+
expect(wrapper.find('TimePicker').prop('id')).toBe('time-picker-y');
2831
});
2932

3033
test('<DateField> - renders a input with correct name', () => {
3134
const element = <DateField name="x" />;
3235
const wrapper = mount(element, createContext({ x: { type: Date } }));
3336

34-
expect(wrapper.find('input')).toHaveLength(1);
35-
expect(wrapper.find('input').prop('name')).toBe('x');
36-
});
37-
38-
test('<DateField> - renders an input with correct type', () => {
39-
const element = <DateField name="x" />;
40-
const wrapper = mount(element, createContext({ x: { type: Date } }));
41-
42-
expect(wrapper.find('input')).toHaveLength(1);
43-
expect(wrapper.find('input').prop('type')).toBe('datetime-local');
37+
expect(wrapper.find('input')).toHaveLength(2);
38+
expect(wrapper.find('Flex').prop('name')).toBe('x');
4439
});
4540

4641
test('<DateField> - renders an input with correct disabled state', () => {
4742
const element = <DateField name="x" disabled />;
4843
const wrapper = mount(element, createContext({ x: { type: Date } }));
4944

50-
expect(wrapper.find('input')).toHaveLength(1);
51-
expect(wrapper.find('input').prop('disabled')).toBe(true);
45+
expect(wrapper.find('input')).toHaveLength(2);
46+
expect(wrapper.find('DatePicker').prop('isDisabled')).toBe(true);
47+
expect(wrapper.find('TimePicker').prop('isDisabled')).toBe(true);
5248
});
5349

5450
test('<DateField> - renders a input with correct label (specified)', () => {
55-
const element = <DateField required={false} name="x" label="DateFieldLabel" />;
51+
const element = (
52+
<DateField required={false} name="x" label="DateFieldLabel" />
53+
);
5654
const wrapper = mount(element, createContext({ x: { type: Date } }));
5755

5856
expect(wrapper.find('label')).toHaveLength(1);
5957
expect(wrapper.find('label').text()).toBe('DateFieldLabel');
6058
expect(wrapper.find('label').prop('htmlFor')).toBe(
61-
wrapper.find('input').prop('id'),
59+
wrapper.find('Flex').prop('id')
6260
);
6361
});
6462

@@ -69,119 +67,132 @@ test('<DateField> - renders a input with correct label (specified)', () => {
6967
expect(wrapper.find('label')).toHaveLength(1);
7068
expect(wrapper.find('label').text()).toBe('DateFieldLabel *');
7169
expect(wrapper.find('label').prop('htmlFor')).toBe(
72-
wrapper.find('input').prop('id'),
70+
wrapper.find('Flex').prop('id')
7371
);
7472
});
7573

7674
test('<DateField> - renders a input with correct value (default)', () => {
7775
const element = <DateField name="x" />;
7876
const wrapper = mount(element, createContext({ x: { type: Date } }));
7977

80-
expect(wrapper.find('input')).toHaveLength(1);
81-
expect(wrapper.find('input').prop('value')).toBe('');
78+
expect(wrapper.find('input')).toHaveLength(2);
79+
expect(wrapper.find('DatePicker').find('input').prop('value')).toBe('');
80+
expect(wrapper.find('TimePicker').find('input').prop('value')).toBe('');
8281
});
8382

8483
test('<DateField> - renders a input with correct value (model)', () => {
8584
const now = new Date();
8685
const element = <DateField name="x" />;
8786
const wrapper = mount(
8887
element,
89-
createContext({ x: { type: Date } }, { model: { x: now } }),
88+
createContext({ x: { type: Date } }, { model: { x: now } })
9089
);
9190

92-
expect(wrapper.find('input')).toHaveLength(1);
93-
expect(wrapper.find('input').prop('value')).toEqual(
94-
now.toISOString().slice(0, -8),
95-
);
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+
100+
expect(wrapper.find('input')).toHaveLength(2);
101+
expect(wrapper.find('TimePicker').prop('value')).toEqual(time);
96102
});
97103

98104
test('<DateField> - renders a input with correct value (specified)', () => {
99105
const now = new Date();
100106
const element = <DateField name="x" value={now} />;
101107
const wrapper = mount(element, createContext({ x: { type: Date } }));
102108

103-
expect(wrapper.find('input')).toHaveLength(1);
104-
expect(wrapper.find('input').prop('value')).toEqual(
105-
now.toISOString().slice(0, -8),
109+
expect(wrapper.find('input')).toHaveLength(2);
110+
expect(wrapper.find('DatePicker').find('input').prop('value')).toEqual(
111+
now.toISOString().slice(0, -14)
106112
);
107113
});
108114

109-
test('<DateField> - renders a input which correctly reacts on change', () => {
115+
test('<DateField> - renders a input which correctly reacts on change (DatePicker)', () => {
110116
const onChange = jest.fn();
111117

112-
const now = new Date();
118+
const now = '2000-04-04';
113119
const element = <DateField name="x" />;
114120
const wrapper = mount(
115121
element,
116-
createContext({ x: { type: Date } }, { onChange }),
122+
createContext({ x: { type: Date } }, { onChange })
117123
);
118124

119-
expect(wrapper.find('input')).toHaveLength(1);
120-
expect(
121-
wrapper
122-
.find('input')
123-
.simulate('change', { target: { valueAsNumber: now } }),
124-
).toBeTruthy();
125-
expect(onChange).toHaveBeenLastCalledWith('x', now);
125+
act(() => {
126+
wrapper.find('DatePicker').find('input').prop('onChange')!({
127+
currentTarget: { value: now },
128+
} as any);
129+
});
130+
131+
expect(onChange).toHaveBeenLastCalledWith('x', new Date(`${now}T00:00:00`));
126132
});
127133

128-
test('<DateField> - renders a input which correctly reacts on change (empty)', () => {
134+
test('<DateField> - renders a input which correctly reacts on change (DatePicker - empty)', () => {
129135
const onChange = jest.fn();
130136

131137
const element = <DateField name="x" />;
132138
const wrapper = mount(
133139
element,
134-
createContext({ x: { type: Date } }, { onChange }),
140+
createContext({ x: { type: Date } }, { onChange })
135141
);
136142

137-
expect(wrapper.find('input')).toHaveLength(1);
138-
expect(
139-
wrapper
140-
.find('input')
141-
.simulate('change', { target: { valueAsNumber: undefined } }),
142-
).toBeTruthy();
143+
act(() => {
144+
wrapper.find('DatePicker').find('input').prop('onChange')!({
145+
currentTarget: { value: '' },
146+
} as any);
147+
});
148+
143149
expect(onChange).toHaveBeenLastCalledWith('x', undefined);
144150
});
145151

146-
test('<DateField> - renders a input which correctly reacts on change (overflow)', () => {
152+
test('<DateField> - renders a input which correctly reacts on change (TimePicker - invalid)', () => {
147153
const onChange = jest.fn();
148154

149-
const now = new Date(1e5, 0);
155+
const now = '10:00 AM';
150156
const element = <DateField name="x" />;
151157
const wrapper = mount(
152158
element,
153-
createContext({ x: { type: Date } }, { onChange }),
159+
createContext({ x: { type: Date } }, { onChange })
154160
);
155161

156-
expect(wrapper.find('input')).toHaveLength(1);
157-
expect(
158-
wrapper
159-
.find('input')
160-
.simulate('change', { target: { valueAsNumber: now } }),
161-
).toBeTruthy();
162+
act(() => {
163+
wrapper.find('TimePicker').find('input').prop('onChange')!({
164+
currentTarget: { value: now },
165+
} as any);
166+
});
167+
162168
expect(onChange).not.toHaveBeenCalled();
163169
});
164170

171+
test('<DateField> - renders a input which correctly reacts on change (TimePicker - valid)', () => {
172+
const onChange = jest.fn();
173+
174+
const date = '2000-04-04';
175+
const time = '10:30 AM';
176+
const element = <DateField name="x" value={new Date(`${date}T00:00:00`)} />;
177+
const wrapper = mount(
178+
element,
179+
createContext({ x: { type: Date } }, { onChange })
180+
);
181+
182+
act(() => {
183+
wrapper.find('TimePicker').find('input').prop('onChange')!({
184+
currentTarget: { value: time },
185+
} as any);
186+
});
187+
188+
expect(onChange).toHaveBeenLastCalledWith('x', new Date(`${date}T10:30:00`));
189+
});
190+
165191
test('<DateField> - renders a wrapper with unknown props', () => {
166192
const element = <DateField name="x" data-x="x" data-y="y" data-z="z" />;
167193
const wrapper = mount(element, createContext({ x: { type: Date } }));
168194

169-
expect(
170-
wrapper
171-
.find('div')
172-
.at(0)
173-
.prop('data-x'),
174-
).toBe('x');
175-
expect(
176-
wrapper
177-
.find('div')
178-
.at(0)
179-
.prop('data-y'),
180-
).toBe('y');
181-
expect(
182-
wrapper
183-
.find('div')
184-
.at(0)
185-
.prop('data-z'),
186-
).toBe('z');
195+
expect(wrapper.find('div').at(0).prop('data-x')).toBe('x');
196+
expect(wrapper.find('div').at(0).prop('data-y')).toBe('y');
197+
expect(wrapper.find('div').at(0).prop('data-z')).toBe('z');
187198
});

0 commit comments

Comments
 (0)