@dxc-technology/halstack-react 0.0.0-e33af28 → 0.0.0-e360842

package/radio-group/RadioGroup.test.js

@@ -1,15 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
-
-var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
-
 var _react2 = require("@testing-library/react");
-
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
+var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
 var options = [{
   label: "Option 01",
   value: "1"
@@ -38,7 +35,7 @@ var options = [{
   label: "Option 09",
   value: "9"
 }];
-var single_disabled_options = [{
+var singleDisabledOptions = [{
   label: "Option 01",
   value: "1"
 }, {
@@ -52,19 +49,16 @@ var single_disabled_options = [{
 describe("Radio Group component tests", function () {
   test("Initial render has correct aria attributes and tabIndex", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      label: "test-radioGroup-label",
-      options: options,
-      error: ""
-    })),
-        getByRole = _render.getByRole,
-        getAllByRole = _render.getAllByRole,
-        getByText = _render.getByText,
-        container = _render.container;
-
+        label: "test-radioGroup-label",
+        options: options,
+        error: ""
+      })),
+      getByRole = _render.getByRole,
+      getAllByRole = _render.getAllByRole,
+      getByText = _render.getByText;
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
-    var errorId = "error-".concat(getByText("test-radioGroup-label").id.replace("label-", ""));
-    var error = container.querySelector("#".concat(errorId));
+    var error = getByRole("alert");
     expect(radioGroup.getAttribute("aria-disabled")).toBe("false");
     expect(radioGroup.getAttribute("aria-labelledby")).toBe(getByText("test-radioGroup-label").id);
     expect(radioGroup.getAttribute("aria-invalid")).toBe("false");
@@ -73,7 +67,7 @@ describe("Radio Group component tests", function () {
     expect(error.getAttribute("aria-live")).toBe("off");
     radios.forEach(function (radio, index) {
       // if no option was previously selected, first option is the focusable one
-      index === 0 ? expect(radio.tabIndex).toBe(0) : expect(radio.tabIndex).toBe(-1);
+      if (index === 0) expect(radio.tabIndex).toBe(0);else expect(radio.tabIndex).toBe(-1);
       expect(radio.getAttribute("aria-checked")).toBe("false");
       expect(radio.getAttribute("aria-disabled")).toBe("false");
       expect(radio.getAttribute("aria-labelledby")).toBe(getByText("Option 0".concat(index + 1)).id);
@@ -81,383 +75,429 @@ describe("Radio Group component tests", function () {
   });
   test("aria-orientation attribute changes depending on stacking prop value", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      label: "test-radioGroup-label",
-      options: options,
-      stacking: "row"
-    })),
-        getByRole = _render2.getByRole;
-
+        label: "test-radioGroup-label",
+        options: options,
+        stacking: "row"
+      })),
+      getByRole = _render2.getByRole;
     var radioGroup = getByRole("radiogroup");
     expect(radioGroup.getAttribute("aria-orientation")).toBe("horizontal");
   });
+  test("Sends its value when submitted", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var handlerOnSubmit, _render3, getByText, getByRole, getAllByRole, radioGroup, submit;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          handlerOnSubmit = jest.fn(function (e) {
+            e.preventDefault();
+            var formData = new FormData(e.target);
+            var formProps = Object.fromEntries(formData);
+            expect(formProps).toStrictEqual({
+              radiogroup: "5"
+            });
+          });
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+            onSubmit: handlerOnSubmit
+          }, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            name: "radiogroup",
+            label: "test-radio-group-label",
+            options: options
+          }), /*#__PURE__*/_react["default"].createElement("button", {
+            type: "submit"
+          }, "Submit"))), getByText = _render3.getByText, getByRole = _render3.getByRole, getAllByRole = _render3.getAllByRole;
+          radioGroup = getByRole("radiogroup");
+          submit = getByText("Submit");
+          _context.next = 6;
+          return _userEvent["default"].click(radioGroup);
+        case 6:
+          _context.next = 8;
+          return _userEvent["default"].click(getAllByRole("radio")[4]);
+        case 8:
+          _context.next = 10;
+          return _userEvent["default"].click(submit);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
   test("Disabled state renders with correct aria attribute, correct tabIndex values and it is not focusable by keyboard", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      label: "test-radioGroup-label",
-      options: options,
-      disabled: true
-    })),
-        getByRole = _render3.getByRole,
-        getAllByRole = _render3.getAllByRole;
-
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+        label: "test-radioGroup-label",
+        options: options,
+        disabled: true
+      })),
+      getByRole = _render4.getByRole,
+      getAllByRole = _render4.getAllByRole;
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
     expect(radioGroup.getAttribute("aria-disabled")).toBe("true");
     radios.forEach(function (radio) {
       expect(radio.tabIndex).toBe(-1);
     });
