vue-instantsearch 4.4.0 → 4.5.0

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__/SearchBox.js

@@ -147,6 +147,21 @@ test('refine on empty string on form reset', async () => {
   expect(state.refine).toHaveBeenCalledWith('');
 });
 
+test('keep local query when out of sync and input is focused', async () => {
+  const state = { ...defaultState, refine: jest.fn() };
+  __setState(state);
+
+  const wrapper = mount(SearchBox, { attachTo: document.body });
+  const input = wrapper.find('.ais-SearchBox-input');
+  input.element.focus();
+  await input.setValue('hello');
+
+  await wrapper.setData({ state: { query: 'hel' } });
+
+  expect(input.element.value).toBe('hello');
+  expect(state.refine).toHaveBeenLastCalledWith('hello');
+});
+
 test('overriding slots', () => {
   __setState({
     ...defaultState,

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__/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/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/__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/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;