diff --git a/js/src/views/Account/Header/header.css b/js/src/views/Account/Header/header.css
index f92ba155b..87e72517f 100644
--- a/js/src/views/Account/Header/header.css
+++ b/js/src/views/Account/Header/header.css
@@ -14,17 +14,30 @@
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see .
*/
-.balances, .tags {
- clear: both;
-}
.editicon {
margin-left: 0.5em;
}
-.floatleft {
+.info {
+ margin: 0 156px 0 0;
+}
+
+.identityIcon {
float: left;
- margin-bottom: 0.5em;
+ margin-right: -100%;
+}
+
+.qrcode {
+ float: right;
+ margin-top: 1.5em;
+}
+
+.addressline,
+.infoline,
+.uuidline,
+.title {
+ margin-left: 72px;
}
.addressline,
@@ -50,3 +63,7 @@
display: inline-block;
margin-left: .5em;
}
+
+.tags {
+ clear: both;
+}
diff --git a/js/src/views/Account/Header/header.js b/js/src/views/Account/Header/header.js
index 9e3701d85..93e129360 100644
--- a/js/src/views/Account/Header/header.js
+++ b/js/src/views/Account/Header/header.js
@@ -17,9 +17,7 @@
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';
-import Certifications from '~/ui/Certifications';
+import { Balance, Certifications, Container, CopyToClipboard, ContainerTitle, IdentityIcon, IdentityName, QrCode, Tags } from '~/ui';
import styles from './header.css';
@@ -53,8 +51,15 @@ export default class Header extends Component {
return (
-
-
+
+
+
{ this.renderName() }
@@ -65,17 +70,17 @@ export default class Header extends Component {
{ meta.description }
{ this.renderTxCount() }
+
+
+
+
-
-
-
-
{ children }
@@ -93,6 +98,7 @@ export default class Header extends Component {
return (
{
});
describe('sections', () => {
- it('renders the Balance', () => {
- render({ balance: { balance: 'testing' } });
- const balance = component.find('Connect(Balance)');
+ describe('Balance', () => {
+ let balance;
- expect(balance).to.have.length(1);
- expect(balance.props().account).to.deep.equal(ACCOUNT);
- expect(balance.props().balance).to.deep.equal({ balance: 'testing' });
+ beforeEach(() => {
+ render({ balance: { balance: 'testing' } });
+ balance = component.find('Connect(Balance)');
+ });
+
+ it('renders', () => {
+ expect(balance).to.have.length(1);
+ });
+
+ it('passes the account', () => {
+ expect(balance.props().account).to.deep.equal(ACCOUNT);
+ });
+
+ it('passes the balance', () => {
+
+ });
});
- it('renders the Certifications', () => {
- render();
- const certs = component.find('Connect(Certifications)');
+ describe('Certifications', () => {
+ let certs;
- expect(certs).to.have.length(1);
- expect(certs.props().address).to.deep.equal(ACCOUNT.address);
+ beforeEach(() => {
+ render();
+ certs = component.find('Connect(Certifications)');
+ });
+
+ it('renders', () => {
+ expect(certs).to.have.length(1);
+ });
+
+ it('passes the address', () => {
+ expect(certs.props().address).to.deep.equal(ACCOUNT.address);
+ });
});
- it('renders the IdentityIcon', () => {
- render();
- const icon = component.find('Connect(IdentityIcon)');
+ describe('IdentityIcon', () => {
+ let icon;
- expect(icon).to.have.length(1);
- expect(icon.props().address).to.equal(ACCOUNT.address);
+ beforeEach(() => {
+ render();
+ icon = component.find('Connect(IdentityIcon)');
+ });
+
+ it('renders', () => {
+ expect(icon).to.have.length(1);
+ });
+
+ it('passes the address', () => {
+ expect(icon.props().address).to.deep.equal(ACCOUNT.address);
+ });
});
- it('renders the Tags', () => {
- render();
- const tags = component.find('Tags');
+ describe('QrCode', () => {
+ let qr;
- expect(tags).to.have.length(1);
- expect(tags.props().tags).to.deep.equal(ACCOUNT.meta.tags);
+ beforeEach(() => {
+ render();
+ qr = component.find('QrCode');
+ });
+
+ it('renders', () => {
+ expect(qr).to.have.length(1);
+ });
+
+ it('passes the address', () => {
+ expect(qr.props().value).to.deep.equal(ACCOUNT.address);
+ });
+ });
+
+ describe('Tags', () => {
+ let tags;
+
+ beforeEach(() => {
+ render();
+ tags = component.find('Tags');
+ });
+
+ it('renders', () => {
+ expect(tags).to.have.length(1);
+ });
+
+ it('passes the tags', () => {
+ expect(tags.props().tags).to.deep.equal(ACCOUNT.meta.tags);
+ });
});
});
});