From cd6a4f70d89cfcbfc479f88bfcf822d47eb13ce7 Mon Sep 17 00:00:00 2001 From: olitreadwell Date: Wed, 5 Aug 2026 00:45:42 +1200 Subject: [PATCH 1/3] test(HelperText): add unit test coverage HelperText was the only remaining public component in packages/ui with zero test coverage (verified across all 45 component folders). It only appeared indirectly through Label's integration test, so its own rendering, color variants, className merging, ref forwarding, and theme overrides were never asserted directly. Adds a dedicated HelperText.test.tsx following the same Rendering / Classname / Ref / Theme structure used by sibling component tests (e.g. Badge, Spinner, Blockquote). --- .../components/HelperText/HelperText.test.tsx | 105 ++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 packages/ui/src/components/HelperText/HelperText.test.tsx diff --git a/packages/ui/src/components/HelperText/HelperText.test.tsx b/packages/ui/src/components/HelperText/HelperText.test.tsx new file mode 100644 index 000000000..f598de8e7 --- /dev/null +++ b/packages/ui/src/components/HelperText/HelperText.test.tsx @@ -0,0 +1,105 @@ +import { render, screen } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; +import { ThemeProvider } from "../../theme/provider"; +import type { CustomFlowbiteTheme } from "../../types"; +import { HelperText } from "./HelperText"; + +describe("Components / HelperText", () => { + describe("Rendering", () => { + it("should render", () => { + render(Some helper text); + + expect(helperText()).toBeInTheDocument(); + }); + + it("should render as a `

` element by default", () => { + render(Some helper text); + + expect(helperText().tagName).toBe("P"); + }); + + it("should use `gray` color by default", () => { + render(Some helper text); + + expect(helperText()).toHaveClass("text-gray-500"); + }); + + it.each(["gray", "info", "success", "failure", "warning"] as const)( + "should use `%s` color classes when passed", + (color) => { + render(Some helper text); + + expect(helperText().className).not.toHaveLength(0); + }, + ); + }); + + describe("Classname", () => { + it("should merge not overwrite", () => { + render(Some helper text); + + expect(helperText()).toHaveClass("italic"); + expect(helperText()).toHaveClass("text-sm"); + }); + }); + + describe("Ref", () => { + it("should forward the ref to the underlying `

` element", () => { + let ref: HTMLParagraphElement | null = null; + + render( + { + ref = node; + }} + > + Some helper text + , + ); + + expect(ref).toBeInstanceOf(HTMLParagraphElement); + }); + }); + + describe("Theme", () => { + it("should use custom `base` classes", () => { + const theme: CustomFlowbiteTheme = { + helperText: { + root: { + base: "mt-4 text-lg", + }, + }, + }; + + render( + + Some helper text + , + ); + + expect(helperText()).toHaveClass("mt-4 text-lg"); + }); + + it("should use custom `colors` classes", () => { + const theme: CustomFlowbiteTheme = { + helperText: { + root: { + colors: { + gray: "text-purple-500", + }, + }, + }, + }; + + render( + + Some helper text + , + ); + + expect(helperText()).toHaveClass("text-purple-500"); + }); + }); +}); + +const helperText = () => screen.getByText("Some helper text", { exact: false }); From 89217e117d2d6fdbe618f4a04de84462a18b0a88 Mon Sep 17 00:00:00 2001 From: olitreadwell Date: Wed, 5 Aug 2026 09:20:04 +1200 Subject: [PATCH 2/3] test(HelperText): assert exact color classes instead of non-empty check The color it.each test only checked that className was non-empty, which passes even if the color prop had no effect at all (base classes are always present). Assert the specific expected class per color instead, matching the values in theme.ts. --- .../components/HelperText/HelperText.test.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/HelperText/HelperText.test.tsx b/packages/ui/src/components/HelperText/HelperText.test.tsx index f598de8e7..64e9512b3 100644 --- a/packages/ui/src/components/HelperText/HelperText.test.tsx +++ b/packages/ui/src/components/HelperText/HelperText.test.tsx @@ -24,14 +24,17 @@ describe("Components / HelperText", () => { expect(helperText()).toHaveClass("text-gray-500"); }); - it.each(["gray", "info", "success", "failure", "warning"] as const)( - "should use `%s` color classes when passed", - (color) => { - render(Some helper text); - - expect(helperText().className).not.toHaveLength(0); - }, - ); + it.each([ + ["gray", "text-gray-500"], + ["info", "text-cyan-700"], + ["success", "text-green-600"], + ["failure", "text-red-600"], + ["warning", "text-yellow-500"], + ] as const)("should use `%s` color classes when passed", (color, expectedClass) => { + render(Some helper text); + + expect(helperText()).toHaveClass(expectedClass); + }); }); describe("Classname", () => { From fae576278dda08d86ff7dcc515d33c5698ed0118 Mon Sep 17 00:00:00 2001 From: olitreadwell Date: Wed, 19 Aug 2026 15:21:00 +1200 Subject: [PATCH 3/3] test(HelperText): assert dark-mode color classes --- .../src/components/HelperText/HelperText.test.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/HelperText/HelperText.test.tsx b/packages/ui/src/components/HelperText/HelperText.test.tsx index 64e9512b3..070fdec75 100644 --- a/packages/ui/src/components/HelperText/HelperText.test.tsx +++ b/packages/ui/src/components/HelperText/HelperText.test.tsx @@ -22,18 +22,20 @@ describe("Components / HelperText", () => { render(Some helper text); expect(helperText()).toHaveClass("text-gray-500"); + expect(helperText()).toHaveClass("dark:text-gray-300"); }); it.each([ - ["gray", "text-gray-500"], - ["info", "text-cyan-700"], - ["success", "text-green-600"], - ["failure", "text-red-600"], - ["warning", "text-yellow-500"], - ] as const)("should use `%s` color classes when passed", (color, expectedClass) => { + ["gray", "text-gray-500", "dark:text-gray-300"], + ["info", "text-cyan-700", "dark:text-cyan-800"], + ["success", "text-green-600", "dark:text-green-500"], + ["failure", "text-red-600", "dark:text-red-500"], + ["warning", "text-yellow-500", "dark:text-yellow-600"], + ] as const)("should use `%s` color classes when passed", (color, expectedClass, darkClass) => { render(Some helper text); expect(helperText()).toHaveClass(expectedClass); + expect(helperText()).toHaveClass(darkClass); }); });