-
     _react2.fireEvent.keyDown(radioGroup, {
-      key: "Enter",
-      code: "Enter",
+      key: " ",
+      code: "Space",
       keyCode: 13,
       charCode: 13
     });
-
     _react2.fireEvent.keyDown(radioGroup, {
       key: "ArrowLeft",
       code: "ArrowLeft",
       keyCode: 37,
       charCode: 37
     });
-
     _react2.fireEvent.keyDown(radioGroup, {
       key: "ArrowDown",
       code: "ArrowDown",
       keyCode: 40,
       charCode: 40
     });
-
     radios.forEach(function (radio) {
       expect(radio.tabIndex).toBe(-1);
     });
   });
   test("Disabled option renders with correct aria attribute, correct tabIndex value and it is not focusable by keyboard (focus 'jumps' the disabled option)", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      label: "test-radioGroup-label",
-      options: single_disabled_options
-    })),
-        getByRole = _render4.getByRole,
-        getAllByRole = _render4.getAllByRole;
-
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+        name: "test",
+        label: "test-radioGroup-label",
+        options: singleDisabledOptions
+      })),
+      getByRole = _render5.getByRole,
+      getAllByRole = _render5.getAllByRole;
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
     expect(radios[2].getAttribute("aria-disabled")).toBe("true");
     expect(radios[0].tabIndex).toBe(0);
     expect(radios[1].tabIndex).toBe(-1);
     expect(radios[2].tabIndex).toBe(-1);
-
     _react2.fireEvent.keyDown(radioGroup, {
       key: "ArrowDown",
       code: "ArrowDown",
       keyCode: 40,
       charCode: 40
     });
-
     _react2.fireEvent.keyDown(radioGroup, {
       key: "ArrowDown",
       code: "ArrowDown",
       keyCode: 40,
       charCode: 40
     });
-
     expect(radios[0].tabIndex).toBe(0);
     expect(radios[1].tabIndex).toBe(-1);
     expect(radios[2].tabIndex).toBe(-1);
   });
+  test("Disabled radio group doesn't send its value when submitted", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var handlerOnSubmit, _render6, getByText, submit;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          handlerOnSubmit = jest.fn(function (e) {
+            e.preventDefault();
+            var formData = new FormData(e.target);
+            var formProps = Object.fromEntries(formData);
+            expect(formProps).toStrictEqual({});
+          });
+          _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+            onSubmit: handlerOnSubmit
+          }, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            name: "radiogroup",
+            defaultValue: "1",
+            disabled: true,
+            label: "test-radio-group-label",
+            options: options
+          }), /*#__PURE__*/_react["default"].createElement("button", {
+            type: "submit"
+          }, "Submit"))), getByText = _render6.getByText;
+          submit = getByText("Submit");
+          _context2.next = 5;
+          return _userEvent["default"].click(submit);
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
   test("Error state renders with correct aria attributes", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      label: "test-radioGroup-label",
-      options: options,
-      error: "Error message"
-    })),
-        getByRole = _render5.getByRole,
-        getByText = _render5.getByText;
-
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+        label: "test-radioGroup-label",
+        options: options,
+        error: "Error message"
+      })),
+      getByRole = _render7.getByRole,
+      getByText = _render7.getByText;
     var radioGroup = getByRole("radiogroup");
     var errorMessage = getByText("Error message");
     expect(radioGroup.getAttribute("aria-errormessage")).toBe(errorMessage.id);
     expect(radioGroup.getAttribute("aria-invalid")).toBe("true");
     expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
   });
