redo two with tests

ui/components/DataTable.tsx

@@ -12,7 +12,6 @@ import styled from "styled-components";
 import Button from "./Button";
 import Flex from "./Flex";
 import Icon, { IconType } from "./Icon";
-import Pagination from "./Pagination";
 import Spacer from "./Spacer";
 import Text from "./Text";
 
@@ -32,8 +31,8 @@ export interface Props {
   sortFields: string[];
   /** an optional list of string widths for each field/column. */
   widths?: string[];
-  /** enables bottom pagination bar. */
-  enablePagination?: any;
+  /** for passing pagination */
+  children?: any;
 }
 
 const EmptyRow = styled(TableRow)<{ colSpan: number }>`
@@ -68,7 +67,7 @@ function UnstyledDataTable({
   rows,
   sortFields,
   widths,
-  enablePagination,
+  children,
 }: Props) {
   const [sort, setSort] = React.useState(sortFields[0]);
   const [reverseSort, setReverseSort] = React.useState(false);
@@ -106,32 +105,15 @@ function UnstyledDataTable({
     );
   }
 
-  const r = [];
-  for (
-    let i = enablePagination ? enablePagination.current.start : 0;
-    i < enablePagination
-      ? enablePagination.current.start + enablePagination.current.pageTotal
-      : rows.length;
-    i++
-  ) {
-    if (sorted[i]) {
-      r.push(
-        <TableRow key={i}>
-          {_.map(fields, (f, index) => (
-            <TableCell style={widths && { width: widths[index] }} key={f.label}>
-              <Text>
-                {typeof f.value === "function"
-                  ? f.value(sorted[i])
-                  : sorted[i][f.value]}
-              </Text>
-            </TableCell>
-          ))}
-        </TableRow>
-      );
-    } else {
-      break;
-    }
-  }
+  const r = _.map(sorted, (r, i) => (
+    <TableRow key={i}>
+      {_.map(fields, (f, i) => (
+        <TableCell style={widths && { width: widths[i] }} key={f.label}>
+          <Text>{typeof f.value === "function" ? f.value(r) : r[f.value]}</Text>
+        </TableCell>
+      ))}
+    </TableRow>
+  ));
 
   return (
     <div className={className}>
@@ -155,7 +137,7 @@ function UnstyledDataTable({
           </TableHead>
           <TableBody>
             {r.length > 0 ? (
-              r.map((row) => row)
+              r
             ) : (
               <EmptyRow colSpan={fields.length}>
                 <TableCell colSpan={fields.length}>
@@ -168,17 +150,7 @@ function UnstyledDataTable({
       </TableContainer>
       {/* pagination row */}
       <Spacer padding="xs" />
-      {enablePagination && (
-        <Pagination
-          forward={enablePagination.forward}
-          skipForward={enablePagination.skipForward}
-          back={enablePagination.back}
-          skipBack={enablePagination.skipBack}
-          perPage={enablePagination.perPage}
-          perPageOptions={enablePagination.perPageOptions}
-          current={enablePagination.current}
-        />
-      )}
+      {children}
     </div>
   );
 }

ui/components/Pagination.tsx

@@ -11,30 +11,36 @@ export interface Props {
   /** CSS MUI Overrides or other styling. */
   className?: string;
   /** func for forward one page button */
-  forward: () => void;
+  onForward: () => void;
   /** func for skip to last page button */
-  skipForward: () => void;
+  onSkipForward: () => void;
   /** func for back one page button */
-  back: () => void;
+  onBack: () => void;
   /** func for skip to start button */
-  skipBack: () => void;
+  onSkipBack: () => void;
   /** onChange func for perPage select */
-  perPage: (value) => void;
+  onSelect: (value) => void;
   /** options for perPage select */
-  perPageOptions: number[];
-  /** pagination status */
-  current: { start: number; pageTotal: number; outOf: number };
+  perPageOptions?: number[];
+  /** starting index */
+  index: number;
+  /** total rows */
+  length: number;
+  /** all objects */
+  totalObjects: number;
 }
 
 function unstyledPagination({
   className,
-  forward,
-  skipForward,
-  back,
-  skipBack,
-  perPage,
-  perPageOptions,
-  current,
+  onForward,
+  onSkipForward,
+  onBack,
+  onSkipBack,
+  onSelect,
+  perPageOptions = [25, 50, 75, 100],
+  index,
+  length,
+  totalObjects,
 }: Props) {
   return (
     <Flex wide align end className={className}>
@@ -47,7 +53,7 @@ function unstyledPagination({
             variant="outlined"
             defaultValue={perPageOptions[0]}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-              perPage(e.target.value);
+              onSelect(e.target.value);
             }}
           >
             {perPageOptions.map((option, index) => {
@@ -62,44 +68,43 @@ function unstyledPagination({
       </FormControl>
       <Spacer padding="base" />
       <Text>
-        {current.start + 1} - {current.start + current.pageTotal} out of{" "}
-        {current.outOf}
+        {index + 1} - {index + length} out of {totalObjects}
       </Text>
       <Spacer padding="base" />
       <Flex>
         <Button
           color="inherit"
           variant="text"
           aria-label="skip to first page"
-          disabled={current.start === 0}
-          onClick={() => skipBack()}
+          disabled={index === 0}
+          onClick={() => onSkipBack()}
         >
           <Icon type={IconType.SkipPreviousIcon} size="medium" />
         </Button>
         <Button
           color="inherit"
           variant="text"
           aria-label="back one page"
-          disabled={current.start === 0}
-          onClick={() => back()}
+          disabled={index === 0}
+          onClick={() => onBack()}
         >
           <Icon type={IconType.NavigateBeforeIcon} size="medium" />
         </Button>
         <Button
           color="inherit"
           variant="text"
           aria-label="forward one page"
-          disabled={current.start + current.pageTotal >= current.outOf}
-          onClick={() => forward()}
+          disabled={index + length >= totalObjects}
+          onClick={() => onForward()}
         >
           <Icon type={IconType.NavigateNextIcon} size="medium" />
         </Button>
         <Button
           color="inherit"
           variant="text"
           aria-label="skip to last page"
-          disabled={current.start + current.pageTotal >= current.outOf}
-          onClick={() => skipForward()}
+          disabled={index + length >= totalObjects}
+          onClick={() => onSkipForward()}
         >
           <Icon type={IconType.SkipNextIcon} size="medium" />
         </Button>

ui/components/__tests__/Pagination.test.tsx

@@ -0,0 +1,91 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import "jest-styled-components";
+import React from "react";
+import { withTheme } from "../../lib/test-utils";
+import Pagination from "../Pagination";
+
+describe("Pagination", () => {
+  const onForward = jest.fn(() => "");
+  const onSkipForward = jest.fn(() => "");
+  const onBack = jest.fn(() => "");
+  const onSkipBack = jest.fn(() => "");
+  const onSelect = jest.fn(() => "");
+  it("has functioning navigation buttons and display text", () => {
+    render(
+      withTheme(
+        <Pagination
+          onForward={onForward}
+          onSkipForward={onSkipForward}
+          onBack={onBack}
+          onSkipBack={onSkipBack}
+          onSelect={onSelect}
+          index={5}
+          length={1}
+          totalObjects={10}
+        />
+      )
+    );
+    const back = screen.getByLabelText("back one page");
+    const skipBack = screen.getByLabelText("skip to first page");
+    const forward = screen.getByLabelText("forward one page");
+    const skipForward = screen.getByLabelText("skip to last page");
+    const displayText = screen.getByText(/6 - 6 out of 10/);
+    fireEvent.click(forward);
+    expect(onForward).toHaveBeenCalledTimes(1);
+    fireEvent.click(skipForward);
+    expect(onSkipForward).toHaveBeenCalledTimes(1);
+    fireEvent.click(skipBack);
+    expect(onSkipBack).toHaveBeenCalledTimes(1);
+    fireEvent.click(back);
+    expect(onBack).toHaveBeenCalledTimes(1);
+    expect(displayText).toBeTruthy();
+  });
+  it("disables buttons based on page location", () => {
+    render(
+      withTheme(
+        <Pagination
+          onForward={onForward}
+          onSkipForward={onSkipForward}
+          onBack={onBack}
+          onSkipBack={onSkipBack}
+          onSelect={onSelect}
+          index={0}
+          length={1}
+          totalObjects={3}
+        />
+      )
+    );
+    const back = screen.getByLabelText("back one page");
+    const skipBack = screen.getByLabelText("skip to first page");
+    const forward = screen.getByLabelText("forward one page");
+    const skipForward = screen.getByLabelText("skip to last page");
+    expect(back.hasAttribute("disabled")).toBeTruthy();
+    expect(skipBack.hasAttribute("disabled")).toBeTruthy();
+    expect(forward.hasAttribute("disabled")).toBeFalsy();
+    expect(skipForward.hasAttribute("disabled")).toBeFalsy();
+  });
+  it("has a functioning select", () => {
+    render(
+      withTheme(
+        <Pagination
+          onForward={onForward}
+          onSkipForward={onSkipForward}
+          onBack={onBack}
+          onSkipBack={onSkipBack}
+          onSelect={onSelect}
+          index={0}
+          length={1}
+          totalObjects={3}
+        />
+      )
+    );
+    let select;
+    screen.getAllByRole("button").forEach((button) => {
+      if (button.getAttribute("aria-haspopup")) select = button;
+    });
+    fireEvent.mouseDown(select);
+    const listbox = within(screen.getByRole("listbox"));
+    fireEvent.click(listbox.getByText("50"));
+    expect(select.innerHTML).toEqual("50");
+  });
+});