Add tets for editing and deleting a followed account

src/components/followedAccounts/dashboard/viewAccounts.js

@@ -25,7 +25,7 @@ class ViewAccounts extends React.Component {
       <header><h2>
         {t('Following')}
         {accounts.length > 0
-        ? <div className={`${styles.clickable} ${styles.edit}`}
+        ? <div className={`${styles.clickable} ${styles.edit} edit-accounts`}
              onClick={() => this.setState({ edit: !this.state.edit })}>
             {this.state.edit ? <span>{t('Done')}</span> : <FontIcon value='edit'/>}
         </div>
@@ -64,7 +64,7 @@ class ViewAccounts extends React.Component {
                         />
                     </div>
                     {this.state.edit
-                      ? <div className={styles.removeAccount}
+                      ? <div className={`${styles.removeAccount} remove-account`}
                              onClick={() => removeAccount(account) }>
                           <FontIcon value='remove'/>
                         </div>

src/components/followedAccounts/dashboard/viewAccounts.test.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import i18n from '../../../i18n';
 import ViewAccounts from './viewAccounts';
 import routes from './../../../constants/routes';
+import * as followedAccounts from './../../../actions/followedAccounts';
 
 const fakeStore = configureStore();
 
@@ -46,6 +47,9 @@ describe('Followed accounts list Component', () => {
 
   describe('With followed accounts', () => {
     beforeEach(() => {
+      spy(followedAccounts, 'followedAccountUpdated');
+      spy(followedAccounts, 'followedAccountRemoved');
+
       const store = fakeStore({
         followedAccounts: {
           accounts: [
@@ -64,14 +68,19 @@ describe('Followed accounts list Component', () => {
       });
     });
 
+    afterEach(() => {
+      followedAccounts.followedAccountUpdated.restore();
+      followedAccounts.followedAccountRemoved.restore();
+    });
+
     it('shows list of followed accounts', () => {
       expect(wrapper.find('.followed-accounts-empty-list')).to.have.length(0);
       expect(wrapper.find('.followed-accounts-list')).to.have.length(1);
 
-      expect(wrapper.find('.account-title').at(0).text()).to.contain('bob');
+      expect(wrapper.find('.account-title input').at(0)).to.have.value('bob');
       expect(wrapper.find('LiskAmount').at(0).text()).to.contain(0);
 
-      expect(wrapper.find('.account-title').at(1).text()).to.contain('567L');
+      expect(wrapper.find('.account-title input').at(1)).to.have.value('567L');
       expect(wrapper.find('LiskAmount').at(1).text()).to.contain(1);
     });
 
@@ -84,5 +93,40 @@ describe('Followed accounts list Component', () => {
       wrapper.find('.add-account-button').simulate('click');
       expect(props.nextStep).to.have.been.calledWith();
     });
+
+    it('removes an account', () => {
+      expect(wrapper.find('.remove-account')).to.have.length(0);
+
+      wrapper.find('.edit-accounts').simulate('click');
+      wrapper.find('.remove-account').at(0).simulate('click');
+
+      expect(followedAccounts.followedAccountRemoved).to.have.been.calledWith({
+        address: '123L', balance: 0, title: 'bob',
+      });
+    });
+
+    it('edits an accounts title', () => {
+      expect(wrapper.find('.account-title input').at(1)).to.have.value('567L');
+
+      wrapper.find('.edit-accounts').simulate('click');
+
+      wrapper.find('.account-title input').at(1).simulate('change', { target: { value: '' } });
+      wrapper.find('.edit-accounts').simulate('click');
+
+      expect(followedAccounts.followedAccountUpdated).to.not.have.been.calledWith();
+
+      wrapper.find('.account-title input').at(1).simulate('change', { target: { value: 'this is a very long title' } });
+      wrapper.find('.edit-accounts').simulate('click');
+
+      expect(followedAccounts.followedAccountUpdated).to.not.have.been.calledWith();
+
+      wrapper.find('.account-title input').at(1).simulate('change', { target: { value: 'my friend' } });
+      wrapper.find('.edit-accounts').simulate('click');
+
+      expect(wrapper.find('.account-title input').at(1)).to.have.value('my friend');
+      expect(followedAccounts.followedAccountUpdated).to.have.been.calledWith({
+        address: '567L', balance: 100000, title: 'my friend',
+      });
+    });
   });
 });