-  test("Radio group with required constraint and 'undefined' as value, sends an error", function () {
-    var onChange = jest.fn();
-    var onBlur = jest.fn();
-
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      label: "test-radioGroup-label",
-      options: options,
-      onChange: onChange,
-      onBlur: onBlur
-    })),
-        getByRole = _render6.getByRole,
-        getAllByRole = _render6.getAllByRole;
-
-    var radioGroup = getByRole("radiogroup");
-    expect(radioGroup.getAttribute("aria-required")).toBe("true");
-
-    _react2.fireEvent.blur(radioGroup);
-
-    expect(onBlur).toHaveBeenCalledWith({
-      error: "This field is required. Please, choose an option."
-    });
-
-    _userEvent["default"].click(radioGroup);
-
-    _userEvent["default"].click(getAllByRole("radio")[0]);
-
-    expect(onChange).toHaveBeenCalledWith("1");
-
-    _react2.fireEvent.blur(radioGroup);
-
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "1"
-    });
-  });
-  test("Radio group with required constraint and empty string as value, sends an error", function () {
-    var onChange = jest.fn();
-    var onBlur = jest.fn();
-
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      label: "test-radioGroup-label",
-      value: "",
-      options: options,
-      onChange: onChange,
-      onBlur: onBlur
-    })),
-        getByRole = _render7.getByRole,
-        getAllByRole = _render7.getAllByRole;
-
-    var radioGroup = getByRole("radiogroup");
-    expect(radioGroup.getAttribute("aria-required")).toBe("true");
-
-    _react2.fireEvent.blur(radioGroup);
-
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "",
-      error: "This field is required. Please, choose an option."
-    });
-
-    _userEvent["default"].click(getAllByRole("radio")[0]);
-
-    expect(onChange).toHaveBeenCalledWith("1");
-  });
+  test("Radio group with required constraint and 'undefined' as value, sends an error", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var onChange, onBlur, _render8, getByRole, getAllByRole, radioGroup;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          onChange = jest.fn();
+          onBlur = jest.fn();
+          _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            label: "test-radioGroup-label",
+            options: options,
+            onChange: onChange,
+            onBlur: onBlur
+          })), getByRole = _render8.getByRole, getAllByRole = _render8.getAllByRole;
+          radioGroup = getByRole("radiogroup");
+          expect(radioGroup.getAttribute("aria-required")).toBe("true");
+          _react2.fireEvent.blur(radioGroup);
+          expect(onBlur).toHaveBeenCalledWith({
+            error: "This field is required. Please, choose an option."
+          });
+          _context3.next = 9;
+          return _userEvent["default"].click(radioGroup);
+        case 9:
+          _context3.next = 11;
+          return _userEvent["default"].click(getAllByRole("radio")[0]);
+        case 11:
+          expect(onChange).toHaveBeenCalledWith("1");
+          _react2.fireEvent.blur(radioGroup);
+          expect(onBlur).toHaveBeenCalledWith({
+            value: "1"
+          });
+        case 14:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  test("Radio group with required constraint and empty string as value, sends an error", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var onChange, onBlur, _render9, getByRole, getAllByRole, radioGroup;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          onChange = jest.fn();
+          onBlur = jest.fn();
+          _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            label: "test-radioGroup-label",
+            value: "",
+            options: options,
+            onChange: onChange,
+            onBlur: onBlur
+          })), getByRole = _render9.getByRole, getAllByRole = _render9.getAllByRole;
+          radioGroup = getByRole("radiogroup");
+          expect(radioGroup.getAttribute("aria-required")).toBe("true");
+          _react2.fireEvent.blur(radioGroup);
+          expect(onBlur).toHaveBeenCalledWith({
+            value: "",
+            error: "This field is required. Please, choose an option."
+          });
+          _context4.next = 9;
+          return _userEvent["default"].click(getAllByRole("radio")[0]);
+        case 9:
+          expect(onChange).toHaveBeenCalledWith("1");
+        case 10:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
   test("The 'defaultValue' gives the radio group an initial value when it is uncontrolled", function () {
     var onChange = jest.fn();
-
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      defaultValue: "2",
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange
-    })),
-        getAllByRole = _render8.getAllByRole,
-        container = _render8.container;
-
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+        defaultValue: "2",
+        name: "test",
+        label: "test-radio-group-label",
+        helperText: "test-radio-group-helper-text",
+        options: options,
+        onChange: onChange
+      })),
+      getAllByRole = _render10.getAllByRole,
+      container = _render10.container;
     var radio = getAllByRole("radio")[1];
     var submitInput = container.querySelector("input[name=\"test\"]");
     expect(radio.tabIndex).toBe(0);
     expect(radio.getAttribute("aria-checked")).toBe("true");
     expect(submitInput.value).toBe("2");
   });
