vue-instantsearch 3.6.0 → 3.9.0

package/src/components/__tests__/DynamicWidgets.js

@@ -0,0 +1,419 @@
+import { createLocalVue, mount } from '@vue/test-utils';
+import DynamicWidgets from '../DynamicWidgets';
+import { __setState } from '../../mixins/widget';
+import { plugin } from '../../plugin';
+jest.mock('../../mixins/widget');
+
+const MockRefinementList = {
+  props: { attribute: { type: String } },
+  render(h) {
+    return h('div', {
+      attrs: {
+        'widget-name': 'ais-refinement-list',
+        attribute: this.attribute,
+      },
+    });
+  },
+};
+
+const MockMenu = {
+  props: { attribute: { type: String } },
+  render(h) {
+    return h('div', {
+      attrs: { 'widget-name': 'ais-menu', attribute: this.attribute },
+    });
+  },
+};
+
+const MockHierarchicalMenu = {
+  props: { attributes: { type: Array } },
+  render(h) {
+    return h('div', {
+      attrs: {
+        'widget-name': 'ais-hierarchical-menu',
+        attributes: this.attributes,
+      },
+    });
+  },
+};
+
+it('renders all children without state', () => {
+  const localVue = createLocalVue();
+
+  localVue.use(plugin);
+
+  __setState(null);
+
+  const wrapper = mount(DynamicWidgets, {
+    localVue,
+    propsData: {
+      transformItems: items => items,
+    },
+    slots: {
+      default: `
+      <ais-refinement-list attribute="test1"/>
+      <ais-menu attribute="test2"/>
+      <ais-panel>
+        <ais-hierarchical-menu :attributes="['test3', 'test4']" />
+      </ais-panel>
+      `,
+    },
+    stubs: {
+      'ais-refinement-list': MockRefinementList,
+      'ais-menu': MockMenu,
+      'ais-hierarchical-menu': MockHierarchicalMenu,
+    },
+  });
+
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div hidden="hidden"
+     class="ais-DynamicWidgets"
+>
+  <div class="ais-DynamicWidgets-widget">
+    <div widget-name="ais-refinement-list"
+         attribute="test1"
+    >
+    </div>
+  </div>
+  <div class="ais-DynamicWidgets-widget">
+    <div widget-name="ais-menu"
+         attribute="test2"
+    >
+    </div>
+  </div>
+  <div class="ais-DynamicWidgets-widget">
+    <div class="ais-Panel">
+      <div class="ais-Panel-body">
+        <div widget-name="ais-hierarchical-menu"
+             attributes="test3,test4"
+        >
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+`);
+});
+
+it('renders nothing without children', () => {
+  __setState({
+    attributesToRender: ['something-that-does-not-show'],
+  });
+
+  const wrapper = mount(DynamicWidgets, {
+    propsData: {
+      transformItems: items => items,
+    },
+  });
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-DynamicWidgets">
+</div>
+
+`);
+});
+
+it('renders nothing with empty attributesToRender', () => {
+  const localVue = createLocalVue();
+
+  localVue.use(plugin);
+
+  __setState({
+    attributesToRender: [],
+  });
+
+  const wrapper = mount(DynamicWidgets, {
+    localVue,
+    propsData: {
+      transformItems: items => items,
+    },
+    slots: {
+      default: `<ais-refinement-list attribute="test1"/>`,
+    },
+    stubs: {
+      'ais-refinement-list': MockRefinementList,
+    },
+  });
+
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-DynamicWidgets">
+</div>
+
+`);
+});
+
+it('renders attributesToRender (menu)', () => {
+  const localVue = createLocalVue();
+
+  localVue.use(plugin);
+
+  __setState({
+    attributesToRender: ['test1'],
+  });
+
+  const wrapper = mount(DynamicWidgets, {
+    localVue,
+    propsData: {
+      transformItems: items => items,
+    },
+    slots: {
+      default: `
+        <ais-menu attribute="test1" />
+        <ais-refinement-list attribute="test2" />
+      `,
+    },
+    stubs: {
+      'ais-refinement-list': MockRefinementList,
+      'ais-menu': MockMenu,
+    },
+  });
+
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-DynamicWidgets">
+  <div class="ais-DynamicWidgets-widget">
+    <div widget-name="ais-menu"
+         attribute="test1"
+    >
+    </div>
+  </div>
+</div>
+
+`);
+});
+
+it('renders attributesToRender (refinement list)', () => {
+  const localVue = createLocalVue();
+
+  localVue.use(plugin);
+
+  __setState({
+    attributesToRender: ['test2'],
+  });
+
+  const wrapper = mount(DynamicWidgets, {
+    localVue,
+    propsData: {
+      transformItems: items => items,
+    },
+    slots: {
+      default: `
+        <ais-menu attribute="test1" />
+        <ais-refinement-list attribute="test2" />
+      `,
+    },
+    stubs: {
+      'ais-refinement-list': MockRefinementList,
+      'ais-menu': MockMenu,
+    },
+  });
+
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-DynamicWidgets">
+  <div class="ais-DynamicWidgets-widget">
+    <div widget-name="ais-refinement-list"
+         attribute="test2"
+    >
+    </div>
+  </div>
+</div>
+
+`);
+});
+
+it('renders attributesToRender (panel)', () => {
+  const localVue = createLocalVue();
+
+  localVue.use(plugin);
+
+  __setState({
+    attributesToRender: ['test2'],
+  });
+
+  const wrapper = mount(DynamicWidgets, {
+    localVue,
+    propsData: {
+      transformItems: items => items,
+    },
+    slots: {
+      default: `
+        <ais-menu attribute="test1" />
+        <ais-panel>
+          <ais-refinement-list attribute="test2" />
+        </ais-panel>
+      `,
+    },
+    stubs: {
+      'ais-refinement-list': MockRefinementList,
+      'ais-menu': MockMenu,
+    },
+  });
+
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-DynamicWidgets">
+  <div class="ais-DynamicWidgets-widget">
+    <div class="ais-Panel">
+      <div class="ais-Panel-body">
+        <div widget-name="ais-refinement-list"
+             attribute="test2"
+        >
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+`);
+});
+
+it('renders attributesToRender (hierarchical menu)', () => {
+  const localVue = createLocalVue();
+
+  localVue.use(plugin);
+
+  __setState({
+    attributesToRender: ['test1'],
+  });
+
+  const wrapper = mount(DynamicWidgets, {
+    localVue,
+    propsData: {
+      transformItems: items => items,
+    },
+    slots: {
+      default: `
+        <ais-hierarchical-menu :attributes="['test1','test2']" />
+        <ais-menu attribute="test3" />
+        <ais-panel>
+          <ais-refinement-list attribute="test4" />
+        </ais-panel>
+      `,
+    },
+    stubs: {
+      'ais-refinement-list': MockRefinementList,
+      'ais-menu': MockMenu,
+      'ais-hierarchical-menu': MockHierarchicalMenu,
+    },
+  });
+
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-DynamicWidgets">
+  <div class="ais-DynamicWidgets-widget">
+    <div widget-name="ais-hierarchical-menu"
+         attributes="test1,test2"
+    >
+    </div>
+  </div>
+</div>
+
+`);
+});
+
+it('updates DOM when attributesToRender changes', () => {
+  const localVue = createLocalVue();
+
+  localVue.use(plugin);
+
+  let attributesToRender = ['test1'];
+
+  __setState({
+    get attributesToRender() {
+      return attributesToRender;
+    },
+  });
+
+  const wrapper = mount(DynamicWidgets, {
+    localVue,
+    propsData: {
+      transformItems: items => items,
+    },
+    slots: {
+      default: `
+        <ais-hierarchical-menu :attributes="['test1','test2']" />
+        <ais-menu attribute="test3" />
+        <ais-panel>
+          <ais-refinement-list attribute="test4" />
+        </ais-panel>
+      `,
+    },
+    stubs: {
+      'ais-refinement-list': MockRefinementList,
+      'ais-menu': MockMenu,
+      'ais-hierarchical-menu': MockHierarchicalMenu,
+    },
+  });
+
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-DynamicWidgets">
+  <div class="ais-DynamicWidgets-widget">
+    <div widget-name="ais-hierarchical-menu"
+         attributes="test1,test2"
+    >
+    </div>
+  </div>
+</div>
+
+`);
+
+  attributesToRender = ['test3'];
+
+  wrapper.vm.$forceUpdate();
+
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-DynamicWidgets">
+  <div class="ais-DynamicWidgets-widget">
+    <div widget-name="ais-menu"
+         attribute="test3"
+    >
+    </div>
+  </div>
+</div>
+
+`);
+
+  attributesToRender = ['test1', 'test4'];
+
+  wrapper.vm.$forceUpdate();
+
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-DynamicWidgets">
+  <div class="ais-DynamicWidgets-widget">
+    <div widget-name="ais-hierarchical-menu"
+         attributes="test1,test2"
+    >
+    </div>
+  </div>
+  <div class="ais-DynamicWidgets-widget">
+    <div class="ais-Panel">
+      <div class="ais-Panel-body">
+        <div widget-name="ais-refinement-list"
+             attribute="test4"
+        >
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+`);
+
+  attributesToRender = [];
+
+  wrapper.vm.$forceUpdate();
+
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-DynamicWidgets">
+</div>
+
+`);
+});

package/src/components/__tests__/HierarchicalMenu.js

@@ -117,6 +117,7 @@ const defaultState = {
   isShowingMore: false,
   canToggleShowMore: true,
   toggleShowMore: () => {},
+  sendEvent: () => {},
 };
 
 const defaultProps = {
@@ -488,6 +489,28 @@ it('calls the Panel mixin with `items.length`', () => {
   expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
 
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(HierarchicalMenu, {
+    propsData: defaultProps,
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});
+
 describe('custom default render', () => {
   const defaultScopedSlot = `
     <div

