vue-instantsearch 4.10.1 → 4.10.3

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.10.1",
+  "version": "4.10.3",
   "files": [
     "vue2",
     "vue3",
@@ -35,7 +35,7 @@
     "test:exports:vue3": "node ./test/module/vue3/is-es-module.mjs && node ./test/module/vue3/is-cjs-module.cjs"
   },
   "dependencies": {
-    "instantsearch.js": "4.56.1",
+    "instantsearch.js": "4.56.3",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -55,12 +55,12 @@
   "devDependencies": {
     "@babel/core": "7.15.5",
     "@storybook/vue": "5.3.9",
-    "@vue/compiler-sfc": "3.1.2",
-    "@vue/server-renderer": "3.1.2",
+    "@vue/compiler-sfc": "3.2.47",
+    "@vue/server-renderer": "3.2.47",
     "@vue/test-utils": "1.3.0",
     "@vue/test-utils2": "npm:@vue/test-utils@2.0.0-rc.11",
     "algoliasearch": "4.14.3",
-    "algoliasearch-helper": "3.13.0",
+    "algoliasearch-helper": "3.13.2",
     "instantsearch.css": "8.0.0",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
@@ -75,6 +75,8 @@
     "rollup-plugin-vue3": "npm:rollup-plugin-vue@6.0.0",
     "vue": "2.7.14",
     "vue-autosuggest": "1.8.1",
+    "vue-i18n": "8.24.4",
+    "vue-i18n-vue3": "npm:vue-i18n@^9.2.2",
     "vue-loader": "14.2.2",
     "vue-router": "3.4.3",
     "vue-router4": "npm:vue-router@4.0.0",
@@ -85,5 +87,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "f224d502edb8cf119213cb9cd6e557dc03180521"
+  "gitHead": "f550379829306217e021fd9c538ec4ebd0153b19"
 }

package/src/__tests__/common.test.js

@@ -10,6 +10,7 @@ import {
   createInfiniteHitsTests,
   createHitsTests,
   createRangeInputTests,
+  createInstantSearchTests,
 } from '@instantsearch/tests';
 
 import { nextTick, mountApp } from '../../test/utils';
@@ -77,8 +78,11 @@ createHierarchicalMenuTests(async ({ instantSearchOptions, widgetParams }) => {
 });
 
 createBreadcrumbTests(async ({ instantSearchOptions, widgetParams }) => {
+  // The passed `transformItems` prop is meant to apply only to the breadcrumb,
+  // not the hierarchical menu
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { transformItems, ...hierarchicalWidgetParams } = widgetParams;
+
   mountApp(
     {
       render: renderCompat((h) =>
@@ -298,3 +302,28 @@ createRangeInputTests(async ({ instantSearchOptions, widgetParams }) => {
 
   await nextTick();
 });
+
+createInstantSearchTests(({ instantSearchOptions }) => {
+  mountApp(
+    {
+      render: renderCompat((h) =>
+        h(AisInstantSearch, { props: instantSearchOptions }, [
+          h(GlobalErrorSwallower),
+        ])
+      ),
+    },
+    document.body.appendChild(document.createElement('div'))
+  );
+
+  return {
+    algoliaAgents: [
+      `instantsearch.js (${
+        require('../../../instantsearch.js/package.json').version
+      })`,
+      `Vue InstantSearch (${
+        require('../../../vue-instantsearch/package.json').version
+      })`,
+      `Vue (${require('../util/vue-compat').version})`,
+    ],
+  };
+});

package/src/components/Breadcrumb.vue

@@ -24,9 +24,14 @@
           >
             <slot name="rootLabel">Home</slot>
           </a>
-          <span v-else>
+          <a
+            v-else
+            :href="state.createURL(null)"
+            :class="suit('link')"
+            @click.prevent="state.refine(null)"
+          >
             <slot name="rootLabel">Home</slot>
-          </span>
+          </a>
         </li>
         <li
           v-for="(item, index) in state.items"
@@ -34,16 +39,15 @@
           :class="[suit('item'), isLastItem(index) && suit('item', 'selected')]"
         >
           <span :class="suit('separator')" aria-hidden="true">
-            <slot name="separator">></slot>
-          </span>
-          <a
+            <slot name="separator">></slot> </span
+          ><a
             v-if="!isLastItem(index)"
             :href="state.createURL(item.value)"
             :class="suit('link')"
             @click.prevent="state.refine(item.value)"
             >{{ item.label }}</a
           >
-          <span v-else>{{ item.label }}</span>
+          <template v-else>{{ item.label }}</template>
         </li>
       </ul>
     </slot>

package/src/components/__tests__/Breadcrumb.js

@@ -32,111 +32,7 @@ const defaultProps = {
   attributes: ['categories.lvl0', 'categories.lvl1'],
 };
 
-it('accepts an attribute prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(Breadcrumb, {
-    propsData: defaultProps,
-  });
-
-  expect(wrapper.vm.widgetParams.attributes).toEqual([
-    'categories.lvl0',
-    'categories.lvl1',
-  ]);
-});
-
-it('accepts a separator prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(Breadcrumb, {
-    propsData: {
-      ...defaultProps,
-      separator: ' ~ ',
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.separator).toBe(' ~ ');
-});
-
-it('accepts a rootPath prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(Breadcrumb, {
-    propsData: {
-      ...defaultProps,
-      rootPath: 'TV & Home Theater',
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.rootPath).toBe('TV & Home Theater');
-});
-
-it('accepts a transformItems prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const transformItems = () => {};
-
-  const wrapper = mount(Breadcrumb, {
-    propsData: {
-      ...defaultProps,
-      transformItems,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.transformItems).toBe(transformItems);
-});
-
 describe('default render', () => {
-  it('renders correctly', () => {
-    __setState({ ...defaultState });
-
-    const wrapper = mount(Breadcrumb, {
-      propsData: defaultProps,
-    });
-
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('renders correctly without refinement', () => {
-    __setState({
-      ...defaultState,
-      items: [],
-      canRefine: false,
-    });
-
-    const wrapper = mount(Breadcrumb, {
-      propsData: defaultProps,
-    });
-
-    const selected = wrapper.find('.ais-Breadcrumb-item--selected');
-
-    expect(selected.text()).toContain('Home');
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('renders correctly with a selected item', () => {
-    __setState({
-      ...defaultState,
-    });
-
-    const wrapper = mount(Breadcrumb, {
-      propsData: defaultProps,
-    });
-
-    const selected = wrapper.find('.ais-Breadcrumb-item--selected');
-
-    expect(selected.text()).toContain('Streaming Media Players');
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
   it('renders correctly with an URL for the href', () => {
     __setState({
       ...defaultState,

package/src/components/__tests__/__snapshots__/Breadcrumb.js.snap

@@ -65,9 +65,7 @@ exports[`custom rootLabel render renders correctly 1`] = `
       >
         >
       </span>
-      <span>
-        Streaming Media Players
-      </span>
+      Streaming Media Players
     </li>
   </ul>
 </div>
@@ -77,9 +75,9 @@ exports[`custom rootLabel render renders correctly without refinement 1`] = `
 <div class="ais-Breadcrumb ais-Breadcrumb--noRefinement">
   <ul class="ais-Breadcrumb-list">
     <li class="ais-Breadcrumb-item ais-Breadcrumb-item--selected">
-      <span>
+      <a class="ais-Breadcrumb-link">
         Home page
-      </span>
+      </a>
     </li>
   </ul>
 </div>
@@ -109,73 +107,7 @@ exports[`custom separator render renders correctly 1`] = `
       >
         ~~
       </span>
-      <span>
-        Streaming Media Players
-      </span>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`default render renders correctly 1`] = `
-<div class="ais-Breadcrumb">
-  <ul class="ais-Breadcrumb-list">
-    <li class="ais-Breadcrumb-item">
-      <a class="ais-Breadcrumb-link">
-        Home
-      </a>
-    </li>
-    <li class="ais-Breadcrumb-item">
-      <span aria-hidden="true"
-            class="ais-Breadcrumb-separator"
-      >
-        &gt;
-      </span>
-      <a class="ais-Breadcrumb-link">
-        TV &amp; Home Theater
-      </a>
-    </li>
-    <li class="ais-Breadcrumb-item ais-Breadcrumb-item--selected">
-      <span aria-hidden="true"
-            class="ais-Breadcrumb-separator"
-      >
-        &gt;
-      </span>
-      <span>
-        Streaming Media Players
-      </span>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`default render renders correctly with a selected item 1`] = `
-<div class="ais-Breadcrumb">
-  <ul class="ais-Breadcrumb-list">
-    <li class="ais-Breadcrumb-item">
-      <a class="ais-Breadcrumb-link">
-        Home
-      </a>
-    </li>
-    <li class="ais-Breadcrumb-item">
-      <span aria-hidden="true"
-            class="ais-Breadcrumb-separator"
-      >
-        &gt;
-      </span>
-      <a class="ais-Breadcrumb-link">
-        TV &amp; Home Theater
-      </a>
-    </li>
-    <li class="ais-Breadcrumb-item ais-Breadcrumb-item--selected">
-      <span aria-hidden="true"
-            class="ais-Breadcrumb-separator"
-      >
-        &gt;
-      </span>
-      <span>
-        Streaming Media Players
-      </span>
+      Streaming Media Players
     </li>
   </ul>
 </div>
@@ -209,21 +141,7 @@ exports[`default render renders correctly with an URL for the href 1`] = `
       >
         &gt;
       </span>
-      <span>
-        Streaming Media Players
-      </span>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`default render renders correctly without refinement 1`] = `
-<div class="ais-Breadcrumb ais-Breadcrumb--noRefinement">
-  <ul class="ais-Breadcrumb-list">
-    <li class="ais-Breadcrumb-item ais-Breadcrumb-item--selected">
-      <span>
-        Home
-      </span>
+      Streaming Media Players
     </li>
   </ul>
 </div>

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

@@ -21,6 +21,8 @@ import {
   SearchParameters,
   SearchResults,
 } from 'algoliasearch-helper';
+import { createI18n } from 'vue-i18n-vue3';
+import VueI18n from 'vue-i18n';
 
 jest.unmock('instantsearch.js/es');
 
@@ -489,6 +491,61 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
       await renderToString(wrapper);
     });
 
+    it('forwards i18n', async () => {
+      const searchClient = createFakeClient();
+
+      if (isVue2) {
+        Vue2.use(VueI18n);
+      }
+
+      const i18n = isVue3 ? createI18n() : new VueI18n();
+
+      // there are two renders of App, each with an assertion
+      expect.assertions(2);
+
+      const App = {
+        mixins: [
+          forceIsServerMixin,
+          createServerRootMixin({
+            searchClient,
+            indexName: 'hello',
+          }),
+        ],
+        data() {
+          expect(this.$i18n).toBe(isVue3 ? i18n.global : i18n);
+          return {};
+        },
+        render: renderCompat((h) =>
+          h(InstantSearchSsr, {}, [
+            h(Configure, {
+              attrs: {
+                hitsPerPage: 100,
+              },
+            }),
+            h(SearchBox),
+          ])
+        ),
+        serverPrefetch() {
+          return this.instantsearch.findResultsState({
+            component: this,
+            renderToString,
+          });
+        },
+      };
+
+      const wrapper = createSSRApp({
+        mixins: [forceIsServerMixin],
+        ...(isVue2 ? { i18n } : {}),
+        render: renderCompat((h) => h(App)),
+      });
+
+      if (isVue3) {
+        wrapper.use(i18n);
+      }
+
+      await renderToString(wrapper);
+    });
+
     if (isVue2) {
       it('forwards props', async () => {
         const searchClient = createFakeClient();

package/src/util/createServerRootMixin.js

@@ -26,10 +26,14 @@ function defaultCloneComponent(componentInstance, { mixins = [] } = {}) {
     if (componentInstance.$store) {
       app.use(componentInstance.$store);
     }
+    if (componentInstance.$i18n) {
+      app.use(componentInstance.$i18n);
+    }
   } else {
     // copy over global Vue APIs
     options.router = componentInstance.$router;
     options.store = componentInstance.$store;
+    options.i18n = componentInstance.$i18n;
 
     const Extended = componentInstance.$vnode
       ? componentInstance.$vnode.componentOptions.Ctor.extend(options)