Test updates and additions for button integration with send screen.

7 files changed, 150 insertions, 16 deletions

diff --git a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
index 9962f8028..40f8b1fe0 100644
--- a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
+++ b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
@@ -11,7 +11,7 @@ export default class GasFeeDisplay extends Component {
     convertedCurrency: PropTypes.string,
     gasLoadingError: PropTypes.bool,
     gasTotal: PropTypes.string,
-    onClick: PropTypes.func,
+    showGasButtonGroup: PropTypes.func,
   };
 
   static contextTypes = {
@@ -49,7 +49,7 @@ export default class GasFeeDisplay extends Component {
           className="gas-fee-reset"
           onClick={showGasButtonGroup}
         >
-          Reset
+          { this.context.t('reset') }
         </button>
       </div>
     )
diff --git a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
index 9ff01493a..c7ac175d9 100644
--- a/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
+++ b/ui/app/components/send/send-content/send-gas-row/gas-fee-display/test/gas-fee-display.component.test.js
@@ -17,9 +17,9 @@ describe('SendGasRow Component', function () {
     wrapper = shallow(<GasFeeDisplay
       conversionRate={20}
       gasTotal={'mockGasTotal'}
-      onClick={propsMethodSpies.showCustomizeGasModal}
       primaryCurrency={'mockPrimaryCurrency'}
       convertedCurrency={'mockConvertedCurrency'}
+      showGasButtonGroup={propsMethodSpies.showCustomizeGasModal}
     />, {context: {t: str => str + '_t'}})
   })
 
@@ -41,13 +41,19 @@ describe('SendGasRow Component', function () {
       assert.equal(value, 'mockGasTotal')
     })
 
-    it('should render the Button with the correct props', () => {
+    it('should render the reset button with the correct props', () => {
       const {
         onClick,
+        className,
       } = wrapper.find('button').props()
+      assert.equal(className, 'gas-fee-reset')
       assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0)
       onClick()
       assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1)
     })
+
+    it('should render the reset button with the correct text', () => {
+      assert.equal(wrapper.find('button').text(), 'reset_t')
+    })
   })
 })
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
index 64a5cd603..507407306 100644
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.component.js
@@ -13,6 +13,9 @@ export default class SendGasRow extends Component {
     gasLoadingError: PropTypes.bool,
     gasTotal: PropTypes.string,
     showCustomizeGasModal: PropTypes.func,
+    gasPriceButtonGroupProps: PropTypes.object,
+    showGasButtonGroup: PropTypes.func,
+    gasButtonGroupShown: PropTypes.bool,
   }
 
   static contextTypes = {
@@ -29,7 +32,7 @@ export default class SendGasRow extends Component {
       showCustomizeGasModal,
       gasPriceButtonGroupProps,
       gasButtonGroupShown,
-      showGasButtonGroup
+      showGasButtonGroup,
     } = this.props
 
     return (
@@ -43,10 +46,10 @@ export default class SendGasRow extends Component {
             <GasPriceButtonGroup
               className="gas-price-button-group--small"
               showCheck={false}
-              {...this.props.gasPriceButtonGroupProps}
+              {...gasPriceButtonGroupProps}
             />
             <div className="advanced-gas-options-btn" onClick={() => showCustomizeGasModal()}>
-              Advanced Options
+              { this.context.t('advancedOptions') }
             </div>
           </div>
         : <GasFeeDisplay
diff --git a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
index 19e49b391..dd16559d0 100644
--- a/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
+++ b/ui/app/components/send/send-content/send-gas-row/send-gas-row.container.js
@@ -5,13 +5,13 @@ import {
   getGasTotal,
   getGasPrice,
 } from '../../send.selectors.js'
-import{
+import {
   getBasicGasEstimateLoadingStatus,
   getRenderableEstimateDataForSmallButtons,
-  getDefaultActiveButtonIndex
+  getDefaultActiveButtonIndex,
 } from '../../../../selectors/custom-gas'
-import{
-  showGasButtonGroup
+import {
+  showGasButtonGroup,
 } from '../../../../ducks/send.duck'
 import { getGasLoadingError, gasFeeIsInError, getGasButtonGroupShown } from './send-gas-row.selectors.js'
 import { showModal, setGasPrice } from '../../../../actions'
@@ -43,7 +43,7 @@ function mapDispatchToProps (dispatch) {
   return {
     showCustomizeGasModal: () => dispatch(showModal({ name: 'CUSTOMIZE_GAS', hideBasic: true })),
     setGasPrice: newPrice => dispatch(setGasPrice(newPrice)),
-    showGasButtonGroup: () => dispatch(showGasButtonGroup())
+    showGasButtonGroup: () => dispatch(showGasButtonGroup()),
   }
 }
 
@@ -63,4 +63,4 @@ function mergeProps (stateProps, dispatchProps, ownProps) {
       handleGasPriceSelection: dispatchSetGasPrice,
     },
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
index 54a92bd2d..171cd7bf6 100644
--- a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
+++ b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-component.test.js
@@ -6,6 +6,7 @@ import SendGasRow from '../send-gas-row.component.js'
 
 import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
 import GasFeeDisplay from '../gas-fee-display/gas-fee-display.component'
+import GasPriceButtonGroup from '../../../../gas-customization/gas-price-button-group'
 
 const propsMethodSpies = {
   showCustomizeGasModal: sinon.spy(),
@@ -21,7 +22,13 @@ describe('SendGasRow Component', function () {
       gasFeeError={'mockGasFeeError'}
       gasLoadingError={false}
       gasTotal={'mockGasTotal'}
+      showGasButtonGroup={'mockShowGasPriceButtonGroup'}
+      gasButtonGroupShown={false}
       showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
+      gasPriceButtonGroupProps={{
+        someGasPriceButtonGroupProp: 'foo',
+        anotherGasPriceButtonGroupProp: 'bar',
+      }}
     />, { context: { t: str => str + '_t' } })
   })
 
@@ -41,7 +48,7 @@ describe('SendGasRow Component', function () {
         errorType,
       } = wrapper.find(SendRowWrapper).props()
 
-      assert.equal(label, 'gasFee_t:')
+      assert.equal(label, 'transactionFee_t:')
       assert.equal(showError, 'mockGasFeeError')
       assert.equal(errorType, 'gasFee')
     })
@@ -57,14 +64,42 @@ describe('SendGasRow Component', function () {
         gasLoadingError,
         gasTotal,
         onClick,
+        showGasButtonGroup,
       } = wrapper.find(SendRowWrapper).childAt(0).props()
       assert.equal(conversionRate, 20)
       assert.equal(convertedCurrency, 'mockConvertedCurrency')
       assert.equal(gasLoadingError, false)
       assert.equal(gasTotal, 'mockGasTotal')
+      assert.equal(showGasButtonGroup, 'mockShowGasPriceButtonGroup')
       assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0)
       onClick()
       assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1)
     })
+
+    it('should render the GasPriceButtonGroup if gasButtonGroupShown is true', () => {
+      wrapper.setProps({ gasButtonGroupShown: true })
+      const rendered = wrapper.find(SendRowWrapper).childAt(0)
+      assert.equal(rendered.children().length, 2)
+
+      const gasPriceButtonGroup = rendered.childAt(0)
+      assert(gasPriceButtonGroup.is(GasPriceButtonGroup))
+      assert(gasPriceButtonGroup.hasClass('gas-price-button-group--small'))
+      assert.equal(gasPriceButtonGroup.props().showCheck, false)
+      assert.equal(gasPriceButtonGroup.props().someGasPriceButtonGroupProp, 'foo')
+      assert.equal(gasPriceButtonGroup.props().anotherGasPriceButtonGroupProp, 'bar')
+    })
+
+    it('should render an advanced options button if gasButtonGroupShown is true', () => {
+      wrapper.setProps({ gasButtonGroupShown: true })
+      const rendered = wrapper.find(SendRowWrapper).childAt(0)
+      assert.equal(rendered.children().length, 2)
+
+      const advancedOptionsButton = rendered.childAt(1)
+      assert.equal(advancedOptionsButton.text(), 'advancedOptions_t')
+
+      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0)
+      advancedOptionsButton.props().onClick()
+      assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1)
+    })
   })
 })
