mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
Add tests for advanced-tab-component.js and subcomponents.
This commit is contained in:
parent
3b9ec8e1bc
commit
99c8804eeb
@ -27,6 +27,8 @@ export default class AdvancedTabContent extends Component {
|
|||||||
className="advanced-tab__gas-edit-row__input"
|
className="advanced-tab__gas-edit-row__input"
|
||||||
type="number"
|
type="number"
|
||||||
value={value}
|
value={value}
|
||||||
|
min={min}
|
||||||
|
precision={precision}
|
||||||
onChange={event => onChange(Number(event.target.value))}
|
onChange={event => onChange(Number(event.target.value))}
|
||||||
/>
|
/>
|
||||||
{showGWEI
|
{showGWEI
|
||||||
@ -59,23 +61,23 @@ export default class AdvancedTabContent extends Component {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderGasEditRow (labelKey, ...gasInputArgs) {
|
||||||
|
return (
|
||||||
|
<div className="advanced-tab__gas-edit-row">
|
||||||
|
<div className="advanced-tab__gas-edit-row__label">
|
||||||
|
{ this.context.t(labelKey) }
|
||||||
|
{ this.infoButton(() => {}) }
|
||||||
|
</div>
|
||||||
|
{ this.gasInput(...gasInputArgs) }
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
|
renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
|
||||||
return (
|
return (
|
||||||
<div className="advanced-tab__gas-edit-rows">
|
<div className="advanced-tab__gas-edit-rows">
|
||||||
<div className="advanced-tab__gas-edit-row">
|
{ this.renderGasEditRow('gasPriceNoDenom', customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
|
||||||
<div className="advanced-tab__gas-edit-row__label">
|
{ this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
|
||||||
{ this.context.t('gasPriceNoDenom') }
|
|
||||||
{ this.infoButton(() => {}) }
|
|
||||||
</div>
|
|
||||||
{ this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
|
|
||||||
</div>
|
|
||||||
<div className="advanced-tab__gas-edit-row">
|
|
||||||
<div className="advanced-tab__gas-edit-row__label">
|
|
||||||
{ this.context.t('gasLimit') }
|
|
||||||
{ this.infoButton(() => {}) }
|
|
||||||
</div>
|
|
||||||
{ this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,215 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import assert from 'assert'
|
||||||
|
import shallow from '../../../../../../lib/shallow-with-context'
|
||||||
|
import sinon from 'sinon'
|
||||||
|
import AdvancedTabContent from '../advanced-tab-content.component.js'
|
||||||
|
|
||||||
|
import TimeRemaining from '../time-remaining'
|
||||||
|
|
||||||
|
const propsMethodSpies = {
|
||||||
|
updateCustomGasPrice: sinon.spy(),
|
||||||
|
updateCustomGasLimit: sinon.spy(),
|
||||||
|
}
|
||||||
|
|
||||||
|
sinon.spy(AdvancedTabContent.prototype, 'renderGasEditRow')
|
||||||
|
sinon.spy(AdvancedTabContent.prototype, 'gasInput')
|
||||||
|
|
||||||
|
describe('AdvancedTabContent Component', function () {
|
||||||
|
let wrapper
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
wrapper = shallow(<AdvancedTabContent
|
||||||
|
updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
|
||||||
|
updateCustomGasLimit={propsMethodSpies.updateCustomGasLimit}
|
||||||
|
customGasPrice={11}
|
||||||
|
customGasLimit={23456}
|
||||||
|
millisecondsRemaining={21500}
|
||||||
|
totalFee={'$0.25'}
|
||||||
|
/>, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
|
||||||
|
})
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
propsMethodSpies.updateCustomGasPrice.resetHistory()
|
||||||
|
propsMethodSpies.updateCustomGasLimit.resetHistory()
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('render()', () => {
|
||||||
|
it('should render the advanced-tab root node', () => {
|
||||||
|
assert(wrapper.hasClass('advanced-tab'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the expected four children of the advanced-tab div', () => {
|
||||||
|
const advancedTabChildren = wrapper.children()
|
||||||
|
assert.equal(advancedTabChildren.length, 4)
|
||||||
|
|
||||||
|
assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary'))
|
||||||
|
assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart-title'))
|
||||||
|
assert(advancedTabChildren.at(2).hasClass('advanced-tab__fee-chart'))
|
||||||
|
assert(advancedTabChildren.at(3).hasClass('advanced-tab__gas-edit-rows'))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('renderDataSummary()', () => {
|
||||||
|
let dataSummary
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
dataSummary = shallow(wrapper.instance().renderDataSummary('mockTotalFee', 'mockMsRemaining'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the transaction-data-summary root node', () => {
|
||||||
|
assert(dataSummary.hasClass('advanced-tab__transaction-data-summary'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render titles of the data', () => {
|
||||||
|
const titlesNode = dataSummary.children().at(0)
|
||||||
|
assert(titlesNode.hasClass('advanced-tab__transaction-data-summary__titles'))
|
||||||
|
assert.equal(titlesNode.children().at(0).text(), 'newTransactionFee')
|
||||||
|
assert.equal(titlesNode.children().at(1).text(), '~transactionTime')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the data', () => {
|
||||||
|
const dataNode = dataSummary.children().at(1)
|
||||||
|
assert(dataNode.hasClass('advanced-tab__transaction-data-summary__container'))
|
||||||
|
assert.equal(dataNode.children().at(0).text(), 'mockTotalFee')
|
||||||
|
assert(dataNode.children().at(1).is(TimeRemaining))
|
||||||
|
assert.equal(dataNode.children().at(1).props().milliseconds, 'mockMsRemaining')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('renderGasEditRow()', () => {
|
||||||
|
let gasEditRow
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
AdvancedTabContent.prototype.gasInput.resetHistory()
|
||||||
|
gasEditRow = shallow(wrapper.instance().renderGasEditRow(
|
||||||
|
'mockLabelKey', 'argA', 'argB'
|
||||||
|
))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the gas-edit-row root node', () => {
|
||||||
|
assert(gasEditRow.hasClass('advanced-tab__gas-edit-row'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render a label and an input', () => {
|
||||||
|
const gasEditRowChildren = gasEditRow.children()
|
||||||
|
assert.equal(gasEditRowChildren.length, 2)
|
||||||
|
assert(gasEditRowChildren.at(0).hasClass('advanced-tab__gas-edit-row__label'))
|
||||||
|
assert(gasEditRowChildren.at(1).hasClass('advanced-tab__gas-edit-row__input-wrapper'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the label key and info button', () => {
|
||||||
|
const gasRowLabelChildren = gasEditRow.children().at(0).children()
|
||||||
|
assert.equal(gasRowLabelChildren.length, 2)
|
||||||
|
assert(gasRowLabelChildren.at(0), 'mockLabelKey')
|
||||||
|
assert(gasRowLabelChildren.at(1).hasClass('info-circle'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should call this.gasInput with the correct args', () => {
|
||||||
|
const gasInputSpyArgs = AdvancedTabContent.prototype.gasInput.args
|
||||||
|
assert.deepEqual(gasInputSpyArgs[0], [ 'argA', 'argB' ])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('renderGasEditRows()', () => {
|
||||||
|
let gasEditRows
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
|
||||||
|
gasEditRows = shallow(wrapper.instance().renderGasEditRows(
|
||||||
|
'mockGasPrice',
|
||||||
|
() => 'mockUpdateCustomGasPriceReturn',
|
||||||
|
'mockGasLimit',
|
||||||
|
() => 'mockUpdateCustomGasLimitReturn'
|
||||||
|
))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the gas-edit-rows root node', () => {
|
||||||
|
assert(gasEditRows.hasClass('advanced-tab__gas-edit-rows'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render two rows', () => {
|
||||||
|
const gasEditRowsChildren = gasEditRows.children()
|
||||||
|
assert.equal(gasEditRowsChildren.length, 2)
|
||||||
|
assert(gasEditRowsChildren.at(0).hasClass('advanced-tab__gas-edit-row'))
|
||||||
|
assert(gasEditRowsChildren.at(1).hasClass('advanced-tab__gas-edit-row'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should call this.renderGasEditRow twice, with the expected args', () => {
|
||||||
|
const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args
|
||||||
|
assert.equal(renderGasEditRowSpyArgs.length, 2)
|
||||||
|
assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [
|
||||||
|
'gasPriceNoDenom', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', '0', 9, true,
|
||||||
|
].map(String))
|
||||||
|
assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [
|
||||||
|
'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 21000, '0',
|
||||||
|
].map(String))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('infoButton()', () => {
|
||||||
|
let infoButton
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
|
||||||
|
infoButton = shallow(wrapper.instance().infoButton(() => 'mockOnClickReturn'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the i element', () => {
|
||||||
|
assert(infoButton.hasClass('info-circle'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should pass the onClick argument to the i tag onClick prop', () => {
|
||||||
|
assert(infoButton.props().onClick(), 'mockOnClickReturn')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('gasInput()', () => {
|
||||||
|
let gasInput
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
|
||||||
|
gasInput = shallow(wrapper.instance().gasInput(
|
||||||
|
321,
|
||||||
|
value => value + 7,
|
||||||
|
0,
|
||||||
|
8,
|
||||||
|
false
|
||||||
|
))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the input-wrapper root node', () => {
|
||||||
|
assert(gasInput.hasClass('advanced-tab__gas-edit-row__input-wrapper'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render an input, but not a GWEI symbol', () => {
|
||||||
|
assert.equal(gasInput.children().length, 1)
|
||||||
|
assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should show GWEI if the showGWEI prop is truthy', () => {
|
||||||
|
const gasInputWithGWEI = shallow(wrapper.instance().gasInput(
|
||||||
|
321,
|
||||||
|
value => value + 7,
|
||||||
|
0,
|
||||||
|
8,
|
||||||
|
true
|
||||||
|
))
|
||||||
|
assert.equal(gasInputWithGWEI.children().length, 2)
|
||||||
|
assert(gasInputWithGWEI.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
|
||||||
|
assert(gasInputWithGWEI.children().at(1).hasClass('advanced-tab__gas-edit-row__gwei-symbol'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should pass the correct value min and precision props to the input', () => {
|
||||||
|
const inputProps = gasInput.find('input').props()
|
||||||
|
assert.equal(inputProps.min, 0)
|
||||||
|
assert.equal(inputProps.value, 321)
|
||||||
|
assert.equal(inputProps.precision, 8)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should call the passed onChange method with the value of the input onChange event', () => {
|
||||||
|
const inputOnChange = gasInput.find('input').props().onChange
|
||||||
|
assert.equal(inputOnChange({ target: { value: 8} }), 15)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
@ -0,0 +1,30 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import assert from 'assert'
|
||||||
|
import shallow from '../../../../../../../lib/shallow-with-context'
|
||||||
|
import TimeRemaining from '../time-remaining.component.js'
|
||||||
|
|
||||||
|
describe('TimeRemaining Component', function () {
|
||||||
|
let wrapper
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
wrapper = shallow(<TimeRemaining
|
||||||
|
milliseconds={495000}
|
||||||
|
/>)
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('render()', () => {
|
||||||
|
it('should render the time-remaining root node', () => {
|
||||||
|
assert(wrapper.hasClass('time-remaining'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render minutes and seconds numbers and labels', () => {
|
||||||
|
const timeRemainingChildren = wrapper.children()
|
||||||
|
assert.equal(timeRemainingChildren.length, 4)
|
||||||
|
assert.equal(timeRemainingChildren.at(0).text(), 8)
|
||||||
|
assert.equal(timeRemainingChildren.at(1).text(), 'minutesShorthand')
|
||||||
|
assert.equal(timeRemainingChildren.at(2).text(), 15)
|
||||||
|
assert.equal(timeRemainingChildren.at(3).text(), 'secondsShorthand')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
@ -1,6 +1,6 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import assert from 'assert'
|
import assert from 'assert'
|
||||||
import { shallow } from 'enzyme'
|
import shallow from '../../../../../lib/shallow-with-context'
|
||||||
import sinon from 'sinon'
|
import sinon from 'sinon'
|
||||||
import GasModalPageContainer from '../gas-modal-page-container.component.js'
|
import GasModalPageContainer from '../gas-modal-page-container.component.js'
|
||||||
|
|
||||||
@ -17,6 +17,10 @@ describe('GasModalPageContainer Component', function () {
|
|||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
wrapper = shallow(<GasModalPageContainer
|
wrapper = shallow(<GasModalPageContainer
|
||||||
hideModal={propsMethodSpies.hideModal}
|
hideModal={propsMethodSpies.hideModal}
|
||||||
|
updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
|
||||||
|
updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
|
||||||
|
customGasPrice={21}
|
||||||
|
customGasLimit={54321}
|
||||||
/>, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
|
/>, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -147,10 +151,16 @@ describe('GasModalPageContainer Component', function () {
|
|||||||
})
|
})
|
||||||
|
|
||||||
describe('renderAdvancedTabContent', () => {
|
describe('renderAdvancedTabContent', () => {
|
||||||
it('should render', () => {
|
it('should render with the correct props', () => {
|
||||||
const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent()
|
const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent()
|
||||||
const renderedAdvancedTabContent = shallow(renderAdvancedTabContentResult)
|
const advancedTabContentProps = renderAdvancedTabContentResult.props
|
||||||
assert.equal(renderedAdvancedTabContent.props().className, 'gas-modal-content__advanced-tab')
|
assert.equal(advancedTabContentProps.updateCustomGasPrice(), 'mockupdateCustomGasPrice')
|
||||||
|
assert.equal(advancedTabContentProps.updateCustomGasLimit(), 'mockupdateCustomGasLimit')
|
||||||
|
assert.equal(advancedTabContentProps.customGasPrice, 21)
|
||||||
|
assert.equal(advancedTabContentProps.customGasLimit, 54321)
|
||||||
|
assert.equal(advancedTabContentProps.millisecondsRemaining, 91000)
|
||||||
|
assert.equal(advancedTabContentProps.totalFee, '$0.30')
|
||||||
|
assert(shallow(renderAdvancedTabContentResult).hasClass('advanced-tab'))
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
7
ui/lib/shallow-with-context.js
Normal file
7
ui/lib/shallow-with-context.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { shallow } from 'enzyme'
|
||||||
|
|
||||||
|
export default function (jsxComponent) {
|
||||||
|
return shallow(jsxComponent, {
|
||||||
|
context: { t: (str1, str2) => str2 ? str1 + str2 : str1 },
|
||||||
|
})
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user