diff --git a/bundlesize.config.json b/bundlesize.config.json index 27161e56d1..9013f932b3 100644 --- a/bundlesize.config.json +++ b/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", diff --git a/packages/vue-instantsearch/src/__tests__/common-widgets.test.js b/packages/vue-instantsearch/src/__tests__/common-widgets.test.js index 53a0cf5ebe..65eda916e4 100644 --- a/packages/vue-instantsearch/src/__tests__/common-widgets.test.js +++ b/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, diff --git a/packages/vue-instantsearch/src/components/Hits.js b/packages/vue-instantsearch/src/components/Hits.js index f362de4275..1eea498ecc 100644 --- a/packages/vue-instantsearch/src/components/Hits.js +++ b/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'], }, }); }), diff --git a/packages/vue-instantsearch/src/components/__tests__/Hits.js b/packages/vue-instantsearch/src/components/__tests__/Hits.js index fd083f89ef..6b19320dca 100644 --- a/packages/vue-instantsearch/src/components/__tests__/Hits.js +++ b/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: ` + + + + `, + }, + { + 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({ diff --git a/tests/common/widgets/hits/options.ts b/tests/common/widgets/hits/options.ts index cf1a25e8ea..0a21bbd1ce 100644 --- a/tests/common/widgets/hits/options.ts +++ b/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, + `
@@ -242,8 +241,7 @@ export function createOptionsTests(
` - ); - }); + ); }); }); }