fix(hitsPerPage): improve warning for missing state value (#3707)

* fix(hitsPerPage): improve warning for missing state value

I stumbled across this development warning message and couldn't understand it. I tried to rephrase it.

* fix(stories): add state value in hitsPerPage

The stories display 4 hits so we need to add another entry with the value `4` if we don't use the `default` attribute.

Author: francoischalifour

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

@@ -143,9 +143,12 @@ Learn more: https://community.algolia.com/instantsearch.js/v2/widgets/configure.
 
           warning(
             false,
-            `No items in HitsPerPage \`items\` with \`value: hitsPerPage\` (hitsPerPage: ${
+            `
+The \`items\` option of \`hitsPerPage\` does not contain the "hits per page" value coming from the state: ${
               state.hitsPerPage
-            })`
+            }.
+
+You may want to add another entry to the \`items\` option with this value.`
           );
 
           items = [{ value: '', label: '' }, ...items];

src/widgets/hits-per-page/__tests__/hits-per-page-test.js

@@ -121,7 +121,9 @@ describe('hitsPerPage()', () => {
     expect(() => {
       widget.init({ state: helper.state, helper });
     }).toWarnDev(
-      '[InstantSearch.js]: No items in HitsPerPage `items` with `value: hitsPerPage` (hitsPerPage: 20)'
+      `[InstantSearch.js]: The \`items\` option of \`hitsPerPage\` does not contain the "hits per page" value coming from the state: 20.
+
+You may want to add another entry to the \`items\` option with this value.`
     );
   });
 
@@ -131,7 +133,9 @@ describe('hitsPerPage()', () => {
     expect(() => {
       widget.init({ state: helper.state, helper });
     }).toWarnDev(
-      '[InstantSearch.js]: No items in HitsPerPage `items` with `value: hitsPerPage` (hitsPerPage: -1)'
+      `[InstantSearch.js]: The \`items\` option of \`hitsPerPage\` does not contain the "hits per page" value coming from the state: -1.
+
+You may want to add another entry to the \`items\` option with this value.`
     );
   });
 

stories/hits-per-page.stories.js

@@ -10,6 +10,7 @@ storiesOf('HitsPerPage', module)
           container,
           items: [
             { value: 3, label: '3 per page' },
+            { value: 4, label: '4 per page' },
             { value: 5, label: '5 per page' },
             { value: 10, label: '10 per page' },
           ],
@@ -39,7 +40,7 @@ storiesOf('HitsPerPage', module)
         instantsearch.widgets.hitsPerPage({
           container,
           items: [
-            { value: 3, label: '3 per page' },
+            { value: 3, label: '3 per page', default: true },
             { value: 5, label: '5 per page' },
             { value: 10, label: '10 per page' },
           ],