DeleteAccount & LoadContract modal updates (#4320)

* i18n & tests for DeleteAccount

* i18n & tests for LoadContract

js/src/modals/DeleteAccount/deleteAccount.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
@@ -46,22 +47,33 @@ class DeleteAccount extends Component {
     return (
       <ConfirmDialog
         className={ styles.body }
-        title='confirm removal'
-        visible
-        onDeny={ this.closeDeleteDialog }
         onConfirm={ this.onDeleteConfirmed }
+        onDeny={ this.closeDeleteDialog }
+        title={
+          <FormattedMessage
+            id='deleteAccount.title'
+            defaultMessage='confirm removal'
+          />
+        }
+        visible
       >
         <div className={ styles.hero }>
-          Are you sure you want to permanently delete the following account?
+          <FormattedMessage
+            id='deleteAccount.question'
+            defaultMessage='Are you sure you want to permanently delete the following account?'
+          />
         </div>
         <div className={ styles.info }>
           <IdentityIcon
-            className={ styles.icon }
             address={ account.address }
+            className={ styles.icon }
           />
           <div className={ styles.nameinfo }>
             <div className={ styles.header }>
-              <IdentityName address={ account.address } unknown />
+              <IdentityName
+                address={ account.address }
+                unknown
+              />
             </div>
             <div className={ styles.address }>
               { account.address }
@@ -73,11 +85,21 @@ class DeleteAccount extends Component {
         </div>
         <div className={ styles.password }>
           <Input
-            label='account password'
+            hint={
-            hint='provide the account password to confirm the account deletion'
+              <FormattedMessage
+                id='deleteAccount.password.hint'
+                defaultMessage='provide the account password to confirm the account deletion'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='deleteAccount.password.label'
+                defaultMessage='account password'
+              />
+            }
+            onChange={ this.onChangePassword }
             type='password'
             value={ password }
-            onChange={ this.onChangePassword }
           />
         </div>
       </ConfirmDialog>
@@ -93,7 +115,7 @@ class DeleteAccount extends Component {
     const { account, newError } = this.props;
     const { password } = this.state;
 
-    api.parity
+    return api.parity
       .killAccount(account.address, password)
       .then((result) => {
         if (result === true) {
@@ -114,15 +136,11 @@ class DeleteAccount extends Component {
   }
 }
 
-function mapStateToProps (state) {
-  return {};
-}
-
 function mapDispatchToProps (dispatch) {
   return bindActionCreators({ newError }, dispatch);
 }
 
 export default connect(
-  mapStateToProps,
+  null,
   mapDispatchToProps
 )(DeleteAccount);

js/src/modals/DeleteAccount/deleteAccount.spec.js

@@ -0,0 +1,139 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import DeleteAccount from './';
+
+let api;
+let component;
+let instance;
+let onClose;
+let router;
+let store;
+
+const TEST_ADDRESS = '0x123456789012345678901234567890';
+const TEST_PASSWORD = 'testPassword';
+
+function createApi () {
+  api = {
+    parity: {
+      killAccount: sinon.stub().resolves(true)
+    }
+  };
+
+  return api;
+}
+
+function createRouter () {
+  router = {
+    push: sinon.stub()
+  };
+
+  return router;
+}
+
+function createStore () {
+  store = {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: () => {
+      return {};
+    }
+  };
+
+  return store;
+}
+
+function render () {
+  onClose = sinon.stub();
+  component = shallow(
+    <DeleteAccount
+      account={ {
+        address: TEST_ADDRESS,
+        meta: {
+          description: 'testDescription'
+        }
+      } }
+      onClose={ onClose }
+    />,
+    {
+      context: {
+        store: createStore()
+      }
+    }
+  ).find('DeleteAccount').shallow({
+    context: {
+      api: createApi(),
+      router: createRouter()
+    }
+  });
+  instance = component.instance();
+
+  return component;
+}
+
+describe('modals/DeleteAccount', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('event handlers', () => {
+    describe('onChangePassword', () => {
+      it('sets the state with the new password', () => {
+        instance.onChangePassword(null, TEST_PASSWORD);
+        expect(instance.state.password).to.equal(TEST_PASSWORD);
+      });
+    });
+
+    describe('closeDeleteDialog', () => {
+      it('calls onClose', () => {
+        instance.closeDeleteDialog();
+        expect(onClose).to.have.been.called;
+      });
+    });
+
+    describe('onDeleteConfirmed', () => {
+      beforeEach(() => {
+        sinon.spy(instance, 'closeDeleteDialog');
+        instance.onChangePassword(null, TEST_PASSWORD);
+        return instance.onDeleteConfirmed();
+      });
+
+      afterEach(() => {
+        instance.closeDeleteDialog.restore();
+      });
+
+      it('calls parity_killAccount', () => {
+        expect(api.parity.killAccount).to.have.been.calledWith(TEST_ADDRESS, TEST_PASSWORD);
+      });
+
+      it('changes the route to /accounts', () => {
+        expect(router.push).to.have.been.calledWith('/accounts');
+      });
+
+      it('closes the dialog', () => {
+        expect(instance.closeDeleteDialog).to.have.been.called;
+      });
+    });
+  });
+});

js/src/modals/LoadContract/loadContract.js

@@ -14,22 +14,23 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Component, PropTypes } from 'react';
-
-import ContentClear from 'material-ui/svg-icons/content/clear';
-import CheckIcon from 'material-ui/svg-icons/navigation/check';
-import DeleteIcon from 'material-ui/svg-icons/action/delete';
-
-import { List, ListItem, makeSelectable } from 'material-ui/List';
 import { Subheader, IconButton, Tabs, Tab } from 'material-ui';
+import { List, ListItem, makeSelectable } from 'material-ui/List';
 import moment from 'moment';
+import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { Button, Modal, Editor } from '~/ui';
+import { CancelIcon, CheckIcon, DeleteIcon } from '~/ui/Icons';
 
 import styles from './loadContract.css';
 
 const SelectableList = makeSelectable(List);
 
+const REMOVAL_STYLE = {
+  backgroundColor: 'none',
+  cursor: 'default'
+};
 const SELECTED_STYLE = {
   backgroundColor: 'rgba(255, 255, 255, 0.1)'
 };
@@ -52,14 +53,24 @@ export default class LoadContract extends Component {
   render () {
     const { deleteRequest } = this.state;
 
-    const title = deleteRequest
-      ? 'confirm removal'
-      : 'view contracts';
-
     return (
       <Modal
-        title={ title }
         actions={ this.renderDialogActions() }
+        title={
+          deleteRequest
+            ? (
+              <FormattedMessage
+                id='loadContract.title.remove'
+                defaultMessage='confirm removal'
+              />
+            )
+            : (
+              <FormattedMessage
+                id='loadContract.title.view'
+                defaultMessage='view contracts'
+              />
+            )
+        }
         visible
       >
         { this.renderBody() }
@@ -73,17 +84,25 @@ export default class LoadContract extends Component {
     }
 
     const { contracts, snippets } = this.props;
-
     const contractsTab = Object.keys(contracts).length === 0
       ? null
       : (
-        <Tab label='Local' >
+        <Tab
-          { this.renderEditor() }
+          label={
-
+            <FormattedMessage
-          <SelectableList
+              id='loadContract.tab.local'
-            onChange={ this.onClickContract }
+              defaultMessage='Local'
+            />
+          }
         >
-            <Subheader>Saved Contracts</Subheader>
+          { this.renderEditor() }
+          <SelectableList onChange={ this.onClickContract }>
+            <Subheader>
+              <FormattedMessage
+                id='loadContract.header.saved'
+                defaultMessage='Saved Contracts'
+              />
+            </Subheader>
             { this.renderContracts(contracts) }
           </SelectableList>
         </Tab>
@@ -93,14 +112,22 @@ export default class LoadContract extends Component {
       <div className={ styles.loadContainer }>
         <Tabs onChange={ this.handleChangeTab }>
           { contractsTab }
-
+          <Tab
-          <Tab label='Snippets' >
+            label={
-            { this.renderEditor() }
+              <FormattedMessage
-
+                id='loadContract.tab.snippets'
-            <SelectableList
+                defaultMessage='Snippets'
-              onChange={ this.onClickContract }
+              />
+            }
           >
-              <Subheader>Contract Snippets</Subheader>
+            { this.renderEditor() }
+            <SelectableList onChange={ this.onClickContract }>
+              <Subheader>
+                <FormattedMessage
+                  id='loadContract.header.snippets'
+                  defaultMessage='Contract Snippets'
+                />
+              </Subheader>
               { this.renderContracts(snippets, false) }
             </SelectableList>
           </Tab>
@@ -116,13 +143,23 @@ export default class LoadContract extends Component {
     return (
       <div className={ styles.confirmRemoval }>
         <p>
-          Are you sure you want to remove the following
+          <FormattedMessage
-          contract from your saved contracts?
+            id='loadContract.removal.confirm'
+            defaultMessage='Are you sure you want to remove the following contract from your saved contracts?'
+          />
         </p>
         <ListItem
           primaryText={ name }
-          secondaryText={ `Saved ${moment(timestamp).fromNow()}` }
+          secondaryText={
-          style={ { backgroundColor: 'none', cursor: 'default' } }
+            <FormattedMessage
+              id='loadContract.removal.savedAt'
+              defaultMessage='Saved {when}'
+              values={ {
+                when: moment(timestamp).fromNow()
+              } }
+            />
+          }
+          style={ REMOVAL_STYLE }
         />
 
         <div className={ styles.editor }>
@@ -152,9 +189,9 @@ export default class LoadContract extends Component {
       <div className={ styles.editor }>
         <p>{ name }</p>
         <Editor
-          value={ sourcecode }
-          maxLines={ 20 }
           readOnly
+          maxLines={ 20 }
+          value={ sourcecode }
         />
       </div>
     );
@@ -169,23 +206,36 @@ export default class LoadContract extends Component {
         const { id, name, timestamp, description } = contract;
         const onDelete = () => this.onDeleteRequest(id);
 
-        const secondaryText = description || `Saved ${moment(timestamp).fromNow()}`;
+        return (
-        const remove = removable
+          <ListItem
+            key={ id }
+            primaryText={ name }
+            rightIconButton={
+              removable
                 ? (
                   <IconButton onTouchTap={ onDelete }>
                     <DeleteIcon />
                   </IconButton>
                 )
-          : null;
+                : null
-
+            }
-        return (
+            secondaryText={
-          <ListItem
+              description || (
+                <FormattedMessage
+                  id='loadContract.contract.savedAt'
+                  defaultMessage='Saved {when}'
+                  values={ {
+                    when: moment(timestamp).fromNow()
+                  } }
+                />
+              )
+            }
+            style={
+              selected === id
+                ? SELECTED_STYLE
+                : null
+            }
             value={ id }
-            key={ id }
-            primaryText={ name }
-            secondaryText={ secondaryText }
-            style={ selected === id ? SELECTED_STYLE : null }
-            rightIconButton={ remove }
           />
         );
       });
@@ -197,46 +247,61 @@ export default class LoadContract extends Component {
     if (deleteRequest) {
       return [
         <Button
-          icon={ <ContentClear /> }
+          icon={ <CancelIcon /> }
-          label='No'
           key='No'
+          label={
+            <FormattedMessage
+              id='loadContract.button.no'
+              defaultMessage='No'
+            />
+          }
           onClick={ this.onRejectRemoval }
         />,
         <Button
           icon={ <DeleteIcon /> }
-          label='Yes'
           key='Yes'
+          label={
+            <FormattedMessage
+              id='loadContract.button.yes'
+              defaultMessage='Yes'
+            />
+          }
           onClick={ this.onConfirmRemoval }
         />
       ];
     }
 
-    const cancelBtn = (
+    return [
       <Button
-        icon={ <ContentClear /> }
+        icon={ <CancelIcon /> }
-        label='Cancel'
+        label={
+          <FormattedMessage
+            id='loadContract.button.cancel'
+            defaultMessage='Cancel'
+          />
+        }
         onClick={ this.onClose }
-      />
+      />,
-    );
-
-    const loadBtn = (
       <Button
-        icon={ <CheckIcon /> }
-        label='Load'
-        onClick={ this.onLoad }
         disabled={ this.state.selected === -1 }
+        icon={ <CheckIcon /> }
+        label={
+          <FormattedMessage
+            id='loadContract.button.load'
+            defaultMessage='Load'
           />
-    );
+        }
-
+        onClick={ this.onLoad }
-    return [ cancelBtn, loadBtn ];
+      />
+    ];
   }
 
   handleChangeTab = () => {
     this.setState({ selected: -1 });
   }
 
-  onClickContract = (_, value) => {
+  onClickContract = (event, selected) => {
-    this.setState({ selected: value });
+    this.setState({ selected });
   }
 
   onClose = () => {

js/src/modals/LoadContract/loadContract.spec.js

@@ -0,0 +1,159 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import sinon from 'sinon';
+
+import LoadContract from './';
+
+const CONTRACTS = {
+  345: { id: 345, name: 'test345' },
+  456: { id: 456, name: 'test456' },
+  987: { id: 987, name: 'test987' }
+};
+const SNIPPETS = {
+  123: { id: 123, name: 'test123' }
+};
+
+let component;
+let instance;
+let onClose;
+let onDelete;
+let onLoad;
+
+function render () {
+  onClose = sinon.stub();
+  onDelete = sinon.stub();
+  onLoad = sinon.stub();
+  component = shallow(
+    <LoadContract
+      contracts={ CONTRACTS }
+      onClose={ onClose }
+      onDelete={ onDelete }
+      onLoad={ onLoad }
+      snippets={ SNIPPETS }
+    />
+  );
+  instance = component.instance();
+
+  return component;
+}
+
+describe('modals/LoadContract', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('event methods', () => {
+    describe('handleChangeTab', () => {
+      beforeEach(() => {
+        instance.onClickContract(null, 345);
+        instance.handleChangeTab();
+      });
+
+      it('resets the selected value', () => {
+        expect(instance.state.selected).to.equal(-1);
+      });
+    });
+
+    describe('onClickContract', () => {
+      beforeEach(() => {
+        instance.onClickContract(null, 456);
+      });
+
+      it('sets the selected value', () => {
+        expect(instance.state.selected).to.equal(456);
+      });
+    });
+
+    describe('onClose', () => {
+      beforeEach(() => {
+        instance.onClose();
+      });
+
+      it('calls onClose', () => {
+        expect(onClose).to.have.been.called;
+      });
+    });
+
+    describe('onLoad', () => {
+      beforeEach(() => {
+        instance.onLoad();
+      });
+
+      it('calls onLoad', () => {
+        expect(onLoad).to.have.been.called;
+      });
+
+      it('calls onClose', () => {
+        expect(onClose).to.have.been.called;
+      });
+    });
+
+    describe('onDeleteRequest', () => {
+      beforeEach(() => {
+        instance.onDeleteRequest(987);
+      });
+
+      it('sets deleteRequest true', () => {
+        expect(instance.state.deleteRequest).to.be.true;
+      });
+
+      it('sets the deleteId', () => {
+        expect(instance.state.deleteId).to.equal(987);
+      });
+    });
+
+    describe('onConfirmRemoval', () => {
+      beforeEach(() => {
+        instance.onDeleteRequest(987);
+        instance.onConfirmRemoval();
+      });
+
+      it('calls onDelete', () => {
+        expect(onDelete).to.have.been.calledWith(987);
+      });
+
+      it('sets deleteRequest false', () => {
+        expect(instance.state.deleteRequest).to.be.false;
+      });
+
+      it('clears the deleteId', () => {
+        expect(instance.state.deleteId).to.equal(-1);
+      });
+    });
+
+    describe('onRejectRemoval', () => {
+      beforeEach(() => {
+        instance.onDeleteRequest(987);
+        instance.onRejectRemoval();
+      });
+
+      it('sets deleteRequest false', () => {
+        expect(instance.state.deleteRequest).to.be.false;
+      });
+
+      it('clears the deleteId', () => {
+        expect(instance.state.deleteId).to.equal(-1);
+      });
+    });
+  });
+});