diff --git a/spec/pivotal-ui-react/radio/radio-group_spec.js b/spec/pivotal-ui-react/radio/radio-group_spec.js
index 71a3afc22..b43e6e352 100644
--- 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(
- first
- second
- third
- , root);
+ beforeEach(() => {
+ subject = ReactDOM.render(
+ first
+ second
+ third
+ , 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
index 2fdf18674..70cb78da9 100644
--- a/src/react/radio/radio-group.js
+++ b/src/react/radio/radio-group.js
@@ -5,8 +5,9 @@ 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() {
@@ -14,17 +15,14 @@ export class RadioGroup extends React.Component {
}
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
{renderedChildren}
;
+ return (
+
+ {React.Children.map(children, child =>
+ React.cloneElement(child, {...radioProps, checked: child.props.value === value}))}
+
+ );
}
}