From 82709746840699a025d856095fab939407e91aa7 Mon Sep 17 00:00:00 2001 From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> Date: Sat, 21 Jun 2025 07:45:41 +0200 Subject: [PATCH] fix: ensure button renders custom tag --- src/lib/buttons/Button.svelte | 10 ++-- src/lib/forms/radio/RadioButton.svelte | 9 +--- src/tests/button/basic-button.test.svelte | 5 ++ src/tests/button/button.test.ts | 46 +++++++++++++++++++ src/tests/button/label-button.test.svelte | 5 ++ src/tests/button/link-button.test.svelte | 5 ++ src/tests/button/submit-button.test.svelte | 5 ++ .../radio/check-radio-button.test.svelte | 6 +++ src/tests/forms/radio/radio-button.test.ts | 22 +++++++++ 9 files changed, 101 insertions(+), 12 deletions(-) create mode 100644 src/tests/button/basic-button.test.svelte create mode 100644 src/tests/button/button.test.ts create mode 100644 src/tests/button/label-button.test.svelte create mode 100644 src/tests/button/link-button.test.svelte create mode 100644 src/tests/button/submit-button.test.svelte create mode 100644 src/tests/forms/radio/check-radio-button.test.svelte create mode 100644 src/tests/forms/radio/radio-button.test.ts diff --git a/src/lib/buttons/Button.svelte b/src/lib/buttons/Button.svelte index a7639b166f..c883a987d9 100644 --- a/src/lib/buttons/Button.svelte +++ b/src/lib/buttons/Button.svelte @@ -15,14 +15,14 @@ let btnCls = $derived(cn(base(), outline && outline_(), shadow && shadow_(), className)); -{#if restProps.href === undefined} +{#if restProps.href !== undefined} + + {@render children?.()} + +{:else if tag === "button"} -{:else if restProps.href} - - {@render children?.()} - {:else} {@render children?.()} diff --git a/src/lib/forms/radio/RadioButton.svelte b/src/lib/forms/radio/RadioButton.svelte index 1d630a3467..0ea420df43 100644 --- a/src/lib/forms/radio/RadioButton.svelte +++ b/src/lib/forms/radio/RadioButton.svelte @@ -4,17 +4,12 @@ let { children, group = $bindable(), value = $bindable(), inline, pill, outline, size, color, shadow, checkedClass, class: className, ...restProps }: RadioButtonProps = $props(); - let inputEl: HTMLInputElement; let isChecked = $derived(value == group); let base = $derived(cn(radiobutton({ inline }), isChecked && checkedClass, className)); - - function clickHandler() { - inputEl?.click(); // manually trigger the click on the hidden input - } - diff --git a/src/tests/button/basic-button.test.svelte b/src/tests/button/basic-button.test.svelte new file mode 100644 index 0000000000..e64e04f96e --- /dev/null +++ b/src/tests/button/basic-button.test.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/tests/button/button.test.ts b/src/tests/button/button.test.ts new file mode 100644 index 0000000000..cfe7cc334b --- /dev/null +++ b/src/tests/button/button.test.ts @@ -0,0 +1,46 @@ +import { cleanup, render, screen } from "@testing-library/svelte"; +import { expect, test, afterEach } from "vitest"; + +import BasicButtonTest from "./basic-button.test.svelte"; +import SubmitButtonTest from "./submit-button.test.svelte"; +import LinkButtonTest from "./link-button.test.svelte"; +import LabelButtonTest from "./label-button.test.svelte"; + +afterEach(() => { + cleanup(); +}); + +test("basic button renders correctly", () => { + render(BasicButtonTest); + const button = screen.getByRole("button"); + + expect(button).toBeInTheDocument(); + expect(button).toHaveTextContent("Test"); + expect(button).toHaveAttribute("type", "button"); +}); + +test("submit button renders correctly", () => { + render(SubmitButtonTest); + const button = screen.getByRole("button"); + + expect(button).toBeInTheDocument(); + expect(button).toHaveTextContent("Save"); + expect(button).toHaveAttribute("type", "submit"); +}); + +test("link button renders correctly", () => { + render(LinkButtonTest); + const link = screen.getByRole("link"); + + expect(link).toHaveTextContent("Flowbite Svelte"); + expect(link).not.toHaveAttribute("type"); +}); + +test("renders button as label element correctly", () => { + render(LabelButtonTest); + const label = screen.getByTestId("label"); + + expect(label).toBeInTheDocument(); + expect(label).not.toHaveAttribute("type"); + expect(label).not.toHaveAttribute("role"); +}); diff --git a/src/tests/button/label-button.test.svelte b/src/tests/button/label-button.test.svelte new file mode 100644 index 0000000000..365c16066a --- /dev/null +++ b/src/tests/button/label-button.test.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/tests/button/link-button.test.svelte b/src/tests/button/link-button.test.svelte new file mode 100644 index 0000000000..1c170370ff --- /dev/null +++ b/src/tests/button/link-button.test.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/tests/button/submit-button.test.svelte b/src/tests/button/submit-button.test.svelte new file mode 100644 index 0000000000..efe8078753 --- /dev/null +++ b/src/tests/button/submit-button.test.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/tests/forms/radio/check-radio-button.test.svelte b/src/tests/forms/radio/check-radio-button.test.svelte new file mode 100644 index 0000000000..c5855336e8 --- /dev/null +++ b/src/tests/forms/radio/check-radio-button.test.svelte @@ -0,0 +1,6 @@ + + +A +B diff --git a/src/tests/forms/radio/radio-button.test.ts b/src/tests/forms/radio/radio-button.test.ts new file mode 100644 index 0000000000..91836754ba --- /dev/null +++ b/src/tests/forms/radio/radio-button.test.ts @@ -0,0 +1,22 @@ +import { cleanup, render, screen } from "@testing-library/svelte"; +import { expect, test, afterEach } from "vitest"; +import { userEvent } from "@testing-library/user-event"; + +import CheckRadioButtonTest from "./check-radio-button.test.svelte"; + +afterEach(() => { + cleanup(); +}); + +test("checking a radio button", async () => { + const user = userEvent.setup(); + render(CheckRadioButtonTest); + const inputA = screen.getByLabelText("A"); + const inputB = screen.getByLabelText("B"); + + expect(inputA).not.toBeChecked(); + expect(inputB).not.toBeChecked(); + await user.click(inputB.parentElement!); + expect(inputA).not.toBeChecked(); + expect(inputB).toBeChecked(); +});