integrate test and travis ci

.gitignore

@@ -28,3 +28,4 @@ yarn-error.log*
 #all src files except lib
 src/*
 !src/lib
+!src/__tests__

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - "10"
+cache:
+  directories:
+  - node_modules
+script:
+  - npm test
+  - npm run build

README.md

@@ -1,5 +1,7 @@
 # React Hooks Paginator
 
+[![Build Status](https://travis-ci.org/codenaz/react-paginator.svg?branch=master)](https://travis-ci.org/codenaz/react-paginator)
+
 ![demo](./animate.gif)
 
 A library for adding simple paginator functionality to your react app.
@@ -57,6 +59,8 @@ export default App;
 | pageLinkClass      | String              | `page-link`             | Page link classname                                            |
 | pagePrevText       | String or Node      | `Next »`                | Prev page item text                                            |
 | pageNextText       | String or Node      | `« Prev`                | Next page item text                                            |
+| pagePrevClass      | String              | `page-link`             | Prev page custom class                                         |
+| pageNextClass      | String              | `next-link`             | Next page custom class                                         |
 
 ## Example
 

package.json

@@ -45,13 +45,16 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.1.0",
-    "@babel/core": "^7.1.0",
-    "@babel/preset-env": "^7.1.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-cli": "^6.26.0",
-    "babel-loader": "^8.0.5",
-    "babel-preset-react": "^6.24.1",
+    "@babel/cli": "7.1.0",
+    "@babel/core": "7.1.0",
+    "@babel/preset-env": "7.1.0",
+    "@babel/preset-react": "7.0.0",
+    "@testing-library/jest-dom": "^4.1.2",
+    "@testing-library/react": "^9.3.0",
+    "babel-cli": "6.26.0",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "8.0.5",
+    "babel-preset-react": "6.24.1",
     "css-loader": "^2.1.1",
     "node-sass": "^4.11.0",
     "prettier": "^1.16.4",
@@ -60,8 +63,8 @@
     "react-scripts": "2.1.8",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
-    "webpack": "^4.28.3",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14"
+    "webpack": "4.28.3",
+    "webpack-cli": "3.2.3",
+    "webpack-dev-server": "3.1.14"
   }
 }

src/__tests__/Paginator.test.js

@@ -0,0 +1,90 @@
+/* eslint-env jest */
+
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect'
+import { render, fireEvent } from '@testing-library/react';
+import Paginator from '../lib';
+
+const pageLimit = 1;
+let currentPage = 1;
+const setCurrentPage = (page) => currentPage = page;
+let offset = 0
+const setOffset = (point) => offset = point;
+
+test('renders correctly', () => {
+  const { baseElement } = render(<Paginator
+    totalRecords={5}
+    pageLimit={pageLimit}
+    pageNeighbours={2}
+    setOffset={setOffset}
+    currentPage={currentPage}
+    setCurrentPage={setCurrentPage}
+  />);
+  expect(baseElement).toMatchSnapshot();
+})
+
+test("correct number of pages show up when pages do not exceed the number of available blocks", () => {
+  const { getAllByText } = render(<Paginator
+    totalRecords={5}
+    pageLimit={pageLimit}
+    pageNeighbours={2}
+    setOffset={setOffset}
+    currentPage={currentPage}
+    setCurrentPage={setCurrentPage}
+  />);
+  const pages = getAllByText(/^[1-5]$/);
+  expect(pages.length).toBe(5)
+})
+
+test("correct number of pages show up when pages exceed the number of available blocks", () => {
+  const { getAllByText } = render(<Paginator
+    totalRecords={5}
+    pageLimit={pageLimit}
+    pageNeighbours={2}
+    setOffset={setOffset}
+    currentPage={currentPage}
+    setCurrentPage={setCurrentPage}
+  />);
+  const pages = getAllByText(/^[1-5]$/);
+  expect(pages.length).toBe(5)
+})
+
+test("correct number of pages show up with next button when pages exceed the number of available blocks", () => {
+  const { queryByText } = render(<Paginator
+    totalRecords={20}
+    pageLimit={pageLimit}
+    pageNeighbours={2}
+    setOffset={setOffset}
+    currentPage={currentPage}
+    setCurrentPage={setCurrentPage}
+  />);
+  const nextOrPrev = queryByText(/Next\s»/);
+  expect(nextOrPrev).not.toBeNull();
+})
+
+test("correct number of pages show up with prev button when pages exceed the number of available blocks", () => {
+  const { queryByText } = render(<Paginator
+    totalRecords={20}
+    pageLimit={pageLimit}
+    pageNeighbours={2}
+    setOffset={setOffset}
+    currentPage={20}
+    setCurrentPage={setCurrentPage}
+  />);
+  const nextOrPrev = queryByText(/«\sPrev/);
+  expect(nextOrPrev).not.toBeNull();
+})
+
+test("next and prev buttons show up when pages exceed the number of available blocks", () => {
+  const { queryAllByText } = render(<Paginator
+    totalRecords={20}
+    pageLimit={pageLimit}
+    pageNeighbours={2}
+    setOffset={setOffset}
+    currentPage={10}
+    setCurrentPage={setCurrentPage}
+  />);
+  const nextOrPrev = queryAllByText(/Next\s»|«\sPrev/);
+  expect(nextOrPrev.length).toBe(2);
+})
+

