Resolve test errors
This commit is contained in:
@@ -85,14 +85,14 @@ describe("ContentContainer", () => {
|
||||
});
|
||||
|
||||
it("applies correct width when specified", () => {
|
||||
render(<ContentContainer post={mockPost} width="300px" size="sm" />);
|
||||
render(<ContentContainer post={mockPost} width="300px" size="xs" />);
|
||||
|
||||
const container = document.querySelector("div[class*='relative z-20']");
|
||||
expect(container).toHaveStyle("width: 300px");
|
||||
});
|
||||
|
||||
it("applies default width when not specified", () => {
|
||||
render(<ContentContainer post={mockPost} size="sm" />);
|
||||
render(<ContentContainer post={mockPost} size="xs" />);
|
||||
|
||||
const container = document.querySelector("div[class*='relative z-20']");
|
||||
expect(container).toHaveStyle("width: 200px");
|
||||
@@ -183,8 +183,8 @@ describe("ContentContainer", () => {
|
||||
expect(screen.getByText("Incomplete Post")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("applies correct responsive sizing for sm breakpoint", () => {
|
||||
render(<ContentContainer post={mockPost} size="sm" />);
|
||||
it("applies correct responsive sizing for xs breakpoint", () => {
|
||||
render(<ContentContainer post={mockPost} size="xs" />);
|
||||
|
||||
const icon = screen.getByAltText("Icon for Test Article Title");
|
||||
expect(icon).toHaveClass("w-[60px]", "h-[30px]");
|
||||
@@ -196,8 +196,8 @@ describe("ContentContainer", () => {
|
||||
expect(description).toHaveClass("text-[12px]", "leading-[16px]");
|
||||
});
|
||||
|
||||
it("applies correct responsive sizing for md breakpoint", () => {
|
||||
render(<ContentContainer post={mockPost} size="md" />);
|
||||
it("applies correct responsive sizing for responsive breakpoint", () => {
|
||||
render(<ContentContainer post={mockPost} size="responsive" />);
|
||||
|
||||
const icon = screen.getByAltText("Icon for Test Article Title");
|
||||
expect(icon).toHaveClass("w-[60px]", "h-[30px]");
|
||||
|
||||
@@ -39,7 +39,7 @@ describe("NumberCard Component", () => {
|
||||
const card = screen
|
||||
.getByText("Test Card Text")
|
||||
.closest("div").parentElement;
|
||||
expect(card).toHaveClass("flex", "flex-col", "sm:flex-row", "lg:flex-col");
|
||||
expect(card).toHaveClass("flex", "flex-col", "sm:flex-row", "sm:items-center", "lg:flex-col", "lg:items-start", "lg:justify-end", "lg:relative");
|
||||
});
|
||||
|
||||
it("applies proper responsive spacing when size is not specified", () => {
|
||||
@@ -66,7 +66,7 @@ describe("NumberCard Component", () => {
|
||||
const card = screen
|
||||
.getByText("Test Card Text")
|
||||
.closest("div").parentElement;
|
||||
expect(card).toHaveClass("lg:h-[238px]");
|
||||
expect(card).toHaveClass("lg:h-[238px]", "lg:relative");
|
||||
});
|
||||
|
||||
it("applies proper background and shadow", () => {
|
||||
@@ -128,8 +128,11 @@ describe("NumberCard Component", () => {
|
||||
expect(textElement).toHaveClass(
|
||||
"text-[24px]",
|
||||
"sm:text-[24px]",
|
||||
"sm:leading-[24px]",
|
||||
"lg:text-[24px]",
|
||||
"lg:leading-[24px]",
|
||||
"xl:text-[32px]",
|
||||
"xl:leading-[32px]",
|
||||
);
|
||||
});
|
||||
|
||||
@@ -156,7 +159,7 @@ describe("NumberCard Component", () => {
|
||||
.closest("div").parentElement;
|
||||
|
||||
// Mobile first approach
|
||||
expect(card).toHaveClass("flex-col", "gap-4", "p-5");
|
||||
expect(card).toHaveClass("flex", "flex-col", "gap-4", "p-5");
|
||||
|
||||
// Small breakpoint
|
||||
expect(card).toHaveClass(
|
||||
@@ -172,7 +175,9 @@ describe("NumberCard Component", () => {
|
||||
"lg:gap-[22px]",
|
||||
"lg:p-8",
|
||||
"lg:items-start",
|
||||
"lg:justify-end",
|
||||
"lg:relative",
|
||||
"lg:h-[238px]",
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user