-  test("Optional radio group conditions: onBlur event doesn't send an error when no radio was checked, has correct aria attributes, custom label and its value is the empty string", function () {
-    var onChange = jest.fn();
-    var onBlur = jest.fn();
-
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange,
-      onBlur: onBlur,
-      optional: true,
-      optionalItemLabel: "No selection"
-    })),
-        getByRole = _render9.getByRole,
-        getByText = _render9.getByText,
-        container = _render9.container;
-
-    var radioGroup = getByRole("radiogroup");
-    expect(radioGroup.getAttribute("aria-required")).toBe("false");
-
-    _react2.fireEvent.blur(radioGroup);
-
-    expect(onBlur).toHaveBeenCalledWith({});
-    expect(radioGroup.getAttribute("aria-invalid")).toBe("false");
-    var optionalLabel = getByText("No selection");
-    var submitInput = container.querySelector("input[name=\"test\"]");
-
-    _userEvent["default"].click(optionalLabel);
-
-    expect(onChange).toHaveBeenCalledWith("");
-    expect(submitInput.value).toBe("");
-  });
-  test("Controlled radio group", function () {
-    var onChange = jest.fn();
-    var onBlur = jest.fn();
-
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      value: "2",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange,
-      onBlur: onBlur
-    })),
-        getByRole = _render10.getByRole,
-        getAllByRole = _render10.getAllByRole,
-        container = _render10.container;
-
-    var radioGroup = getByRole("radiogroup");
-    var radios = getAllByRole("radio");
-    var submitInput = container.querySelector("input[name=\"test\"]");
-    expect(submitInput.value).toBe("2");
-    expect(radios[1].tabIndex).toBe(0);
-    expect(radios[1].getAttribute("aria-checked")).toBe("true");
-
-    _userEvent["default"].click(radios[6]);
-
-    expect(onChange).toHaveBeenCalledWith("7");
-
-    _react2.fireEvent.blur(radioGroup);
-
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "2"
-    });
-  });
-  test("Select an option by clicking on its label", function () {
-    var onChange = jest.fn();
-
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange
-    })),
-        getByText = _render11.getByText,
-        getAllByRole = _render11.getAllByRole,
-        container = _render11.container;
-
-    var radioLabel = getByText("Option 09");
-    var checkedRadio = getAllByRole("radio")[8];
-    var submitInput = container.querySelector("input[name=\"test\"]");
-    expect(checkedRadio.tabIndex).toBe(-1);
-
-    _userEvent["default"].click(radioLabel);
-
-    expect(onChange).toHaveBeenCalledWith("9");
-    expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
-    expect(checkedRadio.tabIndex).toBe(0);
-    expect(document.activeElement).toEqual(checkedRadio);
-    expect(submitInput.value).toBe("9");
-  });
-  test("Select an option by clicking on its radio input", function () {
-    var onChange = jest.fn();
-
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange
-    })),
-        getAllByRole = _render12.getAllByRole,
-        container = _render12.container;
-
-    var checkedRadio = getAllByRole("radio")[6];
-    var submitInput = container.querySelector("input[name=\"test\"]");
-    expect(checkedRadio.tabIndex).toBe(-1);
-
-    _userEvent["default"].click(checkedRadio);
-
-    expect(onChange).toHaveBeenCalledWith("7");
-    expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
-    expect(checkedRadio.tabIndex).toBe(0);
-    expect(document.activeElement).toEqual(checkedRadio);
-    expect(submitInput.value).toBe("7");
-  });
-  test("Select an option that is already checked does not call onChange event but gives the focus", function () {
-    var onChange = jest.fn();
-
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      defaultValue: "2",
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange
-    })),
-        getAllByRole = _render13.getAllByRole;
-
-    var checkedRadio = getAllByRole("radio")[1];
-    expect(checkedRadio.tabIndex).toBe(0);
-    expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
-
-    _userEvent["default"].click(checkedRadio);
-
-    expect(onChange).not.toHaveBeenCalled();
-    expect(document.activeElement).toEqual(checkedRadio);
-  });
-  test("The 'enter' key checks the current focused option if anyone is checked", function () {
-    var onChange = jest.fn();
-
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange
-    })),
-        getByRole = _render14.getByRole,
-        getAllByRole = _render14.getAllByRole,
-        container = _render14.container;
-
-    var radioGroup = getByRole("radiogroup");
-    var checkedRadio = getAllByRole("radio")[0];
-    var submitInput = container.querySelector("input[name=\"test\"]");
-
-    _react2.fireEvent.keyDown(radioGroup, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(onChange).toHaveBeenCalledWith("1");
-    expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
-    expect(checkedRadio.tabIndex).toBe(0);
-    expect(submitInput.value).toBe("1");
-  });
+  test("Optional radio group conditions: onBlur event doesn't send an error when no radio was checked, has correct aria attributes, custom label and its value is the empty string", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var onChange, onBlur, _render11, getByRole, getByText, container, radioGroup, optionalLabel, submitInput;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          onChange = jest.fn();
+          onBlur = jest.fn();
+          _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            name: "test",
+            label: "test-radio-group-label",
+            helperText: "test-radio-group-helper-text",
+            options: options,
+            onChange: onChange,
+            onBlur: onBlur,
+            optional: true,
+            optionalItemLabel: "No selection"
+          })), getByRole = _render11.getByRole, getByText = _render11.getByText, container = _render11.container;
+          radioGroup = getByRole("radiogroup");
+          expect(radioGroup.getAttribute("aria-required")).toBe("false");
+          _react2.fireEvent.blur(radioGroup);
+          expect(onBlur).toHaveBeenCalledWith({});
+          expect(radioGroup.getAttribute("aria-invalid")).toBe("false");
+          optionalLabel = getByText("No selection");
+          submitInput = container.querySelector("input[name=\"test\"]");
+          _context5.next = 12;
+          return _userEvent["default"].click(optionalLabel);
+        case 12:
+          expect(onChange).toHaveBeenCalledWith("");
+          expect(submitInput.value).toBe("");
+        case 14:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  test("Controlled radio group", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var onChange, onBlur, _render12, getByRole, getAllByRole, container, radioGroup, radios, submitInput;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          onChange = jest.fn();
+          onBlur = jest.fn();
+          _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            name: "test",
+            value: "2",
+            label: "test-radio-group-label",
+            helperText: "test-radio-group-helper-text",
+            options: options,
+            onChange: onChange,
+            onBlur: onBlur
+          })), getByRole = _render12.getByRole, getAllByRole = _render12.getAllByRole, container = _render12.container;
+          radioGroup = getByRole("radiogroup");
+          radios = getAllByRole("radio");
+          submitInput = container.querySelector("input[name=\"test\"]");
+          expect(submitInput.value).toBe("2");
+          expect(radios[1].tabIndex).toBe(0);
+          expect(radios[1].getAttribute("aria-checked")).toBe("true");
+          _context6.next = 11;
+          return _userEvent["default"].click(radios[6]);
+        case 11:
+          expect(onChange).toHaveBeenCalledWith("7");
+          _react2.fireEvent.blur(radioGroup);
+          expect(onBlur).toHaveBeenCalledWith({
+            value: "2"
+          });
+        case 14:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+  test("Select an option by clicking on its label", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+    var onChange, _render13, getByText, getAllByRole, container, radioLabel, checkedRadio, submitInput;
+    return _regenerator["default"].wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          onChange = jest.fn();
+          _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            name: "test",
+            label: "test-radio-group-label",
+            helperText: "test-radio-group-helper-text",
+            options: options,
+            onChange: onChange
+          })), getByText = _render13.getByText, getAllByRole = _render13.getAllByRole, container = _render13.container;
+          radioLabel = getByText("Option 09");
+          checkedRadio = getAllByRole("radio")[8];
+          submitInput = container.querySelector("input[name=\"test\"]");
+          expect(checkedRadio.tabIndex).toBe(-1);
+          _context7.next = 8;
+          return _userEvent["default"].click(radioLabel);
+        case 8:
+          expect(onChange).toHaveBeenCalledWith("9");
+          expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
+          expect(checkedRadio.tabIndex).toBe(0);
+          expect(document.activeElement).toEqual(checkedRadio);
+          expect(submitInput.value).toBe("9");
+        case 13:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })));
+  test("Select an option by clicking on its radio input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+    var onChange, _render14, getAllByRole, container, checkedRadio, submitInput;
+    return _regenerator["default"].wrap(function _callee8$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          onChange = jest.fn();
+          _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            name: "test",
+            label: "test-radio-group-label",
+            helperText: "test-radio-group-helper-text",
+            options: options,
+            onChange: onChange
+          })), getAllByRole = _render14.getAllByRole, container = _render14.container;
+          checkedRadio = getAllByRole("radio")[6];
+          submitInput = container.querySelector("input[name=\"test\"]");
+          expect(checkedRadio.tabIndex).toBe(-1);
+          _context8.next = 7;
+          return _userEvent["default"].click(checkedRadio);
+        case 7:
+          expect(onChange).toHaveBeenCalledWith("7");
+          expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
+          expect(checkedRadio.tabIndex).toBe(0);
+          expect(document.activeElement).toEqual(checkedRadio);
+          expect(submitInput.value).toBe("7");
+        case 12:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee8);
+  })));
+  test("Select an option that is already checked does not call onChange event but gives the focus", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+    var onChange, _render15, getAllByRole, checkedRadio;
+    return _regenerator["default"].wrap(function _callee9$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          onChange = jest.fn();
+          _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            defaultValue: "2",
+            name: "test",
+            label: "test-radio-group-label",
+            helperText: "test-radio-group-helper-text",
+            options: options,
+            onChange: onChange
+          })), getAllByRole = _render15.getAllByRole;
+          checkedRadio = getAllByRole("radio")[1];
+          expect(checkedRadio.tabIndex).toBe(0);
+          expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
+          _context9.next = 7;
+          return _userEvent["default"].click(checkedRadio);
+        case 7:
+          expect(onChange).not.toHaveBeenCalled();
+          expect(document.activeElement).toEqual(checkedRadio);
+        case 9:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee9);
+  })));
   test("The 'space' key checks the current focused option if anyone is checked", function () {
     var onChange = jest.fn();
-
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange
-    })),
-        getByRole = _render15.getByRole,
-        getAllByRole = _render15.getAllByRole,
-        container = _render15.container;
-
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+        name: "test",
+        label: "test-radio-group-label",
+        helperText: "test-radio-group-helper-text",
+        options: options,
+        onChange: onChange
+      })),
+      getByRole = _render16.getByRole,
+      getAllByRole = _render16.getAllByRole,
+      container = _render16.container;
     var radioGroup = getByRole("radiogroup");
     var checkedRadio = getAllByRole("radio")[0];
     var submitInput = container.querySelector("input[name=\"test\"]");
