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(); + }); +});