fix(connectNumericMenu): support numeric refinement 0 (#2882)

This PR adds in connectNumericMenu support for numericRefinement `0`. There has been complaints about the following not producing a refinement ```jsx import { NumericMenu } from 'react-instantsearch-dom'; <NumericMenu attribute="price" items={[ { label: '<= 0', start: 0 }, /* ... */ ]} /> ``` fixes #867
algolia · Dec 17, 2019 · 30bd9fd · 30bd9fd
1 parent 621656a
commit 30bd9fd
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 4 deletions.
diff --git a/packages/react-instantsearch-core/src/connectors/__tests__/connectNumericMenu.js b/packages/react-instantsearch-core/src/connectors/__tests__/connectNumericMenu.js
@@ -120,6 +120,37 @@ describe('connectNumericMenu', () => {
         currentRefinement: '',
         canRefine: true,
       });
+
+      props = connect.getProvidedProps(
+        {
+          items: [
+            { label: 'is 0', start: 0, end: 0 },
+            { label: 'in 0..10', start: 0, end: 10 },
+          ],
+          contextValue,
+        },
+        {},
+        { results }
+      );
+      expect(props).toEqual({
+        items: [
+          {
+            label: 'is 0',
+            value: '0:0',
+            isRefined: false,
+            noRefinement: false,
+          },
+          {
+            label: 'in 0..10',
+            value: '0:10',
+            isRefined: false,
+            noRefinement: false,
+          },
+          { label: 'All', value: '', isRefined: true, noRefinement: false },
+        ],
+        currentRefinement: '',
+        canRefine: true,
+      });
     });
 
     it('no items define', () => {
@@ -279,6 +310,34 @@ describe('connectNumericMenu', () => {
         '>=': [100],
         '<=': [200],
       });
+
+      params = connect.getSearchParameters(
+        initSP,
+        { attribute: 'facet', contextValue },
+        { multiRange: { facet: '0:' } }
+      );
+      expect(params.getNumericRefinements('facet')).toEqual({
+        '>=': [0],
+      });
+
+      params = connect.getSearchParameters(
+        initSP,
+        { attribute: 'facet', contextValue },
+        { multiRange: { facet: ':0' } }
+      );
+      expect(params.getNumericRefinements('facet')).toEqual({
+        '<=': [0],
+      });
+
+      params = connect.getSearchParameters(
+        initSP,
+        { attribute: 'facet', contextValue },
+        { multiRange: { facet: '0:0' } }
+      );
+      expect(params.getNumericRefinements('facet')).toEqual({
+        '>=': [0],
+        '<=': [0],
+      });
     });
 
     it('registers its id in metadata', () => {

diff --git a/packages/react-instantsearch-core/src/connectors/connectNumericMenu.js b/packages/react-instantsearch-core/src/connectors/connectNumericMenu.js
@@ -13,7 +13,9 @@ function stringifyItem(item) {
   if (typeof item.start === 'undefined' && typeof item.end === 'undefined') {
     return '';
   }
-  return `${item.start ? item.start : ''}:${item.end ? item.end : ''}`;
+  const start = typeof item.start !== 'undefined' ? item.start : '';
+  const end = typeof item.end !== 'undefined' ? item.end : '';
+  return `${start}:${end}`;
 }
 
 function parseItem(value) {
@@ -199,14 +201,14 @@ export default createConnector({
     );
     searchParameters = searchParameters.addDisjunctiveFacet(attribute);
 
-    if (start) {
+    if (typeof start === 'number') {
       searchParameters = searchParameters.addNumericRefinement(
         attribute,
         '>=',
         start
       );
     }
-    if (end) {
+    if (typeof end === 'number') {
       searchParameters = searchParameters.addNumericRefinement(
         attribute,
         '<=',

diff --git a/stories/NumericMenu.stories.js b/stories/NumericMenu.stories.js
@@ -11,7 +11,7 @@ stories
       <NumericMenu
         attribute="price"
         items={[
-          { end: 10, label: '<$10' },
+          { start: 0, end: 10, label: '<$10' },
           { start: 10, end: 100, label: '$10-$100' },
           { start: 100, end: 500, label: '$100-$500' },
           { start: 500, label: '>$500' },