-
     _react2.fireEvent.keyDown(radioGroup, {
-      key: "Space",
+      key: " ",
       code: "Space",
       keyCode: 32,
       charCode: 32
     });
-
     expect(onChange).toHaveBeenCalledWith("1");
     expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
     expect(checkedRadio.tabIndex).toBe(0);
@@ -466,39 +506,33 @@ describe("Radio Group component tests", function () {
   test("When the radio group gains the focus by keyboard ('tab' key), it goes to the first option (if no one was previously selected), without selecting it", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
-
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange,
-      onBlur: onBlur
-    })),
-        getByRole = _render16.getByRole,
-        getAllByRole = _render16.getAllByRole,
-        container = _render16.container;
-
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+        name: "test",
+        label: "test-radio-group-label",
+        helperText: "test-radio-group-helper-text",
+        options: options,
+        onChange: onChange,
+        onBlur: onBlur
+      })),
+      getByRole = _render17.getByRole,
+      getAllByRole = _render17.getAllByRole,
+      container = _render17.container;
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
     var submitInput = container.querySelector("input[name=\"test\"]");
     var checkedRadio = getAllByRole("radio")[0];
-
     _userEvent["default"].tab();
-
     expect(onChange).not.toHaveBeenCalled();
     expect(submitInput.value).toBe("");
     expect(checkedRadio.tabIndex).toBe(0);
     expect(checkedRadio.getAttribute("aria-checked")).toBe("false");
     expect(document.activeElement).toEqual(checkedRadio);
