feat(ssr): forward router instance to findResultsState clone (algolia…

…/vue-instantsearch#863) * feat(ssr): forward router instance to findResultsState clone * test: assert that $router is accessible * chore(refactor): smaller * pin dependency
algolia · Sep 23, 2020 · a35800f · a35800f
1 parent 9b32fc7
commit a35800f
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/packages/vue-instantsearch/package.json b/packages/vue-instantsearch/package.json
@@ -103,6 +103,7 @@
     "vue-jest": "2.6.0",
     "vue-json-tree": "0.3.3",
     "vue-loader": "14.2.2",
+    "vue-router": "3.4.3",
     "vue-server-renderer": "^2.6.11",
     "vue-slider-component": "3.0.15",
     "vue-template-compiler": "2.5.18",

diff --git a/packages/vue-instantsearch/src/util/__tests__/createServerRootMixin.test.js b/packages/vue-instantsearch/src/util/__tests__/createServerRootMixin.test.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import _renderToString from 'vue-server-renderer/basic';
+import Router from 'vue-router';
 import { createServerRootMixin } from '../createServerRootMixin';
 import InstantSearchSsr from '../../components/InstantSearchSsr';
 import Configure from '../../components/Configure';
@@ -213,6 +214,54 @@ Array [
 ]
 `);
     });
+
+    it('forwards router', async () => {
+      const searchClient = createFakeClient();
+
+      const router = new Router({});
+
+      // there are two renders of App, each with an assertion
+      expect.assertions(2);
+
+      const App = Vue.component('App', {
+        mixins: [
+          forceIsServerMixin,
+          createServerRootMixin({
+            searchClient,
+            indexName: 'hello',
+          }),
+        ],
+        data() {
+          expect(this.$router).toBe(router);
+          return {};
+        },
+        render(h) {
+          return h(InstantSearchSsr, {}, [
+            h(Configure, {
+              attrs: {
+                hitsPerPage: 100,
+              },
+            }),
+            h(SearchBox),
+          ]);
+        },
+        serverPrefetch() {
+          return this.instantsearch.findResultsState(this);
+        },
+      });
+
+      Vue.use(Router);
+
+      const wrapper = new Vue({
+        mixins: [forceIsServerMixin],
+        router,
+        render(h) {
+          return h(App);
+        },
+      });
+
+      await renderToString(wrapper);
+    });
   });
 
   describe('hydrate', () => {

diff --git a/packages/vue-instantsearch/src/util/createServerRootMixin.js b/packages/vue-instantsearch/src/util/createServerRootMixin.js
@@ -73,6 +73,8 @@ function augmentInstantSearch(instantSearchOptions, searchClient, indexName) {
           fetch: undefined,
           _base: undefined,
           name: 'ais-ssr-root-component',
+          // copy over global Vue APIs
+          router: componentInstance.$router,
         };
 
         const extended = componentInstance.$vnode