Refactor Pagination component to improve clarity and maintainability

package.json

@@ -37,11 +37,11 @@
     "@openstax/ts-utils": "^1.32.5",
     "@playwright/test": "^1.25.0",
     "@testing-library/dom": "^10.4.0",
-    "@types/dompurify": "^3.0.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
+    "@types/dompurify": "^3.0.0",
     "@types/jest": "^28.1.4",
     "@types/node": "^18.7.5",
     "@types/node-fetch": "^2.6.2",

src/components/HelpMenu/chatController.ts

@@ -143,6 +143,7 @@ export const useChatController = (
     popup.current = window.open(path, "_blank", options);
 
     if (!popup.current) return;
+    const newWindow = popup.current;
 
     /**
      * Handles messages from the popup window.
@@ -152,7 +153,7 @@ export const useChatController = (
       const { source, data: { type } } = e;
 
       // Security: only process messages from our popup
-      if (source !== popup.current) return;
+      if (source !== newWindow) return;
 
       if (type === "ready") init();
     };
@@ -162,7 +163,7 @@ export const useChatController = (
      * Cleans up event listeners when closed.
      */
     const checkClosed = setInterval(() => {
-      if (popup.current?.closed) {
+      if (newWindow.closed) {
         window.removeEventListener("message", handleMessage, false);
         popup.current = null;
         clearInterval(checkClosed);

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);