test(results): bootstrap Results component tests

src/components/__tests__/__snapshots__/results.js.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`can stack results 1`] = `
+
+<div class="ais-results">
+  Result 'objectID': 1Result 'objectID': 2
+</div>
+
+`;
+
+exports[`can stack results 2`] = `
+
+<div class="ais-results">
+  Result 'objectID': 1Result 'objectID': 2Result 'objectID': 3Result 'objectID': 4
+</div>
+
+`;
+
+exports[`renders proper HTML 1`] = `
+
+<div class="ais-results">
+  Result 'objectID': 1Result 'objectID': 2Result 'objectID': 3Result 'objectID': 4
+</div>
+
+`;
+
+exports[`should allow to override result rendering 1`] = `
+
+<div class="ais-results">
+  <h2>
+    1
+  </h2>
+  <h2>
+    2
+  </h2>
+</div>
+
+`;
+
+exports[`should be hidden if not results are yielded 1`] = `undefined`;
+
+exports[`should not stack results by default 1`] = `
+
+<div class="ais-results">
+  Result 'objectID': 1Result 'objectID': 2
+</div>
+
+`;
+
+exports[`should not stack results by default 2`] = `
+
+<div class="ais-results">
+  Result 'objectID': 3Result 'objectID': 4
+</div>
+
+`;

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();
+  });
+});