feat(hits): add banners to Hits widget for Vue

bundlesize.config.json

@@ -30,7 +30,7 @@
     },
     {
       "path": "packages/vue-instantsearch/vue3/umd/index.js",
-      "maxSize": "68 kB"
+      "maxSize": "68.25 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/cjs/index.js",

packages/vue-instantsearch/src/__tests__/common-widgets.test.js

@@ -590,9 +590,7 @@ const testOptions = {
   createMenuWidgetTests: undefined,
   createPaginationWidgetTests: undefined,
   createInfiniteHitsWidgetTests: undefined,
-  createHitsWidgetTests: {
-    skippedTests: { 'banner option': true },
-  },
+  createHitsWidgetTests: undefined,
   createRangeInputWidgetTests: undefined,
   createRatingMenuWidgetTests: undefined,
   createInstantSearchWidgetTests: undefined,

packages/vue-instantsearch/src/components/Hits.js

@@ -19,6 +19,10 @@ export default {
     createSuitMixin({ name: 'Hits' }),
   ],
   props: {
+    showBanner: {
+      type: Boolean,
+      default: true,
+    },
     escapeHTML: {
       type: Boolean,
       default: true,
@@ -31,6 +35,7 @@ export default {
   computed: {
     widgetParams() {
       return {
+        showBanner: this.showBanner,
         escapeHTML: this.escapeHTML,
         transformItems: this.transformItems,
       };
@@ -43,6 +48,7 @@ export default {
 
     const defaultSlot = getScopedSlot(this, 'default');
     const itemSlot = getScopedSlot(this, 'item');
+    const bannerSlot = getScopedSlot(this, 'banner');
 
     const itemComponent = ({
       hit,
@@ -78,7 +84,7 @@ export default {
 
     // We only want to render the default slot
     // if no other slots are defined
-    if (!itemSlot && defaultSlot) {
+    if (!itemSlot && !bannerSlot && defaultSlot) {
       return h(
         'div',
         {
@@ -88,6 +94,7 @@ export default {
         },
         [
           defaultSlot({
+            banner: this.state.banner,
             items: this.state.items,
             insights: this.state.insights,
             sendEvent: this.state.sendEvent,
@@ -99,11 +106,16 @@ export default {
     return h(createHitsComponent({ createElement: h }), {
       hits: this.state.items,
       itemComponent,
+      banner: this.showBanner ? this.state.banner : undefined,
+      bannerComponent: bannerSlot,
       sendEvent: this.state.sendEvent,
       classNames: this.classNames && {
         root: this.classNames['ais-Hits'],
         list: this.classNames['ais-Hits-list'],
         item: this.classNames['ais-Hits-item'],
+        bannerRoot: this.classNames['ais-Hits-banner'],
+        bannerImage: this.classNames['ais-Hits-banner-image'],
+        bannerLink: this.classNames['ais-Hits-banner-link'],
       },
     });
   }),

packages/vue-instantsearch/src/components/__tests__/Hits.js

@@ -14,6 +14,20 @@ const defaultState = {
   sendEvent: jest.fn(),
 };
 
+it('accepts a showBanner prop', () => {
+  __setState({
+    ...defaultState,
+  });
+
+  const wrapper = mount(Hits, {
+    propsData: {
+      showBanner: true,
+    },
+  });
+
+  expect(wrapper.vm.widgetParams.showBanner).toBe(true);
+});
+
 it('accepts an escapeHTML prop', () => {
   __setState({
     ...defaultState,
@@ -28,6 +42,37 @@ it('accepts an escapeHTML prop', () => {
   expect(wrapper.vm.widgetParams.escapeHTML).toBe(true);
 });
 
+it('exposes banner prop to the banner slot', () => {
+  __setState({
+    ...defaultState,
+    banner: {
+      image: {
+        urls: [{ url: 'https://via.placeholder.com/550x250' }],
+      },
+    },
+  });
+
+  const wrapper = mount(
+    {
+      components: { Hits },
+      template: `
+      <Hits>
+        <template v-slot:banner="{ banner }">
+          <img :src=banner.image.urls[0].url />
+        </template>
+      </Hits>
+    `,
+    },
+    {
+      propsData: {
+        showBanner: true,
+      },
+    }
+  );
+  const img = wrapper.find('img');
+  expect(img.attributes('src')).toBe('https://via.placeholder.com/550x250');
+});
+
 it('exposes insights prop to the default slot', async () => {
   const insights = jest.fn();
   __setState({

tests/common/widgets/hits/options.ts

@@ -172,44 +172,43 @@ export function createOptionsTests(
       });
     });
 
-    skippableDescribe('banner option', skippedTests, () => {
-      test('renders default banner element with banner widget renderingContent', async () => {
-        const searchClient = createMockedSearchClient({
-          renderingContent: {
-            // @TODO: remove once algoliasearch js client has been updated
-            // @ts-expect-error
-            widgets: {
-              banners: [
-                {
-                  image: {
-                    urls: [{ url: 'https://via.placeholder.com/550x250' }],
-                  },
-                  link: {
-                    url: 'https://www.algolia.com',
-                  },
+    test('renders default banner element with banner widget renderingContent', async () => {
+      const searchClient = createMockedSearchClient({
+        renderingContent: {
+          // @TODO: remove once algoliasearch js client has been updated
+          // @ts-expect-error
+          widgets: {
+            banners: [
+              {
+                image: {
+                  urls: [{ url: 'https://via.placeholder.com/550x250' }],
                 },
-              ],
-            },
+                link: {
+                  url: 'https://www.algolia.com',
+                },
+              },
+            ],
           },
-        });
+        },
+      });
 
-        await setup({
-          instantSearchOptions: {
-            indexName: 'indexName',
-            searchClient,
-          },
-          widgetParams: {},
-        });
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: {},
+      });
 
-        await act(async () => {
-          await wait(0);
-        });
+      await act(async () => {
+        await wait(0);
+      });
 
-        expect(
-          document.querySelector('#hits-with-defaults .ais-Hits')
-        ).toMatchNormalizedInlineSnapshot(
-          normalizeSnapshot,
-          `
+      expect(
+        document.querySelector('#hits-with-defaults .ais-Hits')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
           <div
             class="ais-Hits"
           >
@@ -242,8 +241,7 @@ export function createOptionsTests(
             </ol>
           </div>
           `
-        );
-      });
+      );
     });
   });
 }