fix(connectRefinementList): set default value for limit (#2517)

* fix(connectRefinementList): set default value for limit
* fix(connectRefinementList): compute of `hasExhaustiveItems` in edge cases
* docs(connectRefinementList): missing word
* refactor(connectRefinementList): `rawItems` -> `facetValues`

Author: Maxime Janton

src/connectors/refinement-list/__tests__/connectRefinementList-test.js

@@ -48,6 +48,7 @@ describe('connectRefinementList', () => {
 
       expect(widget.getConfiguration()).toEqual({
         disjunctiveFacets: ['myFacet'],
+        maxValuesPerFacet: 10,
       });
     });
 
@@ -79,6 +80,7 @@ describe('connectRefinementList', () => {
 
       expect(widget.getConfiguration()).toEqual({
         facets: ['myFacet'],
+        maxValuesPerFacet: 10,
       });
     });
   });
@@ -234,6 +236,105 @@ describe('connectRefinementList', () => {
     expect(secondRenderingOptions.canToggleShowMore).toBe(false);
   });
 
+  it('If there are no showMoreLimit specified, canToggleShowMore is false', () => {
+    const widget = makeWidget({
+      attributeName: 'category',
+      limit: 1,
+    });
+
+    const helper = algoliasearchHelper(
+      fakeClient,
+      '',
+      widget.getConfiguration({})
+    );
+    helper.search = sinon.stub();
+
+    widget.init({
+      helper,
+      state: helper.state,
+      createURL: () => '#',
+      onHistoryChange: () => {},
+    });
+
+    widget.render({
+      results: new SearchResults(helper.state, [
+        {
+          hits: [],
+          facets: {
+            category: {
+              c1: 880,
+              c2: 47,
+            },
+          },
+        },
+        {
+          facets: {
+            category: {
+              c1: 880,
+              c2: 47,
+            },
+          },
+        },
+      ]),
+      state: helper.state,
+      helper,
+      createURL: () => '#',
+    });
+
+    const secondRenderingOptions = rendering.lastCall.args[0];
+    expect(secondRenderingOptions.canToggleShowMore).toBe(false);
+  });
+
+  it('If there are same amount of items then canToggleShowMore is false', () => {
+    const widget = makeWidget({
+      attributeName: 'category',
+      limit: 2,
+      showMoreLimit: 10,
+    });
+
+    const helper = algoliasearchHelper(
+      fakeClient,
+      '',
+      widget.getConfiguration({})
+    );
+    helper.search = sinon.stub();
+
+    widget.init({
+      helper,
+      state: helper.state,
+      createURL: () => '#',
+      onHistoryChange: () => {},
+    });
+
+    widget.render({
+      results: new SearchResults(helper.state, [
+        {
+          hits: [],
+          facets: {
+            category: {
+              c1: 880,
+              c2: 47,
+            },
+          },
+        },
+        {
+          facets: {
+            category: {
+              c1: 880,
+              c2: 47,
+            },
+          },
+        },
+      ]),
+      state: helper.state,
+      helper,
+      createURL: () => '#',
+    });
+
+    const secondRenderingOptions = rendering.lastCall.args[0];
+    expect(secondRenderingOptions.canToggleShowMore).toBe(false);
+  });
+
   it('If there are enough items then canToggleShowMore is true', () => {
     const widget = makeWidget({
       attributeName: 'category',
@@ -342,6 +443,7 @@ describe('connectRefinementList', () => {
     });
 
     const secondRenderingOptions = rendering.lastCall.args[0];
+    expect(secondRenderingOptions.canToggleShowMore).toEqual(true);
     expect(secondRenderingOptions.items).toEqual([
       {
         label: 'c1',

src/connectors/refinement-list/connectRefinementList.js

@@ -58,8 +58,8 @@ export const checkUsage = ({
  * @typedef {Object} CustomRefinementListWidgetOptions
  * @property {string} attributeName The name of the attribute in the records.
  * @property {"and"|"or"} [operator = 'or'] How the filters are combined together.
- * @property {number} [limit = undefined] The max number of items to display when
- * `showMoreLimit` is not or if the widget is showing less value.
+ * @property {number} [limit = 10] The max number of items to display when
+ * `showMoreLimit` is not set or if the widget is showing less value.
  * @property {number} [showMoreLimit] The max number of items to display if the widget
  * is showing more items.
  * @property {string[]|function} [sortBy = ['isRefined', 'count:desc', 'name:asc']] How to sort refinements. Possible values: `count|isRefined|name:asc|name:desc`.
@@ -148,7 +148,7 @@ export default function connectRefinementList(renderFn) {
     const {
       attributeName,
       operator = 'or',
-      limit,
+      limit = 10,
       showMoreLimit,
       sortBy = ['isRefined', 'count:desc', 'name:asc'],
     } = widgetParams;
@@ -202,7 +202,9 @@ export default function connectRefinementList(renderFn) {
           canRefine: isFromSearch || items.length > 0,
           widgetParams,
           isShowingMore,
-          canToggleShowMore: isShowingMore || !hasExhaustiveItems,
+          canToggleShowMore: showMoreLimit
+            ? isShowingMore || !hasExhaustiveItems
+            : false,
           toggleShowMore,
           hasExhaustiveItems,
         },
@@ -328,12 +330,11 @@ export default function connectRefinementList(renderFn) {
           createURL,
           instantSearchInstance,
         } = renderOptions;
-        const items = results
-          .getFacetValues(attributeName, { sortBy })
-          .slice(0, this.getLimit())
-          .map(formatItems);
 
-        const hasExhaustiveItems = items.length < this.getLimit();
+        const facetValues = results.getFacetValues(attributeName, { sortBy });
+        const items = facetValues.slice(0, this.getLimit()).map(formatItems);
+
+        const hasExhaustiveItems = facetValues.length <= this.getLimit();
 
         lastResultsFromMainSearch = items;