feat(form-input-radio) send id on change

packages/Form/Input/radio/src/Radio.js

@@ -1,26 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InputList, InputConstants as Constants, withInput, omit } from '@axa-fr/react-toolkit-form-core';
+import {
+  InputConstants as Constants,
+  InputList,
+  omit,
+  withInput,
+} from '@axa-fr/react-toolkit-form-core';
 import RadioItem from './RadioItem';
 import RadioModes from './RadioModes';
 
 const omitProperties = omit(['mode', 'helpMessage', 'id']);
 
 const Radio = ({
-                 isVisible,
-                 className,
-                 disabled,
-                 options,
-                 value,
-                 name,
-                 onBlur,
-                 onFocus,
-                 readOnly,
-                 classModifier,
-                 children,
-                 onChange,
-                 ...otherProps
-               }) => options.map(option => {
+  isVisible,
+  className,
+  disabled,
+  options,
+  value,
+  name,
+  onBlur,
+  onFocus,
+  readOnly,
+  classModifier,
+  children,
+  onChange,
+  ...otherProps
+}) =>
+  options.map(option => {
     const isChecked = option.value === value;
     return (
       <RadioItem
@@ -44,7 +50,6 @@ const Radio = ({
     );
   });
 
-
 const propTypes = {
   ...Constants.propTypes,
   options: PropTypes.array.isRequired,
@@ -64,11 +69,11 @@ const defaultProps = {
 };
 
 const handlers = {
-  onChange: ({ onChange, name, id }) => e => {
+  onChange: ({ onChange, name }) => ({ value, id }) => {
     onChange({
-      value: e.value,
-      name,
+      value,
       id,
+      name,
     });
   },
 };

packages/Form/Input/radio/src/RadioInput.spec.js

@@ -1,21 +1,65 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import ReactTestUtils, { act } from 'react-dom/test-utils';
+import ReactDOM from 'react-dom';
 import RadioInput from './RadioInput';
 
-describe('<DateInput>', () => {
-  it('renders DateInput correctly', () => {
+describe('<RadioInput />', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('renders RadioInput correctly', () => {
     const tree = renderer
       .create(
         <RadioInput
-          label="Image *"
-          id="iddateinput"
-          name="placeImage"
-          options={[]}
-          values={[]}
+          label="Label"
+          id="id"
+          name="name"
+          options={[
+            { label: 'Option 1', value: '1', id: 'option1_id' },
+            { label: 'Option 2', value: '2', id: 'option2_id' },
+          ]}
           onChange={() => {}}
         />
       )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('should send the id, name and value on change', () => {
+    const onChange = jest.fn();
+    const Element = (
+      <RadioInput
+        label="Label"
+        id="id"
+        name="name"
+        options={[
+          { label: 'Option 1', value: '1', id: 'option1_id' },
+          { label: 'Option 2', value: '2', id: 'option2_id' },
+        ]}
+        onChange={onChange}
+      />
+    );
+
+    act(() => {
+      ReactDOM.render(Element, container);
+      ReactTestUtils.Simulate.change(container.querySelector('#option1_id'));
+    });
+
+    expect(onChange.mock.calls).toHaveLength(1);
+    expect(onChange.mock.calls[0][0]).toEqual({
+      id: 'option1_id',
+      name: 'name',
+      value: '1',
+    });
+  });
 });

packages/Form/Input/radio/src/__snapshots__/RadioInput.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<DateInput> renders DateInput correctly 1`] = `
+exports[`<RadioInput /> renders RadioInput correctly 1`] = `
 <div
   className="row af-form__group"
 >
@@ -11,11 +11,70 @@ exports[`<DateInput> renders DateInput correctly 1`] = `
       className="af-form__group-label"
       htmlFor=""
     >
-      Image *
+      Label
     </label>
   </div>
   <div
     className="col-md-10"
-  />
+  >
+    <div
+      className="af-form__radio-custom"
+    >
+      <input
+        autoFocus={null}
+        checked={false}
+        className="af-form__input-radio"
+        disabled={false}
+        id="option1_id"
+        name="name"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        readOnly={false}
+        tabIndex={null}
+        type="radio"
+        value="1"
+      />
+      <label
+        className="af-form__label"
+        htmlFor="option1_id"
+      >
+        <span
+          className="af-form__description"
+        >
+          Option 1
+        </span>
+      </label>
+    </div>
+    <div
+      className="af-form__radio-custom"
+    >
+      <input
+        autoFocus={null}
+        checked={false}
+        className="af-form__input-radio"
+        disabled={false}
+        id="option2_id"
+        name="name"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        readOnly={false}
+        tabIndex={null}
+        type="radio"
+        value="2"
+      />
+      <label
+        className="af-form__label"
+        htmlFor="option2_id"
+      >
+        <span
+          className="af-form__description"
+        >
+          Option 2
+        </span>
+      </label>
+    </div>
+  </div>
 </div>
 `;