From 918c92d0d73edb9790e98cfeed3b9ed58b948df7 Mon Sep 17 00:00:00 2001
From: Eunjae Lee <eunjae.lee@algolia.com>
Date: Fri, 19 Jun 2020 11:46:06 +0200
Subject: [PATCH] feat(InfiniteHits): support cache (#804)

* feat(InfiniteHits): support cache

* test: add test accepting a cache prop
---
 src/components/InfiniteHits.vue          |  5 +++++
 src/components/__tests__/InfiniteHits.js | 19 +++++++++++++++++++
 stories/InfiniteHits.stories.js          | 14 ++++++++++++++
 3 files changed, 38 insertions(+)

diff --git a/src/components/InfiniteHits.vue b/src/components/InfiniteHits.vue
index d632a1666..bd4d03789 100644
--- a/src/components/InfiniteHits.vue
+++ b/src/components/InfiniteHits.vue
@@ -85,6 +85,10 @@ export default {
         return items;
       },
     },
+    cache: {
+      type: Object,
+      default: undefined,
+    },
   },
   computed: {
     widgetParams() {
@@ -92,6 +96,7 @@ export default {
         showPrevious: this.showPrevious,
         escapeHTML: this.escapeHTML,
         transformItems: this.transformItems,
+        cache: this.cache,
       };
     },
     items() {
diff --git a/src/components/__tests__/InfiniteHits.js b/src/components/__tests__/InfiniteHits.js
index 5980c0ddf..dcf03a16f 100644
--- a/src/components/__tests__/InfiniteHits.js
+++ b/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,
diff --git a/stories/InfiniteHits.stories.js b/stories/InfiniteHits.stories.js
index 646f60885..0415a5089 100644
--- a/stories/InfiniteHits.stories.js
+++ b/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(),
+    }),
   }));