1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
import React from 'react'
import assert from 'assert'
import { shallow } from 'enzyme'
import sinon from 'sinon'
import proxyquire from 'proxyquire'
import Identicon from '../../../identicon'
import CurrencyDisplay from '../../currency-display'
const utilsMethodStubs = {
checksumAddress: sinon.stub().returns('mockCheckSumAddress'),
}
const AccountListItem = proxyquire('../account-list-item.component.js', {
'../../../util': utilsMethodStubs,
}).default
const propsMethodSpies = {
handleClick: sinon.spy(),
}
describe('AccountListItem Component', function () {
let wrapper
beforeEach(() => {
wrapper = shallow(<AccountListItem
account={ { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' } }
className={'mockClassName'}
conversionRate={4}
currentCurrency={'mockCurrentyCurrency'}
displayAddress={false}
displayBalance={false}
handleClick={propsMethodSpies.handleClick}
icon={<i className="mockIcon" />}
/>, { context: { t: str => str + '_t' } })
})
afterEach(() => {
propsMethodSpies.handleClick.resetHistory()
})
describe('render', () => {
it('should render a div with the passed className', () => {
assert.equal(wrapper.find('.mockClassName').length, 1)
assert(wrapper.find('.mockClassName').is('div'))
assert(wrapper.find('.mockClassName').hasClass('account-list-item'))
})
it('should call handleClick with the expected props when the root div is clicked', () => {
const { onClick } = wrapper.find('.mockClassName').props()
assert.equal(propsMethodSpies.handleClick.callCount, 0)
onClick()
assert.equal(propsMethodSpies.handleClick.callCount, 1)
assert.deepEqual(
propsMethodSpies.handleClick.getCall(0).args,
[{ address: 'mockAddress', name: 'mockName', balance: 'mockBalance' }]
)
})
it('should have a top row div', () => {
assert.equal(wrapper.find('.mockClassName > .account-list-item__top-row').length, 1)
assert(wrapper.find('.mockClassName > .account-list-item__top-row').is('div'))
})
it('should have an identicon, name and icon in the top row', () => {
const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
assert.equal(topRow.find(Identicon).length, 1)
assert.equal(topRow.find('.account-list-item__account-name').length, 1)
assert.equal(topRow.find('.account-list-item__icon').length, 1)
})
it('should show the account name if it exists', () => {
const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
assert.equal(topRow.find('.account-list-item__account-name').text(), 'mockName')
})
it('should show the account address if there is no name', () => {
wrapper.setProps({ account: { address: 'addressButNoName' } })
const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
assert.equal(topRow.find('.account-list-item__account-name').text(), 'addressButNoName')
})
it('should render the passed icon', () => {
const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
assert(topRow.find('.account-list-item__icon').childAt(0).is('i'))
assert(topRow.find('.account-list-item__icon').childAt(0).hasClass('mockIcon'))
})
it('should not render an icon if none is passed', () => {
wrapper.setProps({ icon: null })
const topRow = wrapper.find('.mockClassName > .account-list-item__top-row')
assert.equal(topRow.find('.account-list-item__icon').length, 0)
})
it('should render the account address as a checksumAddress if displayAddress is true and name is provided', () => {
wrapper.setProps({ displayAddress: true })
assert.equal(wrapper.find('.account-list-item__account-address').length, 1)
assert.equal(wrapper.find('.account-list-item__account-address').text(), 'mockCheckSumAddress')
assert.deepEqual(
utilsMethodStubs.checksumAddress.getCall(0).args,
['mockAddress']
)
})
it('should not render the account address as a checksumAddress if displayAddress is false', () => {
wrapper.setProps({ displayAddress: false })
assert.equal(wrapper.find('.account-list-item__account-address').length, 0)
})
it('should not render the account address as a checksumAddress if name is not provided', () => {
wrapper.setProps({ account: { address: 'someAddressButNoName' } })
assert.equal(wrapper.find('.account-list-item__account-address').length, 0)
})
it('should render a CurrencyDisplay with the correct props if displayBalance is true', () => {
wrapper.setProps({ displayBalance: true })
assert.equal(wrapper.find(CurrencyDisplay).length, 1)
assert.deepEqual(
wrapper.find(CurrencyDisplay).props(),
{
className: 'account-list-item__account-balances',
conversionRate: 4,
convertedBalanceClassName: 'account-list-item__account-secondary-balance',
convertedCurrency: 'mockCurrentyCurrency',
primaryBalanceClassName: 'account-list-item__account-primary-balance',
primaryCurrency: 'ETH',
readOnly: true,
value: 'mockBalance',
}
)
})
it('should not render a CurrencyDisplay if displayBalance is false', () => {
wrapper.setProps({ displayBalance: false })
assert.equal(wrapper.find(CurrencyDisplay).length, 0)
})
})
})
|
