fix(connectHitsPerPage): default value should not break the API (#3006)

* refactor(test): used jest method for readability
* chore(test): reproduce #2732
* fix(connectHitsPerPage): default value should not break the API
* fix(connectHitsPerPage): provide a meaningful default value

Author: bobylito

src/connectors/hits-per-page/__tests__/connectHitsPerPage-test.js

@@ -212,7 +212,7 @@ describe('connectHitsPerPage', () => {
     const firstRenderingOptions = rendering.lastCall.args[0];
     expect(firstRenderingOptions.items).toHaveLength(3);
     firstRenderingOptions.refine(firstRenderingOptions.items[0].value);
-    expect(helper.getQueryParameter('hitsPerPage')).toBe(undefined);
+    expect(helper.getQueryParameter('hitsPerPage')).not.toBeDefined();
 
     // Reset the hitsPerPage to an actual value
     helper.setQueryParameter('hitsPerPage', 7);
@@ -227,7 +227,93 @@ describe('connectHitsPerPage', () => {
     const secondRenderingOptions = rendering.lastCall.args[0];
     expect(secondRenderingOptions.items).toHaveLength(3);
     secondRenderingOptions.refine(secondRenderingOptions.items[0].value);
-    expect(helper.getQueryParameter('hitsPerPage')).toBe(undefined);
+    expect(helper.getQueryParameter('hitsPerPage')).not.toBeDefined();
+  });
+
+  it('the option for unselecting values should work even if stringified', () => {
+    const rendering = sinon.stub();
+    const makeWidget = connectHitsPerPage(rendering);
+    const widget = makeWidget({
+      items: [
+        { value: 3, label: '3 items per page' },
+        { value: 10, label: '10 items per page' },
+      ],
+    });
+
+    const helper = jsHelper({}, '', {
+      hitsPerPage: 7,
+    });
+    helper.search = sinon.stub();
+
+    widget.init({
+      helper,
+      state: helper.state,
+      createURL: () => '#',
+      onHistoryChange: () => {},
+    });
+
+    const firstRenderingOptions = rendering.lastCall.args[0];
+    expect(firstRenderingOptions.items).toHaveLength(3);
+    firstRenderingOptions.refine(`${firstRenderingOptions.items[0].value}`);
+    expect(helper.getQueryParameter('hitsPerPage')).not.toBeDefined();
+
+    // Reset the hitsPerPage to an actual value
+    helper.setQueryParameter('hitsPerPage', 7);
+
+    widget.render({
+      results: new SearchResults(helper.state, [{}]),
+      state: helper.state,
+      helper,
+      createURL: () => '#',
+    });
+
+    const secondRenderingOptions = rendering.lastCall.args[0];
+    expect(secondRenderingOptions.items).toHaveLength(3);
+    secondRenderingOptions.refine(`${secondRenderingOptions.items[0].value}`);
+    expect(helper.getQueryParameter('hitsPerPage')).not.toBeDefined();
+  });
+
+  it('Should be able to unselect using an empty string', () => {
+    const rendering = sinon.stub();
+    const makeWidget = connectHitsPerPage(rendering);
+    const widget = makeWidget({
+      items: [
+        { value: 3, label: '3 items per page' },
+        { value: 10, label: '10 items per page' },
+      ],
+    });
+
+    const helper = jsHelper({}, '', {
+      hitsPerPage: 7,
+    });
+    helper.search = sinon.stub();
+
+    widget.init({
+      helper,
+      state: helper.state,
+      createURL: () => '#',
+      onHistoryChange: () => {},
+    });
+
+    const firstRenderingOptions = rendering.lastCall.args[0];
+    expect(firstRenderingOptions.items).toHaveLength(3);
+    firstRenderingOptions.refine('');
+    expect(helper.getQueryParameter('hitsPerPage')).not.toBeDefined();
+
+    // Reset the hitsPerPage to an actual value
+    helper.setQueryParameter('hitsPerPage', 7);
+
+    widget.render({
+      results: new SearchResults(helper.state, [{}]),
+      state: helper.state,
+      helper,
+      createURL: () => '#',
+    });
+
+    const secondRenderingOptions = rendering.lastCall.args[0];
+    expect(secondRenderingOptions.items).toHaveLength(3);
+    secondRenderingOptions.refine('');
+    expect(helper.getQueryParameter('hitsPerPage')).not.toBeDefined();
   });
 
   describe('routing', () => {

src/connectors/hits-per-page/connectHitsPerPage.js

@@ -157,11 +157,13 @@ The first one will be picked, you should probably set only one default value`
             );
           }
 
-          items = [{ value: undefined, label: '' }, ...items];
+          items = [{ value: '', label: '' }, ...items];
         }
 
         this.setHitsPerPage = value =>
-          helper.setQueryParameter('hitsPerPage', value).search();
+          !value && value !== 0
+            ? helper.setQueryParameter('hitsPerPage', undefined).search()
+            : helper.setQueryParameter('hitsPerPage', value).search();
 
         renderFn(
           {