UI component updates (#4010)

* Update blockStatus & test results

* IdentityIcon rendering tests for #3950

* Update IdentityName with external messages

* Expand to cover basic layout sections

* ConfirmDialog rendering tests

* TxHash expansion & tests

* Cleanup ui/*.spec.js PropType warnings

* Use react-intl plural for confirmation/confirmations (verified manually)

js/src/ui/BlockStatus/blockStatus.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';
 
@@ -39,7 +40,12 @@ class BlockStatus extends Component {
     if (!syncing) {
       return (
         <div className={ styles.blockNumber }>
-          { blockNumber.toFormat() } best block
+          <FormattedMessage
+            id='ui.blockStatus.bestBlock'
+            defaultMessage='{blockNumber} best block'
+            values={ {
+              blockNumber: blockNumber.toFormat()
+            } } />
         </div>
       );
     }
@@ -47,26 +53,45 @@ class BlockStatus extends Component {
     if (syncing.warpChunksAmount && syncing.warpChunksProcessed && !syncing.warpChunksAmount.eq(syncing.warpChunksProcessed)) {
       return (
         <div className={ styles.syncStatus }>
-          { syncing.warpChunksProcessed.mul(100).div(syncing.warpChunksAmount).toFormat(2) }% warp restore
+          <FormattedMessage
+            id='ui.blockStatus.warpRestore'
+            defaultMessage='{percentage}% warp restore'
+            values={ {
+              percentage: syncing.warpChunksProcessed.mul(100).div(syncing.warpChunksAmount).toFormat(2)
+            } } />
         </div>
       );
     }
 
+    let syncStatus = null;
     let warpStatus = null;
 
+    if (syncing.currentBlock && syncing.highestBlock) {
+      syncStatus = (
+        <span>
+          <FormattedMessage
+            id='ui.blockStatus.syncStatus'
+            defaultMessage='{currentBlock}/{highestBlock} syncing'
+            values={ {
+              currentBlock: syncing.currentBlock.toFormat(),
+              highestBlock: syncing.highestBlock.toFormat()
+            } } />
+        </span>
+      );
+    }
+
     if (syncing.blockGap) {
       const [first, last] = syncing.blockGap;
 
       warpStatus = (
-        <span>, { first.mul(100).div(last).toFormat(2) }% historic</span>
-      );
-    }
-
-    let syncStatus = null;
-
-    if (syncing && syncing.currentBlock && syncing.highestBlock) {
-      syncStatus = (
-        <span>{ syncing.currentBlock.toFormat() }/{ syncing.highestBlock.toFormat() } syncing</span>
+        <span>
+          <FormattedMessage
+            id='ui.blockStatus.warpStatus'
+            defaultMessage=', {percentage}% historic'
+            values={ {
+              percentage: first.mul(100).div(last).toFormat(2)
+            } } />
+        </span>
       );
     }
 

js/src/ui/BlockStatus/blockStatus.spec.js

@@ -0,0 +1,94 @@
+// 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 sinon from 'sinon';
+
+import BlockStatus from './';
+
+let component;
+
+function createRedux (syncing = false, blockNumber = new BigNumber(123)) {
+  return {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: () => {
+      return {
+        nodeStatus: {
+          blockNumber,
+          syncing
+        }
+      };
+    }
+  };
+}
+
+function render (reduxStore = createRedux(), props) {
+  component = shallow(
+    <BlockStatus { ...props } />,
+    { context: { store: reduxStore } }
+  ).find('BlockStatus').shallow();
+
+  return component;
+}
+
+describe('ui/BlockStatus', () => {
+  it('renders defaults', () => {
+    expect(render()).to.be.ok;
+  });
+
+  it('renders null with no blockNumber', () => {
+    expect(render(createRedux(false, null)).find('div')).to.have.length(0);
+  });
+
+  it('renders only the best block when syncing === false', () => {
+    const messages = render().find('FormattedMessage');
+
+    expect(messages).to.have.length(1);
+    expect(messages).to.have.id('ui.blockStatus.bestBlock');
+  });
+
+  it('renders only the warp restore status when restoring', () => {
+    const messages = render(createRedux({
+      warpChunksAmount: new BigNumber(100),
+      warpChunksProcessed: new BigNumber(5)
+    })).find('FormattedMessage');
+
+    expect(messages).to.have.length(1);
+    expect(messages).to.have.id('ui.blockStatus.warpRestore');
+  });
+
+  it('renders the current/highest when syncing', () => {
+    const messages = render(createRedux({
+      currentBlock: new BigNumber(123),
+      highestBlock: new BigNumber(456)
+    })).find('FormattedMessage');
+
+    expect(messages).to.have.length(1);
+    expect(messages).to.have.id('ui.blockStatus.syncStatus');
+  });
+
+  it('renders warp blockGap when catching up', () => {
+    const messages = render(createRedux({
+      blockGap: [new BigNumber(123), new BigNumber(456)]
+    })).find('FormattedMessage');
+
+    expect(messages).to.have.length(1);
+    expect(messages).to.have.id('ui.blockStatus.warpStatus');
+  });
+});