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/ConfirmDialog/confirmDialog.js

@@ -15,16 +15,27 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import ActionDone from 'material-ui/svg-icons/action/done';
-import ContentClear from 'material-ui/svg-icons/content/clear';
+import { FormattedMessage } from 'react-intl';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
 import Button from '../Button';
 import Modal from '../Modal';
+import { CancelIcon, CheckIcon } from '../Icons';
 
 import styles from './confirmDialog.css';
 
+const DEFAULT_NO = (
+  <FormattedMessage
+    id='ui.confirmDialog.no'
+    defaultMessage='no' />
+);
+const DEFAULT_YES = (
+  <FormattedMessage
+    id='ui.confirmDialog.yes'
+    defaultMessage='yes' />
+);
+
 export default class ConfirmDialog extends Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
@@ -33,10 +44,10 @@ export default class ConfirmDialog extends Component {
     iconDeny: PropTypes.node,
     labelConfirm: PropTypes.string,
     labelDeny: PropTypes.string,
-    title: nodeOrStringProptype().isRequired,
-    visible: PropTypes.bool.isRequired,
     onConfirm: PropTypes.func.isRequired,
-    onDeny: PropTypes.func.isRequired
+    onDeny: PropTypes.func.isRequired,
+    title: nodeOrStringProptype().isRequired,
+    visible: PropTypes.bool.isRequired
   }
 
   render () {
@@ -60,12 +71,12 @@ export default class ConfirmDialog extends Component {
 
     return [
       <Button
-        label={ labelDeny || 'no' }
-        icon={ iconDeny || <ContentClear /> }
+        icon={ iconDeny || <CancelIcon /> }
+        label={ labelDeny || DEFAULT_NO }
         onClick={ onDeny } />,
       <Button
-        label={ labelConfirm || 'yes' }
-        icon={ iconConfirm || <ActionDone /> }
+        icon={ iconConfirm || <CheckIcon /> }
+        label={ labelConfirm || DEFAULT_YES }
         onClick={ onConfirm } />
     ];
   }

js/src/ui/ConfirmDialog/confirmDialog.spec.js

@@ -0,0 +1,157 @@
+// 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 { shallow } from 'enzyme';
+import React, { PropTypes } from 'react';
+import sinon from 'sinon';
+
+import muiTheme from '../Theme';
+
+import ConfirmDialog from './';
+
+let component;
+let instance;
+let onConfirm;
+let onDeny;
+
+function createRedux () {
+  return {
+    dispatch: sinon.stub(),
+    subscribe: sinon.stub(),
+    getState: () => {
+      return {
+        settings: {
+          backgroundSeed: 'xyz'
+        }
+      };
+    }
+  };
+}
+
+function render (props = {}) {
+  onConfirm = sinon.stub();
+  onDeny = sinon.stub();
+
+  if (props.visible === undefined) {
+    props.visible = true;
+  }
+
+  const baseComponent = shallow(
+    <ConfirmDialog
+      { ...props }
+      title='test title'
+      onConfirm={ onConfirm }
+      onDeny={ onDeny }>
+      <div id='testContent'>
+        some test content
+      </div>
+    </ConfirmDialog>
+  );
+
+  instance = baseComponent.instance();
+  component = baseComponent.find('Connect(Modal)').shallow({
+    childContextTypes: {
+      muiTheme: PropTypes.object,
+      store: PropTypes.object
+    },
+    context: {
+      muiTheme,
+      store: createRedux()
+    }
+  });
+
+  return component;
+}
+
+describe('ui/ConfirmDialog', () => {
+  it('renders defaults', () => {
+    expect(render()).to.be.ok;
+  });
+
+  it('renders the body as provided', () => {
+    expect(render().find('div[id="testContent"]').text()).to.equal('some test content');
+  });
+
+  describe('properties', () => {
+    let props;
+
+    beforeEach(() => {
+      props = render().props();
+    });
+
+    it('passes the actions', () => {
+      expect(props.actions).to.deep.equal(instance.renderActions());
+    });
+
+    it('passes title', () => {
+      expect(props.title).to.equal('test title');
+    });
+
+    it('passes visiblity flag', () => {
+      expect(props.visible).to.be.true;
+    });
+  });
+
+  describe('renderActions', () => {
+    describe('defaults', () => {
+      let buttons;
+
+      beforeEach(() => {
+        render();
+        buttons = instance.renderActions();
+      });
+
+      it('renders with supplied onConfim/onDeny callbacks', () => {
+        expect(buttons[0].props.onClick).to.deep.equal(onDeny);
+        expect(buttons[1].props.onClick).to.deep.equal(onConfirm);
+      });
+
+      it('renders default labels', () => {
+        expect(buttons[0].props.label.props.id).to.equal('ui.confirmDialog.no');
+        expect(buttons[1].props.label.props.id).to.equal('ui.confirmDialog.yes');
+      });
+
+      it('renders default icons', () => {
+        expect(buttons[0].props.icon.type.displayName).to.equal('ContentClear');
+        expect(buttons[1].props.icon.type.displayName).to.equal('NavigationCheck');
+      });
+    });
+
+    describe('overrides', () => {
+      let buttons;
+
+      beforeEach(() => {
+        render({
+          labelConfirm: 'labelConfirm',
+          labelDeny: 'labelDeny',
+          iconConfirm: 'iconConfirm',
+          iconDeny: 'iconDeny'
+        });
+        buttons = instance.renderActions();
+      });
+
+      it('renders supplied labels', () => {
+        expect(buttons[0].props.label).to.equal('labelDeny');
+        expect(buttons[1].props.label).to.equal('labelConfirm');
+      });
+
+      it('renders supplied icons', () => {
+        expect(buttons[0].props.icon).to.equal('iconDeny');
+        expect(buttons[1].props.icon).to.equal('iconConfirm');
+      });
+    });
+  });
+});