vue-instantsearch 4.4.2 → 4.6.0

package/src/components/__tests__/Menu.js

@@ -325,28 +325,6 @@ describe('default render', () => {
   });
 });
 
-it('calls the Panel mixin with `canRefine`', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(Menu, {
-    propsData: defaultProps,
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      canRefine: false,
-    },
-  });
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({

package/src/components/__tests__/MenuSelect.js

@@ -201,29 +201,6 @@ describe('default render', () => {
   });
 });
 
-it('calls the Panel mixin with `canRefine`', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(MenuSelect, {
-    propsData: defaultProps,
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      canRefine: false,
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({

package/src/components/__tests__/NumericMenu.js

@@ -41,6 +41,7 @@ const moreThan500 = {
 const defaultState = {
   items: [all, lessThan10, from10to100, from100to500, moreThan500],
   hasNoResults: false,
+  canRefine: true,
   createURL: () => {},
   refine: () => {},
 };
@@ -125,7 +126,7 @@ describe('default render', () => {
   it('renders correctly without refinement', () => {
     __setState({
       ...defaultState,
-      hasNoResults: true,
+      canRefine: false,
     });
 
     const props = {
@@ -190,29 +191,6 @@ describe('default render', () => {
   });
 });
 
-it('calls the Panel mixin with `hasNoResults`', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(NumericMenu, {
-    propsData: defaultProps,
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      hasNoResults: true,
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({
@@ -281,7 +259,7 @@ describe('custom default render', () => {
   it('renders correctly without refinement', () => {
     __setState({
       ...defaultState,
-      hasNoResults: true,
+      canRefine: false,
     });
 
     const wrapper = mount({

package/src/components/__tests__/Pagination.js

@@ -143,27 +143,6 @@ it('Moves to the previous page on that button', async () => {
   );
 });
 
-it('calls the Panel mixin with `nbPages`', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(Pagination);
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      nbPages: 1,
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('implements showFirst', async () => {
   __setState({ ...defaultState });
 

package/src/components/__tests__/RangeInput.js

@@ -13,6 +13,7 @@ const defaultRange = {
 const defaultState = {
   start: [0, 1000],
   range: defaultRange,
+  canRefine: true,
   refine: () => {},
 };
 
@@ -247,40 +248,6 @@ describe('rendering', () => {
   });
 });
 
-it('calls the Panel mixin with `range`', async () => {
-  __setState({
-    ...defaultState,
-    range: {
-      min: 0,
-      max: 10,
-    },
-  });
-
-  const wrapper = mount(RangeInput, {
-    propsData: {
-      attribute: 'price',
-    },
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      range: {
-        min: 0,
-        max: 0,
-      },
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({

package/src/components/__tests__/RatingMenu.js

@@ -126,29 +126,6 @@ it('calls refine when clicked on link', async () => {
   expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith('1');
 });
 
-it('calls the Panel mixin with `hasNoResults`', async () => {
-  __setState({ hasNoResults: false });
-
-  const wrapper = mount(RatingMenu, {
-    propsData: defaultProps,
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      hasNoResults: true,
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({

package/src/components/__tests__/RefinementList.js

@@ -166,29 +166,6 @@ it('behaves correctly', async () => {
   expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith('yo');
 });
 
-it('calls the Panel mixin with `canRefine`', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(RefinementList, {
-    propsData: { attribute: 'something' },
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      canRefine: false,
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({

package/src/components/__tests__/SortBy.js

@@ -12,6 +12,7 @@ const defaultState = {
     { value: 'some_index_quality', label: 'Quality ascending' },
   ],
   hasNoResults: false,
+  canRefine: true,
   currentRefinement: 'some_index',
 };
 
@@ -106,26 +107,3 @@ it('calls `refine` when the selection changes with the `value`', async () => {
   expect(refine).toHaveBeenLastCalledWith('some_index_quality');
   expect(selectedOption.element.selected).toBe(true);
 });
-
-it('calls the Panel mixin with `hasNoResults`', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(SortBy, {
-    propsData: defaultProps,
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      hasNoResults: true,
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});

package/src/components/__tests__/StateResults.js

@@ -13,6 +13,8 @@ it('renders explanation if no slot is used', () => {
     state: {
       query: 'this is the query',
     },
+    status: 'idle',
+    error: undefined,
   });
   const wrapper = mount(StateResults);
   expect(wrapper.html()).toMatchSnapshot();
@@ -39,6 +41,8 @@ it('gives state & results to default slot', () => {
   __setState({
     state,
     results,
+    status: 'idle',
+    error: undefined,
   });
 
   mount(StateResults, {
@@ -47,6 +51,8 @@ it('gives state & results to default slot', () => {
         expect(props).toEqual(expect.objectContaining(results));
         expect(props.results).toEqual(results);
         expect(props.state).toEqual(state);
+        expect(props.status).toEqual('idle');
+        expect(props.error).toEqual(undefined);
       },
     },
   });

package/src/components/__tests__/ToggleRefinement.js

@@ -13,6 +13,7 @@ const defaultValue = {
 
 const defaultState = {
   value: defaultValue,
+  canRefine: true,
   refine: () => {},
   createURL: () => {},
 };
@@ -82,6 +83,7 @@ describe('default render', () => {
   it('renders correctly without refinement (with 0)', () => {
     __setState({
       ...defaultState,
+      canRefine: false,
       value: {
         ...defaultValue,
         count: 0,
@@ -98,6 +100,7 @@ describe('default render', () => {
   it('renders correctly without refinement (with null)', () => {
     __setState({
       ...defaultState,
+      canRefine: false,
       value: {
         ...defaultValue,
         count: null,
@@ -162,39 +165,6 @@ describe('default render', () => {
   });
 });
 
-it('calls the Panel mixin with `value.count`', async () => {
-  __setState({
-    ...defaultState,
-    value: {
-      // Otherwise setData update the default value
-      // and impact the other tests. We should not
-      // rely on a global state for the tests.
-      ...defaultValue,
-    },
-  });
-
-  const wrapper = mount(Toggle, {
-    propsData: defaultProps,
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      value: {
-        count: 0,
-      },
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({
@@ -255,6 +225,7 @@ describe('custom default render', () => {
   it('renders correctly without refinement', () => {
     __setState({
       ...defaultState,
+      canRefine: false,
       value: {
         ...defaultValue,
         count: 0,

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

@@ -731,7 +731,7 @@ exports[`default render renders correctly a sub categories selected 1`] = `
 <div class="ais-HierarchicalMenu">
   <ul class="ais-HierarchicalMenu-list ais-HierarchicalMenu-list--lvl0">
     <li class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--parent ais-HierarchicalMenu-item--selected">
-      <a class="ais-HierarchicalMenu-link">
+      <a class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected">
         <span class="ais-HierarchicalMenu-label">
           Apple
         </span>
@@ -761,7 +761,7 @@ exports[`default render renders correctly a sub categories selected 1`] = `
           </a>
         </li>
         <li class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--parent ais-HierarchicalMenu-item--selected">
-          <a class="ais-HierarchicalMenu-link">
+          <a class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected">
             <span class="ais-HierarchicalMenu-label">
               MacBook
             </span>

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

@@ -20,5 +20,11 @@ exports[`renders explanation if no slot is used 1`] = `
   "query"
 ]
   </pre>
+  <pre>
+    status: idle
+  </pre>
+  <pre>
+    error:
+  </pre>
 </div>
 `;

package/src/mixins/__mocks__/panel.js

@@ -1,7 +1,3 @@
 export const createPanelProviderMixin = jest.fn(() => ({}));
 
-export const createPanelConsumerMixin = jest.fn(({ mapStateToCanRefine }) => ({
-  methods: {
-    mapStateToCanRefine,
-  },
-}));
+export const createPanelConsumerMixin = jest.fn(() => ({}));

package/src/mixins/__mocks__/widget.js

@@ -22,6 +22,16 @@ export const createWidgetMixin = jest.fn(() => ({
     return {
       state,
       widget,
+      instantSearchInstance: {
+        status: 'idle',
+        error: undefined,
+        addListener: () => {},
+        removeListener: () => {},
+      },
+      getParentIndex: () => ({
+        getResults: () => null,
+        getHelper: () => null,
+      }),
     };
   },
 }));

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

@@ -86,18 +86,12 @@ describe('createPanelProviderMixin', () => {
 });
 
 describe('createPanelConsumerMixin', () => {
-  const mapStateToCanRefine = state => state.attributeName;
-
-  it('emits PANEL_CHANGE_EVENT on `state.attributeName` change', async () => {
+  it('emits PANEL_CHANGE_EVENT on `state.canRefine` change', async () => {
     const emitter = createFakeEmitter();
     const Test = createFakeComponent();
 
     const wrapper = mount(Test, {
-      mixins: [
-        createPanelConsumerMixin({
-          mapStateToCanRefine,
-        }),
-      ],
+      mixins: [createPanelConsumerMixin()],
       provide: {
         [PANEL_EMITTER_NAMESPACE]: emitter,
       },
@@ -105,7 +99,7 @@ describe('createPanelConsumerMixin', () => {
 
     await wrapper.setData({
       state: {
-        attributeName: false,
+        canRefine: false,
       },
     });
 
@@ -113,7 +107,7 @@ describe('createPanelConsumerMixin', () => {
     expect(emitter.emit).toHaveBeenLastCalledWith(PANEL_CHANGE_EVENT, false);
 
     if (isVue3) {
-      await wrapper.setData({ state: { attributeName: true } });
+      await wrapper.setData({ state: { canRefine: true } });
     } else {
       // ↓ this should be replaceable with `wrapper.setData()` but it didn't
       // trigger the watcher in `createPanelConsumerMixin`.
@@ -121,7 +115,7 @@ describe('createPanelConsumerMixin', () => {
       // https://github.com/vuejs/vue-test-utils/issues/1756
       // https://github.com/vuejs/vue-test-utils/issues/149
       wrapper.vm.$set(wrapper.vm, 'state', {
-        attributeName: true,
+        canRefine: true,
       });
       await nextTick();
     }
@@ -135,11 +129,7 @@ describe('createPanelConsumerMixin', () => {
     const Test = createFakeComponent();
 
     const wrapper = mount(Test, {
-      mixins: [
-        createPanelConsumerMixin({
-          mapStateToCanRefine,
-        }),
-      ],
+      mixins: [createPanelConsumerMixin()],
       provide: {
         [PANEL_EMITTER_NAMESPACE]: emitter,
       },
@@ -147,7 +137,7 @@ describe('createPanelConsumerMixin', () => {
 
     await wrapper.setData({
       state: {
-        attributeName: false,
+        canRefine: false,
       },
     });
 
@@ -156,7 +146,7 @@ describe('createPanelConsumerMixin', () => {
 
     await wrapper.setData({
       state: {
-        attributeName: false,
+        canRefine: false,
       },
     });
 
@@ -168,11 +158,7 @@ describe('createPanelConsumerMixin', () => {
     const Test = createFakeComponent();
 
     const wrapper = mount(Test, {
-      mixins: [
-        createPanelConsumerMixin({
-          mapStateToCanRefine,
-        }),
-      ],
+      mixins: [createPanelConsumerMixin()],
       provide: {
         [PANEL_EMITTER_NAMESPACE]: emitter,
       },
@@ -180,7 +166,7 @@ describe('createPanelConsumerMixin', () => {
 
     await wrapper.setData({
       state: {
-        attributeName: true,
+        canRefine: true,
       },
     });
 
@@ -193,11 +179,7 @@ describe('createPanelConsumerMixin', () => {
     const Test = createFakeComponent();
 
     const wrapper = mount(Test, {
-      mixins: [
-        createPanelConsumerMixin({
-          mapStateToCanRefine,
-        }),
-      ],
+      mixins: [createPanelConsumerMixin()],
       provide: {
         [PANEL_EMITTER_NAMESPACE]: emitter,
       },
@@ -205,7 +187,7 @@ describe('createPanelConsumerMixin', () => {
 
     await wrapper.setData({
       state: {
-        attributeName: true,
+        canRefine: true,
       },
     });
 
@@ -227,11 +209,7 @@ describe('createPanelConsumerMixin', () => {
     const Test = createFakeComponent();
 
     const wrapper = mount(Test, {
-      mixins: [
-        createPanelConsumerMixin({
-          mapStateToCanRefine,
-        }),
-      ],
+      mixins: [createPanelConsumerMixin()],
       provide: {
         [PANEL_EMITTER_NAMESPACE]: emitter,
       },
@@ -239,7 +217,7 @@ describe('createPanelConsumerMixin', () => {
 
     await wrapper.setData({
       state: {
-        attributeName: true,
+        canRefine: true,
       },
     });
 
@@ -247,9 +225,9 @@ describe('createPanelConsumerMixin', () => {
     expect(emitter.emit).toHaveBeenLastCalledWith(PANEL_CHANGE_EVENT, true);
 
     if (isVue3) {
-      await wrapper.setData({ state: { attributeName: false } });
+      await wrapper.setData({ state: { canRefine: false } });
     } else {
-      wrapper.vm.$set(wrapper.vm, 'state', { attributeName: false });
+      wrapper.vm.$set(wrapper.vm, 'state', { canRefine: false });
       await nextTick();
     }
 
@@ -257,9 +235,9 @@ describe('createPanelConsumerMixin', () => {
     expect(emitter.emit).toHaveBeenLastCalledWith(PANEL_CHANGE_EVENT, false);
 
     if (isVue3) {
-      await wrapper.setData({ state: { attributeName: false } });
+      await wrapper.setData({ state: { canRefine: false } });
     } else {
-      wrapper.vm.$set(wrapper.vm, 'state', { attributeName: false });
+      wrapper.vm.$set(wrapper.vm, 'state', { canRefine: false });
       await nextTick();
     }
 

package/src/mixins/panel.js

@@ -39,7 +39,9 @@ export const createPanelProviderMixin = () => ({
   },
 });
 
-export const createPanelConsumerMixin = ({ mapStateToCanRefine }) => ({
+export const createPanelConsumerMixin = ({
+  mapStateToCanRefine = state => Boolean(state.canRefine),
+} = {}) => ({
   inject: {
     emitter: {
       from: PANEL_EMITTER_NAMESPACE,

package/src/util/createInstantSearchComponent.js

@@ -30,6 +30,13 @@ export const createInstantSearchComponent = component =>
               'Please open a new issue: https://github.com/algolia/vue-instantsearch/issues/new?template=feature.md'
           );
         },
+        onStateChange() {
+          throw new Error(
+            'onStateChange configuration can not be changed dynamically at this point.' +
+              '\n\n' +
+              'Please open a new issue: https://github.com/algolia/vue-instantsearch/issues/new?template=feature.md'
+          );
+        },
         searchFunction(searchFunction) {
           // private InstantSearch.js API:
           this.instantSearchInstance._searchFunction = searchFunction;

package/src/util/createServerRootMixin.js

@@ -105,7 +105,16 @@ function augmentInstantSearch(instantSearchOptions, cloneComponent) {
           mixins: [
             {
               beforeCreate() {
-                if (component.$nuxt) {
+                const descriptor = Object.getOwnPropertyDescriptor(
+                  component,
+                  '$nuxt'
+                );
+
+                const isWritable = descriptor
+                  ? descriptor.writable || descriptor.set
+                  : false;
+
+                if (component.$nuxt && isWritable) {
                   // In case of Nuxt (3), we ensure the context is shared between
                   // the real and cloned component
                   this.$nuxt = component.$nuxt;