src/__tests__/__snapshots__/Paginator.test.js.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<body>
+  <div>
+    <ul
+      class="react-hooks-paginator"
+    >
+      <li
+        class="page-item active"
+      >
+        <button
+          class="page-link"
+        >
+          1
+        </button>
+      </li>
+      <li
+        class="page-item null"
+      >
+        <button
+          class="page-link"
+        >
+          2
+        </button>
+      </li>
+      <li
+        class="page-item null"
+      >
+        <button
+          class="page-link"
+        >
+          3
+        </button>
+      </li>
+      <li
+        class="page-item null"
+      >
+        <button
+          class="page-link"
+        >
+          4
+        </button>
+      </li>
+      <li
+        class="page-item null"
+      >
+        <button
+          class="page-link"
+        >
+          5
+        </button>
+      </li>
+    </ul>
+  </div>
+</body>
+`;

src/lib/paginator.js

@@ -40,6 +40,14 @@ function Paginator(props) {
   const [state, setState] = useState(() => init());
   const firstRun = useRef(true);
 
+  const gotoPage = useCallback(
+    page => {
+      const currentPage = Math.max(1, Math.min(page, state.totalPages));
+      props.setCurrentPage(currentPage);
+    },
+    [state.totalPages, props.pageLimit]
+  );
+
   useEffect(() => {
     gotoPage(1);
   }, [gotoPage]);
@@ -58,14 +66,6 @@ function Paginator(props) {
     setState({ ...state, totalRecords: props.totalRecords, totalPages });
   }, [props.totalRecords]);
 
-  const gotoPage = useCallback(
-    page => {
-      const currentPage = Math.max(1, Math.min(page, state.totalPages));
-      props.setCurrentPage(currentPage);
-    },
-    [state.totalPages, props.pageLimit]
-  );
-
   const handleClick = (page, evt) => {
     evt.preventDefault();
     gotoPage(page);
@@ -145,44 +145,34 @@ function Paginator(props) {
         if (page === LEFT_PAGE)
           return (
             <li className={props.pageItemClass} key={index}>
-              <a
-                className={props.pageLinkClass}
-                onClick={handleMoveLeft}
-                href="#"
-              >
+              <button className={props.pagePrevClass} onClick={handleMoveLeft}>
                 {props.pagePrevText}
-              </a>
+              </button>
             </li>
           );
 
         if (page === RIGHT_PAGE)
           return (
             <li className={props.pageItemClass} key={index}>
-              <a
-                className={props.pageLinkClass}
-                next
-                href="#"
-                onClick={handleMoveRight}
-              >
+              <button className={props.pageNextClass} onClick={handleMoveRight}>
                 {props.pageNextText}
-              </a>
+              </button>
             </li>
           );
 
         return (
           <li
             className={`${props.pageItemClass} ${
               currentPage === page ? props.pageActiveClass : null
-            }`}
+              }`}
             key={index}
           >
-            <a
+            <button
               className={props.pageLinkClass}
-              href="#"
               onClick={e => handleClick(page, e)}
             >
               {page}
-            </a>
+            </button>
           </li>
         );
       })}
@@ -196,14 +186,18 @@ Paginator.defaultProps = {
   pageItemClass: 'page-item',
   pageLinkClass: 'page-link',
   pageNextText: 'Next »',
-  pagePrevText: '« Prev'
+  pagePrevText: '« Prev',
+  pagePrevClass: 'page-link',
+  pageNextClass: 'page-link'
 };
 
 Paginator.propTypes = {
   currentPage: PropTypes.number,
   pageActiveClass: PropTypes.string,
-  pageNextText: PropTypes.oneOf([PropTypes.string, PropTypes.node]),
-  pagePrevText: PropTypes.oneOf([PropTypes.string, PropTypes.node]),
+  pageNextText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  pagePrevText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  pagePrevClass: PropTypes.string,
+  pageNextClass: PropTypes.string,
   pageContainerClass: PropTypes.string,
   pageItemClass: PropTypes.string,
   pageLimit: PropTypes.number,