test: Create unit tests for react components in packages/ui/components/dialog (#10273)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>

packages/ui/components/dialog/Dialog.tsx

@@ -93,7 +93,9 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
           {type === "creation" && (
             <div>
               <DialogHeader title={title} subtitle={props.description} />
-              <div className="flex flex-col">{children}</div>
+              <div data-testid="dialog-creation" className="flex flex-col">
+                {children}
+              </div>
             </div>
           )}
           {type === "confirmation" && (
@@ -105,7 +107,9 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
               )}
               <div className="w-full">
                 <DialogHeader title={title} subtitle={props.description} />
-                <div className="flex  space-y-6">{children}</div>
+                <div data-testid="dialog-confirmation" className="flex  space-y-6">
+                  {children}
+                </div>
               </div>
             </div>
           )}
@@ -126,7 +130,10 @@ export function DialogHeader(props: DialogHeaderProps) {
 
   return (
     <div className="mb-4">
-      <h3 className="leading-20 text-semibold font-cal text-emphasis pb-1 text-xl" id="modal-title">
+      <h3
+        data-testid="dialog-title"
+        className="leading-20 text-semibold font-cal text-emphasis pb-1 text-xl"
+        id="modal-title">
         {props.title}
       </h3>
       {props.subtitle && <div className="text-subtle text-sm">{props.subtitle}</div>}
@@ -144,7 +151,10 @@ export function DialogFooter(props: {
     <div className={classNames("bg-default sticky bottom-0", props.className)}>
       {props.showDivider && (
         // TODO: the -mx-8 is causing overflow in the dialog buttons
-        <hr className={classNames("border-subtle -mx-8", props.customDividerClassNames)} />
+        <hr
+          data-testid="divider"
+          className={classNames("border-subtle -mx-8", props.customDividerClassNames)}
+        />
       )}
       <div
         className={classNames(

packages/ui/components/dialog/dialog.test.tsx

@@ -0,0 +1,136 @@
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "./Dialog";
+
+vi.mock("next/router", () => ({
+  useRouter() {
+    return {
+      route: "/",
+      pathname: "",
+      query: "",
+      asPath: "",
+      push: vi.fn(),
+      events: {
+        on: vi.fn(),
+        off: vi.fn(),
+      },
+      beforePopState: vi.fn(() => null),
+      prefetch: vi.fn(() => null),
+    };
+  },
+}));
+
+const title = "Dialog Header";
+const subtitle = "Dialog Subtitle";
+
+const DialogComponent = (props: {
+  open: boolean;
+  title?: string;
+  subtitle?: string;
+  type?: "creation" | "confirmation";
+  showDivider?: boolean;
+  color?: "primary" | "secondary" | "minimal" | "destructive";
+}) => {
+  return (
+    <Dialog open={props.open}>
+      <DialogContent type={props.type}>
+        <div className="flex flex-row justify-center align-middle ">
+          <DialogHeader title={props.title} subtitle={props.subtitle} />
+          <p>Dialog Content</p>
+          <DialogFooter showDivider={props.showDivider}>
+            <DialogClose color={props.color} />
+            <p>Dialog Footer</p>
+          </DialogFooter>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+describe("Tests for Dialog component", () => {
+  test("Should render Dialog with header", () => {
+    render(<DialogComponent open title={title} />);
+
+    expect(screen.queryByText("Dialog Header")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Content")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Footer")).toBeInTheDocument();
+  });
+
+  test("Should render Dialog without header", () => {
+    render(<DialogComponent open />);
+
+    expect(screen.queryByTestId("dialog-title")).toBeNull();
+    expect(screen.getByText("Dialog Content")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Footer")).toBeInTheDocument();
+  });
+
+  test("Should render Dialog with header and subtitle", () => {
+    render(<DialogComponent open title={title} subtitle={subtitle} />);
+
+    expect(screen.queryByText("Dialog Header")).toBeInTheDocument();
+    expect(screen.queryByText("Dialog Subtitle")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Content")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Footer")).toBeInTheDocument();
+  });
+
+  test("Should render Dialog with default type creation", () => {
+    render(<DialogComponent open />);
+
+    expect(screen.getByTestId("dialog-creation")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Content")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Footer")).toBeInTheDocument();
+  });
+
+  test("Should render Dialog with type creation", () => {
+    render(<DialogComponent open type="creation" />);
+
+    expect(screen.getByTestId("dialog-creation")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Content")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Footer")).toBeInTheDocument();
+  });
+
+  test("Should render Dialog with type confirmation", () => {
+    render(<DialogComponent open type="confirmation" />);
+
+    expect(screen.getByTestId("dialog-confirmation")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Content")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Footer")).toBeInTheDocument();
+  });
+
+  test("Should open Dialog", async () => {
+    const { rerender } = render(<DialogComponent open={false} />);
+
+    expect(screen.queryByText("Dialog Content")).not.toBeInTheDocument();
+    expect(screen.queryByText("Dialog Footer")).not.toBeInTheDocument();
+
+    rerender(<DialogComponent open />);
+
+    expect(screen.getByText("Dialog Content")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Footer")).toBeInTheDocument();
+  });
+
+  test("Should close Dialog", async () => {
+    const { rerender } = render(<DialogComponent open />);
+
+    expect(screen.getByText("Dialog Content")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Footer")).toBeInTheDocument();
+
+    rerender(<DialogComponent open={false} />);
+
+    expect(screen.queryByText("Dialog Content")).not.toBeInTheDocument();
+    expect(screen.queryByText("Dialog Footer")).not.toBeInTheDocument();
+  });
+
+  test("Should use color from props in CloseDialog", async () => {
+    render(<DialogComponent open color="destructive" />);
+    const closeBtn = screen.getByText("Close");
+    expect(closeBtn.classList.toString()).toContain("hover:text-red-700");
+  });
+
+  test("Should show divider with showDivider", async () => {
+    render(<DialogComponent open showDivider />);
+
+    expect(screen.getByTestId("divider")).toBeInTheDocument();
+  });
+});