vue-instantsearch 3.6.0 → 3.9.0

package/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

package/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

package/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();

package/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);
+});

package/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);
+});

package/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

package/src/mixins/widget.js

@@ -30,7 +30,7 @@ export const createWidgetMixin = ({ connector } = {}) => ({
       this.getParentIndex().addWidgets([this.widget]);
 
       if (
-        this.instantSearchInstance.__initialSearchResults &&
+        this.instantSearchInstance._initialResults &&
         !this.instantSearchInstance.started
       ) {
         if (typeof this.instantSearchInstance.__forceRender !== 'function') {

package/src/util/__tests__/createServerRootMixin.test.js

@@ -10,11 +10,7 @@ import SearchBox from '../../components/SearchBox.vue';
 import { createWidgetMixin } from '../../mixins/widget';
 import { createFakeClient } from '../testutils/client';
 import { createSerializedState } from '../testutils/helper';
-import {
-  SearchResults,
-  SearchParameters,
-  AlgoliaSearchHelper,
-} from 'algoliasearch-helper';
+import { SearchParameters, SearchResults } from 'algoliasearch-helper';
 
 jest.unmock('instantsearch.js/es');
 
@@ -54,9 +50,11 @@ describe('createServerRootMixin', () => {
               }),
             ],
           })
-      ).toThrowErrorMatchingInlineSnapshot(
-        `"createServerRootMixin requires \`searchClient\` and \`indexName\` in the first argument"`
-      );
+      ).toThrowErrorMatchingInlineSnapshot(`
+"The \`searchClient\` option is required.
+
+See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/"
+`);
     });
 
     it('requires indexName', () => {
@@ -70,9 +68,11 @@ describe('createServerRootMixin', () => {
               }),
             ],
           })
-      ).toThrowErrorMatchingInlineSnapshot(
-        `"createServerRootMixin requires \`searchClient\` and \`indexName\` in the first argument"`
-      );
+      ).toThrowErrorMatchingInlineSnapshot(`
+"The \`indexName\` option is required.
+
+See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/"
+`);
     });
 
     it('creates an instantsearch instance on "data"', () => {
@@ -246,6 +246,7 @@ Array [
             h(SearchBox),
           ]);
         },
+
         serverPrefetch() {
           return this.instantsearch.findResultsState(this);
         },
@@ -388,7 +389,7 @@ Array [
                   this.instantsearch.mainIndex.getWidgets().map(w => w.$$type)
                 ).toEqual(['ais.configure']);
 
