mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 03:36:18 +02:00
Unit tests for account-list-item, amount-max-button and send-amount-row components.
This commit is contained in:
parent
61d35e7abe
commit
145e53b404
@ -0,0 +1,129 @@
|
|||||||
|
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 '../../../send/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
|
||||||
|
let instance
|
||||||
|
|
||||||
|
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' } })
|
||||||
|
instance = wrapper.instance()
|
||||||
|
})
|
||||||
|
|
||||||
|
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 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)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
@ -0,0 +1,90 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import assert from 'assert'
|
||||||
|
import { shallow } from 'enzyme'
|
||||||
|
import sinon from 'sinon'
|
||||||
|
import AmountMaxButton from '../amount-max-button.component.js'
|
||||||
|
|
||||||
|
const propsMethodSpies = {
|
||||||
|
setAmountToMax: sinon.spy(),
|
||||||
|
setMaxModeTo: sinon.spy(),
|
||||||
|
}
|
||||||
|
|
||||||
|
const MOCK_EVENT = { preventDefault: () => {} }
|
||||||
|
|
||||||
|
sinon.spy(AmountMaxButton.prototype, 'setMaxAmount')
|
||||||
|
|
||||||
|
describe('AmountMaxButton Component', function () {
|
||||||
|
let wrapper
|
||||||
|
let instance
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
wrapper = shallow(<AmountMaxButton
|
||||||
|
balance={'mockBalance'}
|
||||||
|
gasTotal={'mockGasTotal'}
|
||||||
|
maxModeOn={false}
|
||||||
|
selectedToken={ { address: 'mockTokenAddress' } }
|
||||||
|
setAmountToMax={propsMethodSpies.setAmountToMax}
|
||||||
|
setMaxModeTo={propsMethodSpies.setMaxModeTo}
|
||||||
|
tokenBalance={'mockTokenBalance'}
|
||||||
|
/>, { context: { t: str => str + '_t' } })
|
||||||
|
instance = wrapper.instance()
|
||||||
|
})
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
propsMethodSpies.setAmountToMax.resetHistory()
|
||||||
|
propsMethodSpies.setMaxModeTo.resetHistory()
|
||||||
|
AmountMaxButton.prototype.setMaxAmount.resetHistory()
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('setMaxAmount', () => {
|
||||||
|
|
||||||
|
it('should call setAmountToMax with the correct params', () => {
|
||||||
|
assert.equal(propsMethodSpies.setAmountToMax.callCount, 0)
|
||||||
|
instance.setMaxAmount()
|
||||||
|
assert.equal(propsMethodSpies.setAmountToMax.callCount, 1)
|
||||||
|
assert.deepEqual(
|
||||||
|
propsMethodSpies.setAmountToMax.getCall(0).args,
|
||||||
|
[{
|
||||||
|
balance: 'mockBalance',
|
||||||
|
gasTotal: 'mockGasTotal',
|
||||||
|
selectedToken: { address: 'mockTokenAddress' },
|
||||||
|
tokenBalance: 'mockTokenBalance',
|
||||||
|
}]
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('render', () => {
|
||||||
|
it('should render a div with a send-v2__amount-max class', () => {
|
||||||
|
assert.equal(wrapper.find('.send-v2__amount-max').length, 1)
|
||||||
|
assert(wrapper.find('.send-v2__amount-max').is('div'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should call setMaxModeTo and setMaxAmount when the send-v2__amount-max div is clicked', () => {
|
||||||
|
const {
|
||||||
|
onClick,
|
||||||
|
} = wrapper.find('.send-v2__amount-max').props()
|
||||||
|
|
||||||
|
assert.equal(AmountMaxButton.prototype.setMaxAmount.callCount, 0)
|
||||||
|
assert.equal(propsMethodSpies.setMaxModeTo.callCount, 0)
|
||||||
|
onClick(MOCK_EVENT)
|
||||||
|
assert.equal(AmountMaxButton.prototype.setMaxAmount.callCount, 1)
|
||||||
|
assert.equal(propsMethodSpies.setMaxModeTo.callCount, 1)
|
||||||
|
assert.deepEqual(
|
||||||
|
propsMethodSpies.setMaxModeTo.getCall(0).args,
|
||||||
|
[true]
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should not render text when maxModeOn is true', () => {
|
||||||
|
wrapper.setProps({ maxModeOn: true })
|
||||||
|
assert.equal(wrapper.find('.send-v2__amount-max').text(), '')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the expected text when maxModeOn is false', () => {
|
||||||
|
wrapper.setProps({ maxModeOn: false })
|
||||||
|
assert.equal(wrapper.find('.send-v2__amount-max').text(), 'max_t')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
@ -0,0 +1,162 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import assert from 'assert'
|
||||||
|
import { shallow } from 'enzyme'
|
||||||
|
import sinon from 'sinon'
|
||||||
|
import SendAmountRow from '../send-amount-row.component.js'
|
||||||
|
|
||||||
|
import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
|
||||||
|
import AmountMaxButton from '../amount-max-button/amount-max-button.container'
|
||||||
|
import CurrencyDisplay from '../../../../send/currency-display'
|
||||||
|
|
||||||
|
const propsMethodSpies = {
|
||||||
|
setMaxModeTo: sinon.spy(),
|
||||||
|
updateSendAmount: sinon.spy(),
|
||||||
|
updateSendAmountError: sinon.spy(),
|
||||||
|
}
|
||||||
|
|
||||||
|
const MOCK_EVENT = { preventDefault: () => {} }
|
||||||
|
|
||||||
|
sinon.spy(SendAmountRow.prototype, 'handleAmountChange')
|
||||||
|
sinon.spy(SendAmountRow.prototype, 'validateAmount')
|
||||||
|
|
||||||
|
describe('SendAmountRow Component', function () {
|
||||||
|
let wrapper
|
||||||
|
let instance
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
wrapper = shallow(<SendAmountRow
|
||||||
|
amount={'mockAmount'}
|
||||||
|
amountConversionRate={'mockAmountConversionRate'}
|
||||||
|
balance={'mockBalance'}
|
||||||
|
conversionRate={7}
|
||||||
|
convertedCurrency={'mockConvertedCurrency'}
|
||||||
|
gasTotal={'mockGasTotal'}
|
||||||
|
inError={false}
|
||||||
|
primaryCurrency={'mockPrimaryCurrency'}
|
||||||
|
selectedToken={ { address: 'mockTokenAddress' } }
|
||||||
|
setMaxModeTo={propsMethodSpies.setMaxModeTo}
|
||||||
|
tokenBalance={'mockTokenBalance'}
|
||||||
|
updateSendAmount={propsMethodSpies.updateSendAmount}
|
||||||
|
updateSendAmountError={propsMethodSpies.updateSendAmountError}
|
||||||
|
/>, { context: { t: str => str + '_t' } })
|
||||||
|
instance = wrapper.instance()
|
||||||
|
})
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
propsMethodSpies.setMaxModeTo.resetHistory()
|
||||||
|
propsMethodSpies.updateSendAmount.resetHistory()
|
||||||
|
propsMethodSpies.updateSendAmountError.resetHistory()
|
||||||
|
SendAmountRow.prototype.validateAmount.resetHistory()
|
||||||
|
SendAmountRow.prototype.handleAmountChange.resetHistory()
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('validateAmount', () => {
|
||||||
|
|
||||||
|
it('should call updateSendAmountError with the correct params', () => {
|
||||||
|
assert.equal(propsMethodSpies.updateSendAmountError.callCount, 0)
|
||||||
|
instance.validateAmount('someAmount')
|
||||||
|
assert.equal(propsMethodSpies.updateSendAmountError.callCount, 1)
|
||||||
|
assert.deepEqual(
|
||||||
|
propsMethodSpies.updateSendAmountError.getCall(0).args,
|
||||||
|
[{
|
||||||
|
amount: 'someAmount',
|
||||||
|
amountConversionRate: 'mockAmountConversionRate',
|
||||||
|
balance: 'mockBalance',
|
||||||
|
conversionRate: 7,
|
||||||
|
gasTotal: 'mockGasTotal',
|
||||||
|
primaryCurrency: 'mockPrimaryCurrency',
|
||||||
|
selectedToken: { address: 'mockTokenAddress' },
|
||||||
|
tokenBalance: 'mockTokenBalance',
|
||||||
|
}]
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('handleAmountChange', () => {
|
||||||
|
|
||||||
|
it('should call setMaxModeTo', () => {
|
||||||
|
assert.equal(propsMethodSpies.setMaxModeTo.callCount, 0)
|
||||||
|
instance.handleAmountChange('someAmount')
|
||||||
|
assert.equal(propsMethodSpies.setMaxModeTo.callCount, 1)
|
||||||
|
assert.deepEqual(
|
||||||
|
propsMethodSpies.setMaxModeTo.getCall(0).args,
|
||||||
|
[false]
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should call this.validateAmount', () => {
|
||||||
|
assert.equal(SendAmountRow.prototype.validateAmount.callCount, 0)
|
||||||
|
instance.handleAmountChange('someAmount')
|
||||||
|
assert.equal(SendAmountRow.prototype.validateAmount.callCount, 1)
|
||||||
|
assert.deepEqual(
|
||||||
|
propsMethodSpies.updateSendAmount.getCall(0).args,
|
||||||
|
['someAmount']
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should call updateSendAmount', () => {
|
||||||
|
assert.equal(propsMethodSpies.updateSendAmount.callCount, 0)
|
||||||
|
instance.handleAmountChange('someAmount')
|
||||||
|
assert.equal(propsMethodSpies.updateSendAmount.callCount, 1)
|
||||||
|
assert.deepEqual(
|
||||||
|
propsMethodSpies.updateSendAmount.getCall(0).args,
|
||||||
|
['someAmount']
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('render', () => {
|
||||||
|
it('should render a SendRowWrapper component', () => {
|
||||||
|
assert.equal(wrapper.find(SendRowWrapper).length, 1)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should pass the correct props to SendRowWrapper', () => {
|
||||||
|
const {
|
||||||
|
errorType,
|
||||||
|
label,
|
||||||
|
showError,
|
||||||
|
} = wrapper.find(SendRowWrapper).props()
|
||||||
|
|
||||||
|
assert.equal(errorType, 'amount')
|
||||||
|
|
||||||
|
assert.equal(label, 'amount_t:')
|
||||||
|
|
||||||
|
assert.equal(showError, false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render an AmountMaxButton as the first child of the SendRowWrapper', () => {
|
||||||
|
assert(wrapper.find(SendRowWrapper).childAt(0).is(AmountMaxButton))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render a CurrencyDisplay as the second child of the SendRowWrapper', () => {
|
||||||
|
assert(wrapper.find(SendRowWrapper).childAt(1).is(CurrencyDisplay))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the CurrencyDisplay with the correct props', () => {
|
||||||
|
const {
|
||||||
|
conversionRate,
|
||||||
|
convertedCurrency,
|
||||||
|
handleChange,
|
||||||
|
inError,
|
||||||
|
primaryCurrency,
|
||||||
|
selectedToken,
|
||||||
|
value,
|
||||||
|
} = wrapper.find(SendRowWrapper).childAt(1).props()
|
||||||
|
assert.equal(conversionRate, 'mockAmountConversionRate')
|
||||||
|
assert.equal(convertedCurrency, 'mockConvertedCurrency')
|
||||||
|
assert.equal(inError, false)
|
||||||
|
assert.equal(primaryCurrency, 'mockPrimaryCurrency')
|
||||||
|
assert.deepEqual(selectedToken, { address: 'mockTokenAddress' })
|
||||||
|
assert.equal(value, 'mockAmount')
|
||||||
|
assert.equal(SendAmountRow.prototype.handleAmountChange.callCount, 0)
|
||||||
|
handleChange('mockNewAmount')
|
||||||
|
assert.equal(SendAmountRow.prototype.handleAmountChange.callCount, 1)
|
||||||
|
assert.deepEqual(
|
||||||
|
SendAmountRow.prototype.handleAmountChange.getCall(0).args,
|
||||||
|
['mockNewAmount']
|
||||||
|
)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
Loading…
Reference in New Issue
Block a user