From b0b9699ced37a908a9eea1f2f1ce2e0b22b9a369 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Wed, 4 Feb 2026 17:03:10 -0700 Subject: [PATCH] Resolve test errors --- app/components/NumberCard.tsx | 6 +++--- app/components/RadioButton/RadioButton.container.tsx | 2 +- app/components/SelectInput/SelectInput.container.tsx | 5 +++-- tests/unit/ContentContainer.test.jsx | 12 ++++++------ tests/unit/NumberCard.test.jsx | 11 ++++++++--- 5 files changed, 21 insertions(+), 15 deletions(-) diff --git a/app/components/NumberCard.tsx b/app/components/NumberCard.tsx index 5c1a24b..c1722a3 100644 --- a/app/components/NumberCard.tsx +++ b/app/components/NumberCard.tsx @@ -28,14 +28,14 @@ interface NumberCardProps { } const NumberCard = memo(({ number, text, size: sizeProp }) => { - // Normalize props to handle both PascalCase (Figma) and lowercase (codebase) - const size = normalizeNumberCardSize(sizeProp); // Base classes common to all sizes const baseClasses = "bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg"; // If size prop is provided, use explicit size classes // Otherwise, use responsive breakpoints for backward compatibility - if (size) { + if (sizeProp) { + // Normalize props to handle both PascalCase (Figma) and lowercase (codebase) + const size = normalizeNumberCardSize(sizeProp); // Size-specific classes const sizeClasses = { Small: "flex flex-col items-end justify-center gap-4 p-5 relative", diff --git a/app/components/RadioButton/RadioButton.container.tsx b/app/components/RadioButton/RadioButton.container.tsx index 148393c..24628b6 100644 --- a/app/components/RadioButton/RadioButton.container.tsx +++ b/app/components/RadioButton/RadioButton.container.tsx @@ -9,7 +9,7 @@ const RadioButtonContainer = ({ checked = false, mode: modeProp = "standard", state: stateProp = "default", // This state prop is now only for static display in Storybook/Preview - indicator = true, // From Figma: whether to show the indicator dot + indicator: _indicator = true, // From Figma: whether to show the indicator dot (currently not used in view) disabled = false, label, onChange, diff --git a/app/components/SelectInput/SelectInput.container.tsx b/app/components/SelectInput/SelectInput.container.tsx index 08f8da2..6318265 100644 --- a/app/components/SelectInput/SelectInput.container.tsx +++ b/app/components/SelectInput/SelectInput.container.tsx @@ -39,8 +39,9 @@ const SelectInputContainer = forwardRef( ref, ) => { // Normalize props to handle both PascalCase (Figma) and lowercase (codebase) - const labelVariant = labelVariantProp ? normalizeLabelVariant(labelVariantProp) : undefined; - const size = sizeProp ? normalizeSmallMediumLargeSize(sizeProp) : undefined; + // Note: labelVariant and size are normalized for future use but not yet implemented in the view + const _labelVariant = labelVariantProp ? normalizeLabelVariant(labelVariantProp) : undefined; + const _size = sizeProp ? normalizeSmallMediumLargeSize(sizeProp) : undefined; const externalState = normalizeState(externalStateProp); const generatedId = useId(); diff --git a/tests/unit/ContentContainer.test.jsx b/tests/unit/ContentContainer.test.jsx index 4f4c689..af10a80 100644 --- a/tests/unit/ContentContainer.test.jsx +++ b/tests/unit/ContentContainer.test.jsx @@ -85,14 +85,14 @@ describe("ContentContainer", () => { }); it("applies correct width when specified", () => { - render(); + render(); const container = document.querySelector("div[class*='relative z-20']"); expect(container).toHaveStyle("width: 300px"); }); it("applies default width when not specified", () => { - render(); + render(); 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(); + it("applies correct responsive sizing for xs breakpoint", () => { + render(); 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(); + it("applies correct responsive sizing for responsive breakpoint", () => { + render(); const icon = screen.getByAltText("Icon for Test Article Title"); expect(icon).toHaveClass("w-[60px]", "h-[30px]"); diff --git a/tests/unit/NumberCard.test.jsx b/tests/unit/NumberCard.test.jsx index 69cd9c9..aefb1cb 100644 --- a/tests/unit/NumberCard.test.jsx +++ b/tests/unit/NumberCard.test.jsx @@ -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]", ); });