diff --git a/src/components/__tests__/__snapshots__/results.js.snap b/src/components/__tests__/__snapshots__/results.js.snap new file mode 100644 index 000000000..b0dbe6eab --- /dev/null +++ b/src/components/__tests__/__snapshots__/results.js.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`can stack results 1`] = ` + +
+ Result 'objectID': 1Result 'objectID': 2 +
+ +`; + +exports[`can stack results 2`] = ` + +
+ Result 'objectID': 1Result 'objectID': 2Result 'objectID': 3Result 'objectID': 4 +
+ +`; + +exports[`renders proper HTML 1`] = ` + +
+ Result 'objectID': 1Result 'objectID': 2Result 'objectID': 3Result 'objectID': 4 +
+ +`; + +exports[`should allow to override result rendering 1`] = ` + +
+

+ 1 +

+

+ 2 +

+
+ +`; + +exports[`should be hidden if not results are yielded 1`] = `undefined`; + +exports[`should not stack results by default 1`] = ` + +
+ Result 'objectID': 1Result 'objectID': 2 +
+ +`; + +exports[`should not stack results by default 2`] = ` + +
+ Result 'objectID': 3Result 'objectID': 4 +
+ +`; diff --git a/src/components/__tests__/results.js b/src/components/__tests__/results.js new file mode 100644 index 000000000..c07947fcc --- /dev/null +++ b/src/components/__tests__/results.js @@ -0,0 +1,110 @@ +import Vue from 'vue'; +import { Results } from 'vue-instantsearch'; + +test('renders proper HTML', () => { + const searchStore = { + results: [ + { objectID: 1 }, + { objectID: 2 }, + { objectID: 3 }, + { objectID: 4 }, + ], + }; + const Component = Vue.extend(Results); + const vm = new Component({ + propsData: { + searchStore, + }, + }); + vm.$mount(); + + expect(vm.$el.outerHTML).toMatchSnapshot(); +}); + +test('should be hidden if not results are yielded', () => { + const searchStore = { + results: [], + }; + const Component = Vue.extend(Results); + const vm = new Component({ + propsData: { + searchStore, + }, + }); + vm.$mount(); + + expect(vm.$el.outerHTML).toMatchSnapshot(); +}); + +test('should allow to override result rendering', () => { + const searchStore = { + results: [{ objectID: 1 }, { objectID: 2 }], + }; + + const Component = Vue.extend({ + render(h) { + return h('ais-results', { + props: { searchStore }, + scopedSlots: { + default: ({ result }) => h('h2', result.objectID), + }, + }); + }, + components: { + 'ais-results': Results, + }, + }); + + const vm = new Component(); + + vm.$mount(); + + expect(vm.$el.outerHTML).toMatchSnapshot(); +}); + +test('can stack results', () => { + const searchStore = { + page: 1, + results: [{ objectID: 1 }, { objectID: 2 }], + }; + const Component = Vue.extend(Results); + const vm = new Component({ + propsData: { + searchStore, + stack: true, + }, + }); + vm.$mount(); + + expect(vm.$el.outerHTML).toMatchSnapshot(); + + vm.searchStore.page = 2; + vm.searchStore.results = [{ objectID: 3 }, { objectID: 4 }]; + + vm.$nextTick(() => { + expect(vm.$el.outerHTML).toMatchSnapshot(); + }); +}); + +test('should not stack results by default', () => { + const searchStore = { + page: 1, + results: [{ objectID: 1 }, { objectID: 2 }], + }; + const Component = Vue.extend(Results); + const vm = new Component({ + propsData: { + searchStore, + }, + }); + vm.$mount(); + + expect(vm.$el.outerHTML).toMatchSnapshot(); + + vm.searchStore.page = 2; + vm.searchStore.results = [{ objectID: 3 }, { objectID: 4 }]; + + vm.$nextTick(() => { + expect(vm.$el.outerHTML).toMatchSnapshot(); + }); +});