feat(infinite-hits): add banners to vue flavor (#6281)

* feat(infinite-hits): add banners to vue flavor * test(infinite-hits): update snapshot serializer to handle Vue spacing * chore(infinite-hits): updated bundle size for vue2 --------- Co-authored-by: Aymeric Giraudet <aymeric.giraudet@algolia.com>
algolia · Jul 11, 2024 · 6022197 · 6022197
1 parent e0d4c68
commit 6022197
Show file tree

Hide file tree

Showing 6 changed files with 279 additions and 83 deletions.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -26,15 +26,15 @@
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",
-      "maxSize": "67.5 kB"
+      "maxSize": "67.75 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue3/umd/index.js",
       "maxSize": "68 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/cjs/index.js",
-      "maxSize": "20 kB"
+      "maxSize": "20.25 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue3/cjs/index.js",

diff --git a/packages/vue-instantsearch/src/__tests__/common-widgets.test.js b/packages/vue-instantsearch/src/__tests__/common-widgets.test.js
@@ -589,9 +589,7 @@ const testOptions = {
   createBreadcrumbWidgetTests: undefined,
   createMenuWidgetTests: undefined,
   createPaginationWidgetTests: undefined,
-  createInfiniteHitsWidgetTests: {
-    skippedTests: { 'banner option': true },
-  },
+  createInfiniteHitsWidgetTests: undefined,
   createHitsWidgetTests: {
     skippedTests: { 'banner option': true },
   },

diff --git a/packages/vue-instantsearch/src/components/InfiniteHits.vue b/packages/vue-instantsearch/src/components/InfiniteHits.vue
@@ -22,13 +22,40 @@
     <slot
       :items="state.items"
       :results="state.results"
+      :banner="state.banner"
       :is-last-page="state.isLastPage"
       :refine-previous="refinePrevious"
       :refine-next="refineNext"
       :refine="refineNext"
       :insights="state.insights"
       :send-event="state.sendEvent"
     >
+      <template
+        v-if="showBanner && state.banner && state.banner.image.urls[0].url"
+      >
+        <slot name="banner" :banner="state.banner">
+          <aside :class="suit('banner')">
+            <a
+              v-if="state.banner.link"
+              :href="state.banner.link.url"
+              :target="state.banner.link.target"
+              :class="suit('banner-link')"
+            >
+              <img
+                :src="state.banner.image.urls[0].url"
+                :alt="state.banner.image.title"
+                :class="suit('banner-image')"
+              />
+            </a>
+            <img
+              v-else
+              :src="state.banner.image.urls[0].url"
+              :alt="state.banner.image.title"
+              :class="suit('banner-image')"
+            />
+          </aside>
+        </slot>
+      </template>
       <ol :class="suit('list')">
         <li
           v-for="(item, index) in state.items"
@@ -91,6 +118,10 @@ export default {
     createSuitMixin({ name: 'InfiniteHits' }),
   ],
   props: {
+    showBanner: {
+      type: Boolean,
+      default: true,
+    },
     showPrevious: {
       type: Boolean,
       default: false,
@@ -111,6 +142,7 @@ export default {
   computed: {
     widgetParams() {
       return {
+        showBanner: this.showBanner,
         showPrevious: this.showPrevious,
         escapeHTML: this.escapeHTML,
         transformItems: this.transformItems,

diff --git a/packages/vue-instantsearch/src/components/__tests__/InfiniteHits.js b/packages/vue-instantsearch/src/components/__tests__/InfiniteHits.js
@@ -11,6 +11,7 @@ jest.mock('../../mixins/widget');
 
 const defaultState = {
   widgetParams: {
+    showBanner: true,
     showPrevious: false,
     escapeHTML: true,
     transformItems: (items) => items,
@@ -86,6 +87,79 @@ it('renders correctly with a custom item rendering', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
+it('renders correctly with banner data', () => {
+  __setState({
+    ...defaultState,
+    banner: {
+      image: {
+        urls: [{ url: 'https://via.placeholder.com/550x250' }],
+      },
+      link: {
+        url: 'https://www.algolia.com',
+      },
+    },
+  });
+
+  const wrapper = mount({
+    components: { InfiniteHits },
+    template: `<InfiniteHits />`,
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+it('renders correctly with banner data and custom banner rendering', () => {
+  __setState({
+    ...defaultState,
+    banner: {
+      image: {
+        urls: [{ url: 'https://via.placeholder.com/550x250' }],
+      },
+      link: {
+        url: 'https://www.algolia.com',
+      },
+    },
+  });
+
+  const wrapper = mount({
+    components: { InfiniteHits },
+    template: `
+      <InfiniteHits>
+        <template v-slot:banner="{ banner }">
+          <img :src="banner.image.urls[0].url" />
+        </template>
+      </InfiniteHits>
+    `,
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+it('does not render a banner when showBanner is false', () => {
+  __setState({
+    ...defaultState,
+    banner: {
+      image: {
+        urls: [{ url: 'https://via.placeholder.com/550x250' }],
+      },
+      link: {
+        url: 'https://www.algolia.com',
+      },
+    },
+    widgetParams: {
+      ...defaultState.widgetParams,
+      showBanner: false,
+    },
+  });
+
+  const wrapper = mount({
+    components: { InfiniteHits },
+    template: `<InfiniteHits />`,
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
 it('exposes insights prop to the default slot', async () => {
   const insights = jest.fn();
 

diff --git a/packages/vue-instantsearch/src/components/__tests__/__snapshots__/InfiniteHits.js.snap b/packages/vue-instantsearch/src/components/__tests__/__snapshots__/InfiniteHits.js.snap
@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`does not render a banner when showBanner is false 1`] = `
+<div class="ais-InfiniteHits">
+  <aside class="ais-InfiniteHits-banner">
+    <a class="ais-InfiniteHits-banner-link"
+       href="https://www.algolia.com"
+    >
+      <img class="ais-InfiniteHits-banner-image"
+           src="https://via.placeholder.com/550x250"
+      >
+    </a>
+  </aside>
+  <ol class="ais-InfiniteHits-list">
+    <li class="ais-InfiniteHits-item">
+      objectID: 00001, index: 0
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00002, index: 1
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00003, index: 2
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00004, index: 3
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00005, index: 4
+    </li>
+  </ol>
+  <button class="ais-InfiniteHits-loadMore">
+    Show more results
+  </button>
+</div>
+`;
+
 exports[`renders correctly with a custom item rendering 1`] = `
 <div class="ais-InfiniteHits">
   <ol class="ais-InfiniteHits-list">
@@ -56,3 +90,63 @@ exports[`renders correctly with a custom rendering 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders correctly with banner data 1`] = `
+<div class="ais-InfiniteHits">
+  <aside class="ais-InfiniteHits-banner">
+    <a class="ais-InfiniteHits-banner-link"
+       href="https://www.algolia.com"
+    >
+      <img class="ais-InfiniteHits-banner-image"
+           src="https://via.placeholder.com/550x250"
+      >
+    </a>
+  </aside>
+  <ol class="ais-InfiniteHits-list">
+    <li class="ais-InfiniteHits-item">
+      objectID: 00001, index: 0
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00002, index: 1
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00003, index: 2
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00004, index: 3
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00005, index: 4
+    </li>
+  </ol>
+  <button class="ais-InfiniteHits-loadMore">
+    Show more results
+  </button>
+</div>
+`;
+
+exports[`renders correctly with banner data and custom banner rendering 1`] = `
+<div class="ais-InfiniteHits">
+  <img src="https://via.placeholder.com/550x250">
+  <ol class="ais-InfiniteHits-list">
+    <li class="ais-InfiniteHits-item">
+      objectID: 00001, index: 0
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00002, index: 1
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00003, index: 2
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00004, index: 3
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00005, index: 4
+    </li>
+  </ol>
+  <button class="ais-InfiniteHits-loadMore">
+    Show more results
+  </button>
+</div>
+`;