Break up pending-tx component for better unit testability

ui/app/components/pending-tx.js

@@ -1,5 +1,4 @@
 const Component = require('react').Component
-const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const actions = require('../actions')
@@ -20,12 +19,7 @@ const GWEI_FACTOR = new BN(1e9)
 const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
 const MIN_GAS_LIMIT_BN = new BN(21000)
 
-module.exports = connect(mapStateToProps)(PendingTx)
+module.exports = PendingTx
-
-function mapStateToProps (state) {
-  return {}
-}
-
 inherits(PendingTx, Component)
 function PendingTx () {
   Component.call(this)
@@ -37,7 +31,6 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   const props = this.props
-
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
@@ -61,7 +54,6 @@ PendingTx.prototype.render = function () {
   const maxCost = txFeeBn.add(valueBn)
 
   const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
-  const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
   const balanceBn = hexToBn(balance)
   const insufficientBalance = balanceBn.lt(maxCost)
@@ -75,18 +67,8 @@ PendingTx.prototype.render = function () {
     }, [
 
       h('form#pending-tx-form', {
-        onSubmit: (event) => {
+        onSubmit: this.onSubmit.bind(this),
-          const txMeta = this.gatherTxMeta()
+
-          event.preventDefault()
-          const form = document.querySelector('form#pending-tx-form')
-          const valid = form.checkValidity()
-          this.setState({ valid })
-          if (valid && this.verifyGasParams()) {
-            props.sendTransaction(txMeta, event)
-          } else {
-            this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
-          }
-        },
       }, [
 
         // tx info
@@ -100,7 +82,6 @@ PendingTx.prototype.render = function () {
 
             h(MiniAccountPanel, {
               imageSeed: address,
-              imageifyIdenticons: imageify,
               picOrder: 'right',
             }, [
               h('span.font-small', {
@@ -176,12 +157,8 @@ PendingTx.prototype.render = function () {
                     position: 'relative',
                     top: '5px',
                   },
-                  onChange: (newHex) => {
+                  onChange: this.gasLimitChanged.bind(this),
-                    log.info(`Gas limit changed to ${newHex}`)
+
-                    const txMeta = this.gatherTxMeta()
-                    txMeta.txParams.gas = newHex
-                    this.setState({ txData: txMeta })
-                  },
                   ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
               ]),
@@ -201,13 +178,7 @@ PendingTx.prototype.render = function () {
                     position: 'relative',
                     top: '5px',
                   },
-                  onChange: (newHex) => {
+                  onChange: this.gasPriceChanged.bind(this),
-                    log.info(`Gas price changed to: ${newHex}`)
-                    const inWei = hexToBn(newHex).mul(GWEI_FACTOR)
-                    const txMeta = this.gatherTxMeta()
-                    txMeta.txParams.gasPrice = inWei.toString(16)
-                    this.setState({ txData: txMeta })
-                  },
                   ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
               ]),
@@ -331,13 +302,11 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
   const txData = props.txData
   const txParams = txData.txParams || {}
   const isContractDeploy = !('to' in txParams)
-  const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
   // If it's not a contract deploy, send to the account
   if (!isContractDeploy) {
     return h(MiniAccountPanel, {
       imageSeed: txParams.to,
-      imageifyIdenticons: imageify,
       picOrder: 'left',
     }, [
       h('span.font-small', {
@@ -353,7 +322,6 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
     ])
   } else {
     return h(MiniAccountPanel, {
-      imageifyIdenticons: imageify,
       picOrder: 'left',
     }, [
 
@@ -367,6 +335,21 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
   }
 }
 
+PendingTx.prototype.gasPriceChanged = function (newHex) {
+  log.info(`Gas price changed to: ${newHex}`)
+  const inWei = hexToBn(newHex).mul(GWEI_FACTOR)
+  const txMeta = this.gatherTxMeta()
+  txMeta.txParams.gasPrice = inWei.toString(16)
+  this.setState({ txData: txMeta })
+}
+
+PendingTx.prototype.gasLimitChanged = function (newHex) {
+  log.info(`Gas limit changed to ${newHex}`)
+  const txMeta = this.gatherTxMeta()
+  txMeta.txParams.gas = newHex
+  this.setState({ txData: txMeta })
+}
+
 PendingTx.prototype.resetGasFields = function () {
   log.debug(`pending-tx resetGasFields`)
 
@@ -382,6 +365,24 @@ PendingTx.prototype.resetGasFields = function () {
   })
 }
 
+PendingTx.prototype.onSubmit = function (event) {
+  event.preventDefault()
+  const txMeta = this.gatherTxMeta()
+  const valid = this.checkValidity()
+  this.setState({ valid })
+  if (valid && this.verifyGasParams()) {
+    this.props.sendTransaction(txMeta, event)
+  } else {
+    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+  }
+}
+
+PendingTx.prototype.checkValidity = function() {
+  const form = document.querySelector('form#pending-tx-form')
+  const valid = form.checkValidity()
+  return valid
+}
+
 // After a customizable state value has been updated,
 PendingTx.prototype.gatherTxMeta = function () {
   log.debug(`pending-tx gatherTxMeta`)