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

Commit 6eb46c8

Browse files
author
Eunjae Lee
authored
fix(range-input): refine correctly when start is given (#777)
1 parent 4f8eb4b commit 6eb46c8

File tree

2 files changed

+74
-1
lines changed

2 files changed

+74
-1
lines changed

src/components/RangeInput.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
>
1212
<form
1313
:class="suit('form')"
14-
@submit.prevent="refine({ min: minInput, max: maxInput })"
14+
@submit.prevent="refine({ min: pick(minInput, values.min), max: pick(maxInput, values.max) })"
1515
>
1616
<label :class="suit('label')">
1717
<slot name="minLabel" />
@@ -98,6 +98,10 @@ export default {
9898
maxInput: undefined,
9999
};
100100
},
101+
updated() {
102+
this.minInput = undefined;
103+
this.maxInput = undefined;
104+
},
101105
computed: {
102106
widgetParams() {
103107
return {
@@ -124,6 +128,13 @@ export default {
124128
},
125129
},
126130
methods: {
131+
pick(first, second) {
132+
if (first !== null && first !== undefined) {
133+
return first;
134+
} else {
135+
return second;
136+
}
137+
},
127138
refine({ min, max }) {
128139
this.state.refine([min, max]);
129140
},

src/components/__tests__/RangeInput.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,4 +307,66 @@ describe('refinement', () => {
307307

308308
expect(refine).toHaveBeenLastCalledWith(['100', '106']);
309309
});
310+
311+
it('refines correctly when `start` given and user clicks submit without changing input field', () => {
312+
const refine = jest.fn();
313+
__setState({
314+
refine,
315+
start: [50, 100],
316+
range: {
317+
min: 1,
318+
max: 5000,
319+
},
320+
});
321+
322+
const wrapper = mount(RangeInput, {
323+
propsData: {
324+
...defaultProps,
325+
},
326+
});
327+
328+
const form = wrapper.find('form');
329+
form.trigger('submit');
330+
331+
expect(refine).toHaveBeenCalledTimes(1);
332+
expect(refine).toHaveBeenCalledWith([50, 100]);
333+
});
334+
335+
it('refines correctly even when state changes', () => {
336+
const refine = jest.fn();
337+
__setState({
338+
...defaultState,
339+
refine,
340+
});
341+
342+
const wrapper = mount(RangeInput, {
343+
propsData: {
344+
...defaultProps,
345+
},
346+
});
347+
348+
// refine for the first time
349+
const minInput = wrapper.find('.ais-RangeInput-input--min');
350+
minInput.element.value = 10;
351+
minInput.trigger('change');
352+
353+
const maxInput = wrapper.find('.ais-RangeInput-input--max');
354+
maxInput.element.value = 100;
355+
maxInput.trigger('change');
356+
357+
const form = wrapper.find('form');
358+
form.trigger('submit');
359+
360+
expect(refine).toHaveBeenCalledTimes(1);
361+
expect(refine).toHaveBeenCalledWith(['10', '100']);
362+
363+
// update the state
364+
wrapper.setData({
365+
state: { start: [50, 200] }, // min: 10 -> 50, max: 100 -> 200
366+
});
367+
368+
form.trigger('submit');
369+
expect(refine).toHaveBeenCalledTimes(2);
370+
expect(refine).toHaveBeenCalledWith([50, 200]);
371+
});
310372
});

0 commit comments

Comments
 (0)