From 9140892c02b1758a9c8d8b96db1fbac37d58fc4f Mon Sep 17 00:00:00 2001
From: reyraa <ali@lightcurve.io>
Date: Tue, 8 Aug 2017 17:04:44 +0200
Subject: [PATCH 1/5] - Create priced button. - Add unit test coverage. - Add
 fees to constants

---
 src/components/pricedButton/index.js         | 28 ++++++++++
 src/components/pricedButton/index.test.js    | 56 ++++++++++++++++++++
 src/components/pricedButton/pricedButton.css | 11 ++++
 src/constants/fees.js                        |  5 ++
 4 files changed, 100 insertions(+)
 create mode 100644 src/components/pricedButton/index.js
 create mode 100644 src/components/pricedButton/index.test.js
 create mode 100644 src/components/pricedButton/pricedButton.css
 create mode 100644 src/constants/fees.js

diff --git a/src/components/pricedButton/index.js b/src/components/pricedButton/index.js
new file mode 100644
index 000000000..7bbcd9ad0
--- /dev/null
+++ b/src/components/pricedButton/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import Button from 'react-toolbox/lib/button';
+import { fromRawLsk } from '../../utils/lsk';
+import styles from './pricedButton.css';
+
+const PricedButton = (props) => {
+  const hasFunds = props.balance >= props.fee;
+  return (
+    <div className='primary-button'>
+      {
+        props.fee &&
+          <span className={`${styles.fee} ${hasFunds ? '' : styles.error}`}>
+            {
+              hasFunds ? `Fee: ${fromRawLsk(props.fee)} LSK` :
+              `Not enough credit to pay ${fromRawLsk(props.fee)} LSK fee`
+            }
+          </span>
+      }
+      <Button label={props.label}
+        primary={true} raised={true}
+        className='next-button'
+        disabled={props.disabled || (props.fee && !hasFunds)}
+        onClick={props.onClick.bind(this)}/>
+    </div>
+  );
+};
+
+export default PricedButton;
diff --git a/src/components/pricedButton/index.test.js b/src/components/pricedButton/index.test.js
new file mode 100644
index 000000000..990db0229
--- /dev/null
+++ b/src/components/pricedButton/index.test.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import chai, { expect } from 'chai';
+import sinonChai from 'sinon-chai';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+import chaiEnzyme from 'chai-enzyme';
+import Button from 'react-toolbox/lib/button';
+import PricedButton from './index';
+
+chai.use(sinonChai);
+chai.use(chaiEnzyme());
+
+describe.only('DialogElement', () => {
+  let wrapper;
+  const props = {
+    fee: 5e8,
+    onClick: sinon.spy(),
+  };
+  const insufficientBalance = 0;
+  const sufficientBalance = 6e8;
+
+  it('renders <Button /> component from react-toolbox', () => {
+    wrapper = shallow(<PricedButton {...props} balance={sufficientBalance} />);
+    expect(wrapper.find(Button)).to.have.length(1);
+  });
+
+  describe('Sufficient credit', () => {
+    beforeEach(() => {
+      wrapper = shallow(<PricedButton {...props} balance={sufficientBalance} />);
+    });
+
+    it('renders a span saying "Fee: 5 LSK"', () => {
+      expect(wrapper.find('span').text()).to.be.equal('Fee: 5 LSK');
+    });
+
+    it('allows to click on Button', () => {
+      wrapper.find(Button).simulate('click');
+      expect(props.onClick).to.have.been.calledWith();
+    });
+  });
+
+  describe('Insufficient credit', () => {
+    beforeEach(() => {
+      wrapper = shallow(<PricedButton {...props} balance={insufficientBalance} />);
+    });
+
+    it('renders a span saying "Not enough credit to pay 5 LSK fee"', () => {
+      expect(wrapper.find('span').text()).to.be.equal('Not enough credit to pay 5 LSK fee');
+    });
+
+    it('sets the disabled attribute of the button', () => {
+      const buttonProps = wrapper.find(Button).props();
+      expect(buttonProps.disabled).to.be.equal(true);
+    });
+  });
+});
diff --git a/src/components/pricedButton/pricedButton.css b/src/components/pricedButton/pricedButton.css
new file mode 100644
index 000000000..52a561c3a
--- /dev/null
+++ b/src/components/pricedButton/pricedButton.css
@@ -0,0 +1,11 @@
+.fee {
+  font-size: 12px;
+  line-height: 14px;
+  color: grey;
+  text-align: right;
+  margin: 0 16px;
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+}
+.error {
+  color: #dd2c00 !important;
+}
diff --git a/src/constants/fees.js b/src/constants/fees.js
new file mode 100644
index 000000000..71771eb06
--- /dev/null
+++ b/src/constants/fees.js
@@ -0,0 +1,5 @@
+export default {
+  setSecondPassphrase: 5e8,
+  send: 1e7,
+  registerDelegate: 25e8,
+};