-
     _react2.fireEvent.keyDown(radioGroup, {
       key: "ArrowRight",
       code: "ArrowRight",
       keyCode: 39,
       charCode: 39
     });
-
     expect(onBlur).not.toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(radios[1].getAttribute("aria-checked")).toBe("true");
@@ -509,45 +543,39 @@ describe("Radio Group component tests", function () {
   test("The 'arrowDown' and 'arrowRight' keys move the selection to the next radio. When the last radio is reached, moves the selection to the first one", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
-
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      defaultValue: "8",
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange,
-      onBlur: onBlur
-    })),
-        getByRole = _render17.getByRole,
-        getAllByRole = _render17.getAllByRole,
-        container = _render17.container;
-
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+        defaultValue: "8",
+        name: "test",
+        label: "test-radio-group-label",
+        helperText: "test-radio-group-helper-text",
+        options: options,
+        onChange: onChange,
+        onBlur: onBlur
+      })),
+      getByRole = _render18.getByRole,
+      getAllByRole = _render18.getAllByRole,
+      container = _render18.container;
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
     var submitInput = container.querySelector("input[name=\"test\"]");
-
     _react2.fireEvent.keyDown(radioGroup, {
       key: "ArrowDown",
       code: "ArrowDown",
       keyCode: 40,
       charCode: 40
     });
-
     expect(onBlur).not.toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(radios[8].getAttribute("aria-checked")).toBe("true");
     expect(document.activeElement).toEqual(radios[8]);
     expect(radios[8].tabIndex).toBe(0);
     expect(submitInput.value).toBe("9");
-
     _react2.fireEvent.keyDown(radioGroup, {
       key: "ArrowRight",
       code: "ArrowRight",
       keyCode: 39,
       charCode: 39
     });
-
     expect(onBlur).not.toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledTimes(2);
     expect(radios[0].getAttribute("aria-checked")).toBe("true");
