Skip to content

Commit

Permalink
fix(numericMenu): take array into account for empty state (#4084)
Browse files Browse the repository at this point in the history
This PR fixes a regression we introduced with the new behaviour of the Helper. We now preserve the empty state to avoid the parent to override the refinement when the widget is mounted. The `numericMenu` was relying on the previous behaviour to pick the "no value" element. We now check that every operator is empty.

**Before**

![before](https://user-images.githubusercontent.com/6513513/64005002-c0235600-cb0f-11e9-80a1-74382cb47ebc.gif)

**After**

![after](https://user-images.githubusercontent.com/6513513/64005037-cca7ae80-cb0f-11e9-888d-527676bff6b2.gif)

You check the behaviour on the Storybook with [the `currentRefinement` stories](https://deploy-preview-4084--instantsearchjs.netlify.com/stories/?path=/story/currentrefinements--with-numericmenu).
  • Loading branch information
samouss authored and Haroenv committed Oct 23, 2019
1 parent 1d2a816 commit 2c05a01
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 7 deletions.
71 changes: 65 additions & 6 deletions src/connectors/numeric-menu/__tests__/connectNumericMenu-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,70 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/numeric-men
});
});

it('when the state is cleared, the "no value" value should be refined', () => {
it('when only the refinement is cleared, the "no value" value should be refined', () => {
const rendering = jest.fn();
const makeWidget = connectNumericMenu(rendering);
const listOptions = [
{ label: 'below 10', end: 10 },
{ label: '10 - 20', start: 10, end: 20 },
{ label: 'more than 20', start: 20 },
{ label: '42', start: 42, end: 42 },
{ label: 'void' },
];
const widget = makeWidget({
attribute: 'numerics',
items: listOptions,
});

const helper = jsHelper({});
helper.search = jest.fn();

widget.init({
helper,
state: helper.state,
createURL: () => '#',
});

const refine =
rendering.mock.calls[rendering.mock.calls.length - 1][0].refine;
// a user selects a value in the refinement list
refine(encodeValue(listOptions[0].start, listOptions[0].end));

widget.render({
results: new SearchResults(helper.state, [{}]),
state: helper.state,
helper,
createURL: () => '#',
});

// No option should be selected
const expectedResults0 = [...listOptions].map(mapOptionsToItems);
expectedResults0[0].isRefined = true;

const renderingParameters0 =
rendering.mock.calls[rendering.mock.calls.length - 1][0];
expect(renderingParameters0.items).toEqual(expectedResults0);

// Only the current refinement is cleared by a third party
helper.removeNumericRefinement('numerics', '<=', 10);

widget.render({
results: new SearchResults(helper.state, [{}]),
state: helper.state,
helper,
createURL: () => '#',
});

// No option should be selected
const expectedResults1 = [...listOptions].map(mapOptionsToItems);
expectedResults1[4].isRefined = true;

const renderingParameters1 =
rendering.mock.calls[rendering.mock.calls.length - 1][0];
expect(renderingParameters1.items).toEqual(expectedResults1);
});

it('when all the refinements are cleared, the "no value" value should be refined', () => {
const rendering = jest.fn();
const makeWidget = connectNumericMenu(rendering);
const listOptions = [
Expand Down Expand Up @@ -442,11 +505,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/numeric-men
expect(renderingParameters0.items).toEqual(expectedResults0);

// All the refinements are cleared by a third party
helper.setState(
helper.state.setQueryParameter('numericRefinements', {
numerics: {},
})
);
helper.clearRefinements('numerics');

widget.render({
results: new SearchResults(helper.state, [{}]),
Expand Down
5 changes: 4 additions & 1 deletion src/connectors/numeric-menu/connectNumericMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export default function connectNumericMenu(renderFn, unmountFn = noop) {

this._createURL = state => facetValue =>
createURL(refine(state, attribute, items, facetValue));

this._prepareItems = state =>
items.map(({ start, end, label }) => ({
label,
Expand Down Expand Up @@ -254,7 +255,9 @@ function isRefined(state, attribute, option) {
}

if (option.start === undefined && option.end === undefined) {
return Object.keys(currentRefinements).length === 0;
return Object.keys(currentRefinements).every(
operator => (currentRefinements[operator] || []).length === 0
);
}

return undefined;
Expand Down

0 comments on commit 2c05a01

Please sign in to comment.