From 1362f1d8cc273a743229a188263fc714f830f4c1 Mon Sep 17 00:00:00 2001 From: Jon de la Motte Date: Thu, 19 May 2016 09:56:00 -0700 Subject: [PATCH] Fixes #262 issue with RadioGroup children --- .../RadioButtonLabeled.spec.jsx | 16 ++ src/components/RadioGroup/RadioGroup.jsx | 23 +- src/components/RadioGroup/RadioGroup.spec.jsx | 198 ++++++++++-------- 3 files changed, 137 insertions(+), 100 deletions(-) diff --git a/src/components/RadioButtonLabeled/RadioButtonLabeled.spec.jsx b/src/components/RadioButtonLabeled/RadioButtonLabeled.spec.jsx index 204c05f5a..0d566b375 100644 --- a/src/components/RadioButtonLabeled/RadioButtonLabeled.spec.jsx +++ b/src/components/RadioButtonLabeled/RadioButtonLabeled.spec.jsx @@ -18,6 +18,22 @@ describeWithDOM; describe('RadioButtonLabeled', () => { common(RadioButtonLabeled); + describe('render', () => { + it('should allow multiple Label children', () => { + const wrapper = shallow( + + + one + two + + + ); + + assert.equal(wrapper.find(RadioButtonLabeled.Label).children().at(0).text(), 'one', 'wrong or missing first Label child'); + assert.equal(wrapper.find(RadioButtonLabeled.Label).children().at(1).text(), 'two', 'wrong or missing second Label child'); + }); + }); + describe('props', () => { describe('isDisabled', () => { it('passes the value through to its `RadioButton` instance.', () => { diff --git a/src/components/RadioGroup/RadioGroup.jsx b/src/components/RadioGroup/RadioGroup.jsx index 8c2cf6664..ed92c3097 100644 --- a/src/components/RadioGroup/RadioGroup.jsx +++ b/src/components/RadioGroup/RadioGroup.jsx @@ -9,7 +9,6 @@ import reducers from './RadioGroup.reducers'; const cx = lucidClassNames.bind('&-RadioGroup'); - const { func, node, @@ -114,24 +113,24 @@ const RadioGroup = createClass({ // equal to true, then the index of the last one should override the // value of the `selectedIndex` prop. const actualSelectedIndex = selectedIndexFromChildren !== -1 - ? selectedIndexFromChildren - : selectedIndex; + ? selectedIndexFromChildren + : selectedIndex; return ( {_.map(radioButtonChildProps, (radioButtonChildProp, index) => { return ( ); })} diff --git a/src/components/RadioGroup/RadioGroup.spec.jsx b/src/components/RadioGroup/RadioGroup.spec.jsx index d7ad80c23..9f1b69b7a 100644 --- a/src/components/RadioGroup/RadioGroup.spec.jsx +++ b/src/components/RadioGroup/RadioGroup.spec.jsx @@ -18,134 +18,156 @@ describe('RadioGroup', () => { describe('props', () => { describe('name', () => { it('sets the `name` attribute of the child radio buttons.', () => { - const name = getRandom(); - const wrapper = shallow( - + const name = getRandom(); + const wrapper = shallow( + + + + + + ); + + _.forEach(wrapper.find(RadioButtonLabeled).nodes, (node) => { + assert.equal(node.props.name, name); + }); + }); + + it('defaults to a string that is passed along to the children.', () => { + const wrapper = mount( + ); + const name = wrapper.first().prop('name'); - _.forEach(wrapper.find(RadioButtonLabeled).nodes, (node) => { - assert.equal(node.props.name, name); + _.forEach(wrapper.find(RadioButtonLabeled).nodes, (node) => { + assert.equal(node.props.name, name); + }); }); }); - it('defaults to a string that is passed along to the children.', () => { - const wrapper = mount( - - - - - - ); - const name = wrapper.first().prop('name'); + describe('onSelect', () => { + it('defaults to the Lodash `noop` method.', () => { + const wrapper = shallow(); - _.forEach(wrapper.find(RadioButtonLabeled).nodes, (node) => { - assert.equal(node.props.name, name); + assert.equal(wrapper.prop('onSelect'), _.noop); }); }); - }); - describe('onSelect', () => { - it('defaults to the Lodash `noop` method.', () => { - const wrapper = shallow(); + describe('selectedIndex', () => { + it('sets the `isSelected` prop of the child radio button at the matching index to true...', () => { + const wrapper= shallow( + + + + + + ); + const childNodes = wrapper.find(RadioButtonLabeled).nodes; - assert.equal(wrapper.prop('onSelect'), _.noop); - }); - }); + assert.equal(childNodes[0].props.isSelected, false); + assert.equal(childNodes[1].props.isSelected, false); + assert.equal(childNodes[2].props.isSelected, true); + }); - describe('selectedIndex', () => { - it('sets the `isSelected` prop of the child radio button at the matching index to true...', () => { - const wrapper= shallow( - - - - - - ); - const childNodes = wrapper.find(RadioButtonLabeled).nodes; + it('...except when a child component already has an explicitly defined `isSelected` prop which takes precedence.', () => { + const wrapper = shallow( + + + + + + ); + const childNodes = wrapper.find(RadioButtonLabeled).nodes; - assert.equal(childNodes[0].props.isSelected, false); - assert.equal(childNodes[1].props.isSelected, false); - assert.equal(childNodes[2].props.isSelected, true); - }); + assert.equal(childNodes[0].props.isSelected, false); + assert.equal(childNodes[1].props.isSelected, true); + assert.equal(childNodes[2].props.isSelected, false); + }); - it('...except when a child component already has an explicitly defined `isSelected` prop which takes precedence.', () => { - const wrapper = shallow( - - - - - - ); - const childNodes = wrapper.find(RadioButtonLabeled).nodes; + it('defaults to 0.', () => { + const wrapper = shallow( + + + + + + ); + const childNodes = wrapper.find(RadioButtonLabeled).nodes; - assert.equal(childNodes[0].props.isSelected, false); - assert.equal(childNodes[1].props.isSelected, true); - assert.equal(childNodes[2].props.isSelected, false); + assert.equal(childNodes[0].props.isSelected, true); + assert.equal(childNodes[1].props.isSelected, false); + assert.equal(childNodes[2].props.isSelected, false); + }); }); - it('defaults to 0.', () => { - const wrapper = shallow( - - - - - - ); - const childNodes = wrapper.find(RadioButtonLabeled).nodes; + describe('pass throughs', () => { + it('passes through all props not defined in `propTypes` to the root element.', () => { + const wrapper = shallow( + + + + + + ); + const rootProps = _.keys(wrapper.first().props()); - assert.equal(childNodes[0].props.isSelected, true); - assert.equal(childNodes[1].props.isSelected, false); - assert.equal(childNodes[2].props.isSelected, false); + // It should pass `foo`, `bar`, `baz`, `qux`, and `quux` through + // to the root element. + _.forEach(['foo', 'bar', 'baz', 'qux', 'quux'], (prop) => { + assert(_.includes(rootProps, prop)); + }); + }); }); }); - describe('pass throughs', () => { - it('passes through all props not defined in `propTypes` to the root element.', () => { + describe('RadioGroup.Label', () => { + it('passes its children through as the `Label` prop for the corresponding `RadioButtonLabeled`.', () => { const wrapper = shallow( - - - - + + + foo + + + bar + + + + baz + qux + + ); - const rootProps = _.keys(wrapper.first().props()); + const labels = wrapper.find(RadioGroup.Label); - // It should pass `foo`, `bar`, `baz`, `qux`, and `quux` through - // to the root element. - _.forEach(['foo', 'bar', 'baz', 'qux', 'quux'], (prop) => { - assert(_.includes(rootProps, prop)); - }); + assert.equal(labels.at(0).children().text(), 'foo'); + assert.equal(labels.at(1).children().text(), 'bar'); + assert.equal(labels.at(2).children().at(0).text(), 'baz'); + assert.equal(labels.at(2).children().at(1).text(), 'qux'); }); }); }); -describe('RadioGroup.Label', () => { - it('passes its children through as the `Label` prop for the corresponding `RadioButtonLabeled`.', () => { - const wrapper = shallow( +describeWithDOM('RadioGroup', () => { + it.only('should handle multiple children', () => { + const wrapper = mount( - foo - - - bar + + foo + bar + - ); - const childNodes = wrapper.find(RadioButtonLabeled).nodes; - assert.equal(childNodes[0].props.Label, 'foo'); - assert.equal(childNodes[1].props.Label, 'bar'); - assert(_.isNil(childNodes[2].props.Label)); - }); + assert.equal(wrapper.find('#foo').text(), 'foo'); + assert.equal(wrapper.find('#bar').text(), 'bar'); }); -}); -describeWithDOM('RadioGroup', () => { describe('user selects one of the radio button children', () => { it('calls the function passed in as the `onSelect` prop...', () => { const onSelect = sinon.spy();