Refactor Pagination component to improve clarity and maintainability

src/components/Pagination.spec.tsx → src/components/Pagination/Pagination.spec.tsx

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
-import { Pagination, LinkForPage } from "./Pagination";
+import { Pagination, LinkForPage } from ".";
+import { range } from './utils';
 
 describe('Pagination', () => {
   let root: HTMLElement;
@@ -10,11 +11,11 @@ describe('Pagination', () => {
     document.body.append(root);
   });
 
-  it('matches snapshot', () => {
+  it('matches snapshot; default href is "#"', () => {
     render(<Pagination
       currentPage={1} totalPages={10}
       Page={({ page, current }) =>
-        <LinkForPage page={page} current={current} href="#" />
+        <LinkForPage page={page} current={current} href="" />
       }
     />, {container: root});
     expect(document.body).toMatchSnapshot();
@@ -30,6 +31,17 @@ describe('Pagination', () => {
     expect(document.body).toMatchSnapshot();
   });
 
+  it('Shows paginationinfo', () => {
+    render(<Pagination
+      currentPage={5} totalPages={15} showFromEnd={1} showFromCurrent={1}
+      pageSize={5} totalItems={75}
+      Page={({ page, current }) =>
+        <LinkForPage page={page} current={current} href="#" />
+      }
+    />, {container: root});
+    expect(document.querySelector('.pagination-info')?.textContent).toBe('21-25 of 75');
+  });
+
   it('grows to min size', () => {
     render(<Pagination
       currentPage={1} totalPages={10} showFromEnd={1} showFromCurrent={1}
@@ -59,4 +71,20 @@ describe('Pagination', () => {
     />, {container: root});
     expect(document.body).toMatchSnapshot();
   });
+
+  // This is a special case in adjustRangesToMeetMinimum
+  it('expands middle range to the left', () => {
+    render(<Pagination
+      currentPage={4} totalPages={10}
+      Page={({ page, current }) =>
+        <LinkForPage page={page} current={current} href="#" />
+      }
+    />, {container: root});
+  });
+});
+
+describe('Pagination/utils', () => {
+  it('bounds-checks range', () => {
+    expect(range(10, 5)).toEqual([]);
+  });
 });

src/components/Pagination.stories.tsx → src/components/Pagination/Pagination.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Pagination, LinkForPage } from "./Pagination";
+import { Pagination, LinkForPage } from ".";
 
 export const Examples = () => {
   const [currentPage, setCurrentPage] = React.useState(1);