-                expect(res.hello._state.hitsPerPage).toBe(100);
+                expect(res.hello.state.hitsPerPage).toBe(100);
               })
               // jest throws an error we need to catch, since stuck in the flow
               .catch(e => {
@@ -423,7 +424,7 @@ Array [
 
       expect.assertions(2);
 
-      const App = Vue.component('App', {
+      const App = {
         mixins: [
           forceIsServerMixin,
           createServerRootMixin({
@@ -431,11 +432,8 @@ Array [
             indexName: 'hello',
           }),
         ],
-        render(h) {
-          return h(InstantSearchSsr, {}, [
-            this.$scopedSlots.default({ test: true }),
-          ]);
-        },
+        render: h =>
+          h(InstantSearchSsr, {}, [this.$scopedSlots.default({ test: true })]),
         serverPrefetch() {
           return (
             this.instantsearch
@@ -453,26 +451,23 @@ Array [
               })
           );
         },
-      });
+      };
 
       const wrapper = new Vue({
         mixins: [forceIsServerMixin],
-        render(h) {
-          return h(App, {
+        render: h =>
+          h(App, {
             scopedSlots: {
               default({ test }) {
                 if (test) {
                   return h(Configure, {
-                    attrs: {
-                      hitsPerPage: 100,
-                    },
+                    hitsPerPage: 100,
                   });
                 }
                 return null;
               },
             },
-          });
-        },
+          }),
       });
 
       await renderToString(wrapper);
@@ -519,63 +514,76 @@ Array [
 
       await renderToString(wrapper);
     });
-  });
-
-  describe('hydrate', () => {
-    it('sets __initialSearchResults', () => {
-      const serialized = createSerializedState();
 
+    it('searches only once', async () => {
+      const searchClient = createFakeClient();
       const app = {
         mixins: [
+          forceIsServerMixin,
           createServerRootMixin({
-            searchClient: createFakeClient(),
+            searchClient,
             indexName: 'hello',
           }),
         ],
-        render(h) {
-          return h(InstantSearchSsr, {}, [
+        render: h =>
+          /**
+           * This code triggers this warning in Vue 3:
+           * > Non-function value encountered for default slot. Prefer function slots for better performance.
+           *
+           * To fix it, replace the third argument
+           * > [h(...), h(...)]
+           * with
+           * > { default: () => [h(...), h(...)] }
+           *
+           * but it's not important (and not compatible in vue2), we're leaving it as-is.
+           */
+          h(InstantSearchSsr, {}, [
             h(Configure, {
               attrs: {
                 hitsPerPage: 100,
               },
             }),
             h(SearchBox),
-          ]);
-        },
-        // in test, beforeCreated doesn't have $data yet, but IRL it does
-        created() {
-          this.instantsearch.hydrate({
-            __identifier: 'stringified',
-            hello: serialized,
-          });
+          ]),
+        serverPrefetch() {
+          return this.instantsearch.findResultsState(this);
         },
       };
 
-      const {
-        vm: { instantsearch },
-      } = mount(app);
+      const wrapper = new Vue({
+        mixins: [forceIsServerMixin],
+        render: h => h(app),
+      });
 
-      expect(instantsearch.__initialSearchResults).toEqual(
-        expect.objectContaining({ hello: expect.any(SearchResults) })
-      );
+      await renderToString(wrapper);
 
-      expect(instantsearch.__initialSearchResults.hello).toEqual(
-        expect.objectContaining(serialized)
-      );
+      expect(searchClient.search).toHaveBeenCalledTimes(1);
+      expect(searchClient.search.mock.calls[0][0]).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "indexName": "hello",
+    "params": Object {
+      "facets": Array [],
+      "hitsPerPage": 100,
+      "query": "",
+      "tagFilters": "",
+    },
+  },
+]
+`);
     });
+  });
 
-    it('accepts non-stringified results', () => {
+  describe('hydrate', () => {
+    it('sets _initialResults', () => {
       const serialized = createSerializedState();
-      const nonSerialized = new SearchResults(
-        new SearchParameters(serialized._state),
-        serialized._rawResults
-      );
 
-      const app = {
+      let instantsearch;
+      const app = new Vue({
         mixins: [
           createServerRootMixin({
             searchClient: createFakeClient(),
-            indexName: 'movies',
+            indexName: 'hello',
           }),
         ],
         render(h) {
@@ -590,27 +598,35 @@ Array [
         },
         // in test, beforeCreated doesn't have $data yet, but IRL it does
         created() {
+          instantsearch = this.instantsearch;
           this.instantsearch.hydrate({
-            movies: nonSerialized,
+            hello: serialized,
           });
         },
-      };
+      });
 
-      const {
-        vm: { instantsearch },
-      } = mount(app);
+      mount(app);
 
-      expect(instantsearch.__initialSearchResults).toEqual(
-        expect.objectContaining({ movies: expect.any(SearchResults) })
+      expect(instantsearch._initialResults).toEqual(
+        expect.objectContaining({
+          hello: {
+            state: expect.any(Object),
+            results: expect.any(Object),
+          },
+        })
       );
 
-      expect(instantsearch.__initialSearchResults.movies).toBe(nonSerialized);
+      expect(instantsearch._initialResults.hello).toEqual(
+        expect.objectContaining(serialized)
+      );
     });
 
     it('inits the main index', () => {
       const serialized = createSerializedState();
 
-      const app = {
+      let instantsearch;
+
+      const app = new Vue({
         mixins: [
           createServerRootMixin({
             searchClient: createFakeClient(),
@@ -627,28 +643,30 @@ Array [
             h(SearchBox),
           ]);
         },
-      };
+        created() {
+          instantsearch = this.instantsearch;
+        },
+      });
 
-      const {
-        vm: { instantsearch },
-      } = mount(app);
+      mount(app);
 
       expect(instantsearch.mainIndex.getHelper()).toBe(null);
 
       instantsearch.hydrate({
-        __identifier: 'stringified',
         hello: serialized,
       });
 
-      // TODO: assert that this is expect.any(AlgoliaSearchHelper), but test fails
-      // even though it's an object with all the right properties (including constructor)
-      expect(instantsearch.mainIndex.getHelper()).not.toBeNull();
+      expect(instantsearch.mainIndex.getHelper().constructor.name).toBe(
+        'AlgoliaSearchHelper'
+      );
     });
 
     it('sets helper & mainHelper', () => {
       const serialized = createSerializedState();
 
-      const app = {
+      let instantsearch;
+
+      const app = new Vue({
         mixins: [
           createServerRootMixin({
             searchClient: createFakeClient(),
@@ -665,22 +683,96 @@ Array [
             h(SearchBox),
           ]);
         },
-      };
+        created() {
+          instantsearch = this.instantsearch;
+        },
+      });
 
-      const {
-        vm: { instantsearch },
-      } = mount(app);
+      mount(app);
 
       expect(instantsearch.helper).toBe(null);
       expect(instantsearch.mainHelper).toBe(null);
 
       instantsearch.hydrate({
-        __identifier: 'stringified',
         hello: serialized,
       });
 
-      expect(instantsearch.helper).toEqual(expect.any(AlgoliaSearchHelper));
-      expect(instantsearch.mainHelper).toEqual(expect.any(AlgoliaSearchHelper));
+      expect(instantsearch.helper.constructor.name).toBe('AlgoliaSearchHelper');
+      expect(instantsearch.mainHelper.constructor.name).toBe(
+        'AlgoliaSearchHelper'
+      );
+    });
+
+    it('works when component is at root (and therefore has no $vnode)', async () => {
+      const searchClient = createFakeClient();
+      let mainIndex;
+
+      const app = {
+        render: h =>
+          /**
+           * This code triggers this warning in Vue 3:
+           * > Non-function value encountered for default slot. Prefer function slots for better performance.
+           *
+           * To fix it, replace the third argument
+           * > [h(...), h(...)]
+           * with
+           * > { default: () => [h(...), h(...)] }
+           *
+           * but it's not important (and not compatible in vue2), we're leaving it as-is.
+           */
+          h(InstantSearchSsr, {}, [
+            h(Configure, {
+              attrs: {
+                hitsPerPage: 100,
+              },
+            }),
+            h(SearchBox),
+          ]),
+      };
+
+      const wrapper = new Vue({
+        mixins: [
+          forceIsServerMixin,
+          createServerRootMixin({
+            searchClient,
+            indexName: 'hello',
+          }),
+        ],
+        serverPrefetch() {
+          return this.instantsearch.findResultsState(this);
+        },
+        created() {
+          mainIndex = this.instantsearch.mainIndex;
+        },
+        render: h => h(app),
+      });
+
+      await renderToString(wrapper);
+
+      expect(mainIndex.getWidgetState()).toMatchInlineSnapshot(`
+Object {
+  "hello": Object {
+    "configure": Object {
+      "hitsPerPage": 100,
+    },
+  },
+}
+`);
+
+      expect(searchClient.search).toHaveBeenCalledTimes(1);
+      expect(searchClient.search.mock.calls[0][0]).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "indexName": "hello",
+    "params": Object {
+      "facets": Array [],
+      "hitsPerPage": 100,
+      "query": "",
+      "tagFilters": "",
+    },
+  },
+]
+`);
     });
   });
 