From 7678e164b3ddd34160bd682fb163bdc23a55ec0b Mon Sep 17 00:00:00 2001
From: reyraa <ali@lightcurve.io>
Date: Wed, 9 Aug 2017 09:57:42 +0200
Subject: [PATCH 2/5] Minor fixings

---
 src/components/pricedButton/index.js      | 2 +-
 src/components/pricedButton/index.test.js | 2 +-
 src/constants/fees.js                     | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/pricedButton/index.js b/src/components/pricedButton/index.js
index 7bbcd9ad0..b23faedc5 100644
--- a/src/components/pricedButton/index.js
+++ b/src/components/pricedButton/index.js
@@ -18,7 +18,7 @@ const PricedButton = (props) => {
       }
       <Button label={props.label}
         primary={true} raised={true}
-        className='next-button'
+        className={`next-button ${props.customClassName}`}
         disabled={props.disabled || (props.fee && !hasFunds)}
         onClick={props.onClick.bind(this)}/>
     </div>
diff --git a/src/components/pricedButton/index.test.js b/src/components/pricedButton/index.test.js
index 990db0229..a6b496237 100644
--- a/src/components/pricedButton/index.test.js
+++ b/src/components/pricedButton/index.test.js
@@ -10,7 +10,7 @@ import PricedButton from './index';
 chai.use(sinonChai);
 chai.use(chaiEnzyme());
 
