diff --git a/lib/src/radio-group/RadioGroup.test.js b/lib/src/radio-group/RadioGroup.test.js index f92fca323..c7f2595cb 100644 --- a/lib/src/radio-group/RadioGroup.test.js +++ b/lib/src/radio-group/RadioGroup.test.js @@ -51,6 +51,29 @@ describe("Radio Group component tests", () => { const radioGroup = getByRole("radiogroup"); expect(radioGroup.getAttribute("aria-orientation")).toBe("horizontal"); }); + test("Sends its value when submitted", () => { + const handlerOnSubmit = jest.fn((e) => { + e.preventDefault(); + const formData = new FormData(e.target); + const formProps = Object.fromEntries(formData); + expect(formProps).toStrictEqual({ radiogroup: "5" }); + }); + const { getByText, getByRole, getAllByRole } = render( +
+ + + + ); + const radioGroup = getByRole("radiogroup"); + const submit = getByText("Submit"); + userEvent.click(radioGroup); + userEvent.click(getAllByRole("radio")[4]); + userEvent.click(submit); + }); test("Disabled state renders with correct aria attribute, correct tabIndex values and it is not focusable by keyboard", () => { const { getByRole, getAllByRole } = render( @@ -86,6 +109,28 @@ describe("Radio Group component tests", () => { expect(radios[1].tabIndex).toBe(-1); expect(radios[2].tabIndex).toBe(-1); }); + test("Disabled radio group doesn't send its value when submitted", () => { + const handlerOnSubmit = jest.fn((e) => { + e.preventDefault(); + const formData = new FormData(e.target); + const formProps = Object.fromEntries(formData); + expect(formProps).toStrictEqual({}); + }); + const { getByText } = render( +
+ + + + ); + const submit = getByText("Submit"); + userEvent.click(submit); + }); test("Error state renders with correct aria attributes", () => { const { getByRole, getByText } = render( diff --git a/lib/src/radio-group/RadioGroup.tsx b/lib/src/radio-group/RadioGroup.tsx index 016b50159..7ad244e5a 100644 --- a/lib/src/radio-group/RadioGroup.tsx +++ b/lib/src/radio-group/RadioGroup.tsx @@ -142,7 +142,13 @@ const DxcRadioGroup = React.forwardRef( aria-readonly={readonly} aria-orientation={stacking === "column" ? "vertical" : "horizontal"} > - +