mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01: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