-describe.only('DialogElement', () => {
+describe('DialogElement', () => {
   let wrapper;
   const props = {
     fee: 5e8,
diff --git a/src/constants/fees.js b/src/constants/fees.js
index 71771eb06..a128b0396 100644
--- a/src/constants/fees.js
+++ b/src/constants/fees.js
@@ -2,4 +2,5 @@ export default {
   setSecondPassphrase: 5e8,
   send: 1e7,
   registerDelegate: 25e8,
+  vote: 1e8,
 };

From 90bfb50c0b12f9a0cf2f40e1cc72d2b00f8de2ed Mon Sep 17 00:00:00 2001
From: reyraa <ali@lightcurve.io>
Date: Wed, 9 Aug 2017 11:08:26 +0200
Subject: [PATCH 3/5] Code cleanup and minor fixings

---
 src/components/pricedButton/index.js         | 28 +++++++++++---------
 src/components/pricedButton/index.test.js    | 10 +++----
 src/components/pricedButton/pricedButton.css |  1 +
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/pricedButton/index.js b/src/components/pricedButton/index.js
index b23faedc5..4f0b67764 100644
--- a/src/components/pricedButton/index.js
+++ b/src/components/pricedButton/index.js
@@ -3,24 +3,28 @@ import Button from 'react-toolbox/lib/button';
 import { fromRawLsk } from '../../utils/lsk';
 import styles from './pricedButton.css';
 
-const PricedButton = (props) => {
-  const hasFunds = props.balance >= props.fee;
+const PricedButton = ({
+  balance, fee, label, customClassName, onClick, disabled,
+}) => {
+  const hasFunds = balance >= fee;
   return (
     <div className='primary-button'>
       {
-        props.fee &&
-          <span className={`${styles.fee} ${hasFunds ? '' : styles.error}`}>
+        fee &&
+          (<span className={`${styles.fee} ${hasFunds ? '' : styles.error}`}>
             {
-              hasFunds ? `Fee: ${fromRawLsk(props.fee)} LSK` :
-              `Not enough credit to pay ${fromRawLsk(props.fee)} LSK fee`
+              hasFunds ? `Fee: ${fromRawLsk(fee)} LSK` :
+              `Insufficient funds for ${fromRawLsk(fee)} LSK fee`
             }
-          </span>
+          </span>)
       }
-      <Button label={props.label}
-        primary={true} raised={true}
-        className={`next-button ${props.customClassName}`}
-        disabled={props.disabled || (props.fee && !hasFunds)}
-        onClick={props.onClick.bind(this)}/>
+      <Button
+        label={label}
+        primary={true}
+        raised={true}
+        className={`next-button ${customClassName}`}
+        disabled={disabled || (fee && !hasFunds)}
+        onClick={onClick.bind(this)} />
     </div>
   );
 };
diff --git a/src/components/pricedButton/index.test.js b/src/components/pricedButton/index.test.js
index a6b496237..c42ab7adc 100644
--- a/src/components/pricedButton/index.test.js
+++ b/src/components/pricedButton/index.test.js
@@ -16,7 +16,7 @@ describe('DialogElement', () => {
     fee: 5e8,
     onClick: sinon.spy(),
   };
-  const insufficientBalance = 0;
+  const insufficientBalance = 4.9999e8;
   const sufficientBalance = 6e8;
 
   it('renders <Button /> component from react-toolbox', () => {
@@ -24,7 +24,7 @@ describe('DialogElement', () => {
     expect(wrapper.find(Button)).to.have.length(1);
   });
 
-  describe('Sufficient credit', () => {
+  describe('Sufficient funds', () => {
     beforeEach(() => {
       wrapper = shallow(<PricedButton {...props} balance={sufficientBalance} />);
     });
@@ -39,13 +39,13 @@ describe('DialogElement', () => {
     });
   });
 
-  describe('Insufficient credit', () => {
+  describe('Insufficient funds', () => {
     beforeEach(() => {
       wrapper = shallow(<PricedButton {...props} balance={insufficientBalance} />);
     });
 
-    it('renders a span saying "Not enough credit to pay 5 LSK fee"', () => {
-      expect(wrapper.find('span').text()).to.be.equal('Not enough credit to pay 5 LSK fee');
+    it('renders a span saying "Insufficient funds for 5 LSK fee"', () => {
+      expect(wrapper.find('span').text()).to.be.equal('Insufficient funds for 5 LSK fee');
     });
 
     it('sets the disabled attribute of the button', () => {
diff --git a/src/components/pricedButton/pricedButton.css b/src/components/pricedButton/pricedButton.css
index 52a561c3a..9a3dbffe7 100644
--- a/src/components/pricedButton/pricedButton.css
+++ b/src/components/pricedButton/pricedButton.css
@@ -6,6 +6,7 @@
   margin: 0 16px;
   transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
 }
+
 .error {
   color: #dd2c00 !important;
 }

From 2fd1c3d7cda1dbe7c99b7dfa7fbb0429801ecf00 Mon Sep 17 00:00:00 2001
From: reyraa <ali@lightcurve.io>
Date: Wed, 9 Aug 2017 11:19:47 +0200
Subject: [PATCH 4/5] Use calledWithExactly instead of calledWith

---
 src/components/pricedButton/index.test.js | 2 +-
 src/constants/fees.js                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pricedButton/index.test.js b/src/components/pricedButton/index.test.js
index c42ab7adc..1f7183df1 100644
--- a/src/components/pricedButton/index.test.js
+++ b/src/components/pricedButton/index.test.js
@@ -35,7 +35,7 @@ describe('DialogElement', () => {
 
     it('allows to click on Button', () => {
       wrapper.find(Button).simulate('click');
-      expect(props.onClick).to.have.been.calledWith();
+      expect(props.onClick).to.have.been.calledWithExactly();
     });
   });
 
diff --git a/src/constants/fees.js b/src/constants/fees.js
index a128b0396..8343a7b16 100644
--- a/src/constants/fees.js
+++ b/src/constants/fees.js
@@ -1,6 +1,6 @@
 export default {
   setSecondPassphrase: 5e8,
-  send: 1e7,
+  send: 0.1e8,
   registerDelegate: 25e8,
   vote: 1e8,
 };

From 49f2878e835f29e0ebed59081597c67db41bac0e Mon Sep 17 00:00:00 2001
From: reyraa <ali@lightcurve.io>
Date: Wed, 9 Aug 2017 11:39:37 +0200
Subject: [PATCH 5/5] Fix the test title and remove binding

---
 src/components/pricedButton/index.js      | 2 +-
 src/components/pricedButton/index.test.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pricedButton/index.js b/src/components/pricedButton/index.js
index 4f0b67764..d70760127 100644
--- a/src/components/pricedButton/index.js
+++ b/src/components/pricedButton/index.js
@@ -24,7 +24,7 @@ const PricedButton = ({
         raised={true}
         className={`next-button ${customClassName}`}
         disabled={disabled || (fee && !hasFunds)}
-        onClick={onClick.bind(this)} />
+        onClick={onClick} />
     </div>
   );
 };
diff --git a/src/components/pricedButton/index.test.js b/src/components/pricedButton/index.test.js
index 1f7183df1..add256e08 100644
--- a/src/components/pricedButton/index.test.js
+++ b/src/components/pricedButton/index.test.js
@@ -10,7 +10,7 @@ import PricedButton from './index';
 chai.use(sinonChai);
 chai.use(chaiEnzyme());
 
-describe('DialogElement', () => {
+describe('PricedButton', () => {
   let wrapper;
   const props = {
     fee: 5e8,