feat(insights): add insights support to InfiniteHits widget

**Summary**
This integrates insights with Vue Instantsearch to help using Click
Analytics in InfiniteHits.

Using `connectInfiniteHitsWithInsights` instead of `connectInfiniteHits`
exposed a new property `insights` to the internal state, which user can
call to emit insights events.

**Result**
```html
<ais-infinite-hits>
  <div slot-scope="{ items, refine, insights }">

    <div v-for="item in items">
      <button @click="insights('clickedObjectIDsAfterSearch', { eventName: 'Add to cart', objectIDs: [item.objectID] })">Add to cart</button>
    </div>

    <button @click="refine()"> Load more </button>
  </div>
</ais-infinite-hits>
```

src/components/InfiniteHits.vue

@@ -25,6 +25,7 @@
       :refine-previous="refinePrevious"
       :refine-next="refineNext"
       :refine="refineNext"
+      :insights="state.insights"
     >
       <ol :class="suit('list')">
         <li
@@ -59,13 +60,13 @@
 
 <script>
 import { createWidgetMixin } from '../mixins/widget';
-import { connectInfiniteHits } from 'instantsearch.js/es/connectors';
+import { connectInfiniteHitsWithInsights } from 'instantsearch.js/es/connectors';
 import { createSuitMixin } from '../mixins/suit';
 
 export default {
   name: 'AisInfiniteHits',
   mixins: [
-    createWidgetMixin({ connector: connectInfiniteHits }),
+    createWidgetMixin({ connector: connectInfiniteHitsWithInsights }),
     createSuitMixin({ name: 'InfiniteHits' }),
   ],
   props: {

src/components/__tests__/InfiniteHits.js

@@ -221,3 +221,31 @@ it('expect to call showMore on click', () => {
 
   expect(showMore).toHaveBeenCalled();
 });
+
+it('exposes insights prop to the default slot', () => {
+  const insights = jest.fn();
+
+  __setState({
+    ...defaultState,
+    insights,
+  });
+
+  const wrapper = mount(InfiniteHits, {
+    scopedSlots: {
+      default: `
+        <ul slot-scope="{ items, insights }">
+          <li v-for="(item, itemIndex) in items" >
+            <button :id="'add-to-cart-' + item.objectID" @click="insights('clickedObjectIDsAfterSearch', {eventName: 'Add to cart', objectIDs: [item.objectID]})">
+              Add to cart
+            </button>
+          </li>
+        </ul>
+      `,
+    },
+  });
+  wrapper.find('#add-to-cart-00002').trigger('click');
+  expect(insights).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+    eventName: 'Add to cart',
+    objectIDs: ['00002'],
+  });
+});

stories/InfiniteHits.stories.js

@@ -1,7 +1,8 @@
 import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { simple } from 'instantsearch.js/es/lib/stateMappings';
 import { previewWrapper } from './utils';
 import { MemoryRouter } from './MemoryRouter';
-import { simple } from 'instantsearch.js/es/lib/stateMappings';
 
 storiesOf('ais-infinite-hits', module)
   .addDecorator(previewWrapper())
@@ -124,3 +125,35 @@ storiesOf('ais-infinite-hits', module)
         </div>
       </ais-infinite-hits>`,
   }));
+
+storiesOf('ais-infinite-hits', module)
+  .addDecorator(
+    previewWrapper({
+      insightsClient: (method, payload) =>
+        action(`[InsightsClient] sent ${method} with payload`)(payload),
+    }),
+  )
+  .add('with insights', () => ({
+    template: `
+    <div>
+        <ais-configure :clickAnalytics="true" />
+        <ais-infinite-hits>
+          <div slot-scope="{ items, refine, insights }">
+            <div
+              v-for="item in items"
+              :key="item.objectID"
+            >
+              custom objectID: {{item.objectID}}
+              <button @click="insights('clickedObjectIDsAfterSearch', { eventName: 'Add to cart', objectIDs: [item.objectID] })">Add to cart</button>
+            </div>
+            <button
+              :disabled="isLastPage"
+              @click="refine"
+            >
+              Load more
+            </button>
+          </div>
+        </ais-infinite-hits>
+    </div>
+    `,
+  }));