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

Commit

Permalink
fix(range-input): refine correctly when start is given (#777)
Browse files Browse the repository at this point in the history
  • Loading branch information
Eunjae Lee authored Jun 4, 2020
1 parent 4f8eb4b commit 6eb46c8
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 1 deletion.
13 changes: 12 additions & 1 deletion src/components/RangeInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
>
<form
:class="suit('form')"
@submit.prevent="refine({ min: minInput, max: maxInput })"
@submit.prevent="refine({ min: pick(minInput, values.min), max: pick(maxInput, values.max) })"
>
<label :class="suit('label')">
<slot name="minLabel" />
Expand Down Expand Up @@ -98,6 +98,10 @@ export default {
maxInput: undefined,
};
},
updated() {
this.minInput = undefined;
this.maxInput = undefined;
},
computed: {
widgetParams() {
return {
Expand All @@ -124,6 +128,13 @@ export default {
},
},
methods: {
pick(first, second) {
if (first !== null && first !== undefined) {
return first;
} else {
return second;
}
},
refine({ min, max }) {
this.state.refine([min, max]);
},
Expand Down
62 changes: 62 additions & 0 deletions src/components/__tests__/RangeInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -307,4 +307,66 @@ describe('refinement', () => {

expect(refine).toHaveBeenLastCalledWith(['100', '106']);
});

it('refines correctly when `start` given and user clicks submit without changing input field', () => {
const refine = jest.fn();
__setState({
refine,
start: [50, 100],
range: {
min: 1,
max: 5000,
},
});

const wrapper = mount(RangeInput, {
propsData: {
...defaultProps,
},
});

const form = wrapper.find('form');
form.trigger('submit');

expect(refine).toHaveBeenCalledTimes(1);
expect(refine).toHaveBeenCalledWith([50, 100]);
});

it('refines correctly even when state changes', () => {
const refine = jest.fn();
__setState({
...defaultState,
refine,
});

const wrapper = mount(RangeInput, {
propsData: {
...defaultProps,
},
});

// refine for the first time
const minInput = wrapper.find('.ais-RangeInput-input--min');
minInput.element.value = 10;
minInput.trigger('change');

const maxInput = wrapper.find('.ais-RangeInput-input--max');
maxInput.element.value = 100;
maxInput.trigger('change');

const form = wrapper.find('form');
form.trigger('submit');

expect(refine).toHaveBeenCalledTimes(1);
expect(refine).toHaveBeenCalledWith(['10', '100']);

// update the state
wrapper.setData({
state: { start: [50, 200] }, // min: 10 -> 50, max: 100 -> 200
});

form.trigger('submit');
expect(refine).toHaveBeenCalledTimes(2);
expect(refine).toHaveBeenCalledWith([50, 200]);
});
});

0 comments on commit 6eb46c8

Please sign in to comment.