feat(InfiniteHits): support cache (#804)

* feat(InfiniteHits): support cache

* test: add test accepting a cache prop

Author: Eunjae Lee

src/components/InfiniteHits.vue

@@ -85,13 +85,18 @@ export default {
         return items;
       },
     },
+    cache: {
+      type: Object,
+      default: undefined,
+    },
   },
   computed: {
     widgetParams() {
       return {
         showPrevious: this.showPrevious,
         escapeHTML: this.escapeHTML,
         transformItems: this.transformItems,
+        cache: this.cache,
       };
     },
     items() {

src/components/__tests__/InfiniteHits.js

@@ -80,6 +80,25 @@ it('accepts a showPrevious prop', () => {
   expect(wrapper.vm.widgetParams.showPrevious).toBe(true);
 });
 
+it('accepts a cache prop', () => {
+  __setState({
+    ...defaultState,
+  });
+
+  const cache = {
+    read: () => {},
+    write: () => {},
+  };
+
+  const wrapper = mount(InfiniteHits, {
+    propsData: {
+      cache,
+    },
+  });
+
+  expect(wrapper.vm.widgetParams.cache).toEqual(cache);
+});
+
 it('renders correctly', () => {
   __setState({
     ...defaultState,

stories/InfiniteHits.stories.js

@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';
+import { createInfiniteHitsSessionStorageCache } from 'instantsearch.js/es/lib/infiniteHitsCache';
 import { simple } from 'instantsearch.js/es/lib/stateMappings';
 import { previewWrapper } from './utils';
 import { MemoryRouter } from './MemoryRouter';
@@ -169,4 +170,17 @@ storiesOf('ais-infinite-hits', module)
         </ais-infinite-hits>
       </div>
     `,
+  }))
+  .add('with sessionStorage cache enabled', () => ({
+    template: `
+      <ais-infinite-hits :cache="cache">
+        <div slot="item" slot-scope="{ item, insights }">
+          custom objectID: {{item.objectID}}
+          <a href="https://google.com">Go to the detail</a>
+        </div>
+      </ais-infinite-hits>
+    `,
+    data: () => ({
+      cache: createInfiniteHitsSessionStorageCache(),
+    }),
   }));