package/src/components/__tests__/Hits.js

@@ -60,7 +60,7 @@ it('exposes insights prop to the default slot', () => {
       default: `
         <ul slot-scope="{ items, insights }">
           <li v-for="(item, itemIndex) in items" >
-          
+
             <button :id="'add-to-cart-' + item.objectID" @click="insights('clickedObjectIDsAfterSearch', {eventName: 'Add to cart', objectIDs: [item.objectID]})">
               Add to cart
             </button>
@@ -100,3 +100,24 @@ it('exposes insights prop to the item slot', () => {
     objectIDs: ['two'],
   });
 });
+
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(Hits, {
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});

package/src/components/__tests__/InfiniteHits.js

@@ -294,3 +294,24 @@ it('exposes insights prop to the item slot', () => {
     objectIDs: ['00002'],
   });
 });
+
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(InfiniteHits, {
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});

package/src/components/__tests__/InstantSearch-integration.js

@@ -1,10 +1,13 @@
+import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import InstantSearch from '../InstantSearch';
 import { createWidgetMixin } from '../../mixins/widget';
 import { createFakeClient } from '../../util/testutils/client';
-
+import SearchBox from '../SearchBox.vue';
 jest.unmock('instantsearch.js/es');
 
+const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
 it('child widgets get added to its parent instantsearch', () => {
   const widgetInstance = {
     render() {},
@@ -32,3 +35,154 @@ it('child widgets get added to its parent instantsearch', () => {
     widgetInstance
   );
 });
+
+describe('middlewares', () => {
+  const createFakeMiddleware = () => {
+    const middlewareSpy = {
+      onStateChange: jest.fn(),
+      subscribe: jest.fn(),
+      unsubscribe: jest.fn(),
+    };
+    const middleware = jest.fn(() => middlewareSpy);
+
+    return [middleware, middlewareSpy];
+  };
+
+  it('subscribes middlewares', async () => {
+    const [middleware, middlewareSpy] = createFakeMiddleware();
+
+    mount(InstantSearch, {
+      propsData: {
+        searchClient: createFakeClient(),
+        indexName: 'indexName',
+        middlewares: [middleware],
+      },
+    });
+    await Vue.nextTick();
+
+    expect(middlewareSpy.subscribe).toHaveBeenCalledTimes(1);
+  });
+
+  it('subscribes newly added middleware', async () => {
+    const [middleware1, middlewareSpy1] = createFakeMiddleware();
+
+    const wrapper = mount({
+      components: {
+        AisInstantSearch: InstantSearch,
+        AisSearchBox: SearchBox,
+      },
+      template: `
+        <ais-instant-search
+          :search-client="searchClient"
+          :index-name="indexName"
+          :middlewares="middlewares"
+        >
+          <ais-search-box />
+        </ais-instant-search>
+      `,
+      data() {
+        return {
+          searchClient: createFakeClient(),
+          indexName: 'indexName',
+          middlewares: [middleware1],
+        };
+      },
+    });
+
+    await wait(20);
+    expect(middlewareSpy1.subscribe).toHaveBeenCalledTimes(1);
+
+    await wrapper.find('input').setValue('a');
+    await Vue.nextTick();
+
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'a' } },
+    });
+
+    const [middleware2, middlewareSpy2] = createFakeMiddleware();
+    wrapper.setData({
+      middlewares: [middleware1, middleware2],
+    });
+    await Vue.nextTick();
+
+    expect(middlewareSpy2.subscribe).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(0);
+
+    await wrapper.find('input').setValue('b');
+    await Vue.nextTick();
+
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(2);
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'b' } },
+    });
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'b' } },
+    });
+
+    expect(middlewareSpy1.unsubscribe).toHaveBeenCalledTimes(0);
+    expect(middlewareSpy2.unsubscribe).toHaveBeenCalledTimes(0);
+  });
+
+  it('unsubscribes removed middleware', async () => {
+    const [middleware1, middlewareSpy1] = createFakeMiddleware();
+    const [middleware2, middlewareSpy2] = createFakeMiddleware();
+
+    const wrapper = mount({
+      components: {
+        AisInstantSearch: InstantSearch,
+        AisSearchBox: SearchBox,
+      },
+      template: `
+        <ais-instant-search
+          :search-client="searchClient"
+          :index-name="indexName"
+          :middlewares="middlewares"
+        >
+          <ais-search-box />
+        </ais-instant-search>
+      `,
+      data() {
+        return {
+          searchClient: createFakeClient(),
+          indexName: 'indexName',
+          middlewares: [middleware1, middleware2],
+        };
+      },
+    });
+
+    await wait(20);
+    expect(middlewareSpy1.subscribe).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy2.subscribe).toHaveBeenCalledTimes(1);
+
+    await wrapper.find('input').setValue('a');
+    await Vue.nextTick();
+
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'a' } },
+    });
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'a' } },
+    });
+
+    wrapper.setData({
+      middlewares: [middleware1],
+    });
+    await Vue.nextTick();
+
+    expect(middlewareSpy1.unsubscribe).toHaveBeenCalledTimes(0);
+    expect(middlewareSpy2.unsubscribe).toHaveBeenCalledTimes(1);
+
+    await wrapper.find('input').setValue('b');
+    await Vue.nextTick();
+
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(2);
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'b' } },
+    });
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/__tests__/Menu.js

@@ -337,6 +337,28 @@ it('calls the Panel mixin with `canRefine`', () => {
   expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
 });
 
+it('exposes send-event method for insights middleware', () => {
+  const sendEvent = jest.fn();
+  __setState({
+    ...defaultState,
+    sendEvent,
+  });
+
+  const wrapper = mount(Menu, {
+    propsData: defaultProps,
+    scopedSlots: {
+      default: `
+      <div slot-scope="{ sendEvent }">
+        <button @click="sendEvent()">Send Event</button>
+      </div>
+      `,
+    },
+  });
+
+  wrapper.find('button').trigger('click');
+  expect(sendEvent).toHaveBeenCalledTimes(1);
+});
+
 describe('custom default render', () => {
   const defaultScopedSlot = `
     <div