Skip to content

Commit 8ee1f23

Browse files
rvsiarvsia
committed
Add tests for carbon time-picker
1 parent 9892bbd commit 8ee1f23

File tree

2 files changed

+211
-1
lines changed

2 files changed

+211
-1
lines changed

‎packages/carbon-component-mapper/src/files/time-picker.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const TimePicker = (props) => {
2020
let [hours = '00', minutes = '00'] = input.value
2121
.toLocaleTimeString('en-us', {
2222
hour12: !!twelveHoursFormat,
23-
timeZone: timezones.find(({ value }) => value === timezone)?.showAs
23+
timeZone: timezones?.find(({ value }) => value === timezone)?.showAs
2424
})
2525
.split(':');
2626

‎packages/carbon-component-mapper/src/tests/time-picker.test.js

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
import React from 'react';
2+
import { mount } from 'enzyme';
3+
4+
import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
5+
6+
import FormTemplate from '../files/form-template';
7+
import componentMapper from '../files/component-mapper';
8+
import { act } from 'react-dom/test-utils';
9+
10+
describe('TimePicker', () => {
11+
let initialProps;
12+
let onSubmit;
13+
let wrapper;
14+
let schema;
15+
16+
beforeEach(() => {
17+
onSubmit = jest.fn();
18+
initialProps = {
19+
onSubmit: (values) => onSubmit(values),
20+
componentMapper,
21+
FormTemplate
22+
};
23+
});
24+
25+
it('change AM/PM', async () => {
26+
schema = {
27+
fields: [
28+
{
29+
component: componentTypes.TIME_PICKER,
30+
name: 'time-picker',
31+
twelveHoursFormat: true
32+
}
33+
]
34+
};
35+
36+
wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
37+
38+
await act(async () => {
39+
wrapper.find('input').simulate('change', { target: { value: '00:35' } });
40+
});
41+
wrapper.update();
42+
43+
await act(async () => {
44+
wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'PM' } });
45+
});
46+
wrapper.update();
47+
48+
await act(async () => {
49+
wrapper.find('form').simulate('submit');
50+
});
51+
wrapper.update();
52+
53+
expect(wrapper.find('input').props().value).toEqual('12:35');
54+
expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(12);
55+
expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(35);
56+
57+
onSubmit.mockReset();
58+
59+
await act(async () => {
60+
wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'AM' } });
61+
});
62+
wrapper.update();
63+
64+
await act(async () => {
65+
wrapper.find('form').simulate('submit');
66+
});
67+
wrapper.update();
68+
69+
expect(wrapper.find('input').props().value).toEqual('12:35');
70+
expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(0);
71+
expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(35);
72+
});
73+
74+
it('handle invalid date', async () => {
75+
schema = {
76+
fields: [
77+
{
78+
component: componentTypes.TIME_PICKER,
79+
name: 'time-picker'
80+
}
81+
]
82+
};
83+
84+
wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
85+
86+
await act(async () => {
87+
wrapper.find('input').simulate('change', { target: { value: 'aa:BB' } });
88+
});
89+
wrapper.update();
90+
91+
await act(async () => {
92+
wrapper.find('input').simulate('blur');
93+
});
94+
wrapper.update();
95+
96+
await act(async () => {
97+
wrapper.find('form').simulate('submit');
98+
});
99+
wrapper.update();
100+
101+
expect(wrapper.find('input').props().value).toEqual('00:00');
102+
expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(0);
103+
expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(0);
104+
});
105+
106+
it('handle change', async () => {
107+
schema = {
108+
fields: [
109+
{
110+
component: componentTypes.TIME_PICKER,
111+
name: 'time-picker'
112+
}
113+
]
114+
};
115+
116+
wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
117+
118+
await act(async () => {
119+
wrapper.find('input').simulate('change', { target: { value: '13:87' } });
120+
});
121+
wrapper.update();
122+
123+
await act(async () => {
124+
wrapper.find('input').simulate('blur');
125+
});
126+
wrapper.update();
127+
128+
await act(async () => {
129+
wrapper.find('form').simulate('submit');
130+
});
131+
wrapper.update();
132+
133+
expect(wrapper.find('input').props().value).toEqual('13:28');
134+
expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(13);
135+
expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(28);
136+
onSubmit.mockReset();
137+
138+
await act(async () => {
139+
wrapper.find('input').simulate('change', { target: { value: '25:16' } });
140+
});
141+
wrapper.update();
142+
143+
await act(async () => {
144+
wrapper.find('input').simulate('blur');
145+
});
146+
wrapper.update();
147+
148+
await act(async () => {
149+
wrapper.find('form').simulate('submit');
150+
});
151+
wrapper.update();
152+
153+
expect(wrapper.find('input').props().value).toEqual('01:16');
154+
expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(1);
155+
expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(16);
156+
});
157+
158+
it('change timezone', async () => {
159+
schema = {
160+
fields: [
161+
{
162+
component: componentTypes.TIME_PICKER,
163+
name: 'time-picker',
164+
twelveHoursFormat: true,
165+
timezones: [
166+
{ label: 'UTC', value: 'UTC', showAs: 'UTC' },
167+
{ label: 'EST', value: 'EAST', showAs: 'Pacific/Easter' }
168+
]
169+
}
170+
]
171+
};
172+
173+
wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
174+
175+
await act(async () => {
176+
wrapper.find('input').simulate('change', { target: { value: '00:35' } });
177+
});
178+
wrapper.update();
179+
180+
await act(async () => {
181+
wrapper.find('select#time-picker-timezones').simulate('change', { target: { value: 'EST' } });
182+
});
183+
wrapper.update();
184+
185+
await act(async () => {
186+
wrapper.find('form').simulate('submit');
187+
});
188+
wrapper.update();
189+
190+
expect(wrapper.find('input').props().value).toEqual('05:35');
191+
expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(5);
192+
expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(35);
193+
194+
onSubmit.mockReset();
195+
196+
await act(async () => {
197+
wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'UTC' } });
198+
});
199+
wrapper.update();
200+
201+
await act(async () => {
202+
wrapper.find('form').simulate('submit');
203+
});
204+
wrapper.update();
205+
206+
expect(wrapper.find('input').props().value).toEqual('10:35');
207+
expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(10);
208+
expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(35);
209+
});
210+
});

0 commit comments

Comments
 (0)