feat(insights): expose send-event in widgets (#953)

package.json

@@ -114,11 +114,11 @@
   "bundlesize": [
     {
       "path": "./dist/vue-instantsearch.js",
-      "maxSize": "52.75 kB"
+      "maxSize": "53.00 kB"
     },
     {
       "path": "./dist/vue-instantsearch.common.js",
-      "maxSize": "16.25 kB"
+      "maxSize": "16.50 kB"
     }
   ],
   "resolutions": {

src/components/HierarchicalMenu.vue

@@ -11,6 +11,7 @@
       :refine="state.refine"
       :createURL="state.createURL"
       :toggle-show-more="state.toggleShowMore"
+      :send-event="state.sendEvent"
     >
       <hierarchical-menu-list
         :items="state.items"

src/components/Hits.vue

@@ -6,6 +6,7 @@
     <slot
       :items="items"
       :insights="state.insights"
+      :send-event="state.sendEvent"
     >
       <ol :class="suit('list')">
         <li

src/components/InfiniteHits.vue

@@ -26,6 +26,7 @@
       :refine-next="refineNext"
       :refine="refineNext"
       :insights="state.insights"
+      :send-event="state.sendEvent"
     >
       <ol :class="suit('list')">
         <li

src/components/Menu.vue

@@ -11,6 +11,7 @@
       :refine="state.refine"
       :createURL="state.createURL"
       :toggle-show-more="state.toggleShowMore"
+      :send-event="state.sendEvent"
     >
       <ul :class="suit('list')">
         <li

src/components/MenuSelect.vue

@@ -8,6 +8,7 @@
       :can-refine="state.canRefine"
       :refine="refine"
       :createURL="state.createURL"
+      :send-event="state.sendEvent"
     >
       <select
         :class="suit('select')"

src/components/NumericMenu.vue

@@ -8,6 +8,7 @@
       :can-refine="canRefine"
       :refine="state.refine"
       :createURL="state.createURL"
+      :send-event="state.sendEvent"
     >
       <ul :class="[suit('list')]">
         <li

src/components/RangeInput.vue

@@ -8,6 +8,7 @@
       :refine="refine"
       :can-refine="canRefine"
       :range="state.range"
+      :send-event="state.sendEvent"
     >
       <form
         :class="suit('form')"

src/components/RatingMenu.vue

@@ -7,6 +7,7 @@
       :items="state.items"
       :refine="state.refine"
       :createURL="state.createURL"
+      :send-event="state.sendEvent"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"

src/components/RefinementList.vue

@@ -17,6 +17,7 @@
       :createURL="state.createURL"
       :is-from-search="state.isFromSearch"
       :can-refine="state.canRefine"
+      :send-event="state.sendEvent"
     >
       <div
         :class="suit('searchBox')"

src/components/ToggleRefinement.vue

@@ -8,6 +8,7 @@
       :can-refine="canRefine"
       :refine="state.refine"
       :createURL="state.createURL"
+      :send-event="state.sendEvent"
     >
       <label :class="suit('label')">
         <input

src/components/__tests__/HierarchicalMenu.js

@@ -117,6 +117,7 @@ const defaultState = {
   isShowingMore: false,
   canToggleShowMore: true,
   toggleShowMore: () => {},
+  sendEvent: () => {},
 };
 
 const defaultProps = {
@@ -488,6 +489,28 @@ it('calls the Panel mixin with `items.length`', () => {
   expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
 
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(HierarchicalMenu, {
+    propsData: defaultProps,
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});
+
 describe('custom default render', () => {
   const defaultScopedSlot = `
     <div

src/components/__tests__/Hits.js

@@ -60,7 +60,7 @@ it('exposes insights prop to the default slot', () => {
       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>
@@ -100,3 +100,24 @@ it('exposes insights prop to the item slot', () => {
     objectIDs: ['two'],
   });
 });
+
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(Hits, {
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});

src/components/__tests__/InfiniteHits.js

@@ -294,3 +294,24 @@ it('exposes insights prop to the item slot', () => {
     objectIDs: ['00002'],
   });
 });
+
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(InfiniteHits, {
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});

src/components/__tests__/Menu.js

@@ -337,6 +337,28 @@ it('calls the Panel mixin with `canRefine`', () => {
   expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
 
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(Menu, {
+    propsData: defaultProps,
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});
+
 describe('custom default render', () => {
   const defaultScopedSlot = `
     <div

src/components/__tests__/MenuSelect.js

@@ -224,6 +224,28 @@ it('calls the Panel mixin with `canRefine`', () => {
   expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
 
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(MenuSelect, {
+    propsData: defaultProps,
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});
+
 describe('custom item slot', () => {
   // can not be <template>
   // https://github.com/vuejs/vue-test-utils/pull/507

src/components/__tests__/NumericMenu.js

@@ -210,6 +210,28 @@ it('calls the Panel mixin with `hasNoResults`', () => {
   expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
 
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(NumericMenu, {
+    propsData: defaultProps,
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});
+
 describe('custom default render', () => {
   const defaultScopedSlot = `
     <ul

src/components/__tests__/RangeInput.js

@@ -281,6 +281,28 @@ it('calls the Panel mixin with `range`', () => {
   expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
 
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(RangeInput, {
+    propsData: defaultProps,
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});
+
 describe('refinement', () => {
   it('uses the value of the inputs when the form is submited', () => {
     const refine = jest.fn();

src/components/__tests__/RatingMenu.js

@@ -148,3 +148,26 @@ it('calls the Panel mixin with `hasNoResults`', () => {
 
   expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
+
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    createURL: () => '#',
+    items: [],
+    sendEvent,
+  });
+
+  const wrapper = mount(RatingMenu, {
+    propsData: defaultProps,
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});

src/components/__tests__/RefinementList.js

@@ -188,3 +188,25 @@ it('calls the Panel mixin with `canRefine`', () => {
 
   expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
+
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(RefinementList, {
+    propsData: { attribute: 'something' },
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});

src/components/__tests__/ToggleRefinement.js

@@ -195,6 +195,28 @@ it('calls the Panel mixin with `value.count`', () => {
   expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
 
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(Toggle, {
+    propsData: defaultProps,
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});
+
 describe('custom default render', () => {
   const defaultScopedSlot = `
     <a