Test updates and additions for button integration with send screen.

6 files changed, 158 insertions, 40 deletions

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
index db730458d..41fe901fa 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@@ -92,23 +92,24 @@ export default class GasModalPageContainer extends Component {
     hideBasic,
     ...advancedTabProps
   }) {
+    let tabsToRender = [
+      { name: 'basic', content: this.renderBasicTabContent(gasPriceButtonGroupProps) },
+      { name: 'advanced', content: this.renderAdvancedTabContent(advancedTabProps) },
+    ]
+
+    if (hideBasic) {
+      tabsToRender = tabsToRender.slice(1)
+    }
+
     return (
       <Tabs>
-        {hideBasic
-          ? null
-          : <Tab name={this.context.t('basic')}>
+        {tabsToRender.map(({ name, content }, i) => <Tab name={this.context.t(name)} key={`gas-modal-tab-${i}`}>
             <div className="gas-modal-content">
-              { this.renderBasicTabContent(gasPriceButtonGroupProps) }
+              { content }
               { this.renderInfoRows(originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth) }
             </div>
           </Tab>
-        }
-        <Tab name={this.context.t('advanced')}>
-          <div className="gas-modal-content">
-            { this.renderAdvancedTabContent(advancedTabProps) }
-            { this.renderInfoRows(originalTotalFiat, originalTotalEth, newTotalFiat, newTotalEth) }
-          </div>
-        </Tab>
+        )}
       </Tabs>
     )
   }
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index a150e5009..f9ed1cebb 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -119,10 +119,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     ...stateProps,
     ...otherDispatchProps,
     ...ownProps,