diff --git a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
index 2ce062505..1c385e216 100644
--- a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
+++ b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-container.test.js
@@ -4,16 +4,23 @@ import sinon from 'sinon'
 
 let mapStateToProps
 let mapDispatchToProps
+let mergeProps
 
 const actionSpies = {
   showModal: sinon.spy(),
+  setGasPrice: sinon.spy(),
+}
+
+const sendDuckSpies = {
+  showGasButtonGroup: sinon.spy(),
 }
 
 proxyquire('../send-gas-row.container.js', {
   'react-redux': {
-    connect: (ms, md) => {
+    connect: (ms, md, mp) => {
       mapStateToProps = ms
       mapDispatchToProps = md
+      mergeProps = mp
       return () => ({})
     },
   },
@@ -21,12 +28,20 @@ proxyquire('../send-gas-row.container.js', {
     getConversionRate: (s) => `mockConversionRate:${s}`,
     getCurrentCurrency: (s) => `mockConvertedCurrency:${s}`,
     getGasTotal: (s) => `mockGasTotal:${s}`,
+    getGasPrice: (s) => `mockGasPrice:${s}`,
   },
   './send-gas-row.selectors.js': {
     getGasLoadingError: (s) => `mockGasLoadingError:${s}`,
     gasFeeIsInError: (s) => `mockGasFeeError:${s}`,
+    getGasButtonGroupShown: (s) => `mockGetGasButtonGroupShown:${s}`,
   },
   '../../../../actions': actionSpies,
+  '../../../../selectors/custom-gas': {
+    getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${s}`,
+    getRenderableEstimateDataForSmallButtons: (s) => `mockGasButtonInfo:${s}`,
+    getDefaultActiveButtonIndex: (gasButtonInfo, gasPrice) => gasButtonInfo.length + gasPrice.length,
+  },
+  '../../../../ducks/send.duck': sendDuckSpies,
 })
 
 describe('send-gas-row container', () => {
@@ -40,6 +55,13 @@ describe('send-gas-row container', () => {
         gasTotal: 'mockGasTotal:mockState',
         gasFeeError: 'mockGasFeeError:mockState',
         gasLoadingError: 'mockGasLoadingError:mockState',
+        gasPriceButtonGroupProps: {
+          buttonDataLoading: `mockBasicGasEstimateLoadingStatus:mockState`,
+          defaultActiveButtonIndex: 1,
+          newActiveButtonIndex: 49,
+          gasButtonInfo: `mockGasButtonInfo:mockState`,
+        },
+        gasButtonGroupShown: `mockGetGasButtonGroupShown:mockState`,
       })
     })
 
@@ -60,11 +82,66 @@ describe('send-gas-row container', () => {
         assert(dispatchSpy.calledOnce)
         assert.deepEqual(
           actionSpies.showModal.getCall(0).args[0],
-          { name: 'CUSTOMIZE_GAS' }
+          { name: 'CUSTOMIZE_GAS', hideBasic: true }
         )
       })
     })
 
+    describe('setGasPrice()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.setGasPrice('mockNewPrice')
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.setGasPrice.calledOnce)
+        assert.equal(actionSpies.setGasPrice.getCall(0).args[0], 'mockNewPrice')
+      })
+    })
+
+    describe('showGasButtonGroup()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.showGasButtonGroup()
+        assert(dispatchSpy.calledOnce)
+        assert(sendDuckSpies.showGasButtonGroup.calledOnce)
+      })
+    })
+
+  })
+
+  describe('mergeProps', () => {
+    let stateProps
+    let dispatchProps
+    let ownProps
+
+    beforeEach(() => {
+      stateProps = {
+        gasPriceButtonGroupProps: {
+          someGasPriceButtonGroupProp: 'foo',
+          anotherGasPriceButtonGroupProp: 'bar',
+        },
+        someOtherStateProp: 'baz',
+      }
+      dispatchProps = {
+        setGasPrice: 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.someOtherStateProp, 'baz')
+      assert.equal(result.gasPriceButtonGroupProps.someGasPriceButtonGroupProp, 'foo')
+      assert.equal(result.gasPriceButtonGroupProps.anotherGasPriceButtonGroupProp, 'bar')
+      assert.equal(result.someOwnProp, 123)
+
+      assert.equal(dispatchProps.setGasPrice.callCount, 0)
+      result.gasPriceButtonGroupProps.handleGasPriceSelection()
+      assert.equal(dispatchProps.setGasPrice.callCount, 1)
+
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 0)
+      result.someOtherDispatchProp()
+      assert.equal(dispatchProps.someOtherDispatchProp.callCount, 1)
+    })
   })
 
 })
diff --git a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
index d46dd9d8b..bd3c9a257 100644
--- a/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
+++ b/ui/app/components/send/send-content/send-gas-row/tests/send-gas-row-selectors.test.js
@@ -2,6 +2,7 @@ import assert from 'assert'
 import {
   gasFeeIsInError,
   getGasLoadingError,
+  getGasButtonGroupShown,
 } from '../send-gas-row.selectors.js'
 
 describe('send-gas-row selectors', () => {
@@ -46,4 +47,16 @@ describe('send-gas-row selectors', () => {
     })
   })
 
+  describe('getGasButtonGroupShown()', () => {
+    it('should return send.gasButtonGroupShown', () => {
+      const state = {
+        send: {
+          gasButtonGroupShown: 'foobar',
+        },
+      }
+
+      assert.equal(getGasButtonGroupShown(state), 'foobar')
+    })
+  })
+
 })