@@ -558,45 +586,39 @@ describe("Radio Group component tests", function () {
   test("The 'arrowUp' and 'arrowLeft' keys move the selection to the previous radio. When the first radio is reached, moves the selection to the last one", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
-
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      defaultValue: "2",
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange,
-      onBlur: onBlur
-    })),
-        getByRole = _render18.getByRole,
-        getAllByRole = _render18.getAllByRole,
-        container = _render18.container;
-
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+        defaultValue: "2",
+        name: "test",
+        label: "test-radio-group-label",
+        helperText: "test-radio-group-helper-text",
+        options: options,
+        onChange: onChange,
+        onBlur: onBlur
+      })),
+      getByRole = _render19.getByRole,
+      getAllByRole = _render19.getAllByRole,
+      container = _render19.container;
     var radioGroup = getByRole("radiogroup");
     var radios = getAllByRole("radio");
     var submitInput = container.querySelector("input[name=\"test\"]");
-
     _react2.fireEvent.keyDown(radioGroup, {
       key: "ArrowUp",
       code: "ArrowUp",
       keyCode: 38,
       charCode: 38
     });
-
     expect(onBlur).not.toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(radios[0].getAttribute("aria-checked")).toBe("true");
     expect(document.activeElement).toEqual(radios[0]);
     expect(radios[0].tabIndex).toBe(0);
     expect(submitInput.value).toBe("1");
-
     _react2.fireEvent.keyDown(radioGroup, {
       key: "ArrowLeft",
       code: "ArrowLeft",
       keyCode: 37,
       charCode: 37
     });
-
     expect(onBlur).not.toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledTimes(2);
     expect(radios[8].getAttribute("aria-checked")).toBe("true");
@@ -604,92 +626,129 @@ describe("Radio Group component tests", function () {
     expect(radios[8].tabIndex).toBe(0);
     expect(submitInput.value).toBe("9");
   });
