Merge pull request #260 from algolia/test/more

Make all components SSR ready

docs/docgen/src/components/index.md

@@ -51,7 +51,8 @@ Provide search query parameters:
 | index-name       | String  | ``      | The index name                                                                                                                                     |
 | query            | String  | ``      | The search query                                                                                                                                   |
 | query-parameters | Object  | ``      | The search query parameters. Available options are [documented here](https://www.algolia.com/doc/api-client/javascript/search/#search-parameters). |
-| cache            | Boolean | `true`  | Wether to cache results or not. See: https://www.algolia.com/doc/tutorials/getting-started/quick-start-with-the-api-client/javascript/#cache       |
+| cache            | Boolean | `true`  | Whether to cache results or not. See: https://www.algolia.com/doc/tutorials/getting-started/quick-start-with-the-api-client/javascript/#cache       |
+| auto-search      | Boolean | `true`  | Whether to initiate a query to Algolia when this component is mounted                                                                               |
 
 ## Slots
 

docs/docgen/src/getting-started/custom-components.md

@@ -77,7 +77,7 @@ To ensure consistency and re-usability for custom components, we recommend revie
 ### Vue component
 
 * Use the `Component` mixin that we provide. This will make sure your component can resolve the `searchStore` if not provided. It ensures the `searchStore` prop is available in your component at any time.
-* If you need to mutate the `searchStore` multiple times, please use `searchStore.stop()` and `searchStore.start()`, so that other components don't update their rendering on every intermediary state mutation.
+* If you need to mutate the `searchStore` multiple times, please use `searchStore.stop()` and `searchStore.start()`, so that other components don't update their rendering on every intermediary state mutation. Do not forget the `searchStore.refresh()` if you want to sync the store afterwards.
 * Make sure that when the component is mounted, you catch up with the `searchStore`. You can optionally mutate the state of the `searchStore` at this stage.
 * When a component is `unmounted` or `destroyed`, make sure that you leave the `searchStore` in a state that does not include things you might have added (facets / filters / etc.).
 * Make sure your component gracefully handles any state of the `searchStore`.

docs/docgen/src/getting-started/search-store.md

@@ -133,18 +133,21 @@ store.query = '';
 store.queryParameters({'distinct': true});
 
 store.start();
+store.refresh();
 ```
 
-In this example, even if the state is mutated several times, only one call to Algolia will be made after the Store is resumed by the `start()` call.
+In this example, even if the state is mutated several times, only one call to Algolia will be made after the Store is resumed by the `start()` and `refresh()` calls.
 
-**Important:** When you manually create a search store, it is stopped by default. You need to manually call `start()` to trigger the first call. This gives you full control over the initial state of the store before the first call to Algolia is sent.
+**Important:** When you manually create a search store, it is stopped by default. You need to manually call `start()` and `refresh()` to trigger the first call. This gives you full control over the initial state of the store before the first call to Algolia is sent.
+If you pass the store as a prop to an `<ais-index>` component though, it will be started and refreshed when mounted.
 
 ```javascript
 import { createFromAlgoliaCredentials } from 'vue-instantsearch';
 
 const store = createFromAlgoliaCredentials('appId', 'search_apiKey');
 store.indexName = 'new_index';
 store.start();
+store.refresh();
 ```
 
 In the example above, the first query will be sent to Algolia after `store.start()` has been called.

src/__tests__/store.js

@@ -421,6 +421,7 @@ describe('Store', () => {
         return { clearCache };
       },
     };
+    store.start();
     store.disableCache();
     store.refresh();
     expect(clearCache).toHaveBeenCalledTimes(1);

src/components/Clear.vue

@@ -55,6 +55,7 @@ export default {
         this.searchStore.clearRefinements();
       }
       this.searchStore.start();
+      this.searchStore.refresh();
     },
   },
 };

src/components/Index.vue

@@ -57,6 +57,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    autoSearch: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -97,6 +101,9 @@ export default {
   },
   mounted() {
     this._localSearchStore.start();
+    if (this.autoSearch) {
+      this._localSearchStore.refresh();
+    }
   },
   watch: {
     indexName() {

src/components/Input.vue

@@ -32,6 +32,7 @@ export default {
         // without triggering in between ghost queries.
         this.$nextTick(function() {
           this.searchStore.start();
+          this.searchStore.refresh();
         });
       },
     },

src/components/PriceRange.vue

@@ -95,6 +95,7 @@ export default {
         }
 
         this.searchStore.start();
+        this.searchStore.refresh();
       },
     },
     to: {
@@ -125,6 +126,7 @@ export default {
           this.searchStore.addNumericRefinement(this.attributeName, '<', value);
         }
         this.searchStore.start();
+        this.searchStore.refresh();
       },
     },
   },

src/components/Rating.vue

@@ -51,7 +51,7 @@ export default {
       blockClassName: 'ais-rating',
     };
   },
-  mounted() {
+  created() {
     this.searchStore.addFacet(this.attributeName, FACET_OR);
   },
   destroyed() {
@@ -141,6 +141,7 @@ export default {
         this.searchStore.addFacetRefinement(this.attributeName, val);
       }
       this.searchStore.start();
+      this.searchStore.refresh();
       return undefined;
     },
     clear() {

src/components/RefinementList.vue

@@ -58,7 +58,7 @@ export default {
       blockClassName: 'ais-refinement-list',
     };
   },
-  mounted() {
+  created() {
     this.searchStore.addFacet(this.attributeName, this.operator);
   },
   destroyed() {

src/components/Results.vue

@@ -30,7 +30,7 @@ export default {
       blockClassName: 'ais-results',
     };
   },
-  mounted() {
+  created() {
     this.updateResultsPerPage();
   },
   watch: {

src/components/ResultsPerPageSelector.vue

@@ -33,7 +33,7 @@ export default {
       },
     },
   },
-  mounted() {
+  created() {
     if (this.options.indexOf(this.searchStore.resultsPerPage) === -1) {
       this.searchStore.resultsPerPage = this.options[0];
     }

src/components/SortBySelector.vue

@@ -33,7 +33,7 @@ export default {
       },
     },
   },
-  mounted() {
+  created() {
     let match = false;
     for (const index in this.indices) {
       if (this.indices[index].name === this.indexName) {

src/components/TreeMenu.vue

@@ -31,7 +31,7 @@ export default {
       blockClassName: 'ais-tree-menu',
     };
   },
-  mounted() {
+  created() {
     this.searchStore.addFacet(
       {
         name: this.attribute,

src/components/__tests__/__snapshots__/sort-by-selector.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders proper HTML 1`] = `
+
+<select class="ais-sort-by-selector">
+  <option value="index1">
+    label1
+  </option>
+  <option value="index2">
+    label2
+  </option>
+</select>
+
+`;

