test(radio-button): add unit tests

tests/RadioButton.test.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import {
-    RadioButton,
-    RadioButtonSkeleton,
-    RadioButtonGroup,
-  } from "carbon-components-svelte";
-</script>
-
-<RadioButtonGroup
-  legendText="Storage tier (disk)"
-  selected="standard"
-  on:change={(e) => {
-    console.log(e.detail); // string
-  }}
->
-  <RadioButton labelText="Free (1 GB)" value="free" />
-  <RadioButton labelText="Standard (10 GB)" value="standard" />
-  <RadioButton labelText="Pro (128 GB)" value="pro" />
-</RadioButtonGroup>
-
-<RadioButtonGroup
-  legendText="Storage tier (disk)"
-  labelPosition="left"
-  selected="standard"
->
-  <RadioButton labelText="Free (1 GB)" value="free" />
-  <RadioButton labelText="Standard (10 GB)" value="standard" />
-  <RadioButton labelText="Pro (128 GB)" value="pro" />
-</RadioButtonGroup>
-
-<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
-  <RadioButtonSkeleton />
-  <RadioButtonSkeleton />
-  <RadioButtonSkeleton />
-</RadioButtonGroup>

tests/RadioButton/RadioButton.test.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { RadioButton } from "carbon-components-svelte";
+  import type { ComponentProps } from "svelte";
+
+  export let value: ComponentProps<RadioButton>["value"] = "";
+  export let checked: ComponentProps<RadioButton>["checked"] = false;
+  export let disabled: ComponentProps<RadioButton>["disabled"] = false;
+  export let required: ComponentProps<RadioButton>["required"] = false;
+  export let labelPosition: ComponentProps<RadioButton>["labelPosition"] =
+    "right";
+  export let labelText: ComponentProps<RadioButton>["labelText"] = "Option 1";
+  export let hideLabel: ComponentProps<RadioButton>["hideLabel"] = false;
+  export let id: ComponentProps<RadioButton>["id"] = "ccs-test";
+  export let name: ComponentProps<RadioButton>["name"] = "test-group";
+  export let ref: ComponentProps<RadioButton>["ref"] = null;
+</script>
+
+<RadioButton
+  bind:value
+  {checked}
+  {disabled}
+  {required}
+  {labelPosition}
+  {labelText}
+  {hideLabel}
+  {id}
+  {name}
+  {ref}
+  on:change={() => {
+    console.log("change");
+  }}
+/>

tests/RadioButton/RadioButton.test.ts

@@ -0,0 +1,128 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import RadioButton from "./RadioButton.test.svelte";
+import RadioButtonCustom from "./RadioButtonCustom.test.svelte";
+
+describe("RadioButton", () => {
+  it("should render with default props", () => {
+    render(RadioButton);
+
+    const input = screen.getByRole("radio");
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute("name", "test-group");
+    expect(input).toHaveAttribute("value", "");
+    expect(input).not.toBeChecked();
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+  });
+
+  it("should handle checked state", () => {
+    render(RadioButton, { props: { checked: true } });
+
+    expect(screen.getByRole("radio")).toBeChecked();
+  });
+
+  it("should handle disabled state", () => {
+    render(RadioButton, { props: { disabled: true } });
+
+    expect(screen.getByRole("radio")).toBeDisabled();
+  });
+
+  it("should handle required state", () => {
+    render(RadioButton, { props: { required: true } });
+
+    expect(screen.getByRole("radio")).toHaveAttribute("required");
+  });
+
+  it("should handle label position", () => {
+    render(RadioButton, { props: { labelPosition: "left" } });
+
+    expect(
+      screen.getByText("Option 1").closest(".bx--radio-button-wrapper"),
+    ).toHaveClass("bx--radio-button-wrapper--label-left");
+  });
+
+  it("should handle hidden label", () => {
+    render(RadioButton, { props: { hideLabel: true } });
+
+    expect(screen.getByText("Option 1")).toHaveClass("bx--visually-hidden");
+  });
+
+  it("should handle custom id", () => {
+    render(RadioButton, { props: { id: "custom-id" } });
+
+    expect(screen.getByRole("radio")).toHaveAttribute("id", "custom-id");
+
+    const radioButton = screen
+      .getByText("Option 1")
+      .closest(".bx--radio-button-wrapper");
+    assert(radioButton);
+    expect(radioButton.querySelector("label")).toHaveAttribute(
+      "for",
+      "custom-id",
+    );
+  });
+
+  it("should handle custom name", () => {
+    render(RadioButton, { props: { name: "custom-name" } });
+
+    expect(screen.getByRole("radio")).toHaveAttribute("name", "custom-name");
+  });
+
+  it("should handle custom value", () => {
+    render(RadioButton, { props: { value: "custom-value" } });
+
+    expect(screen.getByRole("radio")).toHaveAttribute("value", "custom-value");
+  });
+
+  it("should handle custom slots", () => {
+    render(RadioButtonCustom);
+
+    expect(screen.getByText("Custom Label Text")).toBeInTheDocument();
+  });
+
+  it("should handle change event", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(RadioButton);
+
+    const input = screen.getByRole("radio");
+    await user.click(input);
+
+    expect(input).toBeChecked();
+    expect(consoleLog).toHaveBeenCalledWith("change");
+  });
+
+  // TODO(bug): forward focus/blur events.
+  it.skip("should handle focus and blur events", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(RadioButton);
+
+    const input = screen.getByRole("radio");
+    await user.tab();
+    expect(input).toHaveFocus();
+    expect(consoleLog).toHaveBeenCalledWith("focus");
+
+    await user.tab();
+    expect(input).not.toHaveFocus();
+    expect(consoleLog).toHaveBeenCalledWith("blur");
+  });
+
+  it("should handle disabled state with events", async () => {
+    render(RadioButton, { props: { disabled: true } });
+
+    const input = screen.getByRole("radio");
+    await user.click(input);
+    expect(input).not.toBeChecked();
+  });
+
+  it("should handle required state with form validation", () => {
+    render(RadioButton, { props: { required: true } });
+
+    expect(screen.getByRole("radio")).toHaveAttribute("required");
+  });
+
+  it("should handle label text slot", () => {
+    render(RadioButtonCustom);
+
+    expect(screen.getByText("Custom Label Text").tagName).toBe("SPAN");
+  });
+});

tests/RadioButton/RadioButtonCustom.test.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { RadioButton } from "carbon-components-svelte";
+</script>
+
+<RadioButton labelText="Custom label" value="custom" name="test-group">
+  <span slot="labelText">Custom Label Text</span>
+</RadioButton>