From e3bbc4cf7af0dae894415fc0dfb4e88b57919ea9 Mon Sep 17 00:00:00 2001
From: Stanley Sathler <stanleysathlerpinto@gmail.com>
Date: Wed, 12 Sep 2018 19:35:55 -0300
Subject: [PATCH] Converted to a controlled component (#9)

---
 src/Toggle.js                    |  8 +++++++-
 stories/Main.js                  |  2 +-
 stories/SwitchButtonContainer.js | 34 ++++++++++++++++++++++++++++++++
 tests/specs/Toggle.spec.js       | 12 +++++++++++
 4 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 stories/SwitchButtonContainer.js

diff --git a/src/Toggle.js b/src/Toggle.js
index d7fefde..55558bf 100644
--- a/src/Toggle.js
+++ b/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;
diff --git a/stories/Main.js b/stories/Main.js
index 66e3b88..0066f85 100644
--- a/stories/Main.js
+++ b/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';
 
diff --git a/stories/SwitchButtonContainer.js b/stories/SwitchButtonContainer.js
new file mode 100644
index 0000000..9459550
--- /dev/null
+++ b/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;
diff --git a/tests/specs/Toggle.spec.js b/tests/specs/Toggle.spec.js
index 025e83e..093435d 100644
--- a/tests/specs/Toggle.spec.js
+++ b/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);
+    });
 });