You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
10 KiB
305 lines
10 KiB
import React from 'react'
|
|
import assert from 'assert'
|
|
import { shallow, mount } from 'enzyme'
|
|
import sinon from 'sinon'
|
|
import { Provider } from 'react-redux'
|
|
import configureMockStore from 'redux-mock-store'
|
|
import CurrencyInput from '../currency-input.component'
|
|
import UnitInput from '../../unit-input'
|
|
import CurrencyDisplay from '../../currency-display'
|
|
|
|
describe('CurrencyInput Component', () => {
|
|
describe('rendering', () => {
|
|
it('should render properly without a suffix', () => {
|
|
const wrapper = shallow(
|
|
<CurrencyInput />
|
|
)
|
|
|
|
assert.ok(wrapper)
|
|
assert.equal(wrapper.find(UnitInput).length, 1)
|
|
})
|
|
|
|
it('should render properly with a suffix', () => {
|
|
const mockStore = {
|
|
metamask: {
|
|
nativeCurrency: 'ETH',
|
|
currentCurrency: 'usd',
|
|
conversionRate: 231.06,
|
|
},
|
|
}
|
|
const store = configureMockStore()(mockStore)
|
|
|
|
const wrapper = mount(
|
|
<Provider store={store}>
|
|
<CurrencyInput
|
|
nativeSuffix="ETH"
|
|
fiatSuffix="USD"
|
|
nativeCurrency="ETH"
|
|
/>
|
|
</Provider>
|
|
)
|
|
|
|
assert.ok(wrapper)
|
|
assert.equal(wrapper.find('.unit-input__suffix').length, 1)
|
|
assert.equal(wrapper.find('.unit-input__suffix').text(), 'ETH')
|
|
assert.equal(wrapper.find(CurrencyDisplay).length, 1)
|
|
})
|
|
|
|
it('should render properly with an ETH value', () => {
|
|
const mockStore = {
|
|
metamask: {
|
|
nativeCurrency: 'ETH',
|
|
currentCurrency: 'usd',
|
|
conversionRate: 231.06,
|
|
},
|
|
}
|
|
const store = configureMockStore()(mockStore)
|
|
|
|
const wrapper = mount(
|
|
<Provider store={store}>
|
|
<CurrencyInput
|
|
value="de0b6b3a7640000"
|
|
fiatSuffix="USD"
|
|
nativeSuffix="ETH"
|
|
nativeCurrency="ETH"
|
|
currentCurrency="usd"
|
|
conversionRate={231.06}
|
|
/>
|
|
</Provider>
|
|
)
|
|
|
|
assert.ok(wrapper)
|
|
const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
|
|
assert.equal(currencyInputInstance.state.decimalValue, 1)
|
|
assert.equal(currencyInputInstance.state.hexValue, 'de0b6b3a7640000')
|
|
assert.equal(wrapper.find('.unit-input__suffix').length, 1)
|
|
assert.equal(wrapper.find('.unit-input__suffix').text(), 'ETH')
|
|
assert.equal(wrapper.find('.unit-input__input').props().value, '1')
|
|
assert.equal(wrapper.find('.currency-display-component').text(), '$231.06USD')
|
|
})
|
|
|
|
it('should render properly with a fiat value', () => {
|
|
const mockStore = {
|
|
metamask: {
|
|
nativeCurrency: 'ETH',
|
|
currentCurrency: 'usd',
|
|
conversionRate: 231.06,
|
|
},
|
|
}
|
|
const store = configureMockStore()(mockStore)
|
|
|
|
const wrapper = mount(
|
|
<Provider store={store}>
|
|
<CurrencyInput
|
|
value="f602f2234d0ea"
|
|
fiatSuffix="USD"
|
|
nativeSuffix="ETH"
|
|
useFiat
|
|
nativeCurrency="ETH"
|
|
currentCurrency="usd"
|
|
conversionRate={231.06}
|
|
/>
|
|
</Provider>
|
|
)
|
|
|
|
assert.ok(wrapper)
|
|
const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
|
|
assert.equal(currencyInputInstance.state.decimalValue, 1)
|
|
assert.equal(currencyInputInstance.state.hexValue, 'f602f2234d0ea')
|
|
assert.equal(wrapper.find('.unit-input__suffix').length, 1)
|
|
assert.equal(wrapper.find('.unit-input__suffix').text(), 'USD')
|
|
assert.equal(wrapper.find('.unit-input__input').props().value, '1')
|
|
assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH')
|
|
})
|
|
})
|
|
|
|
describe('handling actions', () => {
|
|
const handleChangeSpy = sinon.spy()
|
|
const handleBlurSpy = sinon.spy()
|
|
|
|
afterEach(() => {
|
|
handleChangeSpy.resetHistory()
|
|
handleBlurSpy.resetHistory()
|
|
})
|
|
|
|
it('should call onChange and onBlur on input changes with the hex value for ETH', () => {
|
|
const mockStore = {
|
|
metamask: {
|
|
nativeCurrency: 'ETH',
|
|
currentCurrency: 'usd',
|
|
conversionRate: 231.06,
|
|
},
|
|
}
|
|
const store = configureMockStore()(mockStore)
|
|
const wrapper = mount(
|
|
<Provider store={store}>
|
|
<CurrencyInput
|
|
onChange={handleChangeSpy}
|
|
onBlur={handleBlurSpy}
|
|
suffix="ETH"
|
|
nativeCurrency="ETH"
|
|
currentCurrency="usd"
|
|
conversionRate={231.06}
|
|
/>
|
|
</Provider>
|
|
)
|
|
|
|
assert.ok(wrapper)
|
|
assert.equal(handleChangeSpy.callCount, 0)
|
|
assert.equal(handleBlurSpy.callCount, 0)
|
|
|
|
const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
|
|
assert.equal(currencyInputInstance.state.decimalValue, 0)
|
|
assert.equal(currencyInputInstance.state.hexValue, undefined)
|
|
assert.equal(wrapper.find('.currency-display-component').text(), '$0.00USD')
|
|
const input = wrapper.find('input')
|
|
assert.equal(input.props().value, 0)
|
|
|
|
input.simulate('change', { target: { value: 1 } })
|
|
assert.equal(handleChangeSpy.callCount, 1)
|
|
assert.ok(handleChangeSpy.calledWith('de0b6b3a7640000'))
|
|
assert.equal(wrapper.find('.currency-display-component').text(), '$231.06USD')
|
|
assert.equal(currencyInputInstance.state.decimalValue, 1)
|
|
assert.equal(currencyInputInstance.state.hexValue, 'de0b6b3a7640000')
|
|
|
|
assert.equal(handleBlurSpy.callCount, 0)
|
|
input.simulate('blur')
|
|
assert.equal(handleBlurSpy.callCount, 1)
|
|
assert.ok(handleBlurSpy.calledWith('de0b6b3a7640000'))
|
|
})
|
|
|
|
it('should call onChange and onBlur on input changes with the hex value for fiat', () => {
|
|
const mockStore = {
|
|
metamask: {
|
|
nativeCurrency: 'ETH',
|
|
currentCurrency: 'usd',
|
|
conversionRate: 231.06,
|
|
},
|
|
}
|
|
const store = configureMockStore()(mockStore)
|
|
const wrapper = mount(
|
|
<Provider store={store}>
|
|
<CurrencyInput
|
|
onChange={handleChangeSpy}
|
|
onBlur={handleBlurSpy}
|
|
suffix="USD"
|
|
nativeCurrency="ETH"
|
|
currentCurrency="usd"
|
|
conversionRate={231.06}
|
|
useFiat
|
|
/>
|
|
</Provider>
|
|
)
|
|
|
|
assert.ok(wrapper)
|
|
assert.equal(handleChangeSpy.callCount, 0)
|
|
assert.equal(handleBlurSpy.callCount, 0)
|
|
|
|
const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
|
|
assert.equal(currencyInputInstance.state.decimalValue, 0)
|
|
assert.equal(currencyInputInstance.state.hexValue, undefined)
|
|
assert.equal(wrapper.find('.currency-display-component').text(), '0ETH')
|
|
const input = wrapper.find('input')
|
|
assert.equal(input.props().value, 0)
|
|
|
|
input.simulate('change', { target: { value: 1 } })
|
|
assert.equal(handleChangeSpy.callCount, 1)
|
|
assert.ok(handleChangeSpy.calledWith('f602f2234d0ea'))
|
|
assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH')
|
|
assert.equal(currencyInputInstance.state.decimalValue, 1)
|
|
assert.equal(currencyInputInstance.state.hexValue, 'f602f2234d0ea')
|
|
|
|
assert.equal(handleBlurSpy.callCount, 0)
|
|
input.simulate('blur')
|
|
assert.equal(handleBlurSpy.callCount, 1)
|
|
assert.ok(handleBlurSpy.calledWith('f602f2234d0ea'))
|
|
})
|
|
|
|
it('should change the state and pass in a new decimalValue when props.value changes', () => {
|
|
const mockStore = {
|
|
metamask: {
|
|
nativeCurrency: 'ETH',
|
|
currentCurrency: 'usd',
|
|
conversionRate: 231.06,
|
|
},
|
|
}
|
|
const store = configureMockStore()(mockStore)
|
|
const wrapper = shallow(
|
|
<Provider store={store}>
|
|
<CurrencyInput
|
|
onChange={handleChangeSpy}
|
|
onBlur={handleBlurSpy}
|
|
suffix="USD"
|
|
nativeCurrency="ETH"
|
|
currentCurrency="usd"
|
|
conversionRate={231.06}
|
|
useFiat
|
|
/>
|
|
</Provider>
|
|
)
|
|
|
|
assert.ok(wrapper)
|
|
const currencyInputInstance = wrapper.find(CurrencyInput).dive()
|
|
assert.equal(currencyInputInstance.state('decimalValue'), 0)
|
|
assert.equal(currencyInputInstance.state('hexValue'), undefined)
|
|
assert.equal(currencyInputInstance.find(UnitInput).props().value, 0)
|
|
|
|
currencyInputInstance.setProps({ value: '1ec05e43e72400' })
|
|
currencyInputInstance.update()
|
|
assert.equal(currencyInputInstance.state('decimalValue'), 2)
|
|
assert.equal(currencyInputInstance.state('hexValue'), '1ec05e43e72400')
|
|
assert.equal(currencyInputInstance.find(UnitInput).props().value, 2)
|
|
})
|
|
|
|
it('should swap selected currency when swap icon is clicked', () => {
|
|
const mockStore = {
|
|
metamask: {
|
|
nativeCurrency: 'ETH',
|
|
currentCurrency: 'usd',
|
|
conversionRate: 231.06,
|
|
},
|
|
}
|
|
const store = configureMockStore()(mockStore)
|
|
const wrapper = mount(
|
|
<Provider store={store}>
|
|
<CurrencyInput
|
|
onChange={handleChangeSpy}
|
|
onBlur={handleBlurSpy}
|
|
nativeSuffix="ETH"
|
|
fiatSuffix="USD"
|
|
nativeCurrency="ETH"
|
|
currentCurrency="usd"
|
|
conversionRate={231.06}
|
|
/>
|
|
</Provider>
|
|
)
|
|
|
|
assert.ok(wrapper)
|
|
assert.equal(handleChangeSpy.callCount, 0)
|
|
assert.equal(handleBlurSpy.callCount, 0)
|
|
|
|
const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
|
|
assert.equal(currencyInputInstance.state.decimalValue, 0)
|
|
assert.equal(currencyInputInstance.state.hexValue, undefined)
|
|
assert.equal(wrapper.find('.currency-display-component').text(), '$0.00USD')
|
|
const input = wrapper.find('input')
|
|
assert.equal(input.props().value, 0)
|
|
|
|
input.simulate('change', { target: { value: 1 } })
|
|
assert.equal(handleChangeSpy.callCount, 1)
|
|
assert.ok(handleChangeSpy.calledWith('de0b6b3a7640000'))
|
|
assert.equal(wrapper.find('.currency-display-component').text(), '$231.06USD')
|
|
assert.equal(currencyInputInstance.state.decimalValue, 1)
|
|
assert.equal(currencyInputInstance.state.hexValue, 'de0b6b3a7640000')
|
|
|
|
assert.equal(handleBlurSpy.callCount, 0)
|
|
input.simulate('blur')
|
|
assert.equal(handleBlurSpy.callCount, 1)
|
|
assert.ok(handleBlurSpy.calledWith('de0b6b3a7640000'))
|
|
|
|
const swap = wrapper.find('.currency-input__swap-component')
|
|
swap.simulate('click')
|
|
assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH')
|
|
})
|
|
})
|
|
})
|
|
|