Skip to content

Commit d7b8fdd

Browse files
mlmoravekmlmoravek
authored
test(datepicker): add multiple and range test (#1013)
* test(datepicker): add `multiple` and `range` test * fix(datepicker): update types
1 parent 3e4291a commit d7b8fdd

File tree

4 files changed

+184
-3
lines changed

4 files changed

+184
-3
lines changed

‎packages/oruga/src/components/datepicker/examples/range.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { ref } from "vue";
33
4-
const dates = ref<Date[]>([]);
4+
const dates = ref<[Date, Date] | []>([]);
55
</script>
66

77
<template>

‎packages/oruga/src/components/datepicker/props.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export type DatepickerProps<
1212
override?: boolean;
1313
/** The input value state */
1414
modelValue?: IsRange extends true
15-
? Date[]
15+
? [Date, Date] | []
1616
: IsMultiple extends true
1717
? Date[]
1818
: Date;

‎packages/oruga/src/components/datepicker/tests/datepicker.test.ts‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,185 @@ describe("ODatepicker", () => {
5757
const updateValue = updates[0][0];
5858
expect(updateValue).toBeNull();
5959
});
60+
61+
test("react accordingly when an date is selected with multiple prop", async () => {
62+
const wrapper = mount(ODatepicker, {
63+
props: { modelValue: [new Date()], multiple: true },
64+
});
65+
66+
// check pre selected date
67+
const cells = wrapper.findAll(".o-dpck__table__cell");
68+
let selectedCells = cells.filter((c) =>
69+
c.classes("o-dpck__table__cell--selected"),
70+
);
71+
// check only one date is selected
72+
expect(selectedCells.length).toBe(1);
73+
74+
// check nothing got emitted yet
75+
let emit = wrapper.emitted("update:modelValue");
76+
expect(emit).toBeUndefined();
77+
78+
// select another date
79+
const cellToSelect1 = cells.find(
80+
(c) =>
81+
c.classes("o-dpck__table__cell--selectable") &&
82+
!c.classes("o-dpck__table__cell--selected"),
83+
);
84+
await cellToSelect1.trigger("click");
85+
86+
// check modelValue got updated
87+
emit = wrapper.emitted("update:modelValue");
88+
expect(emit).toHaveLength(1);
89+
expect(emit[0][0]).toHaveLength(2);
90+
91+
// check two dates are selected
92+
selectedCells = cells.filter((c) =>
93+
c.classes("o-dpck__table__cell--selected"),
94+
);
95+
expect(selectedCells.length).toBe(2);
96+
97+
// select another date
98+
const cellToSelect2 = cells.find(
99+
(c) =>
100+
c.classes("o-dpck__table__cell--selectable") &&
101+
!c.classes("o-dpck__table__cell--selected"),
102+
);
103+
await cellToSelect2.trigger("click");
104+
105+
// check modelValue got updated
106+
emit = wrapper.emitted("update:modelValue");
107+
expect(emit).toHaveLength(2);
108+
expect(emit[1][0]).toHaveLength(3);
109+
110+
// check three dates are selected
111+
selectedCells = cells.filter((c) =>
112+
c.classes("o-dpck__table__cell--selected"),
113+
);
114+
expect(selectedCells.length).toBe(3);
115+
116+
// deselect preveus selected date
117+
await cellToSelect1.trigger("click");
118+
119+
// check modelValue got updated
120+
emit = wrapper.emitted("update:modelValue");
121+
expect(emit).toHaveLength(3);
122+
expect(emit[2][0]).toHaveLength(2);
123+
124+
// check two dates are selected
125+
selectedCells = cells.filter((c) =>
126+
c.classes("o-dpck__table__cell--selected"),
127+
);
128+
expect(selectedCells.length).toBe(2);
129+
});
130+
131+
test("react accordingly when an date is selected with range prop", async () => {
132+
const wrapper = mount(ODatepicker, {
133+
props: { modelValue: [], range: true },
134+
});
135+
136+
// check pre selected date
137+
const cells = wrapper.findAll(".o-dpck__table__cell");
138+
let selectedCells = cells.filter((c) =>
139+
c.classes("o-dpck__table__cell--selected"),
140+
);
141+
// check nothing is selected yet
142+
expect(selectedCells.length).toBe(0);
143+
144+
// check nothing got emitted yet
145+
let emit = wrapper.emitted("update:modelValue");
146+
expect(emit).toBeUndefined();
147+
148+
// select first date
149+
let cellToSelect = cells.find(
150+
(c) =>
151+
c.classes("o-dpck__table__cell--selectable") &&
152+
!c.classes("o-dpck__table__cell--selected"),
153+
);
154+
await cellToSelect.trigger("click");
155+
156+
// check nothing got emitted yet
157+
emit = wrapper.emitted("update:modelValue");
158+
expect(emit).toBeUndefined();
159+
160+
// check one date is selected
161+
selectedCells = cells.filter((c) =>
162+
c.classes("o-dpck__table__cell--first-hovered"),
163+
);
164+
expect(selectedCells.length).toBe(1);
165+
166+
// select second date
167+
cellToSelect = cells.find(
168+
(c) =>
169+
c.classes("o-dpck__table__cell--selectable") &&
170+
!c.classes("o-dpck__table__cell--selected"),
171+
);
172+
await cellToSelect.trigger("click");
173+
174+
// check modelValue got updated
175+
emit = wrapper.emitted("update:modelValue");
176+
expect(emit).toHaveLength(1);
177+
expect(emit[0][0]).toHaveLength(2);
178+
179+
// check two dates are selected
180+
selectedCells = cells.filter((c) =>
181+
c.classes("o-dpck__table__cell--selected"),
182+
);
183+
expect(selectedCells.length).not.toBe(0);
184+
185+
// check one date is selected
186+
selectedCells = cells.filter((c) =>
187+
c.classes("o-dpck__table__cell--first-selected"),
188+
);
189+
expect(selectedCells.length).toBe(1);
190+
191+
// check one date is selected
192+
selectedCells = cells.filter((c) =>
193+
c.classes("o-dpck__table__cell--last-selected"),
194+
);
195+
expect(selectedCells.length).toBe(1);
196+
197+
// select another first date
198+
cellToSelect = cells.find(
199+
(c) =>
200+
c.classes("o-dpck__table__cell--selectable") &&
201+
!c.classes("o-dpck__table__cell--selected"),
202+
);
203+
// select another date
204+
await cellToSelect.trigger("click");
205+
206+
// check nothing got emitted yet
207+
emit = wrapper.emitted("update:modelValue");
208+
expect(emit).toHaveLength(1);
209+
210+
// select second date
211+
cellToSelect = cells.find(
212+
(c) =>
213+
c.classes("o-dpck__table__cell--selectable") &&
214+
!c.classes("o-dpck__table__cell--selected"),
215+
);
216+
await cellToSelect.trigger("click");
217+
218+
// check two dates are selected
219+
selectedCells = cells.filter((c) =>
220+
c.classes("o-dpck__table__cell--selected"),
221+
);
222+
expect(selectedCells.length).not.toBe(0);
223+
224+
// check one date is selected
225+
selectedCells = cells.filter((c) =>
226+
c.classes("o-dpck__table__cell--first-selected"),
227+
);
228+
expect(selectedCells.length).toBe(1);
229+
230+
// check one date is selected
231+
selectedCells = cells.filter((c) =>
232+
c.classes("o-dpck__table__cell--last-selected"),
233+
);
234+
expect(selectedCells.length).toBe(1);
235+
236+
// check modelValue got updated
237+
emit = wrapper.emitted("update:modelValue");
238+
expect(emit).toHaveLength(2);
239+
expect(emit[1][0]).toHaveLength(2);
240+
});
60241
});

‎packages/oruga/src/components/datepicker/useDatepickerMixins.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export function useDatepickerMixins<R extends boolean, M extends boolean>(
9999
/** Format date into string */
100100
const defaultDateFormatter = (date: typeof props.modelValue): string => {
101101
if (!date) return "";
102-
const targetDates = Array.isArray(date) ? date : [date];
102+
const targetDates: Date[] = Array.isArray(date) ? date : [date];
103103
if (!targetDates.length) return "";
104104
const dates = targetDates.map((date) => {
105105
const d = new Date(

0 commit comments

Comments
 (0)