chore: add more tests and catch bugs

Parkreiner · Parkreiner · commit 446adc2d681c · 2023-11-07T23:34:12.000Z
diff --git a/site/src/components/PaginationWidget/PaginationNavButton.tsx b/site/src/components/PaginationWidget/PaginationNavButton.tsx
@@ -1,76 +1,27 @@
-import {
-  type PropsWithChildren,
-  type ReactNode,
-  useEffect,
-  useState,
-} from "react";
+import { type ReactNode, useEffect, useState } from "react";
 
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import { useTheme } from "@emotion/react";
 
-type NavProps = {
-  currentPage: number;
-  onPageChange: (newPage: number) => void;
-};
-
-export function LeftNavButton({ currentPage, onPageChange }: NavProps) {
-  const isFirstPage = currentPage <= 1;
-
-  return (
-    <BaseNavButton
-      disabledMessage="You are already on the first page"
-      disabled={isFirstPage}
-      aria-label="Previous page"
-      onClick={() => {
-        if (!isFirstPage) {
-          onPageChange(currentPage - 1);
-        }
-      }}
-    >
-      <KeyboardArrowLeft />
-    </BaseNavButton>
-  );
-}
-
-export function RightNavButton({ currentPage, onPageChange }: NavProps) {
-  const isLastPage = currentPage <= 1;
-
-  return (
-    <BaseNavButton
-      disabledMessage="You're already on the last page"
-      disabled={isLastPage}
-      aria-label="Previous page"
-      onClick={() => {
-        if (!isLastPage) {
-          onPageChange(currentPage + 1);
-        }
-      }}
-    >
-      <KeyboardArrowRight />
-    </BaseNavButton>
-  );
-}
-
-type BaseButtonProps = PropsWithChildren<{
+type PaginationNavButtonProps = {
+  children: ReactNode;
   disabled: boolean;
   disabledMessage: ReactNode;
   onClick: () => void;
   "aria-label": string;
 
   disabledMessageTimeout?: number;
-}>;
+};
 
-function BaseNavButton({
+export function PaginationNavButton({
   children,
   onClick,
   disabled,
   disabledMessage,
   "aria-label": ariaLabel,
   disabledMessageTimeout = 3000,
-}: BaseButtonProps) {
+}: PaginationNavButtonProps) {
   const theme = useTheme();
   const [showDisabledMessage, setShowDisabledMessage] = useState(false);
 
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx
@@ -0,0 +1,61 @@
+import { screen } from "@testing-library/react";
+import {
+  PaginationWidgetBase,
+  PaginationWidgetBaseProps,
+} from "./PaginationWidgetBase";
+import { renderWithAuth } from "testHelpers/renderHelpers";
+import userEvent from "@testing-library/user-event";
+
+type SampleProps = Omit<PaginationWidgetBaseProps, "onPageChange">;
+const sampleProps: SampleProps[] = [
+  { currentPage: 1, pageSize: 5, totalRecords: 6 },
+  { currentPage: 1, pageSize: 50, totalRecords: 200 },
+  { currentPage: 2, pageSize: 20, totalRecords: 3000 },
+];
+
+describe(PaginationWidgetBase.name, () => {
+  it("Should have its previous button be aria-disabled while on page 1", async () => {
+    for (const props of sampleProps) {
+      const onPageChange = jest.fn();
+
+      const { unmount } = renderWithAuth(
+        <PaginationWidgetBase
+          {...props}
+          currentPage={1}
+          onPageChange={onPageChange}
+        />,
+      );
+
+      const button = await screen.findByLabelText("Previous page");
+      expect(button).not.toBeDisabled();
+      expect(button).toHaveAttribute("aria-disabled", "true");
+
+      await userEvent.click(button);
+      expect(onPageChange).not.toHaveBeenCalled();
+      unmount();
+    }
+  });
+
+  it("Should have its next button be aria-disabled while on last page", async () => {
+    for (const props of sampleProps) {
+      const onPageChange = jest.fn();
+      const lastPage = Math.ceil(props.totalRecords / props.pageSize);
+
+      const { unmount } = renderWithAuth(
+        <PaginationWidgetBase
+          {...props}
+          currentPage={lastPage}
+          onPageChange={onPageChange}
+        />,
+      );
+
+      const button = await screen.findByLabelText("Next page");
+      expect(button).not.toBeDisabled();
+      expect(button).toHaveAttribute("aria-disabled", "true");
+
+      await userEvent.click(button);
+      expect(onPageChange).not.toHaveBeenCalled();
+      unmount();
+    }
+  });
+});
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
@@ -3,7 +3,9 @@ import { useTheme } from "@emotion/react";
 
 import { PlaceholderPageButton, NumberedPageButton } from "./PageButtons";
 import { buildPagedList } from "./utils";
-import { LeftNavButton, RightNavButton } from "./PaginationNavButtons";
+import { PaginationNavButton } from "./PaginationNavButton";
+import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 
 export type PaginationWidgetBaseProps = {
   currentPage: number;
@@ -26,6 +28,9 @@ export const PaginationWidgetBase = ({
     return null;
   }
 
+  const onFirstPage = currentPage <= 1;
+  const onLastPage = currentPage >= totalPages;
+
   return (
     <div
       css={{
@@ -37,7 +42,18 @@ export const PaginationWidgetBase = ({
         columnGap: "6px",
       }}
     >
-      <LeftNavButton currentPage={currentPage} onPageChange={onPageChange} />
+      <PaginationNavButton
+        disabledMessage="You are already on the first page"
+        disabled={onFirstPage}
+        aria-label="Previous page"
+        onClick={() => {
+          if (!onFirstPage) {
+            onPageChange(currentPage - 1);
+          }
+        }}
+      >
+        <KeyboardArrowLeft />
+      </PaginationNavButton>
 
       {isMobile ? (
         <NumberedPageButton
@@ -53,7 +69,18 @@ export const PaginationWidgetBase = ({
         />
       )}
 
-      <RightNavButton currentPage={currentPage} onPageChange={onPageChange} />
+      <PaginationNavButton
+        disabledMessage="You're already on the last page"
+        disabled={onLastPage}
+        aria-label="Next page"
+        onClick={() => {
+          if (!onLastPage) {
+            onPageChange(currentPage + 1);
+          }
+        }}
+      >
+        <KeyboardArrowRight />
+      </PaginationNavButton>
     </div>
   );
 };