@@ -727,6 +819,7 @@ Array [
               results: expect.anything(),
             }),
           ]),
+          parent: expect.anything(),
           state: expect.anything(),
           instantSearchInstance: expect.anything(),
         },
@@ -735,6 +828,7 @@ Object {
   "createURL": [Function],
   "helper": Anything,
   "instantSearchInstance": Anything,
+  "parent": Anything,
   "results": Anything,
   "scopedResults": ArrayContaining [
     ObjectContaining {
@@ -753,6 +847,58 @@ Object {
       );
     });
 
+    it('uses the results passed to hydrate for rendering', () => {
+      let instantSearchInstance;
+      mount({
+        mixins: [
+          createServerRootMixin({
+            searchClient: createFakeClient(),
+            indexName: 'lol',
+          }),
+        ],
+        created() {
+          instantSearchInstance = this.instantsearch;
+        },
+        render() {},
+      });
+
+      const widget = {
+        init: jest.fn(),
+        render: jest.fn(),
+      };
+
+      const resultsState = createSerializedState();
+      const state = new SearchParameters(resultsState.state);
+      const results = new SearchResults(state, resultsState.results);
+
+      instantSearchInstance.hydrate({
+        lol: resultsState,
+      });
+
+      instantSearchInstance.__forceRender(
+        widget,
+        instantSearchInstance.mainIndex
+      );
+
+      expect(widget.init).toHaveBeenCalledTimes(0);
+      expect(widget.render).toHaveBeenCalledTimes(1);
+
+      const renderArgs = widget.render.mock.calls[0][0];
+
+      expect(renderArgs).toEqual(
+        expect.objectContaining({
+          state,
+          results,
+          scopedResults: [
+            expect.objectContaining({
+              indexId: 'lol',
+              results,
+            }),
+          ],
+        })
+      );
+    });
+
     describe('createURL', () => {
       it('returns # if instantsearch has no routing', () => {
         const app = new Vue({

package/src/util/createInstantSearchComponent.js

@@ -34,6 +34,22 @@ export const createInstantSearchComponent = component =>
           // private InstantSearch.js API:
           this.instantSearchInstance._searchFunction = searchFunction;
         },
+        middlewares: {
+          immediate: true,
+          handler(next, prev) {
+            (prev || [])
+              .filter(middleware => (next || []).indexOf(middleware) === -1)
+              .forEach(middlewareToRemove => {
+                this.instantSearchInstance.unuse(middlewareToRemove);
+              });
+
+            (next || [])
+              .filter(middleware => (prev || []).indexOf(middleware) === -1)
+              .forEach(middlewareToAdd => {
+                this.instantSearchInstance.use(middlewareToAdd);
+              });
+          },
+        },
       },
       created() {
         const searchClient = this.instantSearchInstance.client;