src/components/__tests__/clear.js

@@ -7,19 +7,22 @@ describe('Clear component', () => {
   const stop = jest.fn();
   const start = jest.fn();
   const clearRefinements = jest.fn();
+  const refresh = jest.fn();
 
   const searchStore = {
     query: 'whatever',
     activeRefinements: ['whatever'],
     stop,
     start,
     clearRefinements,
+    refresh,
   };
 
   beforeEach(() => {
     stop.mockClear();
     start.mockClear();
     clearRefinements.mockClear();
+    refresh.mockClear();
     searchStore.query = 'whatever';
     searchStore.activeRefinements = ['whatever'];
   });
@@ -34,6 +37,7 @@ describe('Clear component', () => {
     expect(stop).toHaveBeenCalledTimes(1);
     expect(clearRefinements).toHaveBeenCalledTimes(1);
     expect(start).toHaveBeenCalledTimes(1);
+    expect(refresh).toHaveBeenCalledTimes(1);
   });
 
   test('can disable query clearing', () => {
@@ -46,6 +50,7 @@ describe('Clear component', () => {
     expect(stop).toHaveBeenCalledTimes(1);
     expect(clearRefinements).toHaveBeenCalledTimes(1);
     expect(start).toHaveBeenCalledTimes(1);
+    expect(refresh).toHaveBeenCalledTimes(1);
   });
 
   test('can disable facets clearing', () => {
@@ -58,6 +63,7 @@ describe('Clear component', () => {
     expect(stop).toHaveBeenCalledTimes(1);
     expect(clearRefinements).not.toHaveBeenCalled();
     expect(start).toHaveBeenCalledTimes(1);
+    expect(refresh).toHaveBeenCalledTimes(1);
   });
 
   test('has proper HTML rendering', () => {

src/components/__tests__/menu-tree.js

@@ -55,15 +55,13 @@ test('should add a tree facet to the store when mounted', () => {
   const Component = Vue.extend(TreeMenu);
   const addFacetMock = jest.fn();
   const store = Object.assign({}, searchStore, { addFacet: addFacetMock });
-  const vm = new Component({
+  new Component({ // eslint-disable-line
     propsData: {
       attributes: ['category.lvl1', 'category.lvl2'],
       searchStore: store,
     },
   });
 
-  expect(addFacetMock).not.toBeCalled();
-  vm.$mount();
   expect(addFacetMock).toBeCalledWith(
     {
       name: 'tree-menu',

src/components/__tests__/refinement-list.js

@@ -32,19 +32,16 @@ test('renders proper HTML', () => {
   expect(vm.$el.outerHTML).toMatchSnapshot();
 });
 
-test('should add a facet to the store when mounted', () => {
+test('should add a facet to the store when created', () => {
   const Component = Vue.extend(RefinementList);
   const addFacetMock = jest.fn();
   const store = Object.assign({}, searchStore, { addFacet: addFacetMock });
-  const vm = new Component({
+  new Component({ // eslint-disable-line
     propsData: {
       attributeName: 'color',
       searchStore: store,
     },
   });
-
-  expect(addFacetMock).not.toBeCalled();
-  vm.$mount();
   expect(addFacetMock).toBeCalledWith('color', 'or');
 });
 

src/components/__tests__/sort-by-selector.js

@@ -0,0 +1,64 @@
+import Vue from 'vue';
+import SortBySelector from '../SortBySelector.vue';
+
+test('renders proper HTML', () => {
+  const searchStore = {};
+  const Component = Vue.extend(SortBySelector);
+  const vm = new Component({
+    propsData: {
+      searchStore,
+      indices: [
+        { name: 'index1', label: 'label1' },
+        { name: 'index2', label: 'label2' },
+      ],
+    },
+  });
+  vm.$mount();
+
+  expect(vm.$el.outerHTML).toMatchSnapshot();
+});
+
+test('should use current index name in search store if it is a valid option', () => {
+  const searchStore = {
+    indexName: 'index2',
+  };
+  const Component = Vue.extend(SortBySelector);
+  const vm = new Component({
+    propsData: {
+      searchStore,
+      indices: [
+        { name: 'index1', label: 'label1' },
+        { name: 'index2', label: 'label2' },
+      ],
+    },
+  });
+
+  expect(vm.searchStore.indexName).toEqual('index2');
+
+  vm.$mount();
+
+  expect(vm.$el.getElementsByTagName('option')[0].selected).toEqual(false);
+  expect(vm.$el.getElementsByTagName('option')[1].selected).toEqual(true);
+});
+
+test('should use first index if current index name is not a valid option', () => {
+  const searchStore = {
+    indexName: 'index3',
+  };
+  const Component = Vue.extend(SortBySelector);
+  const vm = new Component({
+    propsData: {
+      searchStore,
+      indices: [
+        { name: 'index1', label: 'label1' },
+        { name: 'index2', label: 'label2' },
+      ],
+    },
+  });
+
+  expect(vm.searchStore.indexName).toEqual('index1');
+
+  vm.$mount();
+
+  expect(vm.$el.getElementsByTagName('option')[0].selected).toEqual(true);
+});