Connects remained of the gas customization component to redux.

2 files changed, 160 insertions, 59 deletions

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 86286b615..c41adca83 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
@@ -5,13 +5,12 @@ import sinon from 'sinon'
 import GasModalPageContainer from '../gas-modal-page-container.component.js'
 
 import PageContainer from '../../../page-container'
-import BasicTabContent from '../basic-tab-content'
-import AdvancedTabContent from '../advanced-tab-content'
 
 import { Tab } from '../../../tabs'
 
 const propsMethodSpies = {
   hideModal: sinon.spy(),
+  onSubmit: sinon.spy(),
 }
 
 const mockGasPriceButtonGroupProps = {
@@ -41,18 +40,29 @@ const mockGasPriceButtonGroupProps = {
   noButtonActiveByDefault: true,
   showCheck: true,
 }
+const mockInfoRowProps = {
+  originalTotalFiat: 'mockOriginalTotalFiat',
+  originalTotalEth: 'mockOriginalTotalEth',
+  newTotalFiat: 'mockNewTotalFiat',
+  newTotalEth: 'mockNewTotalEth',
+}
 
+const GP = GasModalPageContainer.prototype
 describe('GasModalPageContainer Component', function () {
   let wrapper
 
   beforeEach(() => {
     wrapper = shallow(<GasModalPageContainer
       hideModal={propsMethodSpies.hideModal}
+      onSubmit={propsMethodSpies.onSubmit}
       updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
       updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
       customGasPrice={21}
       customGasLimit={54321}
       gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
+      infoRowProps={mockInfoRowProps}
+      customGasPriceInHex={'mockCustomGasPriceInHex'}
+      customGasLimitInHex={'mockCustomGasLimitInHex'}
     />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
   })
 
@@ -89,7 +99,7 @@ describe('GasModalPageContainer Component', function () {
     })
 
     it('should pass the correct renderTabs property to PageContainer', () => {
-      sinon.stub(GasModalPageContainer.prototype, 'renderTabs').returns('mockTabs')
+      sinon.stub(GP, 'renderTabs').returns('mockTabs')
       const renderTabsWrapperTester = shallow(<GasModalPageContainer />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
       const { tabsComponent } = renderTabsWrapperTester.find(PageContainer).props()
       assert.equal(tabsComponent, 'mockTabs')
@@ -98,8 +108,23 @@ describe('GasModalPageContainer Component', function () {
   })
 
   describe('renderTabs', () => {
+    beforeEach(() => {
+      sinon.spy(GP, 'renderBasicTabContent')
+      sinon.spy(GP, 'renderAdvancedTabContent')
+      sinon.spy(GP, 'renderInfoRows')
+    })
+
+    afterEach(() => {
+      GP.renderBasicTabContent.restore()
+      GP.renderAdvancedTabContent.restore()
+      GP.renderInfoRows.restore()
+    })
+
     it('should render a Tabs component with "Basic" and "Advanced" tabs', () => {
-      const renderTabsResult = wrapper.instance().renderTabs()
+      const renderTabsResult = wrapper.instance().renderTabs(mockInfoRowProps, {
+        gasPriceButtonGroupProps: mockGasPriceButtonGroupProps,
+        otherProps: 'mockAdvancedTabProps',
+      })
       const renderedTabs = shallow(renderTabsResult)
       assert.equal(renderedTabs.props().className, 'tabs')
 
@@ -113,45 +138,28 @@ describe('GasModalPageContainer Component', function () {
       assert.equal(tabs.at(1).childAt(0).props().className, 'gas-modal-content')
     })
 
-    it('should render the expected children of each tab', () => {
-      const GP = GasModalPageContainer.prototype
-      sinon.spy(GP, 'renderTabContent')
-      assert.equal(GP.renderTabContent.callCount, 0)
+    it('should call renderBasicTabContent and renderAdvancedTabContent with the expected props', () => {
+      assert.equal(GP.renderBasicTabContent.callCount, 0)
+      assert.equal(GP.renderAdvancedTabContent.callCount, 0)
 
-      wrapper.instance().renderTabs()
+      wrapper.instance().renderTabs(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' })
 
-      assert.equal(GP.renderTabContent.callCount, 2)
+      assert.equal(GP.renderBasicTabContent.callCount, 1)
+      assert.equal(GP.renderAdvancedTabContent.callCount, 1)
 
-      assert.equal(GP.renderTabContent.firstCall.args.type, BasicTabContent.type)
-      assert.equal(GP.renderTabContent.secondCall.args.type, AdvancedTabContent.type)
-
-      GP.renderTabContent.restore()
+      assert.deepEqual(GP.renderBasicTabContent.getCall(0).args[0], mockGasPriceButtonGroupProps)
+      assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { otherProps: 'mockAdvancedTabProps' })
     })
-  })
 
-  describe('renderTabContent', () => {
-    it('should render a root gas-modal-content div', () => {
-      const renderTabContentResult = wrapper.instance().renderTabContent(() => {})
-      const renderedTabContent = shallow(renderTabContentResult)
-      assert.equal(renderedTabContent.props().className, 'gas-modal-content')
-    })
-
-    it('should render the passed element as its first child', () => {
-      const renderTabContentResult = wrapper.instance().renderTabContent(<span>Mock content</span>)
-      const renderedTabContent = shallow(renderTabContentResult)
-      assert(renderedTabContent.childAt(0).equals(<span>Mock content</span>))
-    })
+    it('should call renderInfoRows with the expected props', () => {
+      assert.equal(GP.renderInfoRows.callCount, 0)
 
-    it('should render the element results of renderInfoRow calls as second and third childs', () => {
-      const GP = GasModalPageContainer.prototype
-      sinon.stub(GP, 'renderInfoRow').callsFake((...args) => args.join(','))
+      wrapper.instance().renderTabs(mockInfoRowProps, { gasPriceButtonGroupProps: mockGasPriceButtonGroupProps, otherProps: 'mockAdvancedTabProps' })
 
-      const renderTabContentResult = wrapper.instance().renderTabContent(() => <span>Mock content</span>)
-      const renderedTabContent = shallow(renderTabContentResult)
-      assert.equal(renderedTabContent.childAt(1).text(), 'gas-modal-content__info-row--fade,originalTotal,$20.02 USD,0.06685 ETH')
-      assert.equal(renderedTabContent.childAt(2).text(), 'gas-modal-content__info-row,newTotal,$20.02 USD,0.06685 ETH')
+      assert.equal(GP.renderInfoRows.callCount, 2)
 
-      GP.renderInfoRow.restore()
+      assert.deepEqual(GP.renderInfoRows.getCall(0).args, ['mockOriginalTotalFiat', 'mockOriginalTotalEth', 'mockNewTotalFiat', 'mockNewTotalEth'])
+      assert.deepEqual(GP.renderInfoRows.getCall(1).args, ['mockOriginalTotalFiat', 'mockOriginalTotalEth', 'mockNewTotalFiat', 'mockNewTotalEth'])
     })
   })
 
@@ -176,7 +184,7 @@ describe('GasModalPageContainer Component', function () {
 
   describe('renderBasicTabContent', () => {
     it('should render', () => {
-      const renderBasicTabContentResult = wrapper.instance().renderBasicTabContent()
+      const renderBasicTabContentResult = wrapper.instance().renderBasicTabContent(mockGasPriceButtonGroupProps)
 
       assert.deepEqual(
         renderBasicTabContentResult.props.gasPriceButtonGroupProps,
@@ -187,15 +195,20 @@ describe('GasModalPageContainer Component', function () {
 
   describe('renderAdvancedTabContent', () => {
     it('should render with the correct props', () => {
-      const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent()
+      const renderAdvancedTabContentResult = wrapper.instance().renderAdvancedTabContent({
+        convertThenUpdateCustomGasPrice: () => 'mockConvertThenUpdateCustomGasPrice',
+        convertThenUpdateCustomGasLimit: () => 'mockConvertThenUpdateCustomGasLimit',
+        customGasPrice: 123,
+        customGasLimit: 456,
+        newTotalFiat: '$0.30',
+      })
       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.updateCustomGasPrice(), 'mockConvertThenUpdateCustomGasPrice')
+      assert.equal(advancedTabContentProps.updateCustomGasLimit(), 'mockConvertThenUpdateCustomGasLimit')
+      assert.equal(advancedTabContentProps.customGasPrice, 123)
+      assert.equal(advancedTabContentProps.customGasLimit, 456)
       assert.equal(advancedTabContentProps.millisecondsRemaining, 91000)
       assert.equal(advancedTabContentProps.totalFee, '$0.30')
-      assert(shallow(renderAdvancedTabContentResult).hasClass('advanced-tab'))
     })
   })
 })
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 4067265b5..e01fd3898 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
@@ -7,13 +7,19 @@ let mapDispatchToProps
 
 const actionSpies = {
   hideModal: sinon.spy(),
+  setGasLimit: sinon.spy(),
+  setGasPrice: sinon.spy(),
 }
 
-const customGasActionSpies = {
+const gasActionSpies = {
   setCustomGasPrice: sinon.spy(),
   setCustomGasLimit: sinon.spy(),
 }
 
+const confirmTransactionActionSpies = {
+  updateGasAndCalculate: sinon.spy(),
+}
+
 proxyquire('../gas-modal-page-container.container.js', {
   'react-redux': {
     connect: (ms, md) => {
@@ -23,13 +29,13 @@ proxyquire('../gas-modal-page-container.container.js', {
     },
   },
   '../../../selectors/custom-gas': {
-    getCustomGasPrice: (s) => `mockGasPrice:${s}`,
-    getCustomGasLimit: (s) => `mockGasLimit:${s}`,
-    getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${s}`,
-    getRenderableBasicEstimateData: (s) => `mockRenderableBasicEstimateData:${s}`,
+    getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${Object.keys(s).length}`,
+    getRenderableBasicEstimateData: (s) => `mockRenderableBasicEstimateData:${Object.keys(s).length}`,
+    getDefaultActiveButtonIndex: (a, b, c) => a + b + c,
   },
   '../../../actions': actionSpies,
-  '../../../ducks/gas.duck': customGasActionSpies,
+  '../../../ducks/gas.duck': gasActionSpies,
+  '../../../ducks/confirm-transaction.duck': confirmTransactionActionSpies,
 })
 
 describe('gas-modal-page-container container', () => {
@@ -37,10 +43,54 @@ describe('gas-modal-page-container container', () => {
   describe('mapStateToProps()', () => {
 
     it('should map the correct properties to props', () => {
-      assert.equal(mapStateToProps('mockState').customGasPrice, 'mockGasPrice:mockState')
-      assert.equal(mapStateToProps('mockState').customGasLimit, 'mockGasLimit:mockState')
-      assert.equal(mapStateToProps('mockState').gasPriceButtonGroupProps.buttonDataLoading, 'mockBasicGasEstimateLoadingStatus:mockState')
-      assert.equal(mapStateToProps('mockState').gasPriceButtonGroupProps.gasButtonInfo, 'mockRenderableBasicEstimateData:mockState')
+      const mockState2 = {
+        metamask: {
+          send: {
+            gasLimit: '16',
+            gasPrice: '32',
+            amount: '64',
+          },
+          currentCurrency: 'abc',
+          conversionRate: 50,
+        },
+        gas: {
+          customData: {
+            limit: 'aaaaaaaa',
+            price: 'ffffffff',
+          },
+        },
+        confirmTransaction: {
+          txData: {
+            txParams: {
+              gas: '0x1600000',
+              gasPrice: '0x3200000',
+              value: '0x640000000000000',
+            },
+          },
+        },
+      }
+      const result2 = mapStateToProps(mockState2)
+
+      assert.deepEqual(result2, {
+        isConfirm: true,
+        customGasPriceInHex: 'ffffffff',
+        customGasLimitInHex: 'aaaaaaaa',
+        customGasPrice: 4.294967295,
+        customGasLimit: 2863311530,
+        newTotalFiat: '637.41',
+        gasPriceButtonGroupProps:
+        {
+          buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:3',
+          defaultActiveButtonIndex: 'mockRenderableBasicEstimateData:3ffffffff0x3200000',
+          gasButtonInfo: 'mockRenderableBasicEstimateData:3',
+        },
+        infoRowProps: {
+          originalTotalFiat: '22.58',
+          originalTotalEth: '0.451569 ETH',
+          newTotalFiat: '637.41',
+          newTotalEth: '12.748189 ETH',
+        },
+      })
     })
 
   })
@@ -54,6 +104,12 @@ describe('gas-modal-page-container container', () => {
       mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
     })
 
+    afterEach(() => {
+      actionSpies.hideModal.resetHistory()
+      gasActionSpies.setCustomGasPrice.resetHistory()
+      gasActionSpies.setCustomGasLimit.resetHistory()
+    })
+
     describe('hideModal()', () => {
       it('should dispatch a hideModal action', () => {
         mapDispatchToPropsObject.hideModal()
@@ -63,18 +119,50 @@ describe('gas-modal-page-container container', () => {
     })
 
     describe('updateCustomGasPrice()', () => {
-      it('should dispatch a setCustomGasPrice action', () => {
-        mapDispatchToPropsObject.updateCustomGasPrice()
+      it('should dispatch a setCustomGasPrice action with the arg passed to updateCustomGasPrice hex prefixed', () => {
+        mapDispatchToPropsObject.updateCustomGasPrice('ffff')
+        assert(dispatchSpy.calledOnce)
+        assert(gasActionSpies.setCustomGasPrice.calledOnce)
+        assert.equal(gasActionSpies.setCustomGasPrice.getCall(0).args[0], '0xffff')
+      })
+    })
+
+    describe('convertThenUpdateCustomGasPrice()', () => {
+      it('should dispatch a setCustomGasPrice action with the arg passed to convertThenUpdateCustomGasPrice converted to WEI', () => {
+        mapDispatchToPropsObject.convertThenUpdateCustomGasPrice('0xffff')
         assert(dispatchSpy.calledOnce)
-        assert(customGasActionSpies.setCustomGasPrice.calledOnce)
+        assert(gasActionSpies.setCustomGasPrice.calledOnce)
+        assert.equal(gasActionSpies.setCustomGasPrice.getCall(0).args[0], '0x3b9a8e653600')
+      })
+    })
+
+
+    describe('convertThenUpdateCustomGasLimit()', () => {
+      it('should dispatch a setCustomGasLimit action with the arg passed to convertThenUpdateCustomGasLimit converted to hex', () => {
+        mapDispatchToPropsObject.convertThenUpdateCustomGasLimit(16)
+        assert(dispatchSpy.calledOnce)
+        assert(gasActionSpies.setCustomGasLimit.calledOnce)
+        assert.equal(gasActionSpies.setCustomGasLimit.getCall(0).args[0], '0x10')
+      })
+    })
+
+    describe('setGasData()', () => {
+      it('should dispatch a setGasPrice and setGasLimit action with the correct props', () => {
+        mapDispatchToPropsObject.setGasData('ffff', 'aaaa')
+        assert(dispatchSpy.calledTwice)
+        assert(actionSpies.setGasPrice.calledOnce)
+        assert(actionSpies.setGasLimit.calledOnce)
+        assert.equal(actionSpies.setGasLimit.getCall(0).args[0], 'ffff')
+        assert.equal(actionSpies.setGasPrice.getCall(0).args[0], 'aaaa')
       })
     })
 
-    describe('updateCustomGasLimit()', () => {
-      it('should dispatch a setCustomGasLimit action', () => {
-        mapDispatchToPropsObject.updateCustomGasLimit()
+    describe('updateConfirmTxGasAndCalculate()', () => {
+      it('should dispatch a updateGasAndCalculate action with the correct props', () => {
+        mapDispatchToPropsObject.updateConfirmTxGasAndCalculate('ffff', 'aaaa')
         assert(dispatchSpy.calledOnce)
-        assert(customGasActionSpies.setCustomGasLimit.calledOnce)
+        assert(confirmTransactionActionSpies.updateGasAndCalculate.calledOnce)
+        assert.deepEqual(confirmTransactionActionSpies.updateGasAndCalculate.getCall(0).args[0], { gasLimit: 'ffff', gasPrice: 'aaaa' })
       })
     })