Skip to content
This repository was archived by the owner on Apr 17, 2022. It is now read-only.

Commit f45597c

Browse files
JasenkooJasenkoo
committed
test: Add test cases
1 parent 892efb9 commit f45597c

File tree

4 files changed

+254
-7
lines changed

4 files changed

+254
-7
lines changed

‎babel.config.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ const devPresets = ['@babel/preset-env'];
22

33
const buildPresets = ['@babel/preset-env', '@babel/preset-typescript'];
44

5+
const testPresets = ['@vue/cli-plugin-babel/preset'];
6+
57
module.exports = {
6-
presets: process.env.NODE_ENV === 'development' ? devPresets : buildPresets,
8+
presets:
9+
process.env.NODE_ENV === 'development'
10+
? devPresets
11+
: process.env.NODE_ENV === 'test'
12+
? testPresets
13+
: buildPresets,
714
};

‎tests/unit/calendars.spec.ts‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎tests/unit/logic.spec.ts‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
import { mount, VueWrapper } from '@vue/test-utils';
3+
import addDays from 'date-fns/addDays';
4+
5+
import Datepicker from '../../src/Vue3DatePicker/Vue3DatePicker.vue';
6+
import DatepickerMenu from '../../src/Vue3DatePicker/components/DatepickerMenu.vue';
7+
import Calendar from '../../src/Vue3DatePicker/components/Calendar.vue';
8+
import ActionRow from '../../src/Vue3DatePicker/components/ActionRow.vue';
9+
10+
import { getNextMonthYear } from '../../src/Vue3DatePicker/utils/date-utils';
11+
import addMonths from 'date-fns/addMonths';
12+
13+
const format = (date: Date): string => {
14+
return `Selected year is ${date.getFullYear()}`;
15+
};
16+
17+
describe('Logic connection', () => {
18+
it('Should properly define initial values', async () => {
19+
const date = new Date();
20+
const dp = mount(Datepicker, { props: { modelValue: date } });
21+
22+
dp.vm.openMenu();
23+
24+
await dp.vm.$nextTick();
25+
26+
const menu: VueWrapper<any> = dp.findComponent(DatepickerMenu);
27+
28+
expect(menu.vm.month).toEqual(date.getMonth());
29+
expect(menu.vm.year).toEqual(date.getFullYear());
30+
expect(menu.vm.monthNext).toEqual(getNextMonthYear(date).month);
31+
expect(menu.vm.yearNext).toEqual(getNextMonthYear(date).year);
32+
expect(menu.vm.hours).toEqual(date.getHours());
33+
expect(menu.vm.minutes).toEqual(date.getMinutes());
34+
});
35+
36+
it('Should properly map initial values for range picker', async () => {
37+
const start = new Date();
38+
const end = addDays(start, 7);
39+
const dp = mount(Datepicker, { props: { modelValue: [start, end], range: true } });
40+
41+
dp.vm.openMenu();
42+
43+
await dp.vm.$nextTick();
44+
45+
const menu: VueWrapper<any> = dp.findComponent(DatepickerMenu);
46+
47+
expect(menu.vm.hours).toHaveLength(2);
48+
expect(menu.vm.minutes).toHaveLength(2);
49+
expect(menu.vm.hours[0]).toEqual(start.getHours());
50+
});
51+
52+
it('Should select date', async () => {
53+
const tomorrow = addDays(new Date(), 1);
54+
const dp = mount(Datepicker, { props: { modelValue: null } });
55+
56+
dp.vm.openMenu();
57+
58+
await dp.vm.$nextTick();
59+
60+
const menu = dp.findComponent(DatepickerMenu);
61+
62+
const calendar = menu.findComponent(Calendar);
63+
64+
calendar.vm.$emit('selectDate', { value: tomorrow, current: true });
65+
await calendar.vm.$nextTick();
66+
67+
expect(dp.vm.internalModelValue).toEqual(tomorrow);
68+
});
69+
70+
it('Should select range', async () => {
71+
const start = addDays(new Date(), 1);
72+
const end = addDays(start, 7);
73+
const dp = mount(Datepicker, { props: { modelValue: null, range: true } });
74+
75+
dp.vm.openMenu();
76+
77+
await dp.vm.$nextTick();
78+
79+
const menu: VueWrapper<any> = dp.findComponent(DatepickerMenu);
80+
const calendar = menu.findComponent(Calendar);
81+
calendar.vm.$emit('selectDate', { value: start, current: true });
82+
await calendar.vm.$nextTick();
83+
84+
expect(menu.vm.internalModelValue).toHaveLength(1);
85+
86+
calendar.vm.$emit('selectDate', { value: end, current: true });
87+
await calendar.vm.$nextTick();
88+
89+
expect(menu.vm.internalModelValue).toHaveLength(2);
90+
expect(menu.vm.internalModelValue[0]).toEqual(start);
91+
expect(menu.vm.internalModelValue[1]).toEqual(end);
92+
});
93+
94+
it('Should select range from 2 calendars', async () => {
95+
const start = addDays(new Date(), 1);
96+
const end = addMonths(start, 1);
97+
const dp = mount(Datepicker, { props: { modelValue: null, range: true, twoCalendars: true } });
98+
99+
dp.vm.openMenu();
100+
101+
await dp.vm.$nextTick();
102+
103+
const menu: VueWrapper<any> = dp.findComponent(DatepickerMenu);
104+
const calendar = menu.findComponent(Calendar);
105+
106+
calendar.vm.$emit('selectDate', { value: start, current: true });
107+
await calendar.vm.$nextTick();
108+
calendar.vm.$emit('selectDate', { value: end, current: true }, true);
109+
await calendar.vm.$nextTick();
110+
111+
expect(menu.vm.internalModelValue).toHaveLength(2);
112+
expect(menu.vm.internalModelValue[0]).toEqual(start);
113+
expect(menu.vm.internalModelValue[1]).toEqual(end);
114+
});
115+
116+
it('Should select auto range', async () => {
117+
const start = new Date();
118+
const end = addDays(start, 7);
119+
const dp = mount(Datepicker, { props: { modelValue: null, range: true, autoRange: 7 } });
120+
121+
dp.vm.openMenu();
122+
123+
await dp.vm.$nextTick();
124+
125+
const menu: VueWrapper<any> = dp.findComponent(DatepickerMenu);
126+
const calendar = menu.findComponent(Calendar);
127+
128+
calendar.vm.$emit('selectDate', { value: start, current: true });
129+
await calendar.vm.$nextTick();
130+
131+
expect(menu.vm.internalModelValue).toHaveLength(2);
132+
expect(menu.vm.internalModelValue[0]).toEqual(start);
133+
expect(menu.vm.internalModelValue[1]).toEqual(end);
134+
});
135+
136+
it('Should update time', async () => {
137+
const val = 15;
138+
const date = new Date();
139+
const dp = mount(Datepicker, { props: { modelValue: date } });
140+
141+
dp.vm.openMenu();
142+
143+
await dp.vm.$nextTick();
144+
145+
const menu: VueWrapper<any> = dp.findComponent(DatepickerMenu);
146+
const calendar = menu.findComponent(Calendar);
147+
calendar.vm.$emit('update:hours', val);
148+
await calendar.vm.$nextTick();
149+
calendar.vm.$emit('update:minutes', val);
150+
await calendar.vm.$nextTick();
151+
152+
expect(menu.vm.internalModelValue.getHours()).toEqual(val);
153+
expect(menu.vm.internalModelValue.getMinutes()).toEqual(val);
154+
});
155+
156+
it('Should update range time', async () => {
157+
const val = 15;
158+
const start = new Date();
159+
const end = addDays(new Date(), 7);
160+
const dp = mount(Datepicker, { props: { modelValue: [start, end], range: true } });
161+
162+
dp.vm.openMenu();
163+
164+
await dp.vm.$nextTick();
165+
166+
const menu: VueWrapper<any> = dp.findComponent(DatepickerMenu);
167+
const calendar = menu.findComponent(Calendar);
168+
calendar.vm.$emit('update:hours', [start.getHours(), val]);
169+
await calendar.vm.$nextTick();
170+
calendar.vm.$emit('update:minutes', [val, end.getMinutes()]);
171+
await calendar.vm.$nextTick();
172+
173+
expect(menu.vm.internalModelValue[1].getHours()).toEqual(val);
174+
expect(menu.vm.internalModelValue[0].getMinutes()).toEqual(val);
175+
});
176+
177+
it('Should set month', async () => {
178+
const month = 0;
179+
const dp = mount(Datepicker, { props: { modelValue: null, range: true } });
180+
181+
dp.vm.openMenu();
182+
183+
await dp.vm.$nextTick();
184+
185+
const menu: VueWrapper<any> = dp.findComponent(DatepickerMenu);
186+
const calendar = menu.findComponent(Calendar);
187+
calendar.vm.$emit('update:month', month);
188+
189+
expect(menu.vm.month).toEqual(month);
190+
});
191+
192+
it('Should set year', async () => {
193+
const year = 2022;
194+
const dp = mount(Datepicker, { props: { modelValue: null, range: true } });
195+
196+
dp.vm.openMenu();
197+
198+
await dp.vm.$nextTick();
199+
200+
const menu: VueWrapper<any> = dp.findComponent(DatepickerMenu);
201+
const calendar = menu.findComponent(Calendar);
202+
calendar.vm.$emit('update:year', year);
203+
204+
expect(menu.vm.year).toEqual(year);
205+
});
206+
207+
it('Should format with custom function', async () => {
208+
const selected = new Date();
209+
210+
const dp = mount(Datepicker, { props: { modelValue: null, format } });
211+
212+
dp.vm.openMenu();
213+
214+
await dp.vm.$nextTick();
215+
216+
const menu: VueWrapper<any> = dp.findComponent(DatepickerMenu);
217+
const calendar = menu.findComponent(Calendar);
218+
calendar.vm.$emit('selectDate', { value: selected, current: true });
219+
await calendar.vm.$nextTick();
220+
dp.vm.selectDate();
221+
await dp.vm.$nextTick();
222+
223+
expect(dp.vm.inputValue).toEqual(format(selected));
224+
});
225+
226+
it('Should display preview format from function', async () => {
227+
const selected = new Date();
228+
229+
const dp = mount(Datepicker, { props: { modelValue: null, previewFormat: format } });
230+
231+
dp.vm.openMenu();
232+
233+
await dp.vm.$nextTick();
234+
235+
const menu: VueWrapper<any> = dp.findComponent(DatepickerMenu);
236+
const calendar = menu.findComponent(Calendar);
237+
calendar.vm.$emit('selectDate', { value: selected, current: true });
238+
await calendar.vm.$nextTick();
239+
240+
const actionRow = menu.findComponent(ActionRow);
241+
expect(actionRow.text().includes(format(selected))).toBeTruthy();
242+
});
243+
});

‎tests/unit/v-model.spec.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { shallowMount } from '@vue/test-utils';
2+
import addDays from 'date-fns/addDays';
3+
24
import Vue3Datepicker from '../../src/Vue3DatePicker/Vue3DatePicker.vue';
3-
import { addDays } from 'date-fns';
5+
46
import { resetDateTime } from '../../src/Vue3DatePicker/utils/date-utils';
57

68
describe('v-model mapping', () => {

0 commit comments

Comments
 (0)