diff --git a/tests/PasswordInput.test.svelte b/tests/PasswordInput.test.svelte deleted file mode 100644 index d690c514..00000000 --- a/tests/PasswordInput.test.svelte +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/tests/PasswordInput/PasswordInput.test.svelte b/tests/PasswordInput/PasswordInput.test.svelte new file mode 100644 index 00000000..2f451be2 --- /dev/null +++ b/tests/PasswordInput/PasswordInput.test.svelte @@ -0,0 +1,66 @@ + + + { + console.log("focus"); + }} + on:blur={() => { + console.log("blur"); + }} + on:paste +/> + +
{value}
diff --git a/tests/PasswordInput/PasswordInput.test.ts b/tests/PasswordInput/PasswordInput.test.ts new file mode 100644 index 00000000..33605239 --- /dev/null +++ b/tests/PasswordInput/PasswordInput.test.ts @@ -0,0 +1,196 @@ +import { render, screen } from "@testing-library/svelte"; +import PasswordInput from "./PasswordInput.test.svelte"; +import { user } from "../setup-tests"; + +describe("PasswordInput", () => { + describe("Default", () => { + it("should render with a label", () => { + render(PasswordInput, { + labelText: "Password", + placeholder: "Enter password...", + }); + + expect(screen.getByLabelText("Password")).toBeInTheDocument(); + expect( + screen.getByPlaceholderText("Enter password..."), + ).toBeInTheDocument(); + }); + + it("should toggle password visibility", async () => { + render(PasswordInput, { labelText: "Password", value: "secret123" }); + + const input = screen.getByLabelText("Password"); + expect(input).toHaveAttribute("type", "password"); + + await user.click(screen.getByText("Show password")); + expect(input).toHaveAttribute("type", "text"); + + await user.click(screen.getByText("Hide password")); + expect(input).toHaveAttribute("type", "password"); + }); + + it("should handle custom visibility labels", async () => { + render(PasswordInput, { + labelText: "Password", + hidePasswordLabel: "Custom hide", + showPasswordLabel: "Custom show", + }); + + expect(screen.getByLabelText("Password")).toBeInTheDocument(); + await user.click(screen.getByText("Custom show")); + expect(screen.getByText("Custom hide")).toBeInTheDocument(); + await user.click(screen.getByText("Custom hide")); + expect(screen.getByText("Custom show")).toBeInTheDocument(); + }); + }); + + describe("Tooltip", () => { + it("should handle custom tooltip alignment", () => { + render(PasswordInput, { + labelText: "Password", + tooltipAlignment: "start", + tooltipPosition: "left", + }); + + const button = screen.getByRole("button"); + expect(button).toHaveClass("bx--tooltip--align-start"); + expect(button).toHaveClass("bx--tooltip--left"); + }); + }); + + describe("States", () => { + it("should handle invalid state", () => { + render(PasswordInput, { + labelText: "Password", + invalid: true, + invalidText: "Password must be at least 8 characters", + }); + + expect( + screen.getByText("Password must be at least 8 characters"), + ).toBeInTheDocument(); + const wrapper = screen + .getByLabelText("Password") + .closest(".bx--text-input__field-wrapper"); + expect(wrapper).toHaveAttribute("data-invalid"); + }); + + it("should handle warning state", () => { + render(PasswordInput, { + labelText: "Password", + warn: true, + warnText: "Password will expire soon", + }); + + expect(screen.getByText("Password will expire soon")).toBeInTheDocument(); + const input = screen.getByLabelText("Password"); + expect(input).toHaveClass("bx--text-input--warning"); + }); + + it("should handle disabled state", () => { + render(PasswordInput, { + labelText: "Password", + disabled: true, + value: "disabled-password", + }); + + const input = screen.getByLabelText("Password"); + expect(input).toBeDisabled(); + expect(input).toHaveValue("disabled-password"); + + const toggleButton = screen.getByRole("button"); + expect(toggleButton).toBeDisabled(); + expect(toggleButton).toHaveClass("bx--btn--disabled"); + }); + + it("should handle helper text", () => { + render(PasswordInput, { + labelText: "Password", + helperText: "Your password should be hard to guess", + }); + + expect( + screen.getByText("Your password should be hard to guess"), + ).toBeInTheDocument(); + }); + }); + + describe("Variants", () => { + it("should render light variant", () => { + render(PasswordInput, { labelText: "Password", light: true }); + + const wrapper = screen + .getByLabelText("Password") + .closest(".bx--text-input-wrapper"); + expect(wrapper).toHaveClass("bx--text-input-wrapper--light"); + }); + + it("should render inline variant", () => { + render(PasswordInput, { + labelText: "Password", + inline: true, + }); + + const wrapper = screen + .getByLabelText("Password") + .closest(".bx--text-input-wrapper"); + expect(wrapper).toHaveClass("bx--text-input-wrapper--inline"); + }); + + it("should render in small size", () => { + render(PasswordInput, { labelText: "Password", size: "sm" }); + + const input = screen.getByLabelText("Password"); + expect(input).toHaveClass("bx--text-input--sm"); + }); + + it("should render in extra-large size", () => { + render(PasswordInput, { + labelText: "Password", + size: "xl", + }); + + const input = screen.getByLabelText("Password"); + expect(input).toHaveClass("bx--text-input--xl"); + }); + }); + + describe("Label handling", () => { + it("should handle hidden label", () => { + render(PasswordInput, { labelText: "Password", hideLabel: true }); + + const label = screen.getByText("Password"); + expect(label).toHaveClass("bx--visually-hidden"); + }); + + it("should handle custom id", () => { + render(PasswordInput, { labelText: "Password", id: "custom-id" }); + + const input = screen.getByLabelText("Password"); + expect(input).toHaveAttribute("id", "custom-id"); + }); + }); + + describe("Events", () => { + it("should handle input events", async () => { + render(PasswordInput, { labelText: "Password" }); + + const input = screen.getByLabelText("Password"); + await user.type(input, "test123"); + expect(screen.getByTestId("value")).toHaveTextContent("test123"); + }); + + it("should handle focus and blur events", async () => { + const consoleLog = vi.spyOn(console, "log"); + render(PasswordInput, { labelText: "Password" }); + + expect(consoleLog).not.toHaveBeenCalled(); + const input = screen.getByLabelText("Password"); + await user.click(input); + expect(consoleLog).toHaveBeenCalledWith("focus"); + + await user.tab(); + expect(consoleLog).toHaveBeenCalledWith("blur"); + }); + }); +});