fix(range): don't go out of bounds with min or max given (#4627)

* fix(range): fix the wrong range with min or max given * respect min & max bound * fix lint error * test if initialUiState is taken into account * Update src/connectors/range/__tests__/connectRange-test.ts Co-authored-by: Haroen Viaene <[email protected]> * rename the test Co-authored-by: Haroen Viaene <[email protected]>
algolia · Feb 2, 2021 · 8327ec0 · 8327ec0
1 parent 54a03e5
commit 8327ec0
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 2 deletions.
diff --git a/src/connectors/range/__tests__/connectRange-test.ts b/src/connectors/range/__tests__/connectRange-test.ts
@@ -11,6 +11,7 @@ import {
 import { createSearchClient } from '../../../../test/mock/createSearchClient';
 import { createSingleSearchResponse } from '../../../../test/mock/createAPIResponse';
 import { createInstantSearch } from '../../../../test/mock/createInstantSearch';
+import instantsearch from '../../../lib/main';
 
 function createFacetStatsResults({
   helper,
@@ -1941,6 +1942,54 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/range-input
       });
     });
 
+    test('returns the `SearchParameters` with the correct price range', () => {
+      const render = jest.fn();
+      const makeWidget = connectRange(render);
+      const helper = jsHelper(createSearchClient(), 'indexName', {
+        disjunctiveFacets: ['price'],
+      });
+      const widget = makeWidget({
+        attribute: 'price',
+        min: 0,
+        max: 500,
+      });
+
+      const actual = widget.getWidgetSearchParameters!(helper.state, {
+        uiState: {
+          range: {
+            price: '0:400',
+          },
+        },
+      });
+
+      expect(actual.numericRefinements.price['>=']).toEqual([0]);
+      expect(actual.numericRefinements.price['<=']).toEqual([400]);
+    });
+
+    test('ignores min or max from uiState if they are out of bound', () => {
+      const render = jest.fn();
+      const makeWidget = connectRange(render);
+      const helper = jsHelper(createSearchClient(), 'indexName', {
+        disjunctiveFacets: ['price'],
+      });
+      const widget = makeWidget({
+        attribute: 'price',
+        min: 0,
+        max: 500,
+      });
+
+      const actual = widget.getWidgetSearchParameters!(helper.state, {
+        uiState: {
+          range: {
+            price: '-20:600',
+          },
+        },
+      });
+
+      expect(actual.numericRefinements.price['>=']).toEqual([0]);
+      expect(actual.numericRefinements.price['<=']).toEqual([500]);
+    });
+
     const attribute = 'price';
 
     it('expect to return default configuration', () => {
@@ -2063,6 +2112,39 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/range-input
 
       expect(actual).toEqual(expectation);
     });
+
+    it('passes the correct range set by initialUiState', () => {
+      const searchClient = createSearchClient();
+      const search = instantsearch({
+        indexName: 'test-index',
+        searchClient,
+        initialUiState: {
+          'test-index': {
+            range: {
+              price: '100:200',
+            },
+          },
+        },
+      });
+      const renderer = jest.fn();
+      const customRangeInput = connectRange(renderer);
+
+      search.addWidgets([
+        customRangeInput({
+          attribute: 'price',
+          min: 0,
+          max: 500,
+        }),
+      ]);
+      search.start();
+
+      expect(renderer).toHaveBeenCalledWith(
+        expect.objectContaining({
+          start: [100, 200],
+        }),
+        true
+      );
+    });
   });
 
   describe('insights', () => {

diff --git a/src/connectors/range/connectRange.ts b/src/connectors/range/connectRange.ts
@@ -476,15 +476,29 @@ const connectRange: ConnectRange = function connectRange(
 
         const [lowerBound, upperBound] = value.split(':').map(parseFloat);
 
-        if (isFiniteNumber(lowerBound)) {
+        if (
+          isFiniteNumber(lowerBound) &&
+          (!isFiniteNumber(minBound) || minBound < lowerBound)
+        ) {
+          widgetSearchParameters = widgetSearchParameters.removeNumericRefinement(
+            attribute,
+            '>='
+          );
           widgetSearchParameters = widgetSearchParameters.addNumericRefinement(
             attribute,
             '>=',
             lowerBound
           );
         }
 
-        if (isFiniteNumber(upperBound)) {
+        if (
+          isFiniteNumber(upperBound) &&
+          (!isFiniteNumber(maxBound) || upperBound < maxBound)
+        ) {
+          widgetSearchParameters = widgetSearchParameters.removeNumericRefinement(
+            attribute,
+            '<='
+          );
           widgetSearchParameters = widgetSearchParameters.addNumericRefinement(
             attribute,
             '<=',