RadioGroups can hold value and passes and to children [#159416165]

Signed-off-by: Reid Mitchell <rmitchell@pivotal.io>
pivotal-cf · Aug 9, 2018 · da2dccb · da2dccb
1 parent 876493c
commit da2dccb
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 34 deletions.
diff --git a/spec/pivotal-ui-react/radio/radio-group_spec.js b/spec/pivotal-ui-react/radio/radio-group_spec.js
@@ -2,40 +2,56 @@ import '../spec_helper';
 import {Radio, RadioGroup} from '../../../src/react/radio';
 
 describe('RadioGroup', () => {
+  let subject;
+
   const secondRadioSpy = jasmine.createSpy('secondRadio');
 
-  const renderComponent = props => ReactDOM.render(<RadioGroup {...props}>
-    <Radio value="one">first</Radio>
-    <Radio value="two" onChange={secondRadioSpy}>second</Radio>
-    <Radio value="three">third</Radio>
-  </RadioGroup>, root);
+  beforeEach(() => {
+    subject = ReactDOM.render(<RadioGroup name="group-1">
+      <Radio value="one">first</Radio>
+      <Radio value="two" onChange={secondRadioSpy}>second</Radio>
+      <Radio value="three">third</Radio>
+    </RadioGroup>, root);
+  });
+
+  it('renders', () => {
+    expect('.pui-radio-group input[type="radio"]').toHaveLength(3);
+    expect('.pui-radio-group input[type="radio"]:eq(0)').toHaveValue('one');
+    expect('.pui-radio-group input[type="radio"]:eq(1)').toHaveValue('two');
+    expect('.pui-radio-group input[type="radio"]:eq(2)').toHaveValue('three');
+  });
 
-  describe('basic RadioGroup', () => {
-    it('renders', () => {
-      renderComponent({name: 'radioGroup'});
+  describe('when the radio button is changed', () => {
+    let clickedValue, changeSpy;
 
-      expect('.pui-radio-group input[type="radio"]').toHaveLength(3);
-      expect('.pui-radio-group input[type="radio"]:eq(0)').toHaveValue('one');
-      expect('.pui-radio-group input[type="radio"]:eq(1)').toHaveValue('two');
-      expect('.pui-radio-group input[type="radio"]:eq(2)').toHaveValue('three');
+    beforeEach(() => {
+      clickedValue = null;
+      changeSpy = jasmine.createSpy('change').and.callFake(event => clickedValue = event.nativeEvent.target.value);
+      subject::setProps({onChange: changeSpy, name: 'radioGroup'});
+      $('.pui-radio-group input[type="radio"]:eq(0)').simulate('change');
     });
 
-    describe('when the radio button is changed', () => {
-      it('calls the change callback', () => {
-        let clickedValue = null;
-        const changeSpy = jasmine.createSpy('change').and.callFake(event => clickedValue = event.nativeEvent.target.value);
-        renderComponent({onChange: changeSpy, name: 'radioGroup'});
-        $('.pui-radio-group input[type="radio"]:eq(0)').simulate('change');
+    it('calls the change callback', () => {
+      expect(changeSpy.calls.count()).toEqual(1);
+      expect(clickedValue).toEqual('one');
+    });
+  });
 
-        expect(changeSpy.calls.count()).toEqual(1);
-        expect(clickedValue).toEqual('one');
-      });
+  describe('when given a value', () => {
+    beforeEach(() => {
+      subject::setProps({value: 'three'});
+    });
+
+    it('checks the corresponding radio', () => {
+      expect('.pui-radio-group input[type="radio"]:eq(0)').not.toBeChecked();
+      expect('.pui-radio-group input[type="radio"]:eq(1)').not.toBeChecked();
+      expect('.pui-radio-group input[type="radio"]:eq(2)').toBeChecked();
     });
   });
 
   describe('other props and no onChange', () => {
     beforeEach(() => {
-      renderComponent({id: 'clear-channel', style: {color: 'rgb(255, 0, 0)'}, className: '1234', name: 'radioGroup'});
+      subject::setProps({id: 'clear-channel', style: {color: 'rgb(255, 0, 0)'}, className: '1234'});
     });
 
     it('passes id, style, and className to radio group', () => {

diff --git a/src/react/radio/radio-group.js b/src/react/radio/radio-group.js
@@ -5,26 +5,24 @@ import classnames from 'classnames';
 export class RadioGroup extends React.Component {
   static propTypes = {
     id: PropTypes.string,
-    name: PropTypes.string.isRequired,
-    onChange: PropTypes.func
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    value: PropTypes.any
   };
 
   componentDidMount() {
     require('../../css/forms');
   }
 
   render() {
-    const {name, children, onChange, className, ...others} = this.props;
+    const {name, children, onChange, className, value, ...others} = this.props;
     const radioProps = onChange ? {name, onChange} : {name};
 
-    const renderedChildren = React.Children.map(children, child =>
-      React.cloneElement(child, radioProps));
-
-    const props = {
-      ...others,
-      className: classnames('pui-radio-group', className)
-    };
-
-    return <div {...props} >{renderedChildren}</div>;
+    return (
+      <div {...{...others, className: classnames('pui-radio-group', className)}}>
+        {React.Children.map(children, child =>
+          React.cloneElement(child, {...radioProps, checked: child.props.value === value}))}
+      </div>
+    );
   }
 }