feat(insights): add insights support to Hits widget

src/components/Hits.vue

@@ -3,7 +3,10 @@
     v-if="state"
     :class="suit()"
   >
-    <slot :items="items">
+    <slot
+      :items="items"
+      :insights="state.insights"
+    >
       <ol :class="suit('list')">
         <li
           v-for="(item, itemIndex) in items"
@@ -14,6 +17,7 @@
             name="item"
             :item="item"
             :index="itemIndex"
+            :insights="state.insights"
           >objectID: {{ item.objectID }}, index: {{ itemIndex }}</slot>
         </li>
       </ol>
@@ -22,14 +26,14 @@
 </template>
 
 <script>
-import { connectHits } from 'instantsearch.js/es/connectors';
+import { connectHitsWithInsights } from 'instantsearch.js/es/connectors';
 import { createWidgetMixin } from '../mixins/widget';
 import { createSuitMixin } from '../mixins/suit';
 
 export default {
   name: 'AisHits',
   mixins: [
-    createWidgetMixin({ connector: connectHits }),
+    createWidgetMixin({ connector: connectHitsWithInsights }),
     createSuitMixin({ name: 'Hits' }),
   ],
   props: {

src/components/__tests__/Hits.js

@@ -47,3 +47,56 @@ it('renders correctly', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+it('exposes insights prop to the default slot', () => {
+  const insights = jest.fn();
+  __setState({
+    ...defaultState,
+    insights,
+  });
+
+  const wrapper = mount(Hits, {
+    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-two').trigger('click');
+  expect(insights).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+    eventName: 'Add to cart',
+    objectIDs: ['two'],
+  });
+});
+
+it('exposes insights prop to the item slot', () => {
+  const insights = jest.fn();
+  __setState({
+    ...defaultState,
+    insights,
+  });
+
+  const wrapper = mount(Hits, {
+    scopedSlots: {
+      item: `
+        <div slot-scope="{ item, insights }">
+          <button :id="'add-to-cart-' + item.objectID" @click="insights('clickedObjectIDsAfterSearch', {eventName: 'Add to cart', objectIDs: [item.objectID]})">
+            Add to cart
+          </button>
+        </div>
+      `,
+    },
+  });
+  wrapper.find('#add-to-cart-two').trigger('click');
+  expect(insights).toHaveBeenCalledWith('clickedObjectIDsAfterSearch', {
+    eventName: 'Add to cart',
+    objectIDs: ['two'],
+  });
+});

stories/Hits.stories.js

@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/vue';
 import { previewWrapper } from './utils';
+import { action } from '@storybook/addon-actions';
 
 storiesOf('ais-hits', module)
   .addDecorator(previewWrapper())
@@ -58,3 +59,42 @@ storiesOf('ais-hits', module)
       </ais-panel>
     `,
   }));
+
+storiesOf('ais-hits', module)
+  .addDecorator(
+    previewWrapper({
+      insightsClient: (method, payload) =>
+        action(`[InsightsClient] sent ${method} with payload`)(payload),
+    })
+  )
+  .add('with insights default slot', () => ({
+    template: `
+      <div>
+        <ais-configure :clickAnalytics="true" />
+        <ais-hits>
+          <div slot-scope="{ items, 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>
+          </div>
+        </ais-hits>
+      </div>
+    `,
+  }))
+  .add('with insights with item slot', () => ({
+    template: `
+      <div>
+        <ais-configure :clickAnalytics="true" />
+        <ais-hits>
+          <div slot="item" slot-scope="{ item, insights }">
+            custom objectID: {{item.objectID}}
+            <button @click="insights('clickedObjectIDsAfterSearch', { eventName: 'Add to cart', objectIDs: [item.objectID] })">Add to cart</button>
+          </div>
+        </ais-hits>
+      </div>
+    `,
+  }));