CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update NumberCard component

Browse Source
This commit is contained in:
adilallo
2026-02-03 21:01:55 -07:00
parent ecaef5d797
commit 139780d867
8 changed files with 424 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/NumberedCard.test.jsx → tests/unit/NumberCard.test.jsx
+107 -49
View File
@@ -1,49 +1,49 @@
import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import NumberedCard from "../../app/components/NumberedCard";
import NumberCard from "../../app/components/NumberCard";
describe("NumberedCard Component", () => {
describe("NumberCard Component", () => {
const defaultProps = {
number: 1,
text: "Test Card Text",
};
it("renders numbered card with all required information", () => {
render(<NumberedCard {...defaultProps} />);
it("renders number card with all required information", () => {
render(<NumberCard {...defaultProps} />);
expect(screen.getByText("1")).toBeInTheDocument();
expect(screen.getByText("Test Card Text")).toBeInTheDocument();
});
it("renders with different numbers", () => {
const { rerender } = render(<NumberedCard {...defaultProps} number={42} />);
const { rerender } = render(<NumberCard {...defaultProps} number={42} />);
expect(screen.getByText("42")).toBeInTheDocument();
rerender(<NumberedCard {...defaultProps} number={999} />);
rerender(<NumberCard {...defaultProps} number={999} />);
expect(screen.getByText("999")).toBeInTheDocument();
});
it("renders with different text content", () => {
const { rerender } = render(
<NumberedCard {...defaultProps} text="Different Text" />,
<NumberCard {...defaultProps} text="Different Text" />,
);
expect(screen.getByText("Different Text")).toBeInTheDocument();
rerender(<NumberedCard {...defaultProps} text="Another Text" />);
rerender(<NumberCard {...defaultProps} text="Another Text" />);
expect(screen.getByText("Another Text")).toBeInTheDocument();
});
it("applies proper responsive layout classes", () => {
render(<NumberedCard {...defaultProps} />);
it("applies proper responsive layout classes when size is not specified", () => {
render(<NumberCard {...defaultProps} />);
const card = screen
.getByText("Test Card Text")
.closest("div").parentElement;
expect(card).toHaveClass("flex", "flex-col", "sm:flex-row", "lg:flex-row");
expect(card).toHaveClass("flex", "flex-col", "sm:flex-row", "lg:flex-col");
});
it("applies proper responsive spacing", () => {
render(<NumberedCard {...defaultProps} />);
it("applies proper responsive spacing when size is not specified", () => {
render(<NumberCard {...defaultProps} />);
const card = screen
.getByText("Test Card Text")
@@ -51,17 +51,17 @@ describe("NumberedCard Component", () => {
expect(card).toHaveClass("p-5", "sm:p-8", "lg:p-8");
});
it("applies proper responsive gap", () => {
render(<NumberedCard {...defaultProps} />);
it("applies proper responsive gap when size is not specified", () => {
render(<NumberCard {...defaultProps} />);
const card = screen
.getByText("Test Card Text")
.closest("div").parentElement;
expect(card).toHaveClass("gap-4", "sm:gap-8", "lg:gap-0");
expect(card).toHaveClass("gap-4", "sm:gap-8", "lg:gap-[22px]");
});
it("applies proper responsive height", () => {
render(<NumberedCard {...defaultProps} />);
it("applies proper responsive height when size is not specified", () => {
render(<NumberCard {...defaultProps} />);
const card = screen
.getByText("Test Card Text")
@@ -70,7 +70,7 @@ describe("NumberedCard Component", () => {
});
it("applies proper background and shadow", () => {
render(<NumberedCard {...defaultProps} />);
render(<NumberCard {...defaultProps} />);
const card = screen
.getByText("Test Card Text")
@@ -82,7 +82,7 @@ describe("NumberedCard Component", () => {
});
it("applies proper border radius", () => {
render(<NumberedCard {...defaultProps} />);
render(<NumberCard {...defaultProps} />);
const card = screen
.getByText("Test Card Text")
@@ -90,25 +90,15 @@ describe("NumberedCard Component", () => {
expect(card).toHaveClass("rounded-[12px]");
});
it("renders section number in correct position", () => {
render(<NumberedCard {...defaultProps} />);
it("renders section number in correct position for responsive mode", () => {
render(<NumberCard {...defaultProps} />);
const numberElement = screen.getByText("1");
expect(numberElement).toBeInTheDocument();
// Check that it's in a container with proper positioning
const numberContainer = numberElement.closest("div");
expect(numberContainer).toHaveClass(
"absolute",
"inset-0",
"flex",
"items-center",
"justify-center",
);
});
it("renders text content in correct position", () => {
render(<NumberedCard {...defaultProps} />);
it("renders text content in correct position for responsive mode", () => {
render(<NumberCard {...defaultProps} />);
const textElement = screen.getByText("Test Card Text");
expect(textElement).toBeInTheDocument();
@@ -125,14 +115,14 @@ describe("NumberedCard Component", () => {
});
it("applies proper font classes to text", () => {
render(<NumberedCard {...defaultProps} />);
render(<NumberCard {...defaultProps} />);
const textElement = screen.getByText("Test Card Text");
expect(textElement).toHaveClass("font-bricolage-grotesque");
});
it("applies proper text sizing", () => {
render(<NumberedCard {...defaultProps} />);
it("applies proper text sizing for responsive mode", () => {
render(<NumberCard {...defaultProps} />);
const textElement = screen.getByText("Test Card Text");
expect(textElement).toHaveClass(
@@ -144,7 +134,7 @@ describe("NumberedCard Component", () => {
});
it("applies proper text color", () => {
render(<NumberedCard {...defaultProps} />);
render(<NumberCard {...defaultProps} />);
const textElement = screen.getByText("Test Card Text");
expect(textElement).toHaveClass("text-[#141414]");
@@ -152,14 +142,14 @@ describe("NumberedCard Component", () => {
it("handles long text content gracefully", () => {
const longText =
"This is a very long text that should wrap properly and not break the layout of the numbered card component";
render(<NumberedCard {...defaultProps} text={longText} />);
"This is a very long text that should wrap properly and not break the layout of the number card component";
render(<NumberCard {...defaultProps} text={longText} />);
expect(screen.getByText(longText)).toBeInTheDocument();
});
it("maintains proper responsive behavior", () => {
render(<NumberedCard {...defaultProps} />);
it("maintains proper responsive behavior when size is not specified", () => {
render(<NumberCard {...defaultProps} />);
const card = screen
.getByText("Test Card Text")
@@ -178,16 +168,16 @@ describe("NumberedCard Component", () => {
// Large breakpoint
expect(card).toHaveClass(
"lg:flex-row",
"lg:gap-0",
"lg:flex-col",
"lg:gap-[22px]",
"lg:p-8",
"lg:items-stretch",
"lg:items-start",
"lg:relative",
);
});
it("renders with proper flex layout", () => {
render(<NumberedCard {...defaultProps} />);
render(<NumberCard {...defaultProps} />);
const card = screen
.getByText("Test Card Text")
@@ -195,12 +185,80 @@ describe("NumberedCard Component", () => {
expect(card).toHaveClass("flex");
});
it("applies proper items alignment", () => {
render(<NumberedCard {...defaultProps} />);
it("applies Small size variant correctly", () => {
render(<NumberCard {...defaultProps} size="Small" />);
const card = screen
.getByText("Test Card Text")
.closest("div").parentElement;
expect(card).toHaveClass("sm:items-center", "lg:items-stretch");
expect(card).toHaveClass(
"flex",
"flex-col",
"items-end",
"justify-center",
"gap-4",
"p-5",
);
const textElement = screen.getByText("Test Card Text");
expect(textElement).toHaveClass("text-[24px]", "leading-[32px]");
});
it("applies Medium size variant correctly", () => {
render(<NumberCard {...defaultProps} size="Medium" />);
const card = screen
.getByText("Test Card Text")
.closest("div").parentElement;
expect(card).toHaveClass(
"flex",
"flex-row",
"items-center",
"gap-8",
"p-8",
);
const textElement = screen.getByText("Test Card Text");
expect(textElement).toHaveClass("text-[24px]", "leading-[24px]");
});
it("applies Large size variant correctly", () => {
render(<NumberCard {...defaultProps} size="Large" />);
const card = screen
.getByText("Test Card Text")
.closest("div").parentElement;
expect(card).toHaveClass(
"flex",
"flex-col",
"items-start",
"justify-end",
"gap-[22px]",
"h-[238px]",
"p-8",
);
const textElement = screen.getByText("Test Card Text");
expect(textElement).toHaveClass("text-[24px]", "leading-[24px]");
});
it("applies XLarge size variant correctly", () => {
render(<NumberCard {...defaultProps} size="XLarge" />);
const card = screen
.getByText("Test Card Text")
.closest("div").parentElement;
expect(card).toHaveClass(
"flex",
"flex-col",
"items-start",
"justify-end",
"gap-[22px]",
"h-[238px]",
"p-8",
);
const textElement = screen.getByText("Test Card Text");
expect(textElement).toHaveClass("text-[32px]", "leading-[32px]");
});
});
tests/unit/NumberedCards.test.jsx
+2 -2
View File
@@ -72,10 +72,10 @@ describe("NumberedCards Component", () => {
expect(screen.getByText("Test Subtitle")).toBeInTheDocument();
});
test("renders NumberedCard components with correct props", () => {
test("renders NumberCard components with correct props", () => {
render(<NumberedCards title="Test" subtitle="Test" cards={mockCards} />);
// Check that NumberedCard components receive correct props
// Check that NumberCard components receive correct props
expect(screen.getByText("1")).toBeInTheDocument(); // First card number
expect(screen.getByText("2")).toBeInTheDocument(); // Second card number
expect(screen.getByText("3")).toBeInTheDocument(); // Third card number