diff --git a/js/src/ui/AccountCard/accountCard.js b/js/src/ui/AccountCard/accountCard.js index f22af5e45..698a885bb 100644 --- a/js/src/ui/AccountCard/accountCard.js +++ b/js/src/ui/AccountCard/accountCard.js @@ -19,6 +19,7 @@ import ReactDOM from 'react-dom'; import keycode from 'keycode'; import IdentityIcon from '~/ui/IdentityIcon'; +import IdentityName from '~/ui/IdentityName'; import Tags from '~/ui/Tags'; import { fromWei } from '~/api/util/wei'; @@ -41,12 +42,8 @@ export default class AccountCard extends Component { render () { const { account } = this.props; const { copied } = this.state; - - const { address, name, description, meta = {} } = account; - - const displayName = (name && name.toUpperCase()) || address; + const { address, description, meta = {}, name } = account; const { tags = [] } = meta; - const classes = [ styles.account ]; if (copied) { @@ -65,12 +62,16 @@ export default class AccountCard extends Component {
- { displayName } +
{ this.renderTags(tags, address) } { this.renderDescription(description) } - { this.renderAddress(displayName, address) } + { this.renderAddress(address) } { this.renderBalance(address) }
@@ -89,11 +90,7 @@ export default class AccountCard extends Component { ); } - renderAddress (name, address) { - if (name === address) { - return null; - } - + renderAddress (address) { return (
. + +import { shallow } from 'enzyme'; +import React from 'react'; +import sinon from 'sinon'; + +import AccountCard from './'; + +const TEST_ADDRESS = '0x1234567890123456789012345678901234567890'; +const TEST_NAME = 'Jimmy'; + +let component; +let onClick; +let onFocus; + +function render (props = {}) { + if (!props.account) { + props.account = { + address: TEST_ADDRESS, + description: 'testDescription', + name: TEST_NAME, + meta: {} + }; + } + + onClick = sinon.stub(); + onFocus = sinon.stub(); + + component = shallow( + + ); + + return component; +} + +describe('ui/AccountCard', () => { + beforeEach(() => { + render(); + }); + + it('renders defaults', () => { + expect(component).to.be.ok; + }); + + describe('components', () => { + describe('IdentityIcon', () => { + let icon; + + beforeEach(() => { + icon = component.find('Connect(IdentityIcon)'); + }); + + it('renders the icon', () => { + expect(icon.length).to.equal(1); + }); + + it('passes the address through', () => { + expect(icon.props().address).to.equal(TEST_ADDRESS); + }); + }); + + describe('IdentityName', () => { + let name; + + beforeEach(() => { + name = component.find('Connect(IdentityName)'); + }); + + it('renders the name', () => { + expect(name.length).to.equal(1); + }); + + it('passes the address through', () => { + expect(name.props().address).to.equal(TEST_ADDRESS); + }); + + it('passes the name through', () => { + expect(name.props().name).to.equal(TEST_NAME); + }); + + it('renders unknown (no name)', () => { + expect(name.props().unknown).to.be.true; + }); + }); + }); +}); diff --git a/js/src/ui/IdentityName/identityName.spec.js b/js/src/ui/IdentityName/identityName.spec.js index bd4eac3b7..f6af2b1e2 100644 --- a/js/src/ui/IdentityName/identityName.spec.js +++ b/js/src/ui/IdentityName/identityName.spec.js @@ -25,6 +25,7 @@ const ADDR_A = '0x123456789abcdef0123456789A'; const ADDR_B = '0x123456789abcdef0123456789B'; const ADDR_C = '0x123456789abcdef0123456789C'; const ADDR_NULL = '0x0000000000000000000000000000000000000000'; +const NAME_JIMMY = 'Jimmy Test'; const STORE = { dispatch: sinon.stub(), subscribe: sinon.stub(), @@ -53,41 +54,51 @@ function render (props) { } describe('ui/IdentityName', () => { - describe('rendering', () => { - it('renders defaults', () => { - expect(render({ address: ADDR_A })).to.be.ok; + it('renders defaults', () => { + expect(render({ address: ADDR_A })).to.be.ok; + }); + + describe('account not found', () => { + it('renders null with empty', () => { + expect( + render({ address: ADDR_C, empty: true }).html() + ).to.be.null; }); - describe('account not found', () => { - it('renders null with empty', () => { - expect( - render({ address: ADDR_C, empty: true }).html() - ).to.be.null; - }); + it('renders address without empty', () => { + expect( + render({ address: ADDR_C }).text() + ).to.equal(ADDR_C); + }); - it('renders address without empty', () => { - expect( - render({ address: ADDR_C }).text() - ).to.equal(ADDR_C); - }); + it('renders short address with shorten', () => { + expect( + render({ address: ADDR_C, shorten: true }).find('ShortenedHash').props().data + ).to.equal(ADDR_C); + }); - it('renders short address with shorten', () => { - expect( - render({ address: ADDR_C, shorten: true }).find('ShortenedHash').props().data - ).to.equal(ADDR_C); - }); + it('renders unknown with flag', () => { + expect( + render({ address: ADDR_C, unknown: true }).find('FormattedMessage').props().id + ).to.equal('ui.identityName.unnamed'); + }); - it('renders unknown with flag', () => { - expect( - render({ address: ADDR_C, unknown: true } - ).find('FormattedMessage').props().id).to.equal('ui.identityName.unnamed'); - }); + it('renders name when not found and passed', () => { + expect( + render({ address: ADDR_C, name: NAME_JIMMY }).text() + ).to.equal(NAME_JIMMY.toUpperCase()); + }); - it('renders 0x000...000 as null', () => { - expect( - render({ address: ADDR_NULL }).find('FormattedMessage').props().id - ).to.equal('ui.identityName.null'); - }); + it('renders name when not found, unknown and passed', () => { + expect( + render({ address: ADDR_C, name: NAME_JIMMY, unknown: true }).text() + ).to.equal(NAME_JIMMY.toUpperCase()); + }); + + it('renders 0x000...000 as null', () => { + expect( + render({ address: ADDR_NULL }).find('FormattedMessage').props().id + ).to.equal('ui.identityName.null'); }); }); });