-    onSubmit: isConfirm ? dispatchUpdateConfirmTxGasAndCalculate : (newLimit, newPrice) => {
-      dispatchSetGasData(newLimit, newPrice)
-      dispatchHideGasButtonGroup()
-    },
+    onSubmit: isConfirm
+      ? dispatchUpdateConfirmTxGasAndCalculate
+      : (newLimit, newPrice) => {
+        dispatchSetGasData(newLimit, newPrice)
+        dispatchHideGasButtonGroup()
+      },
     gasPriceButtonGroupProps: {
       ...gasPriceButtonGroupProps,
       handleGasPriceSelection: dispatchUpdateCustomGasPrice,
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 c41adca83..fdd7709d9 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
@@ -161,6 +161,19 @@ describe('GasModalPageContainer Component', function () {
       assert.deepEqual(GP.renderInfoRows.getCall(0).args, ['mockOriginalTotalFiat', 'mockOriginalTotalEth', 'mockNewTotalFiat', 'mockNewTotalEth'])
       assert.deepEqual(GP.renderInfoRows.getCall(1).args, ['mockOriginalTotalFiat', 'mockOriginalTotalEth', 'mockNewTotalFiat', 'mockNewTotalEth'])
     })
+
+    it('should not render the basic tab if hideBasic is true', () => {
+      const renderTabsResult = wrapper.instance().renderTabs(mockInfoRowProps, {
+        gasPriceButtonGroupProps: mockGasPriceButtonGroupProps,
+        otherProps: 'mockAdvancedTabProps',
+        hideBasic: true,
+      })
+
+      const renderedTabs = shallow(renderTabsResult)
+      const tabs = renderedTabs.find(Tab)
+      assert.equal(tabs.length, 1)
+      assert.equal(tabs.at(0).props().name, 'advanced')
+    })
   })
 
   describe('renderInfoRow', () => {
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
index e01fd3898..238f27ed6 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
@@ -4,6 +4,7 @@ import sinon from 'sinon'
 
 let mapStateToProps
 let mapDispatchToProps
+let mergeProps
 
 const actionSpies = {
   hideModal: sinon.spy(),
@@ -20,11 +21,16 @@ const confirmTransactionActionSpies = {
   updateGasAndCalculate: sinon.spy(),
 }
 
+const sendActionSpies = {
+  hideGasButtonGroup: sinon.spy(),
+}
+
 proxyquire('../gas-modal-page-container.container.js', {
   'react-redux': {
-    connect: (ms, md) => {
+    connect: (ms, md, mp) => {
       mapStateToProps = ms
       mapDispatchToProps = md
+      mergeProps = mp
       return () => ({})
     },
   },
@@ -36,6 +42,7 @@ proxyquire('../gas-modal-page-container.container.js', {
   '../../../actions': actionSpies,
   '../../../ducks/gas.duck': gasActionSpies,
   '../../../ducks/confirm-transaction.duck': confirmTransactionActionSpies,
+  '../../../ducks/send.duck': sendActionSpies,
 })
 
 describe('gas-modal-page-container container', () => {
@@ -44,6 +51,15 @@ describe('gas-modal-page-container container', () => {
 
     it('should map the correct properties to props', () => {
       const mockState2 = {
+        appState: {
+          modal: {
+            modalState: {
+              props: {
+                hideBasic: true,
+              },
+            },
+          },
+        },
         metamask: {
           send: {
             gasLimit: '16',
@@ -80,10 +96,11 @@ describe('gas-modal-page-container container', () => {
         newTotalFiat: '637.41',
         gasPriceButtonGroupProps:
         {
-          buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:3',
-          defaultActiveButtonIndex: 'mockRenderableBasicEstimateData:3ffffffff0x3200000',
-          gasButtonInfo: 'mockRenderableBasicEstimateData:3',
+          buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:4',
+          defaultActiveButtonIndex: 'mockRenderableBasicEstimateData:4ffffffff0x3200000',
+          gasButtonInfo: 'mockRenderableBasicEstimateData:4',
         },
+        hideBasic: true,
         infoRowProps: {
           originalTotalFiat: '22.58',
           originalTotalEth: '0.451569 ETH',
@@ -110,6 +127,14 @@ describe('gas-modal-page-container container', () => {
       gasActionSpies.setCustomGasLimit.resetHistory()
     })
 
+    describe('hideGasButtonGroup()', () => {
+      it('should dispatch a hideGasButtonGroup action', () => {
+        mapDispatchToPropsObject.hideGasButtonGroup()
+        assert(dispatchSpy.calledOnce)
+        assert(sendActionSpies.hideGasButtonGroup.calledOnce)
+      })
+    })
+
     describe('hideModal()', () => {
       it('should dispatch a hideModal action', () => {
         mapDispatchToPropsObject.hideModal()
@@ -168,4 +193,85 @@ describe('gas-modal-page-container container', () => {
 
   })
 
+  describe('mergeProps', () => {
+      let stateProps
+      let dispatchProps
+      let ownProps
+
+      beforeEach(() => {
+        stateProps = {
+          gasPriceButtonGroupProps: {
+            someGasPriceButtonGroupProp: 'foo',
+            anotherGasPriceButtonGroupProp: 'bar',
+          },
+          isConfirm: true,
+          someOtherStateProp: 'baz',
+        }
+        dispatchProps = {
+          updateCustomGasPrice: sinon.spy(),
+          hideGasButtonGroup: sinon.spy(),
+          setGasData: sinon.spy(),
+          updateConfirmTxGasAndCalculate: sinon.spy(),
+          someOtherDispatchProp: sinon.spy(),
+        }
+        ownProps = { someOwnProp: 123 }
+      })
+    it('should return the expected props when isConfirm is true', () => {
+      const result = mergeProps(stateProps, dispatchProps, ownProps)
+
+      assert.equal(result.isConfirm, true)
+      assert.equal(result.someOtherStateProp, 'baz')
+      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
+      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
+      assert.equal(result.someOwnProp, 123)
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
+      assert.equal(dispatchProps.setGasData.callCount, 0)
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+
+      result.onSubmit()
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 1)
+      assert.equal(dispatchProps.setGasData.callCount, 0)
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0)
+      result.gasPriceButtonGroupProps.handleGasPriceSelection()
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 1)
+
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
+      result.someOtherDispatchProp()
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
+    })
+
+    it('should return the expected props when isConfirm is false', () => {
+      const result = mergeProps(Object.assign({}, stateProps, { isConfirm: false }), dispatchProps, ownProps)
+
+      assert.equal(result.isConfirm, false)
+      assert.equal(result.someOtherStateProp, 'baz')
+      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
+      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
+      assert.equal(result.someOwnProp, 123)
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
+      assert.equal(dispatchProps.setGasData.callCount, 0)
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+
+      result.onSubmit('mockNewLimit', 'mockNewPrice')
+
+      assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
+      assert.equal(dispatchProps.setGasData.callCount, 1)
+      assert.deepEqual(dispatchProps.setGasData.getCall(0).args, ['mockNewLimit', 'mockNewPrice'])
+      assert.equal(dispatchProps.hideGasButtonGroup.callCount, 1)
+
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0)
+      result.gasPriceButtonGroupProps.handleGasPriceSelection()
+      assert.equal(dispatchProps.updateCustomGasPrice.callCount, 1)
+
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
+      result.someOtherDispatchProp()
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
+    })
+  })
+
 })
diff --git a/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js b/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
index 8d6675e18..62ebb512d 100644
--- a/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
+++ b/ui/app/components/gas-customization/gas-price-button-group/gas-price-button-group.component.js
@@ -22,6 +22,7 @@ export default class GasPriceButtonGroup extends Component {
     defaultActiveButtonIndex: PropTypes.number,
     gasButtonInfo: PropTypes.arrayOf(PropTypes.shape(GAS_OBJECT_PROPTYPES_SHAPE)),
     handleGasPriceSelection: PropTypes.func,
+    newActiveButtonIndex: PropTypes.number,
     noButtonActiveByDefault: PropTypes.bool,
     showCheck: PropTypes.bool,
   }
@@ -82,7 +83,7 @@ export default class GasPriceButtonGroup extends Component {
         >
           { gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
         </ButtonGroup>
-        : <div className={`${buttonPropsAndFlags.className}__loading-container`}>Loading...</div>
+        : <div className={`${buttonPropsAndFlags.className}__loading-container`}>{ this.context.t('loading') }</div>
     )
   }
 }
diff --git a/ui/app/components/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js b/ui/app/components/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js
index e1458188d..79f74f8e4 100644
--- a/ui/app/components/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js
+++ b/ui/app/components/gas-customization/gas-price-button-group/tests/gas-price-button-group-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 GasPriceButtonGroup from '../gas-price-button-group.component'
 
@@ -36,7 +36,6 @@ const mockGasPriceButtonGroupProps = {
 }
 
 const mockButtonPropsAndFlags = Object.assign({}, {
-  buttonDataLoading: mockGasPriceButtonGroupProps.buttonDataLoading,
   className: mockGasPriceButtonGroupProps.className,
   handleGasPriceSelection: mockGasPriceButtonGroupProps.handleGasPriceSelection,
   showCheck: mockGasPriceButtonGroupProps.showCheck,
@@ -87,12 +86,19 @@ describe('GasPriceButtonGroup Component', function () {
       )
     }
 
-    it('should called this.renderButton 3 times, with the correct args', () => {
+    it('should call this.renderButton 3 times, with the correct args', () => {
       assert.equal(GasPriceButtonGroup.prototype.renderButton.callCount, 3)
       renderButtonArgsTest(0, mockButtonPropsAndFlags)
       renderButtonArgsTest(1, mockButtonPropsAndFlags)
       renderButtonArgsTest(2, mockButtonPropsAndFlags)
     })
+
+    it('should show loading if buttonDataLoading', () => {
+      wrapper.setProps({ buttonDataLoading: true })
+      assert(wrapper.is('div'))
+      assert(wrapper.hasClass('gas-price-button-group__loading-container'))
+      assert.equal(wrapper.text(), 'loading')
+    })
   })
 
   describe('renderButton', () => {
@@ -147,29 +153,18 @@ describe('GasPriceButtonGroup Component', function () {
         ]
       )
     })
-
-    it('should not call renderButtonContent if buttonDataLoading is true and should show a loading indicator', () => {
-      GasPriceButtonGroup.prototype.renderButtonContent.resetHistory()
-      const renderButtonResult = GasPriceButtonGroup.prototype.renderButton(
-        Object.assign({}, mockGasPriceButtonGroupProps.gasButtonInfo[0]),
-        Object.assign({}, mockButtonPropsAndFlags, {buttonDataLoading: true})
-      )
-      wrappedRenderButtonResult = shallow(renderButtonResult)
-      assert.equal(GasPriceButtonGroup.prototype.renderButtonContent.callCount, 0)
-      assert.equal(wrappedRenderButtonResult.childAt(0).text(), 'Loading...')
-    })
   })
 
   describe('renderButtonContent', () => {
-    it('should render a label if passed a label', () => {
-      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({
-        label: 'mockLabel',
+    it('should render a label if passed a labelKey', () => {
+      const renderButtonContentResult = wrapper.instance().renderButtonContent({
+        labelKey: 'mockLabelKey',
       }, {
         className: 'someClass',
       })
       const wrappedRenderButtonContentResult = shallow(renderButtonContentResult)
       assert.equal(wrappedRenderButtonContentResult.childAt(0).children().length, 1)
-      assert.equal(wrappedRenderButtonContentResult.find('.someClass__label').text(), 'mockLabel')
+      assert.equal(wrappedRenderButtonContentResult.find('.someClass__label').text(), 'mockLabelKey')
     })
 
     it('should render a feeInPrimaryCurrency if passed a feeInPrimaryCurrency', () => {
@@ -215,8 +210,8 @@ describe('GasPriceButtonGroup Component', function () {
     })
 
     it('should render all elements if all args passed', () => {
-      const renderButtonContentResult = GasPriceButtonGroup.prototype.renderButtonContent({
-        label: 'mockLabel',
+      const renderButtonContentResult = wrapper.instance().renderButtonContent({
+        labelKey: 'mockLabel',
         feeInPrimaryCurrency: 'mockFeeInPrimaryCurrency',
         feeInSecondaryCurrency: 'mockFeeInSecondaryCurrency',
         timeEstimate: 'mockTimeEstimate',