aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorDan Miller <danjm.com@gmail.com>2018-08-08 21:51:06 +0800
committerDan Miller <danjm.com@gmail.com>2018-12-04 11:36:04 +0800
commit99c8804eeb8c3e407fa9f2d806c145113ec6ec2c (patch)
tree01c25072da3d50c46a8e6851342dfb6fe37be480 /ui
parent3b9ec8e1bc8f3db9cfd645b10e4908f06096c70c (diff)
downloadtangerine-wallet-browser-99c8804eeb8c3e407fa9f2d806c145113ec6ec2c.tar.gz
tangerine-wallet-browser-99c8804eeb8c3e407fa9f2d806c145113ec6ec2c.tar.zst
tangerine-wallet-browser-99c8804eeb8c3e407fa9f2d806c145113ec6ec2c.zip
Add tests for advanced-tab-component.js and subcomponents.
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js30
-rw-r--r--ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js215
-rw-r--r--ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js30
-rw-r--r--ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js18
-rw-r--r--ui/lib/shallow-with-context.js7
5 files changed, 282 insertions, 18 deletions
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index a09869a46..69cd06cde 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -27,6 +27,8 @@ export default class AdvancedTabContent extends Component {
className="advanced-tab__gas-edit-row__input"
type="number"
value={value}
+ min={min}
+ precision={precision}
onChange={event => onChange(Number(event.target.value))}
/>
{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) {
return (
<div className="advanced-tab__gas-edit-rows">
- <div className="advanced-tab__gas-edit-row">
- <div className="advanced-tab__gas-edit-row__label">
- { 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>
+ { this.renderGasEditRow('gasPriceNoDenom', customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
+ { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
</div>
)
}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
new file mode 100644
index 000000000..3efe1d2a9
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -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)
+ })
+ })
+
+})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
new file mode 100644
index 000000000..d8490272f
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
@@ -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')
+ })
+ })
+
+})
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
index 32f644765..8bf72647a 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
@@ -1,6 +1,6 @@
import React from 'react'
import assert from 'assert'
-import { shallow } from 'enzyme'
+import shallow from '../../../../../lib/shallow-with-context'
import sinon from 'sinon'
import GasModalPageContainer from '../gas-modal-page-container.component.js'
@@ -17,6 +17,10 @@ describe('GasModalPageContainer Component', function () {
beforeEach(() => {
wrapper = shallow(<GasModalPageContainer
hideModal={propsMethodSpies.hideModal}
+ updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
+ updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
+ customGasPrice={21}
+ customGasLimit={54321}
/>, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
})
@@ -147,10 +151,16 @@ describe('GasModalPageContainer Component', function () {
})
describe('renderAdvancedTabContent', () => {
- it('should render', () => {
+ it('should render with the correct props', () => {
const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent()
- const renderedAdvancedTabContent = shallow(renderAdvancedTabContentResult)
- assert.equal(renderedAdvancedTabContent.props().className, 'gas-modal-content__advanced-tab')
+ const advancedTabContentProps = renderAdvancedTabContentResult.props
+ 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'))
})
})
})
diff --git a/ui/lib/shallow-with-context.js b/ui/lib/shallow-with-context.js
new file mode 100644
index 000000000..cf83dd76e
--- /dev/null
+++ b/ui/lib/shallow-with-context.js
@@ -0,0 +1,7 @@
+import { shallow } from 'enzyme'
+
+export default function (jsxComponent) {
+ return shallow(jsxComponent, {
+ context: { t: (str1, str2) => str2 ? str1 + str2 : str1 },
+ })
+}