fix(pagination): hide pagination if there are not results

Closes: #181
algolia · Jul 19, 2017 · f4dac58 · f4dac58
1 parent e851553
commit f4dac58
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 1 deletion.
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul :class="bem()">
+  <ul :class="bem()" v-show="totalResults > 0">
     <li :class="[bem('item', 'first'), page === 1 ? bem('item', 'disabled') : '']">
       <a href="#" @click.prevent="goToFirstPage">
         <slot name="first">&lt;&lt;</slot>
@@ -84,6 +84,9 @@ export default {
 
       return pages;
     },
+    totalResults() {
+      return this.searchStore.totalResults;
+    },
   },
   methods: {
     goToPage(page) {

diff --git a/src/components/__tests__/__snapshots__/pagination.js.snap b/src/components/__tests__/__snapshots__/pagination.js.snap
@@ -52,6 +52,70 @@ exports[`accepts custom padding 1`] = `
 
 `;
 
+exports[`it should be hidden if there are no results in the current context 1`] = `
+
+<ul class="ais-pagination"
+    style="display: none;"
+>
+  <li class="ais-pagination__item ais-pagination__item--first ais-pagination__item ais-pagination__item--disabled">
+    <a href="#">
+      &lt;&lt;
+    </a>
+  </li>
+  <li class="ais-pagination__item ais-pagination__item--previous ais-pagination__item ais-pagination__item--disabled">
+    <a href="#">
+      &lt;
+    </a>
+  </li>
+  <li class="ais-pagination__item ais-pagination__item ais-pagination__item--active">
+    <a href="#">
+      1
+    </a>
+  </li>
+  <li class="ais-pagination__item">
+    <a href="#">
+      2
+    </a>
+  </li>
+  <li class="ais-pagination__item">
+    <a href="#">
+      3
+    </a>
+  </li>
+  <li class="ais-pagination__item">
+    <a href="#">
+      4
+    </a>
+  </li>
+  <li class="ais-pagination__item">
+    <a href="#">
+      5
+    </a>
+  </li>
+  <li class="ais-pagination__item">
+    <a href="#">
+      6
+    </a>
+  </li>
+  <li class="ais-pagination__item">
+    <a href="#">
+      7
+    </a>
+  </li>
+  <li class="ais-pagination__item ais-pagination__item--next">
+    <a href="#">
+      &gt;
+    </a>
+  </li>
+  <li class="ais-pagination__item ais-pagination__item--last">
+    <a href="#">
+      &gt;&gt;
+    </a>
+  </li>
+</ul>
+
+`;
+
 exports[`renders proper HTML 1`] = `
 
 <ul class="ais-pagination">

diff --git a/src/components/__tests__/pagination.js b/src/components/__tests__/pagination.js
@@ -5,6 +5,7 @@ test('renders proper HTML', () => {
   const searchStore = {
     page: 2,
     totalPages: 10,
+    totalResults: 4000,
   };
   const Component = Vue.extend(Pagination);
   const vm = new Component({
@@ -21,6 +22,7 @@ test('accepts custom padding', () => {
   const searchStore = {
     page: 5,
     totalPages: 10,
+    totalResults: 4000,
   };
   const Component = Vue.extend(Pagination);
   const vm = new Component({
@@ -38,6 +40,7 @@ test('it should not try to go to a previous page that would be inferior to 1', (
   const searchStore = {
     page: 1,
     totalPages: 20,
+    totalResults: 4000,
   };
   const Component = Vue.extend(Pagination);
   const vm = new Component({
@@ -55,6 +58,7 @@ test('it should not try to go to a next page that would be superior to total exi
   const searchStore = {
     page: 20,
     totalPages: 20,
+    totalResults: 4000,
   };
   const Component = Vue.extend(Pagination);
   const vm = new Component({
@@ -67,3 +71,21 @@ test('it should not try to go to a next page that would be superior to total exi
 
   expect(searchStore.page).toEqual(20);
 });
+
+test('it should be hidden if there are no results in the current context', () => {
+  const searchStore = {
+    page: 1,
+    totalPages: 20,
+    totalResults: 0,
+  };
+  const Component = Vue.extend(Pagination);
+  const vm = new Component({
+    propsData: {
+      searchStore,
+    },
+  });
+
+  vm.$mount();
+
+  expect(vm.$el.outerHTML).toMatchSnapshot();
+});