test: Create unit tests for react components in packages/ui/components/card (CALCOM-617) (#10257)

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

packages/ui/components/card/Card.tsx

@@ -115,6 +115,7 @@ export interface BaseCardProps extends CVACardType {
   };
   mediaLink?: string;
   thumbnailUrl?: string;
+  structure?: string;
 }
 
 export function Card({
@@ -138,6 +139,7 @@ export function Card({
         cvaCardTypeByVariant({ variant, structure: "card" }),
         "bg-default border-subtle text-default flex flex-col justify-between rounded-md border"
       )}
+      data-testid="card-container"
       {...containerProps}>
       <div>
         {icon && icon}

packages/ui/components/card/card.test.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable playwright/missing-playwright-await */
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import { Card } from "./Card";
+
+const title = "Card Title";
+const description = "Card Description";
+
+describe("Tests for Card component", () => {
+  test("Should render the card with basic variant and image structure", () => {
+    const variant = "basic";
+
+    render(<Card title={title} description={description} variant={variant} structure="image" />);
+
+    const cardTitle = screen.getByText(title);
+    const cardDescription = screen.getByText(description);
+
+    expect(cardTitle).toBeInTheDocument();
+    expect(cardDescription).toBeInTheDocument();
+  });
+
+  test("Should render the card with ProfileCard variant and card structure", () => {
+    const variant = "ProfileCard";
+    const structure = "card";
+
+    render(<Card title={title} description={description} variant={variant} structure={structure} />);
+
+    const cardTitle = screen.getByText(title);
+    const cardDescription = screen.getByText(description);
+
+    expect(cardTitle).toBeInTheDocument();
+    expect(cardDescription).toBeInTheDocument();
+  });
+
+  test("Should render the card with SidebarCard variant and title structure", () => {
+    const variant = "SidebarCard";
+    const structure = "title";
+
+    render(<Card title={title} description={description} variant={variant} structure={structure} />);
+
+    const cardTitle = screen.getByText(title);
+    const cardDescription = screen.getByText(description);
+
+    expect(cardTitle).toBeInTheDocument();
+    expect(cardDescription).toBeInTheDocument();
+  });
+
+  test("Should render button click", () => {
+    render(
+      <Card title={title} description={description} variant="basic" actionButton={{ child: "Button" }} />
+    );
+
+    const buttonElement = screen.getByRole("button", { name: "Button" });
+
+    expect(buttonElement).toBeInTheDocument();
+  });
+
+  test("Should handle link click", () => {
+    render(
+      <Card
+        title={title}
+        description={description}
+        variant="basic"
+        learnMore={{
+          href: "http://localhost:3000/",
+          text: "Learn More",
+        }}
+        actionButton={{ child: "Button" }}
+      />
+    );
+
+    const linkElement = screen.getByRole("button", { name: "Button" });
+
+    fireEvent.click(linkElement);
+
+    expect(window.location.href).toBe("http://localhost:3000/");
+  });
+
+  test("Should render card with SidebarCard variant and learn more link", () => {
+    render(
+      <Card
+        title={title}
+        description={description}
+        variant="SidebarCard"
+        learnMore={{ href: "http://example.com", text: "Learn More" }}
+      />
+    );
+
+    const cardContainer = screen.getByTestId("card-container");
+    const titleElement = screen.getByText(title);
+    const descriptionElement = screen.getByText(description);
+    const learnMoreLink = screen.getByRole("link", { name: "Learn More" });
+
+    expect(cardContainer).toBeInTheDocument();
+    expect(titleElement).toBeInTheDocument();
+    expect(descriptionElement).toBeInTheDocument();
+    expect(learnMoreLink).toBeInTheDocument();
+  });
+});