vue-instantsearch 4.3.3 → 4.4.0

package/src/components/Stats.vue

@@ -20,7 +20,12 @@ import { createSuitMixin } from '../mixins/suit';
 export default {
   name: 'AisStats',
   mixins: [
-    createWidgetMixin({ connector: connectStats }),
+    createWidgetMixin(
+      { connector: connectStats },
+      {
+        $$widgetType: 'ais.stats',
+      }
+    ),
     createSuitMixin({ name: 'Stats' }),
   ],
   computed: {

package/src/components/ToggleRefinement.vue

@@ -41,7 +41,14 @@ export default {
   name: 'AisToggleRefinement',
   mixins: [
     createSuitMixin({ name: 'ToggleRefinement' }),
-    createWidgetMixin({ connector: connectToggleRefinement }),
+    createWidgetMixin(
+      {
+        connector: connectToggleRefinement,
+      },
+      {
+        $$widgetType: 'ais.toggleRefinement',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine,
     }),

package/src/components/VoiceSearch.vue

@@ -84,7 +84,14 @@ import { createWidgetMixin } from '../mixins/widget';
 export default {
   name: 'AisVoiceSearch',
   mixins: [
-    createWidgetMixin({ connector: connectVoiceSearch }),
+    createWidgetMixin(
+      {
+        connector: connectVoiceSearch,
+      },
+      {
+        $$widgetType: 'ais.voiceSearch',
+      }
+    ),
     createSuitMixin({ name: 'VoiceSearch' }),
   ],
   props: {

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

@@ -19,49 +19,49 @@ exports[`renders correctly another page 1`] = `
         ‹
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         4
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         5
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         6
       </a>
     </li>
-    <li class="ais-Pagination-item ais-Pagination-item--selected">
+    <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
       <a class="ais-Pagination-link"
          href="#"
       >
         7
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         8
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         9
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
@@ -105,49 +105,49 @@ exports[`renders correctly first page 1`] = `
         ‹
       </span>
     </li>
-    <li class="ais-Pagination-item ais-Pagination-item--selected">
+    <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
       <a class="ais-Pagination-link"
          href="#"
       >
         1
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         2
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         3
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         4
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         5
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         6
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
@@ -193,49 +193,49 @@ exports[`renders correctly last page 1`] = `
         ‹
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         4
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         5
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         6
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         7
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         8
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         9
       </a>
     </li>
-    <li class="ais-Pagination-item ais-Pagination-item--selected">
+    <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
       <a class="ais-Pagination-link"
          href="#"
       >

package/src/mixins/__tests__/widget.test.js

@@ -333,3 +333,105 @@ describe('on child index', () => {
     expect(wrapper.vm.state).toEqual(state);
   });
 });
+
+describe('general', () => {
+  it('sets additional properties to widget', () => {
+    const instance = createFakeInstance();
+    const widget = { render: () => {} };
+    const factory = jest.fn(() => widget);
+    const connector = jest.fn(() => factory);
+    const widgetParams = {
+      attribute: 'brand',
+    };
+    const additionalProperties = { $$widgetType: 'ais.fakeWidget' };
+    const Test = createFakeComponent({
+      mixins: [createWidgetMixin({ connector }, additionalProperties)],
+      computed: {
+        widgetParams() {
+          return widgetParams;
+        },
+      },
+    });
+
+    mount(Test, {
+      provide: {
+        $_ais_instantSearchInstance: instance,
+      },
+    });
+
+    expect(connector).toHaveBeenCalled();
+    expect(factory).toHaveBeenCalledWith(widgetParams);
+    expect(instance.mainIndex.addWidgets).toHaveBeenCalledTimes(1);
+    expect(instance.mainIndex.addWidgets.mock.calls[0][0]).toEqual([
+      {
+        ...widget,
+        ...additionalProperties,
+      },
+    ]);
+  });
+
+  it('sets additional properties to widget when it recreates', async () => {
+    const instance = createFakeInstance();
+    const widget = {
+      render: () => {},
+      dispose: () => {},
+    };
+    const factory = jest.fn(() => widget);
+    const connector = jest.fn(() => factory);
+    const widgetParams = {
+      attribute: 'brand',
+    };
+    const additionalProperties = { $$widgetType: 'ais.fakeWidget' };
+
+    const Test = createFakeComponent({
+      mixins: [createWidgetMixin({ connector }, additionalProperties)],
+      data: () => ({
+        widgetParams,
+      }),
+    });
+
+    const nextWidgetParams = {
+      attribute: 'price',
+    };
+
+    const wrapper = mount(Test, {
+      provide: {
+        $_ais_instantSearchInstance: instance,
+      },
+    });
+
+    // Simulate render
+    await wrapper.setData({
+      state: { items: [] },
+    });
+
+    expect(instance.mainIndex.addWidgets).toHaveBeenCalledTimes(1);
+    expect(instance.mainIndex.addWidgets.mock.calls[0][0]).toEqual([
+      {
+        ...widget,
+        ...additionalProperties,
+      },
+    ]);
+
+    // Simulate widget params update
+    await wrapper.setData({
+      widgetParams: nextWidgetParams,
+    });
+
+    expect(wrapper.vm.state).toBe(null);
+
+    expect(instance.mainIndex.removeWidgets).toHaveBeenCalledTimes(1);
+    expect(instance.mainIndex.removeWidgets).toHaveBeenCalledWith([widget]);
+
+    expect(factory).toHaveBeenCalledTimes(2);
+    expect(factory).toHaveBeenCalledWith(nextWidgetParams);
+
+    expect(instance.mainIndex.addWidgets).toHaveBeenCalledTimes(2);
+    expect(instance.mainIndex.addWidgets.mock.calls[1][0]).toEqual([
+      {
+        ...widget,
+        ...additionalProperties,
+      },
+    ]);
+  });
+});

package/src/mixins/widget.js

@@ -1,7 +1,11 @@
+import { _objectSpread } from '../util/polyfills';
 import { isVue3 } from '../util/vue-compat';
 import { warn } from '../util/warn';
 
-export const createWidgetMixin = ({ connector } = {}) => ({
+export const createWidgetMixin = (
+  { connector } = {},
+  additionalProperties = {}
+) => ({
   inject: {
     instantSearchInstance: {
       from: '$_ais_instantSearchInstance',
@@ -27,7 +31,10 @@ export const createWidgetMixin = ({ connector } = {}) => ({
   created() {
     if (typeof connector === 'function') {
       this.factory = connector(this.updateState, () => {});
-      this.widget = this.factory(this.widgetParams);
+      this.widget = _objectSpread(
+        this.factory(this.widgetParams),
+        additionalProperties
+      );
       this.getParentIndex().addWidgets([this.widget]);
 
       if (
@@ -66,7 +73,10 @@ Read more on using connectors: https://alg.li/vue-custom`
       handler(nextWidgetParams) {
         this.state = null;
         this.getParentIndex().removeWidgets([this.widget]);
-        this.widget = this.factory(nextWidgetParams);
+        this.widget = _objectSpread(
+          this.factory(nextWidgetParams),
+          additionalProperties
+        );
         this.getParentIndex().addWidgets([this.widget]);
       },
       deep: true,

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

@@ -933,8 +933,9 @@ Array [
         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()).toEqual(
+        expect.any(AlgoliaSearchHelper)
+      );
       expect(instantsearch.mainIndex.getHelper()).not.toBeNull();
     });
 

package/src/util/createServerRootMixin.js

@@ -41,7 +41,7 @@ function defaultCloneComponent(componentInstance, { mixins = [] } = {}) {
 
   if (isVue3) {
     const appOptions = Object.assign({}, componentInstance.$options, options);
-    appOptions.mixins = [...mixins, ...appOptions.mixins];
+    appOptions.mixins = [...mixins, ...(appOptions.mixins || [])];
     app = createSSRApp(appOptions);
     if (componentInstance.$router) {
       app.use(componentInstance.$router);