diff --git a/package.json b/package.json index ac3dae4ca..09631c27a 100644 --- a/package.json +++ b/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/src/util/__tests__/createServerRootMixin.test.js b/src/util/__tests__/createServerRootMixin.test.js index 0adfad524..26d30326a 100644 --- a/src/util/__tests__/createServerRootMixin.test.js +++ b/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/src/util/createServerRootMixin.js b/src/util/createServerRootMixin.js index 3e268cc05..9042bb0e2 100644 --- a/src/util/createServerRootMixin.js +++ b/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 diff --git a/yarn.lock b/yarn.lock index d2eca1609..be1a3f8f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15612,6 +15612,11 @@ vue-property-decorator@^8.0.0: dependencies: vue-class-component "^7.0.1" +vue-router@3.4.3: + version "3.4.3" + resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.3.tgz#fa93768616ee338aa174f160ac965167fa572ffa" + integrity sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A== + vue-server-renderer@^2.6.11: version "2.6.11" resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.11.tgz#be8c9abc6aacc309828a755c021a05fc474b4bc3"