update radio component and test

Author: rush1818

src/react/radio.jsx

@@ -19,6 +19,8 @@ class Radio extends React.Component {
   };
 
   render() {
+    this.elRefs = this.elRefs || {};
+
     const { children, className, label, autoFocus, checked, defaultChecked,
       defaultValue, disabled, form, name, required, value, onChange,
       ...reactProps } = this.props;
@@ -30,7 +32,7 @@ class Radio extends React.Component {
       >
         <label>
           <input
-            ref="inputEl"
+            ref={el => { this.elRefs.inputEl = el }}
             type="radio"
             autoFocus={autoFocus}
             checked={checked}

test/react-tests/test-radio.js

@@ -14,24 +14,24 @@ import Radio from '../../src/react/radio';
 import { getShallowRendererOutput } from '../lib/react-helpers';
 
 
-describe('react/radio', function() {
+describe('react/radio', function () {
   let elem;
 
 
-  beforeEach(function() {
+  beforeEach(function () {
     elem = <Radio>My Label</Radio>;
   });
 
 
-  it('renders wrapper properly', function() {
+  it('renders wrapper properly', function () {
     let result = getShallowRendererOutput(elem);
 
     assert.equal(result.type, 'div');
     assert.equal(result.props.className, 'mui-radio ');
   });
 
 
-  it('renders content properly', function() {
+  it('renders content properly', function () {
     let node = ReactUtils.renderIntoDocument(elem);
     let wrapperEl = ReactDOM.findDOMNode(node);
 
@@ -45,7 +45,7 @@ describe('react/radio', function() {
   });
 
 
-  it('renders properly with additional classNames', function() {
+  it('renders properly with additional classNames', function () {
     let result = getShallowRendererOutput(
       <Radio className="additional">
         test
@@ -56,9 +56,9 @@ describe('react/radio', function() {
   });
 
 
-  it('renders properly with additional styles', function() {
+  it('renders properly with additional styles', function () {
     let result = getShallowRendererOutput(
-      <Radio style={{additonal: 'style'}}>
+      <Radio style={{ additonal: 'style' }}>
         test
       </Radio>
     );
@@ -67,18 +67,19 @@ describe('react/radio', function() {
   });
 
 
-  it('can be used as a controlled component', function() {
+  it('can be used as a controlled component', function () {
     var TestApp = createClass({
-      getInitialState: function() {
-        return {checked: this.props.checked};
+      getInitialState: function () {
+        return { checked: this.props.checked };
       },
-      onChange: function(ev) {
-        this.setState({checked: ev.target.checked});
+      onChange: function (ev) {
+        this.setState({ checked: ev.target.checked });
       },
-      render: function() {
+      render: function () {
+        this.elRefs = this.elRefs || {};
         return (
           <Radio
-            ref="refEl"
+            ref={el => { this.elRefs.refEl = el; }}
             checked={this.state.checked}
             onChange={this.onChange}
           />
@@ -88,13 +89,13 @@ describe('react/radio', function() {
 
     let elem = <TestApp checked={false} />;
     let instance = ReactUtils.renderIntoDocument(elem);
-    let inputEl = instance.refs.refEl.refs.inputEl
+    let inputEl = instance.elRefs.refEl.elRefs.inputEl;
 
     // check default value
     assert.equal(inputEl.checked, false);
 
     // update TestApp and check inputEl value
-    instance.setState({checked: true});
+    instance.setState({ checked: true });
     assert.equal(inputEl.checked, true);
 
     // update inputEl and check state
@@ -104,23 +105,23 @@ describe('react/radio', function() {
   });
 
 
-  it('supports onChange method', function(done) {
+  it('supports onChange method', function (done) {
     let counter = 0;
 
-    let onChangeFn = function() {
+    let onChangeFn = function () {
       counter += 1;
     };
 
     let node = ReactUtils.renderIntoDocument(
-        <Radio onChange={onChangeFn} />
+      <Radio onChange={onChangeFn} />
     );
 
     // change checkbox
     let inputEl = ReactUtils.findRenderedDOMComponentWithTag(node, 'input');
     ReactUtils.Simulate.change(inputEl);
 
     // test conditions
-    setTimeout(function() {
+    setTimeout(function () {
       // one onChange event (https://github.com/muicss/mui/issues/94)
       assert.equal(counter, 1);