From 1a15a30435eb3257ea440d17aa6db31743b45de6 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 15 Apr 2019 22:31:05 +0200
Subject: [PATCH] add pagination UI render test

---
 .../src/components/molecules/Pagination.test.tsx | 16 ++++++++++++++++
 client/src/components/molecules/Pagination.tsx   |  9 +++++----
 client/src/routes/Search.tsx                     |  1 +
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/molecules/Pagination.test.tsx

diff --git a/client/src/components/molecules/Pagination.test.tsx b/client/src/components/molecules/Pagination.test.tsx
new file mode 100644
index 0000000..0271ec5
--- /dev/null
+++ b/client/src/components/molecules/Pagination.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { render } from 'react-testing-library'
+import Pagination from './Pagination'
+
+describe('Button', () => {
+    it('renders without crashing', () => {
+        const { container, getByRole } = render(
+            <Pagination
+                totalPages={20}
+                currentPage={1}
+                handlePageClick={() => Promise.resolve()}
+            />
+        )
+        expect(container.firstChild).toBeInTheDocument()
+    })
+})
diff --git a/client/src/components/molecules/Pagination.tsx b/client/src/components/molecules/Pagination.tsx
index 7477b9a..cab1384 100644
--- a/client/src/components/molecules/Pagination.tsx
+++ b/client/src/components/molecules/Pagination.tsx
@@ -14,20 +14,21 @@ export default class Pagination extends PureComponent<{
             totalPages > 1 && (
                 <ReactPaginate
                     pageCount={totalPages}
+                    // react-pagination starts counting at 0, we start at 1
                     initialPage={currentPage - 1}
                     marginPagesDisplayed={1}
                     pageRangeDisplayed={6}
                     onPageChange={data => handlePageClick(data)}
+                    disableInitialCallback
+                    previousLabel={'←'}
+                    nextLabel={'→'}
+                    breakLabel={'...'}
                     containerClassName={styles.pagination}
                     pageLinkClassName={styles.number}
                     activeLinkClassName={styles.current}
                     previousLinkClassName={styles.prev}
                     nextLinkClassName={styles.next}
                     disabledClassName={styles.prevNextDisabled}
-                    disableInitialCallback
-                    previousLabel={'←'}
-                    nextLabel={'→'}
-                    breakLabel={'...'}
                     breakLinkClassName={styles.break}
                 />
             )
diff --git a/client/src/routes/Search.tsx b/client/src/routes/Search.tsx
index a895bc6..a333251 100644
--- a/client/src/routes/Search.tsx
+++ b/client/src/routes/Search.tsx
@@ -73,6 +73,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
     }
 
     private handlePageClick = async (data: { selected: number }) => {
+        // react-pagination starts counting at 0, we start at 1
         let toPage = data.selected + 1
 
         this.props.history.push({