fix(pagination): update no refinement behavior (#4124)

algolia · Oct 23, 2019 · 8d222ad · 8d222ad
1 parent 535f725
commit 8d222ad
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 3 deletions.
diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js
@@ -113,7 +113,7 @@ class Pagination extends Component {
     return (
       <div
         className={cx(this.props.cssClasses.root, {
-          [this.props.cssClasses.noRefinementRoot]: this.props.isFirstPage,
+          [this.props.cssClasses.noRefinementRoot]: this.props.nbPages <= 1,
         })}
       >
         <ul className={this.props.cssClasses.list}>

diff --git a/src/components/Pagination/__tests__/Pagination-test.js b/src/components/Pagination/__tests__/Pagination-test.js
@@ -45,6 +45,15 @@ describe('Pagination', () => {
   it('should display the first/last link', () => {
     const wrapper = mount(<Pagination {...defaultProps} showFirst showLast />);
 
+    expect(wrapper.find('.firstPageItem')).toHaveLength(1);
+    expect(wrapper.find('.lastPageItem')).toHaveLength(1);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should add the noRefinement CSS class with a single page', () => {
+    const wrapper = mount(<Pagination {...defaultProps} nbPages={1} />);
+
+    expect(wrapper.find('.noRefinementRoot')).toHaveLength(1);
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -63,6 +72,7 @@ describe('Pagination', () => {
       />
     );
 
+    expect(wrapper.find('.lastPageItem').hasClass('disabledItem')).toBe(true);
     expect(wrapper).toMatchSnapshot();
   });
 

diff --git a/src/components/Pagination/__tests__/__snapshots__/Pagination-test.js.snap b/src/components/Pagination/__tests__/__snapshots__/Pagination-test.js.snap
@@ -1,5 +1,121 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Pagination should add the noRefinement CSS class with a single page 1`] = `
+<div
+  className="root noRefinementRoot"
+>
+  <ul
+    className="list"
+  >
+    <li
+      className="item pageItem selectedItem"
+    >
+      <a
+        aria-label={1}
+        className="link"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": 1,
+          }
+        }
+        href="[0]"
+        onClick={[Function]}
+      />
+    </li>
+    <li
+      className="item pageItem"
+    >
+      <a
+        aria-label={2}
+        className="link"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": 2,
+          }
+        }
+        href="[1]"
+        onClick={[Function]}
+      />
+    </li>
+    <li
+      className="item pageItem"
+    >
+      <a
+        aria-label={3}
+        className="link"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": 3,
+          }
+        }
+        href="[2]"
+        onClick={[Function]}
+      />
+    </li>
+    <li
+      className="item pageItem"
+    >
+      <a
+        aria-label={4}
+        className="link"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": 4,
+          }
+        }
+        href="[3]"
+        onClick={[Function]}
+      />
+    </li>
+    <li
+      className="item pageItem"
+    >
+      <a
+        aria-label={5}
+        className="link"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": 5,
+          }
+        }
+        href="[4]"
+        onClick={[Function]}
+      />
+    </li>
+    <li
+      className="item pageItem"
+    >
+      <a
+        aria-label={6}
+        className="link"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": 6,
+          }
+        }
+        href="[5]"
+        onClick={[Function]}
+      />
+    </li>
+    <li
+      className="item pageItem"
+    >
+      <a
+        aria-label={7}
+        className="link"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": 7,
+          }
+        }
+        href="[6]"
+        onClick={[Function]}
+      />
+    </li>
+  </ul>
+</div>
+`;
+
 exports[`Pagination should disable last page if already on it 1`] = `
 <div
   className="root"
@@ -172,7 +288,7 @@ exports[`Pagination should disable last page if already on it 1`] = `
 
 exports[`Pagination should display the first/last link 1`] = `
 <div
-  className="root noRefinementRoot"
+  className="root"
 >
   <ul
     className="list"
@@ -389,7 +505,7 @@ exports[`Pagination should have all buttons disabled if there are no results 1`]
 
 exports[`Pagination should render five elements 1`] = `
 <div
-  className="root noRefinementRoot"
+  className="root"
 >
   <ul
     className="list"