From 9017b72f0f1f465e024f7b62181a85b8a324e1a4 Mon Sep 17 00:00:00 2001
From: Alex S <bobylito@users.noreply.github.com>
Date: Fri, 29 Dec 2017 16:14:37 +0100
Subject: [PATCH] fix(pagination): disable buttons if not results (#2643)

* fix(pagination): if the results contains no hits, disable the buttons
* fix(pagination): add tests for disabled behaviour
* chore: add story to test #2014
* fix(pagination): display the current if no results
We're still on page 1 after all.

fix #2014
---
 dev/app/builtin/stories/pagination.stories.js | 34 ++++++---
 src/components/Pagination/Pagination.js       | 10 +--
 src/components/Pagination/Paginator.js        |  2 +
 .../Pagination/__tests__/Pagination-test.js   | 15 ++++
 .../__snapshots__/Pagination-test.js.snap     | 70 +++++++++++++++++++
 5 files changed, 115 insertions(+), 16 deletions(-)

diff --git a/dev/app/builtin/stories/pagination.stories.js b/dev/app/builtin/stories/pagination.stories.js
index 966e4a5cee..c6c9e5498a 100644
--- a/dev/app/builtin/stories/pagination.stories.js
+++ b/dev/app/builtin/stories/pagination.stories.js
@@ -7,15 +7,27 @@ import { wrapWithHits } from '../../utils/wrap-with-hits.js';
 const stories = storiesOf('Pagination');
 
 export default () => {
-  stories.add(
-    'default',
-    wrapWithHits(container => {
-      window.search.addWidget(
-        instantsearch.widgets.pagination({
-          container,
-          maxPages: 20,
-        })
-      );
-    })
-  );
+  stories
+    .add(
+      'default',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.pagination({
+            container,
+            maxPages: 20,
+          })
+        );
+      })
+    )
+    .add(
+      'without autoHideContainer',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.pagination({
+            container,
+            autoHideContainer: false,
+          })
+        );
+      })
+    );
 };
diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js
index 9192a587eb..6ba62e9e9f 100644
--- a/src/components/Pagination/Pagination.js
+++ b/src/components/Pagination/Pagination.js
@@ -44,7 +44,7 @@ export class RawPagination extends React.Component {
         cssClasses={cssClasses}
         handleClick={this.handleClick}
         isDisabled={isDisabled}
-        key={label + pageNumber}
+        key={label + pageNumber + ariaLabel}
         label={label}
         pageNumber={pageNumber}
         url={url}
@@ -56,7 +56,7 @@ export class RawPagination extends React.Component {
     return this.pageLink({
       ariaLabel: 'Previous',
       additionalClassName: this.props.cssClasses.previous,
-      isDisabled: pager.isFirstPage(),
+      isDisabled: this.props.nbHits === 0 || pager.isFirstPage(),
       label: this.props.labels.previous,
       pageNumber: pager.currentPage - 1,
       createURL,
@@ -67,7 +67,7 @@ export class RawPagination extends React.Component {
     return this.pageLink({
       ariaLabel: 'Next',
       additionalClassName: this.props.cssClasses.next,
-      isDisabled: pager.isLastPage(),
+      isDisabled: this.props.nbHits === 0 || pager.isLastPage(),
       label: this.props.labels.next,
       pageNumber: pager.currentPage + 1,
       createURL,
@@ -78,7 +78,7 @@ export class RawPagination extends React.Component {
     return this.pageLink({
       ariaLabel: 'First',
       additionalClassName: this.props.cssClasses.first,
-      isDisabled: pager.isFirstPage(),
+      isDisabled: this.props.nbHits === 0 || pager.isFirstPage(),
       label: this.props.labels.first,
       pageNumber: 0,
       createURL,
@@ -89,7 +89,7 @@ export class RawPagination extends React.Component {
     return this.pageLink({
       ariaLabel: 'Last',
       additionalClassName: this.props.cssClasses.last,
-      isDisabled: pager.isLastPage(),
+      isDisabled: this.props.nbHits === 0 || pager.isLastPage(),
       label: this.props.labels.last,
       pageNumber: pager.total - 1,
       createURL,
diff --git a/src/components/Pagination/Paginator.js b/src/components/Pagination/Paginator.js
index 65675ab0ec..e98f2c49b5 100644
--- a/src/components/Pagination/Paginator.js
+++ b/src/components/Pagination/Paginator.js
@@ -10,6 +10,8 @@ class Paginator {
   pages() {
     const { total, currentPage, padding } = this;
 
+    if (total === 0) return [0];
+
     const totalDisplayedPages = this.nbPagesDisplayed(padding, total);
     if (totalDisplayedPages === total) return range(0, total);
 
diff --git a/src/components/Pagination/__tests__/Pagination-test.js b/src/components/Pagination/__tests__/Pagination-test.js
index 32128abf61..a644fe8789 100644
--- a/src/components/Pagination/__tests__/Pagination-test.js
+++ b/src/components/Pagination/__tests__/Pagination-test.js
@@ -67,4 +67,19 @@ describe('Pagination', () => {
     );
     expect(preventDefault.calledOnce).toBe(true, 'preventDefault called once');
   });
+
+  it('should have all buttons disabled if there are no results', () => {
+    const tree = renderer
+      .create(
+        <Pagination
+          {...defaultProps}
+          showFirstLast
+          currentPage={0}
+          nbHits={0}
+          nbPages={0}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/components/Pagination/__tests__/__snapshots__/Pagination-test.js.snap b/src/components/Pagination/__tests__/__snapshots__/Pagination-test.js.snap
index 01d74b1bcd..d15a60ec5f 100644
--- a/src/components/Pagination/__tests__/__snapshots__/Pagination-test.js.snap
+++ b/src/components/Pagination/__tests__/__snapshots__/Pagination-test.js.snap
@@ -332,6 +332,76 @@ exports[`Pagination should display the first/last link 1`] = `
 </ul>
 `;
 
+exports[`Pagination should have all buttons disabled if there are no results 1`] = `
+<ul
+  className="root"
+>
+  <li
+    className="item first disabled"
+  >
+    <span
+      className=""
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </li>
+  <li
+    className="item previous disabled"
+  >
+    <span
+      className=""
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </li>
+  <li
+    className="item page active"
+  >
+    <a
+      aria-label={1}
+      className=""
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": 1,
+        }
+      }
+      href="[0]"
+      onClick={[Function]}
+    />
+  </li>
+  <li
+    className="item next disabled"
+  >
+    <span
+      className=""
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </li>
+  <li
+    className="item last disabled"
+  >
+    <span
+      className=""
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "",
+        }
+      }
+    />
+  </li>
+</ul>
+`;
+
 exports[`Pagination should render five elements 1`] = `
 <ul
   className="root"