diff --git a/spec/pivotal-ui-react/radio-group/radio-group_spec.js b/spec/pivotal-ui-react/radio-group/radio-group_spec.js
index 2677a9e87..b66df372b 100644
--- a/spec/pivotal-ui-react/radio-group/radio-group_spec.js
+++ b/spec/pivotal-ui-react/radio-group/radio-group_spec.js
@@ -1,44 +1,65 @@
require('../spec_helper');
+var RadioGroup = require('../../../src/pivotal-ui-react/radio-group/radio-group').RadioGroup;
+var Radio = require('../../../src/pivotal-ui-react/radio/radio').Radio;
describe('RadioGroup', function() {
- var changeSpy;
- beforeEach(function() {
- var RadioGroup = require('../../../src/pivotal-ui-react/radio-group/radio-group').RadioGroup;
- var Radio = require('../../../src/pivotal-ui-react/radio/radio').Radio;
-
- changeSpy = jasmine.createSpy('change');
- React.render(
-
- One!!!
- The two value
- Three
- ,
- root
- );
- });
+ describe('basic RadioGroup', function() {
+ var changeSpy;
+ beforeEach(function() {
- afterEach(function() {
- React.unmountComponentAtNode(root);
- });
+ changeSpy = jasmine.createSpy('change');
+ React.render(
+
+ One!!!
+ The two value
+ Three
+ ,
+ root
+ );
+ });
- it('renders the radio group', function() {
- expect('.radio-group#clear-channel').toExist();
- });
+ afterEach(function() {
+ React.unmountComponentAtNode(root);
+ });
- it('renders 3 radiobuttons', function() {
- expect('.radio-group .radio label :radio[name=bananas]').toHaveLength(3);
- expect('.radio-group .radio label :radio[name=bananas]:eq(0)').toHaveValue('1');
- expect('.radio-group .radio label :radio[name=bananas]:eq(1)').toHaveValue('2');
- expect('.radio-group .radio label :radio[name=bananas]:eq(2)').toHaveValue('3');
+ it('renders the radio group', function() {
+ expect('.radio-group').toExist();
+ });
+
+ it('renders 3 radiobuttons', function() {
+ expect('.radio-group .radio label :radio[name=bananas]').toHaveLength(3);
+ expect('.radio-group .radio label :radio[name=bananas]:eq(0)').toHaveValue('1');
+ expect('.radio-group .radio label :radio[name=bananas]:eq(1)').toHaveValue('2');
+ expect('.radio-group .radio label :radio[name=bananas]:eq(2)').toHaveValue('3');
+ });
+
+ describe('when the radio button is changed', function() {
+ beforeEach(function() {
+ $('.radio-group :radio').simulate('change').simulate('click');
+ });
+
+ it('calls the change callback', function() {
+ expect(changeSpy).toHaveBeenCalledWith('1');
+ });
+ });
});
- describe('when the radio button is changed', function() {
+ describe('RadioGroup with custom attributes', function() {
beforeEach(function() {
- $('.radio-group :radio').simulate('change').simulate('click');
+ React.render(
+
+ One!!!
+ The two value
+ Three
+ ,
+ root
+ );
});
- it('calls the change callback', function() {
- expect(changeSpy).toHaveBeenCalledWith('1');
+ it('renders the radio group with the overrides', function() {
+ expect('.radio-group').toHaveAttr('id', 'clear-channel');
+ expect('.radio-group').toHaveClass('1234');
+ expect('.radio-group').toHaveCss({color: 'rgb(255, 0, 0)'});
});
});
});
diff --git a/src/pivotal-ui-react/radio-group/radio-group.js b/src/pivotal-ui-react/radio-group/radio-group.js
index cebc0d820..9aa1c099e 100644
--- a/src/pivotal-ui-react/radio-group/radio-group.js
+++ b/src/pivotal-ui-react/radio-group/radio-group.js
@@ -1,5 +1,6 @@
var React = require('react/addons');
var cloneWithProps = React.addons.cloneWithProps;
+import {mergeProps} from 'pui-react-helpers';
/**
* @component RadioGroup
@@ -44,10 +45,12 @@ var RadioGroup = React.createClass({
},
render: function() {
- var {id, name, children} = this.props;
+ var {name, children, ...others} = this.props;
children = React.Children.map(children, (child) => cloneWithProps(child, {name, onChange: this.onChange}));
+ var props = mergeProps(others, {className: 'radio-group'});
- return
{children}
;
+
+ return {children}
;
}
});