refactor: update TablePaginationControls to be used outside of TableP…

…agination
canonical · Aug 28, 2024 · d13e8a2 · d13e8a2
1 parent 9546e5d
commit d13e8a2
Show file tree

Hide file tree

Showing 8 changed files with 238 additions and 48 deletions.
diff --git a/src/components/TablePagination/TablePagination.scss b/src/components/TablePagination/TablePagination.scss
@@ -18,7 +18,7 @@
   }
 
   .back {
-    margin: 0 $spv--large;
+    margin: 0 0 0 $spv--large;
 
     .p-icon--chevron-down {
       rotate: 90deg;
@@ -34,7 +34,7 @@
   }
 
   .pagination-input {
-    margin-right: $spv--small;
+    margin: 0 $spv--small 0 $spv--large;
     min-width: 0;
     width: 3rem;
   }

diff --git a/src/components/TablePagination/TablePagination.stories.tsx b/src/components/TablePagination/TablePagination.stories.tsx
@@ -3,6 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import TablePagination from "./TablePagination";
 import MainTable from "../MainTable";
+import TablePaginationControls from "./TablePaginationControls";
 
 const meta: Meta<typeof TablePagination> = {
   component: TablePagination,
@@ -393,3 +394,28 @@ export const RenderBelow: Story = {
 
   name: "RenderBelow",
 };
+
+/** The table pagination controls can be used without wrapping MainTable by
+ * using the `TablePaginationControls` component.
+ */
+export const ControlsOnly: Story = {
+  render: () => {
+    return (
+      <TablePaginationControls
+        currentPage={1}
+        itemName="row"
+        nextButtonProps={{ disabled: false }}
+        onInputPageChange={console.log}
+        onNextPage={console.log}
+        onPageSizeChange={console.log}
+        onPreviousPage={console.log}
+        pageLimits={[10, 25, 50]}
+        pageSize={20}
+        previousButtonProps={{ disabled: false }}
+        showPageInput
+        totalItems={100}
+        visibleCount={10}
+      />
+    );
+  },
+};
diff --git a/src/components/TablePagination/TablePagination.tsx b/src/components/TablePagination/TablePagination.tsx
@@ -17,7 +17,7 @@ export type BasePaginationProps = {
   /**
    * list of data elements to be paginated. This component is un-opinionated about
    * the structure of the data but it should be identical to the data structure
-   * reuiqred by the child table component
+   * required by the child table component
    */
   data: unknown[];
   /**
@@ -192,7 +192,7 @@ const TablePagination = (props: Props) => {
   const controls = (
     <TablePaginationControls
       {...divProps}
-      data={controlData}
+      visibleCount={controlData.length}
       className={className}
       itemName={itemName}
       description={description}

diff --git a/src/components/TablePagination/TablePaginationControls/TablePaginationControls.test.tsx b/src/components/TablePagination/TablePaginationControls/TablePaginationControls.test.tsx
@@ -3,21 +3,15 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 
 import TablePaginationControls from "./TablePaginationControls";
-
-const dummyData = [
-  { id: "row-1" },
-  { id: "row-2" },
-  { id: "row-3" },
-  { id: "row-4" },
-  { id: "row-5" },
-];
+import userEvent from "@testing-library/user-event";
+import { Label } from "./TablePaginationControls";
 
 describe("<TablePaginationControls />", () => {
   // snapshot tests
   it("renders table pagination controls and matches the snapshot", () => {
     render(
       <TablePaginationControls
-        data={dummyData}
+        visibleCount={5}
         itemName="item"
         pageLimits={[20, 50, 100]}
         totalItems={100}
@@ -31,4 +25,133 @@ describe("<TablePaginationControls />", () => {
     expect(screen.getAllByRole("button")).toMatchSnapshot();
     expect(screen.getByRole("spinbutton")).toMatchSnapshot();
   });
+
+  it("can go to the next page", async () => {
+    const onPageChange = jest.fn();
+    const onNextPage = jest.fn();
+    render(
+      <TablePaginationControls
+        visibleCount={5}
+        itemName="item"
+        pageLimits={[20, 50, 100]}
+        totalItems={100}
+        currentPage={2}
+        pageSize={20}
+        onPageChange={onPageChange}
+        onNextPage={onNextPage}
+        onPageSizeChange={jest.fn()}
+      />
+    );
+    await userEvent.click(
+      screen.getByRole("button", { name: Label.NEXT_PAGE })
+    );
+    expect(onPageChange).toHaveBeenCalledWith(3);
+    expect(onNextPage).toHaveBeenCalledWith(3);
+  });
+
+  it("can go to the previous page", async () => {
+    const onPageChange = jest.fn();
+    const onPreviousPage = jest.fn();
+    render(
+      <TablePaginationControls
+        visibleCount={5}
+        itemName="item"
+        pageLimits={[20, 50, 100]}
+        totalItems={100}
+        currentPage={2}
+        pageSize={20}
+        onPageChange={onPageChange}
+        onPreviousPage={onPreviousPage}
+        onPageSizeChange={jest.fn()}
+      />
+    );
+    await userEvent.click(
+      screen.getByRole("button", { name: Label.PREVIOUS_PAGE })
+    );
+    expect(onPageChange).toHaveBeenCalledWith(1);
+    expect(onPreviousPage).toHaveBeenCalledWith(1);
+  });
+
+  it("can set the page using the input", async () => {
+    const onInputPageChange = jest.fn();
+    render(
+      <TablePaginationControls
+        visibleCount={5}
+        itemName="item"
+        pageLimits={[20, 50, 100]}
+        totalItems={100}
+        currentPage={2}
+        pageSize={20}
+        onPageChange={jest.fn()}
+        onPreviousPage={jest.fn()}
+        onPageSizeChange={jest.fn()}
+        onInputPageChange={onInputPageChange}
+      />
+    );
+    await userEvent.type(
+      screen.getByRole("spinbutton", { name: Label.PAGE_NUMBER }),
+      "1"
+    );
+    expect(onInputPageChange).toHaveBeenCalledWith(21);
+  });
+
+  it("can hide the page input", async () => {
+    render(
+      <TablePaginationControls
+        visibleCount={5}
+        itemName="item"
+        pageLimits={[20, 50, 100]}
+        totalItems={100}
+        currentPage={2}
+        pageSize={20}
+        onPageChange={jest.fn()}
+        onPreviousPage={jest.fn()}
+        onPageSizeChange={jest.fn()}
+        showPageInput={false}
+      />
+    );
+    expect(
+      screen.queryByRole("spinbutton", { name: Label.PAGE_NUMBER })
+    ).not.toBeInTheDocument();
+  });
+
+  it("can display the description", async () => {
+    render(
+      <TablePaginationControls
+        visibleCount={5}
+        itemName="item"
+        pageLimits={[20, 50, 100]}
+        totalItems={100}
+        currentPage={2}
+        pageSize={20}
+        onPageChange={jest.fn()}
+        onPreviousPage={jest.fn()}
+        onPageSizeChange={jest.fn()}
+        showPageInput={false}
+      />
+    );
+    expect(document.querySelector(".description")?.textContent).toBe(
+      "Showing 5 out of 100 items"
+    );
+  });
+
+  it("can hide the description", async () => {
+    render(
+      <TablePaginationControls
+        visibleCount={5}
+        itemName="item"
+        pageLimits={[20, 50, 100]}
+        totalItems={100}
+        currentPage={2}
+        pageSize={20}
+        onPageChange={jest.fn()}
+        onPreviousPage={jest.fn()}
+        onPageSizeChange={jest.fn()}
+        displayDescription={false}
+      />
+    );
+    expect(
+      document.querySelector(".description")?.textContent
+    ).not.toBeUndefined();
+  });
 });