Fix null account render issue, add tests

js/src/ui/Certifications/certifications.js

@@ -25,7 +25,7 @@ import styles from './certifications.css';
 
 class Certifications extends Component {
   static propTypes = {
-    account: PropTypes.string.isRequired,
+    address: PropTypes.string.isRequired,
     certifications: PropTypes.array.isRequired,
     dappsUrl: PropTypes.string.isRequired
   }
@@ -60,10 +60,10 @@ class Certifications extends Component {
 }
 
 function mapStateToProps (_, initProps) {
-  const { account } = initProps;
+  const { address } = initProps;
 
   return (state) => {
-    const certifications = state.certifications[account] || [];
+    const certifications = state.certifications[address] || [];
     const dappsUrl = state.api.dappsUrl;
 
     return { certifications, dappsUrl };

js/src/views/Account/Header/header.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 { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags } from '~/ui';
 import CopyToClipboard from '~/ui/CopyToClipboard';
@@ -26,76 +27,75 @@ export default class Header extends Component {
   static propTypes = {
     account: PropTypes.object,
     balance: PropTypes.object,
-    className: PropTypes.string,
     children: PropTypes.node,
-    isContract: PropTypes.bool,
-    hideName: PropTypes.bool
+    className: PropTypes.string,
+    hideName: PropTypes.bool,
+    isContract: PropTypes.bool
   };
 
   static defaultProps = {
-    className: '',
     children: null,
-    isContract: false,
-    hideName: false
+    className: '',
+    hideName: false,
+    isContract: false
   };
 
   render () {
-    const { account, balance, className, children, hideName } = this.props;
-    const { address, meta, uuid } = account;
+    const { account, balance, children, className, hideName } = this.props;
+
     if (!account) {
       return null;
     }
 
-    const uuidText = !uuid
-      ? null
-      : <div className={ styles.uuidline }>uuid: { uuid }</div>;
+    const { address, meta } = account;
 
     return (
       <div className={ className }>
         <Container>
-          <IdentityIcon
-            address={ address } />
+          <IdentityIcon address={ address } />
           <div className={ styles.floatleft }>
-            { this.renderName(address) }
-
+            { this.renderName() }
             <div className={ [ hideName ? styles.bigaddress : '', styles.addressline ].join(' ') }>
               <CopyToClipboard data={ address } />
               <div className={ styles.address }>{ address }</div>
             </div>
-
-            { uuidText }
+            { this.renderUuid() }
             <div className={ styles.infoline }>
               { meta.description }
             </div>
             { this.renderTxCount() }
           </div>
-
           <div className={ styles.tags }>
             <Tags tags={ meta.tags } />
           </div>
           <div className={ styles.balances }>
             <Balance
               account={ account }
               balance={ balance } />
-            <Certifications
-              account={ account.address }
-            />
+            <Certifications address={ account.address } />
           </div>
           { children }
         </Container>
       </div>
     );
   }
 
-  renderName (address) {
+  renderName () {
     const { hideName } = this.props;
 
     if (hideName) {
       return null;
     }
 
+    const { address } = this.props.account;
+
     return (
-      <ContainerTitle title={ <IdentityName address={ address } unknown /> } />
+      <ContainerTitle
+        title={
+          <IdentityName
+            address={ address }
+            unknown />
+        } />
     );
   }
 
@@ -114,7 +114,31 @@ export default class Header extends Component {
 
     return (
       <div className={ styles.infoline }>
-        { txCount.toFormat() } outgoing transactions
+        <FormattedMessage
+          id='account.header.outgoingTransactions'
+          defaultMessage='{count} outgoing transactions'
+          values={ {
+            count: txCount.toFormat()
+          } } />
+      </div>
+    );
+  }
+
+  renderUuid () {
+    const { uuid } = this.props.account;
+
+    if (!uuid) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.uuidline }>
+        <FormattedMessage
+          id='account.header.uuid'
+          defaultMessage='uuid: {uuid}'
+          values={ {
+            uuid
+          } } />
       </div>
     );
   }

js/src/views/Account/Header/header.spec.js

@@ -0,0 +1,135 @@
+// Copyright 2015, 2016 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 BigNumber from 'bignumber.js';
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import Header from './';
+
+const ACCOUNT = {
+  address: '0x0123456789012345678901234567890123456789',
+  meta: {
+    description: 'the description',
+    tags: ['taga', 'tagb']
+  },
+  uuid: '0xabcdef'
+};
+
+let component;
+let instance;
+
+function render (props = {}) {
+  if (props && !props.account) {
+    props.account = ACCOUNT;
+  }
+
+  component = shallow(
+    <Header { ...props } />
+  );
+  instance = component.instance();
+
+  return component;
+}
+
+describe('views/Account/Header', () => {
+  it('renders defaults', () => {
+    expect(render()).to.be.ok;
+  });
+
+  it('renders null with no account', () => {
+    expect(render(null).find('div')).to.have.length(0);
+  });
+
+  it('renders the Balance', () => {
+    render({ balance: { balance: 'testing' } });
+    const balance = component.find('Connect(Balance)');
+
+    expect(balance).to.have.length(1);
+    expect(balance.props().account).to.deep.equal(ACCOUNT);
+    expect(balance.props().balance).to.deep.equal({ balance: 'testing' });
+  });
+
+  it('renders the Certifications', () => {
+    render();
+    const certs = component.find('Connect(Certifications)');
+
+    expect(certs).to.have.length(1);
+    expect(certs.props().address).to.deep.equal(ACCOUNT.address);
+  });
+
+  it('renders the IdentityIcon', () => {
+    render();
+    const icon = component.find('Connect(IdentityIcon)');
+
+    expect(icon).to.have.length(1);
+    expect(icon.props().address).to.equal(ACCOUNT.address);
+  });
+
+  it('renders the Tags', () => {
+    render();
+    const tags = component.find('Tags');
+
+    expect(tags).to.have.length(1);
+    expect(tags.props().tags).to.deep.equal(ACCOUNT.meta.tags);
+  });
+
+  describe('renderName', () => {
+    it('renders null with hideName', () => {
+      render({ hideName: true });
+      expect(instance.renderName()).to.be.null;
+    });
+
+    it('renders the name', () => {
+      render();
+      expect(instance.renderName()).not.to.be.null;
+    });
+  });
+
+  describe('renderTxCount', () => {
+    it('renders null when contract', () => {
+      render({ balance: { txCount: new BigNumber(1) }, isContract: true });
+      expect(instance.renderTxCount()).to.be.null;
+    });
+
+    it('renders null when no balance', () => {
+      render({ balance: null, isContract: false });
+      expect(instance.renderTxCount()).to.be.null;
+    });
+
+    it('renders null when txCount is null', () => {
+      render({ balance: { txCount: null }, isContract: false });
+      expect(instance.renderTxCount()).to.be.null;
+    });
+
+    it('renders the tx count', () => {
+      render({ balance: { txCount: new BigNumber(1) }, isContract: false });
+      expect(instance.renderTxCount()).not.to.be.null;
+    });
+  });
+
+  describe('renderUuid', () => {
+    it('renders null with no uuid', () => {
+      render({ account: Object.assign({}, ACCOUNT, { uuid: null }) });
+      expect(instance.renderUuid()).to.be.null;
+    });
+
+    it('renders the uuid', () => {
+      render();
+      expect(instance.renderUuid()).not.to.be.null;
+    });
+  });
+});

js/src/views/Accounts/Summary/summary.js

@@ -197,7 +197,7 @@ export default class Summary extends Component {
     }
 
     return (
-      <Certifications account={ account.address } />
+      <Certifications address={ account.address } />
     );
   }
 }