Skip to content

Commit 1388167

Browse files
chrismancierochrismanciero
authored
Merge pull request #85 from SAP/unit-tests-updated
Unit tests updated
2 parents 9d887da + f3a69be commit 1388167

File tree

3 files changed

+516
-0
lines changed

3 files changed

+516
-0
lines changed

‎src/Calendar/Calendar.test.js‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
import React from 'react';
2+
import renderer from 'react-test-renderer';
3+
import Enzyme, { mount } from 'enzyme';
4+
import Adapter from 'enzyme-adapter-react-16';
5+
import { Calendar } from '../Calendar/Calendar';
6+
7+
Enzyme.configure({ adapter: new Adapter() });
8+
9+
describe('<Calendar />', () => {
10+
const mockOnChange = jest.fn();
11+
const defaultCalendar = <Calendar onChange={mockOnChange} />;
12+
const disabledWeekEnds = <Calendar disableWeekends={true} />;
13+
const disabledBeforeDay = (
14+
<Calendar disableBeforeDate={new Date(2018, 7, 3, 0, 0, 0, 0)} />
15+
);
16+
const disabledAfterDay = (
17+
<Calendar disableAfterDate={new Date(2018, 7, 3, 0, 0, 0, 0)} />
18+
);
19+
const blockedDays = (
20+
<Calendar
21+
blockedDates={[
22+
new Date(2018, 1, 1, 0, 0, 0, 0),
23+
new Date(2018, 3, 3, 0, 0, 0, 0)
24+
]}
25+
/>
26+
);
27+
const disabledDates = (
28+
<Calendar
29+
disabledDates={[
30+
new Date(2018, 1, 1, 0, 0, 0, 0),
31+
new Date(2018, 3, 3, 0, 0, 0, 0)
32+
]}
33+
/>
34+
);
35+
const disabledWeekDay = <Calendar disableWeekday={['Monday', 'Tuesday']} />;
36+
const rangeSelect = (
37+
<Calendar enableRangeSelection={true} onChange={mockOnChange} />
38+
);
39+
const disablePast = <Calendar disablePastDates={true} />;
40+
const disableFuture = <Calendar disableFutureDates={true} />;
41+
42+
test('create calendar components', () => {
43+
mount(defaultCalendar);
44+
mount(disabledWeekEnds);
45+
mount(disabledBeforeDay);
46+
mount(disabledAfterDay);
47+
mount(blockedDays);
48+
mount(disabledDates);
49+
mount(disablePast);
50+
mount(disableFuture);
51+
mount(disabledWeekDay);
52+
mount(rangeSelect);
53+
});
54+
55+
test('show/hide months', () => {
56+
let wrapper = mount(defaultCalendar);
57+
expect(wrapper.state('showMonths')).toBeFalsy();
58+
wrapper
59+
.find(
60+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
61+
)
62+
.at(1)
63+
.simulate('click');
64+
65+
expect(wrapper.state('showMonths')).toBeTruthy();
66+
67+
wrapper
68+
.find(
69+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
70+
)
71+
.at(1)
72+
.simulate('click');
73+
74+
expect(wrapper.state('showMonths')).toBeFalsy();
75+
});
76+
77+
test('click month from list', () => {
78+
let wrapper = mount(defaultCalendar);
79+
expect(wrapper.state('showMonths')).toBeFalsy();
80+
wrapper
81+
.find(
82+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
83+
)
84+
.at(1)
85+
.simulate('click');
86+
87+
expect(wrapper.state('showMonths')).toBeTruthy();
88+
89+
wrapper
90+
.find('ul.fd-calendar__list li.fd-calendar__item')
91+
.at(3)
92+
.simulate('click');
93+
94+
// check that April was selected
95+
const currentDateDisplayed = wrapper.state('currentDateDisplayed');
96+
expect(currentDateDisplayed.getMonth()).toEqual(3);
97+
});
98+
99+
test('show/hide years', () => {
100+
let wrapper = mount(defaultCalendar);
101+
expect(wrapper.state('showYears')).toBeFalsy();
102+
wrapper
103+
.find(
104+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
105+
)
106+
.at(2)
107+
.simulate('click');
108+
109+
expect(wrapper.state('showYears')).toBeTruthy();
110+
111+
wrapper
112+
.find(
113+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
114+
)
115+
.at(2)
116+
.simulate('click');
117+
118+
expect(wrapper.state('showYears')).toBeFalsy();
119+
});
120+
121+
test('click year from list', () => {
122+
let wrapper = mount(defaultCalendar);
123+
expect(wrapper.state('showYears')).toBeFalsy();
124+
wrapper
125+
.find(
126+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
127+
)
128+
.at(2)
129+
.simulate('click');
130+
131+
expect(wrapper.state('showYears')).toBeTruthy();
132+
133+
wrapper
134+
.find('ul.fd-calendar__list li.fd-calendar__item')
135+
.at(3)
136+
.simulate('click');
137+
138+
// check that April was selected
139+
const currentDateDisplayed = wrapper.state('currentDateDisplayed');
140+
expect(currentDateDisplayed.getFullYear()).toEqual(2021);
141+
});
142+
143+
test('click previous button', () => {
144+
let wrapper = mount(defaultCalendar);
145+
let currentDateDisplayed = new Date(wrapper.state('currentDateDisplayed'));
146+
147+
wrapper
148+
.find(
149+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
150+
)
151+
.at(0)
152+
.simulate('click');
153+
let newDateDisplayed = wrapper.state('currentDateDisplayed');
154+
155+
expect(newDateDisplayed.getMonth()).toEqual(
156+
currentDateDisplayed.getMonth() - 1
157+
);
158+
159+
// previous button when year shown
160+
wrapper
161+
.find(
162+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
163+
)
164+
.at(2)
165+
.simulate('click');
166+
167+
expect(wrapper.state('showYears')).toBeTruthy();
168+
169+
let currentYearDisplayed = new Date(wrapper.state('currentYear'));
170+
wrapper
171+
.find(
172+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
173+
)
174+
.at(0)
175+
.simulate('click');
176+
177+
let newYearDisplayed = wrapper.state('currentYear');
178+
179+
expect(newYearDisplayed.getFullYear()).toEqual(
180+
currentYearDisplayed.getFullYear() - 12
181+
);
182+
});
183+
184+
test('click next button', () => {
185+
let wrapper = mount(defaultCalendar);
186+
let currentDateDisplayed = new Date(wrapper.state('currentDateDisplayed'));
187+
188+
wrapper
189+
.find(
190+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
191+
)
192+
.at(3)
193+
.simulate('click');
194+
let newDateDisplayed = wrapper.state('currentDateDisplayed');
195+
196+
expect(newDateDisplayed.getMonth()).toEqual(
197+
currentDateDisplayed.getMonth() + 1
198+
);
199+
200+
// previous button when year shown
201+
wrapper
202+
.find(
203+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
204+
)
205+
.at(2)
206+
.simulate('click');
207+
208+
expect(wrapper.state('showYears')).toBeTruthy();
209+
210+
let currentYearDisplayed = new Date(wrapper.state('currentYear'));
211+
wrapper
212+
.find(
213+
'header.fd-calendar__header button.fd-button--light.fd-button--compact'
214+
)
215+
.at(3)
216+
.simulate('click');
217+
218+
let newYearDisplayed = wrapper.state('currentYear');
219+
220+
expect(newYearDisplayed.getFullYear()).toEqual(
221+
currentYearDisplayed.getFullYear() + 12
222+
);
223+
});
224+
225+
test('click on day', () => {
226+
const wrapper = mount(defaultCalendar);
227+
// select first day of month
228+
wrapper
229+
.find(
230+
'table.fd-calendar__table tbody.fd-calendar__group tr.fd-calendar__row td.fd-calendar__item:not(.fd-calendar__item--other-month)'
231+
)
232+
.at(0)
233+
.simulate('click');
234+
235+
const currentDateDisplayed = new Date(wrapper.state('selectedDate'));
236+
237+
// select 2nd day of month
238+
wrapper
239+
.find(
240+
'table.fd-calendar__table tbody.fd-calendar__group tr.fd-calendar__row td.fd-calendar__item:not(.fd-calendar__item--other-month)'
241+
)
242+
.at(1)
243+
.simulate('click');
244+
245+
const newDateDisplayed = wrapper.state('selectedDate');
246+
247+
expect(newDateDisplayed.getDate()).toEqual(
248+
currentDateDisplayed.getDate() + 1
249+
);
250+
});
251+
252+
test('click on day with range enabled', () => {
253+
const wrapper = mount(rangeSelect);
254+
// select first day of month
255+
wrapper
256+
.find(
257+
'table.fd-calendar__table tbody.fd-calendar__group tr.fd-calendar__row td.fd-calendar__item:not(.fd-calendar__item--other-month)'
258+
)
259+
.at(0)
260+
.simulate('click');
261+
262+
const currentDateDisplayed = new Date(wrapper.state('selectedDate'));
263+
264+
// select 5nd day of month
265+
wrapper
266+
.find(
267+
'table.fd-calendar__table tbody.fd-calendar__group tr.fd-calendar__row td.fd-calendar__item:not(.fd-calendar__item--other-month)'
268+
)
269+
.at(4)
270+
.simulate('click');
271+
272+
const newDateDisplayed = wrapper.state('selectedDate');
273+
274+
expect(newDateDisplayed.getDate()).toEqual(
275+
currentDateDisplayed.getDate() + 4
276+
);
277+
278+
expect(wrapper.state('arrSelectedDates').length).toEqual(2);
279+
});
280+
});

0 commit comments

Comments
 (0)