Fix/stats

src/components/Stats.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="bem()" v-if="totalResults > 0">
     <slot :totalResults="totalResults" :processingTime="processingTime" :query="query">
-      {{ totalResults }} results found in {{ processingTime }}ms
+      {{ totalResults.toLocaleString() }} results found in {{ processingTime.toLocaleString() }}ms
     </slot>
   </div>
 </template>
@@ -20,7 +20,7 @@ export default {
       return this.searchStore.query;
     },
     totalResults() {
-      return this.searchStore.totalResults.toLocaleString();
+      return this.searchStore.totalResults;
     },
     processingTime() {
       return this.searchStore.processingTimeMS;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stats renders proper HTML 1`] = `
+
+<div class="ais-stats">
+  10,000 results found in 1,000ms
+</div>
+
+`;
+
+exports[`Stats should not be displayed if there are no results 1`] = `undefined`;

src/components/__tests__/stats.js

@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import Stats from '../Stats.vue';
+
+const searchStore = {
+  query: 'search query',
+  totalResults: 10000,
+  processingTimeMS: 1000,
+};
+
+describe('Stats', () => {
+  test('renders proper HTML', () => {
+    const Component = Vue.extend(Stats);
+    const vm = new Component({
+      propsData: {
+        searchStore,
+      },
+    }).$mount();
+
+    expect(vm.$el.outerHTML).toMatchSnapshot();
+  });
+
+  test('should not be displayed if there are no results', () => {
+    const Component = Vue.extend(Stats);
+    const vm = new Component({
+      propsData: {
+        searchStore: Object.assign({}, searchStore, { totalResults: 0 }),
+      },
+    }).$mount();
+
+    expect(vm.$el.outerHTML).toMatchSnapshot();
+  });
+});