Converted to a controlled component (#9)

src/Toggle.js

@@ -8,7 +8,7 @@ const Toggle = ({ id, isChecked, action, disabled }) => (
             className="input"
             type="checkbox"
             disabled={disabled}
-            defaultChecked={isChecked}
+            checked={isChecked}
             onChange={action}
         />
         <label className="toggle" htmlFor={id}></label>
@@ -22,4 +22,10 @@ Toggle.propTypes = {
     disabled: PropTypes.bool,
 };
 
+Toggle.defaultProps = {
+    action: () => {},
+    isChecked: false,
+    disabled: false,
+};
+
 export default Toggle;

stories/Main.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SwitchButton from '../src/Main'; // This is our component
+import SwitchButton from './SwitchButtonContainer'; // This is our component
 import Label from '../src/Label'; // This is our component
 import { storiesOf, action } from '@storybook/react';
 

stories/SwitchButtonContainer.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import SwitchButton from '../src/Main';
+
+class SwitchButtonContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { isChecked: props.isChecked };
+    this.handleAction = this.handleAction.bind(this);
+  }
+
+  handleAction() {
+    this.props.action();
+    this.setState(prevState => ({
+      isChecked: !prevState.isChecked,
+    }));
+  }
+
+  render() {
+    return (
+      <SwitchButton
+        {...this.props}
+        action={this.handleAction}
+        isChecked={this.state.isChecked}
+      />
+    );
+  }
+}
+
+SwitchButtonContainer.defaultProps = {
+  isChecked: false,
+  action: () => {},
+};
+
+export default SwitchButtonContainer;

tests/specs/Toggle.spec.js

@@ -4,6 +4,7 @@ import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
 import { shallow, mount } from 'enzyme';
 import Toggle from '../../src/Toggle';
+
 chai.use(sinonChai);
 
 describe('<Toggle />', () => {
@@ -29,8 +30,19 @@ describe('<Toggle />', () => {
         wrapper.find('input').simulate('change');
         expect(changed).to.have.been.called;
     });
+
     it('should be disabled when disabled prop is set to true', () => {
         const wrapper = mount(<Toggle id="switch" disabled />);
         expect(wrapper.find('#switch').prop('disabled')).to.equal(true);
     });
+
+    it('should not be checked when isChecked prop is set to false', () => {
+        const wrapper = mount(<Toggle id="switch" isChecked={false} />);
+        expect(wrapper.find("#switch").prop('checked')).to.equal(false);
+    });
+
+    it('should be checked when isChecked prop is set to true', () => {
+        const wrapper = mount(<Toggle id="switch" isChecked />);
+        expect(wrapper.find("#switch").prop('checked')).to.equal(true);
+    });
 });