-  test("Keyboard focus movement continues from the last radio input clicked", function () {
-    var onChange = jest.fn();
-
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange
-    })),
-        getByRole = _render19.getByRole,
-        getAllByRole = _render19.getAllByRole,
-        container = _render19.container;
-
-    var radioGroup = getByRole("radiogroup");
-    var radios = getAllByRole("radio");
-    var submitInput = container.querySelector("input[name=\"test\"]");
-
-    _userEvent["default"].click(radios[3]);
-
-    _react2.fireEvent.keyDown(radioGroup, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    expect(onChange).toHaveBeenCalledWith("5");
-    expect(radios[4].getAttribute("aria-checked")).toBe("true");
-    expect(document.activeElement).toEqual(radios[4]);
-    expect(radios[4].tabIndex).toBe(0);
-    expect(submitInput.value).toBe("5");
-
-    _userEvent["default"].click(radios[8]);
-
-    _react2.fireEvent.keyDown(radioGroup, {
-      key: "ArrowLeft",
-      code: "ArrowLeft",
-      keyCode: 37,
-      charCode: 37
-    });
-
-    expect(onChange).toHaveBeenCalledWith("8");
-    expect(radios[7].getAttribute("aria-checked")).toBe("true");
-    expect(document.activeElement).toEqual(radios[7]);
-    expect(radios[7].tabIndex).toBe(0);
-    expect(submitInput.value).toBe("8");
-  });
-  test("Readonly radio group lets the user move the focus, but neither click nor keyboard press changes the value", function () {
-    var onChange = jest.fn();
-
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
-      name: "test",
-      label: "test-radio-group-label",
-      helperText: "test-radio-group-helper-text",
-      options: options,
-      onChange: onChange,
-      readonly: true
-    })),
-        getByRole = _render20.getByRole,
-        getAllByRole = _render20.getAllByRole,
-        container = _render20.container;
-
-    var radioGroup = getByRole("radiogroup");
-    var radios = getAllByRole("radio");
-    var submitInput = container.querySelector("input[name=\"test\"]");
-
-    _userEvent["default"].click(radios[5]);
-
-    expect(onChange).not.toHaveBeenCalled();
-    expect(radios[5].getAttribute("aria-checked")).toBe("false");
-    expect(document.activeElement).toEqual(radios[5]);
-    expect(radios[5].tabIndex).toBe(0);
-    expect(submitInput.value).toBe("");
-
-    _react2.fireEvent.keyDown(radioGroup, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    expect(onChange).not.toHaveBeenCalled();
-    expect(radios[4].getAttribute("aria-checked")).toBe("false");
-    expect(document.activeElement).toEqual(radios[4]);
-    expect(radios[4].tabIndex).toBe(0);
-    expect(submitInput.value).toBe("");
-  });
+  test("Keyboard focus movement continues from the last radio input clicked", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+    var onChange, _render20, getByRole, getAllByRole, container, radioGroup, radios, submitInput;
+    return _regenerator["default"].wrap(function _callee10$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          onChange = jest.fn();
+          _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            name: "test",
+            label: "test-radio-group-label",
+            helperText: "test-radio-group-helper-text",
+            options: options,
+            onChange: onChange
+          })), getByRole = _render20.getByRole, getAllByRole = _render20.getAllByRole, container = _render20.container;
+          radioGroup = getByRole("radiogroup");
+          radios = getAllByRole("radio");
+          submitInput = container.querySelector("input[name=\"test\"]");
+          _context10.next = 7;
+          return _userEvent["default"].click(radios[3]);
+        case 7:
+          _react2.fireEvent.keyDown(radioGroup, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          expect(onChange).toHaveBeenCalledWith("5");
+          expect(radios[4].getAttribute("aria-checked")).toBe("true");
+          expect(document.activeElement).toEqual(radios[4]);
+          expect(radios[4].tabIndex).toBe(0);
+          expect(submitInput.value).toBe("5");
+          _context10.next = 15;
+          return _userEvent["default"].click(radios[8]);
+        case 15:
+          _react2.fireEvent.keyDown(radioGroup, {
+            key: "ArrowLeft",
+            code: "ArrowLeft",
+            keyCode: 37,
+            charCode: 37
+          });
+          expect(onChange).toHaveBeenCalledWith("8");
+          expect(radios[7].getAttribute("aria-checked")).toBe("true");
+          expect(document.activeElement).toEqual(radios[7]);
+          expect(radios[7].tabIndex).toBe(0);
+          expect(submitInput.value).toBe("8");
+        case 21:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee10);
+  })));
+  test("Read-only radio group lets the user move the focus, but neither click nor keyboard press changes the value", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+    var onChange, _render21, getByRole, getAllByRole, container, radioGroup, radios, submitInput;
+    return _regenerator["default"].wrap(function _callee11$(_context11) {
+      while (1) switch (_context11.prev = _context11.next) {
+        case 0:
+          onChange = jest.fn();
+          _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            name: "test",
+            label: "test-radio-group-label",
+            helperText: "test-radio-group-helper-text",
+            options: options,
+            onChange: onChange,
+            readOnly: true
+          })), getByRole = _render21.getByRole, getAllByRole = _render21.getAllByRole, container = _render21.container;
+          radioGroup = getByRole("radiogroup");
+          radios = getAllByRole("radio");
+          submitInput = container.querySelector("input[name=\"test\"]");
+          _context11.next = 7;
+          return _userEvent["default"].click(radios[5]);
+        case 7:
+          expect(onChange).not.toHaveBeenCalled();
+          expect(radios[5].getAttribute("aria-checked")).toBe("false");
+          expect(document.activeElement).toEqual(radios[5]);
+          expect(radios[5].tabIndex).toBe(0);
+          expect(submitInput.value).toBe("");
+          _react2.fireEvent.keyDown(radioGroup, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          expect(onChange).not.toHaveBeenCalled();
+          expect(radios[4].getAttribute("aria-checked")).toBe("false");
+          expect(document.activeElement).toEqual(radios[4]);
+          expect(radios[4].tabIndex).toBe(0);
+          expect(submitInput.value).toBe("");
+        case 18:
+        case "end":
+          return _context11.stop();
+      }
+    }, _callee11);
+  })));
+  test("Read-only radio group sends its value on submit", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
+    var handlerOnSubmit, _render22, getByText, submit;
+    return _regenerator["default"].wrap(function _callee12$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
+        case 0:
+          handlerOnSubmit = jest.fn(function (e) {
+            e.preventDefault();
+            var formData = new FormData(e.target);
+            var formProps = Object.fromEntries(formData);
+            expect(formProps).toStrictEqual({
+              radiogroup: "data"
+            });
+          });
+          _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+            onSubmit: handlerOnSubmit
+          }, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+            name: "radiogroup",
+            label: "test-radio-group-label",
+            value: "data",
+            options: options,
+            readOnly: true
+          }), /*#__PURE__*/_react["default"].createElement("button", {
+            type: "submit"
+          }, "Submit"))), getByText = _render22.getByText;
+          submit = getByText("Submit");
+          _context12.next = 5;
+          return _userEvent["default"].click(submit);
+        case 5:
+        case "end":
+          return _context12.stop();
+      }
+    }, _callee12);
+  })));
 });