diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index a28c93ea60..d918154ea6 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/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}>
{icon && icon}
diff --git a/packages/ui/components/card/card.test.tsx b/packages/ui/components/card/card.test.tsx
new file mode 100644
index 0000000000..c7ffc3986a
--- /dev/null
+++ b/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();
+
+ 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();
+
+ 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();
+
+ const cardTitle = screen.getByText(title);
+ const cardDescription = screen.getByText(description);
+
+ expect(cardTitle).toBeInTheDocument();
+ expect(cardDescription).toBeInTheDocument();
+ });
+
+ test("Should render button click", () => {
+ render(
+
+ );
+
+ const buttonElement = screen.getByRole("button", { name: "Button" });
+
+ expect(buttonElement).toBeInTheDocument();
+ });
+
+ test("Should handle link click", () => {
+ render(
+
+ );
+
+ 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(
+
+ );
+
+ 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();
+ });
+});