test: Create unit tests for react components in packages/ui/components/alert (tests-alert-component) (#9897)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

package.json

@@ -77,6 +77,7 @@
     "@deploysentinel/playwright": "^0.3.3",
     "@playwright/test": "^1.31.2",
     "@snaplet/copycat": "^0.3.0",
+    "@testing-library/jest-dom": "^5.16.5",
     "@types/dompurify": "^2.4.0",
     "c8": "^7.13.0",
     "dotenv-checker": "^1.1.5",

packages/ui/components/alert/Alert.tsx

@@ -23,6 +23,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
 
   return (
     <div
+      data-testid="alert"
       ref={ref}
       className={classNames(
         "rounded-md  p-3",
@@ -37,6 +38,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
         {CustomIcon ? (
           <div className="flex-shrink-0">
             <CustomIcon
+              data-testid="custom-icon"
               aria-hidden="true"
               className={classNames(`h-5 w-5`, iconClassName, customIconColor ?? "text-default")}
             />
@@ -45,30 +47,35 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
           <div className="flex-shrink-0">
             {severity === "error" && (
               <XCircle
+                data-testid="x-circle"
                 className={classNames("h-5 w-5 text-red-900 dark:text-red-200", iconClassName)}
                 aria-hidden="true"
               />
             )}
             {severity === "warning" && (
               <AlertTriangle
+                data-testid="alert-triangle"
                 className={classNames("text-attention h-5 w-5 dark:text-orange-200", iconClassName)}
                 aria-hidden="true"
               />
             )}
             {severity === "info" && (
               <Info
+                data-testid="info"
                 className={classNames("h-5 w-5 text-blue-900 dark:text-blue-200", iconClassName)}
                 aria-hidden="true"
               />
             )}
             {severity === "neutral" && (
               <Info
+                data-testid="neutral"
                 className={classNames("text-default h-5 w-5 fill-transparent", iconClassName)}
                 aria-hidden="true"
               />
             )}
             {severity === "success" && (
               <CheckCircle2
+                data-testid="check-circle-2"
                 className={classNames("fill-muted text-default h-5 w-5", iconClassName)}
                 aria-hidden="true"
               />

packages/ui/components/alert/alert.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from "@testing-library/react";
+
+import { Alert } from "./Alert";
+
+describe("Tests for Alert component", () => {
+  test("Should render text", () => {
+    render(<Alert severity="info" title="I'm an Alert!" message="Hello World" />);
+    expect(screen.getByText("I'm an Alert!")).toBeInTheDocument();
+    expect(screen.getByText("Hello World")).toBeInTheDocument();
+  });
+
+  test("Should render actions", () => {
+    render(<Alert severity="info" actions={<button>Click Me</button>} />);
+    expect(screen.getByText("Click Me")).toBeInTheDocument();
+  });
+
+  test("Should render corresponding icon: error", () => {
+    render(<Alert severity="error" />);
+    expect(screen.getByTestId("x-circle")).toBeInTheDocument();
+  });
+
+  test("Should render corresponding icon: warning", () => {
+    render(<Alert severity="warning" />);
+    expect(screen.getByTestId("alert-triangle")).toBeInTheDocument();
+  });
+
+  test("Should render corresponding icon: info", () => {
+    render(<Alert severity="info" />);
+    expect(screen.getByTestId("info")).toBeInTheDocument();
+  });
+
+  test("Should render corresponding icon: neutral", () => {
+    render(<Alert severity="neutral" />);
+    expect(screen.getByTestId("neutral")).toBeInTheDocument();
+  });
+
+  test("Should render corresponding icon: success", () => {
+    render(<Alert severity="success" />);
+    expect(screen.getByTestId("check-circle-2")).toBeInTheDocument();
+  });
+});

packages/ui/components/test-setup.ts

@@ -0,0 +1,9 @@
+import matchers from "@testing-library/jest-dom/matchers";
+import { cleanup } from "@testing-library/react";
+import { afterEach, expect } from "vitest";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});

vitest.workspace.ts

@@ -27,6 +27,15 @@ const workspaces = packagedEmbedTestsOnly
           setupFiles: ["packages/app-store/closecom/test/globals.ts"],
         },
       },
+      {
+        test: {
+          globals: true,
+          name: "ui/components",
+          include: ["packages/ui/components/**/*.{test,spec}.{ts,js,tsx}"],
+          environment: "jsdom",
+          setupFiles: ["packages/ui/components/test-setup.ts"],
+        },
+      },
     ];
 
 export default defineWorkspace(workspaces);