diff --git a/packages/components/radio/__tests__/radio.test.tsx b/packages/components/radio/__tests__/radio.test.tsx
index e7172b9a3..50740a226 100644
--- a/packages/components/radio/__tests__/radio.test.tsx
+++ b/packages/components/radio/__tests__/radio.test.tsx
@@ -1,7 +1,8 @@
import * as React from "react";
import {render} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
-import {Radio} from "../src";
+import {Radio, RadioProps} from "../src";
describe("Radio", () => {
it("should render correctly", () => {
@@ -26,4 +27,160 @@ describe("Radio", () => {
);
expect(ref.current).not.toBeNull();
});
+
+ it("should work correctly with initial value", () => {
+ let {container} = render(
+
+ Option 1
+ ,
+ );
+
+ expect(container.querySelector("input")?.checked).toBe(true);
+
+ let wrapper = render(
+
+ Option 1
+
+ Option 1
+
+ ,
+ );
+
+ let radio2 = wrapper.getByTestId("radio-test-2") as HTMLInputElement;
+
+ expect(radio2?.checked).toBe(true);
+ });
+
+ it("should change value after click", () => {
+ const {container} = render(
+
+ Option 1
+
+ Option 1
+
+ ,
+ );
+
+ let radio2 = container
+ .querySelector(".radio-test-2")
+ ?.querySelector("input") as HTMLInputElement;
+
+ // get by classname
+ userEvent.click(radio2);
+
+ expect(radio2?.checked).toBe(true);
+ });
+
+ it("should ignore events when disabled", () => {
+ const {container} = render(
+
+
+ Option 1
+
+ Option 2
+ ,
+ );
+
+ let radio1 = container
+ .querySelector(".radio-test-1")
+ ?.querySelector("input") as HTMLInputElement;
+
+ userEvent.click(radio1);
+
+ expect(radio1?.checked).toBe(false);
+ });
+
+ it('should work correctly with "onChange" prop', () => {
+ const onChange = jest.fn();
+ const {container} = render(
+
+ Option 1
+
+ Option 2
+
+ ,
+ );
+
+ let radio2 = container
+ .querySelector(".radio-test-2")
+ ?.querySelector("input") as HTMLInputElement;
+
+ userEvent.click(radio2);
+
+ expect(onChange).toBeCalledWith("2");
+ expect(radio2?.checked).toBe(true);
+ });
+
+ it('should work correctly with "onFocus" prop', () => {
+ const onFocus = jest.fn();
+ const {container} = render(
+
+ Option 1
+
+ Option 2
+
+ ,
+ );
+
+ let radio2 = container
+ .querySelector(".radio-test-2")
+ ?.querySelector("input") as HTMLInputElement;
+
+ userEvent.click(radio2);
+
+ expect(onFocus).toBeCalled();
+ });
+
+ it('should work correctly with "isRequired" prop', () => {
+ const {container} = render(
+
+ Option 1
+
+ Option 2
+
+ ,
+ );
+
+ let radio2 = container
+ .querySelector(".radio-test-2")
+ ?.querySelector("input") as HTMLInputElement;
+
+ expect(radio2?.required).toBe(true);
+ });
+
+ it("should work correctly with controlled value", () => {
+ const onChange = jest.fn();
+
+ const Component = ({onChange}: Omit) => {
+ const [value, setValue] = React.useState("1");
+
+ return (
+ {
+ setValue(next);
+ onChange?.(next);
+ }}
+ >
+ Option 1
+
+ Option 2
+
+
+ );
+ };
+
+ const {container} = render();
+
+ let radio2 = container
+ .querySelector(".radio-test-2")
+ ?.querySelector("input") as HTMLInputElement;
+
+ userEvent.click(radio2);
+
+ expect(onChange).toBeCalled();
+
+ expect(radio2?.checked).toBe(true);
+ });
});
diff --git a/packages/components/radio/src/radio.tsx b/packages/components/radio/src/radio.tsx
index 7ead1e00c..bc6d2e3b0 100644
--- a/packages/components/radio/src/radio.tsx
+++ b/packages/components/radio/src/radio.tsx
@@ -39,7 +39,6 @@ const Radio = forwardRef((props, ref) => {
hoverProps,
inputProps,
isRequired,
- ...otherProps
} = useRadio({...radioProps, children: children ?? label});
const domRef = useFocusableRef(ref, inputRef);
@@ -47,7 +46,7 @@ const Radio = forwardRef((props, ref) => {
return (