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}
; } });