refactored and added unit test

test/unit/components/balance-component-test.js

@@ -0,0 +1,32 @@
+var assert = require('assert')
+var BalanceComponent = require('../../../ui/app/components/balance-component')
+
+describe('BalanceComponent', function () {
+  let balanceComponent
+
+  beforeEach(function () {
+    balanceComponent = new BalanceComponent()
+  })
+
+  it('shows token balance and convert to fiat value based on conversion rate', function () {
+    const formattedBalance = '1.23 ETH'
+
+    const tokenBalance = balanceComponent.getTokenBalance(formattedBalance, false)
+    const fiatDisplayNumber = balanceComponent.getFiatDisplayNumber(formattedBalance, 2)
+
+    assert.equal('1.23 ETH', tokenBalance)
+    assert.equal(2.46, fiatDisplayNumber)
+  })
+
+  it('shows only the token balance when conversion rate is not available', function () {
+    const formattedBalance = '1.23 ETH'
+
+    const tokenBalance = balanceComponent.getTokenBalance(formattedBalance, false)
+    const fiatDisplayNumber = balanceComponent.getFiatDisplayNumber(formattedBalance, 0)
+
+    assert.equal('1.23 ETH', tokenBalance)
+    assert.equal('N/A', fiatDisplayNumber)
+  })
+
+})
+

ui/app/components/balance-component.js

@@ -44,17 +44,12 @@ BalanceComponent.prototype.renderBalance = function (formattedBalance) {
     ])
   }
 
-  var balanceObj = generateBalanceObject(formattedBalance, shorten ? 1 : 3)
-  var balanceValue = shorten ? balanceObj.shortBalance : balanceObj.balance
-
-  var label = balanceObj.label
-
   // laptop: 5vw?
   // phone: 50vw?
   return h('div.flex-column.balance-display', {}, [
     h('div.token-amount', {
       style: {},
-    }, `${balanceValue} ${label}`),
+    }, this.getTokenBalance(formattedBalance, shorten)),
 
     showFiat ? this.renderFiatValue(formattedBalance) : null,
   ])
@@ -65,25 +60,33 @@ BalanceComponent.prototype.renderFiatValue = function (formattedBalance) {
   const props = this.props
   const { conversionRate, currentCurrency } = props
 
+  const fiatDisplayNumber = this.getFiatDisplayNumber(formattedBalance, conversionRate)
+
+  return this.renderFiatAmount(fiatDisplayNumber, currentCurrency)
+}
+
+BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatSuffix) {
+  if (fiatDisplayNumber === 'N/A') return null
+
+  return h('div.fiat-amount', {
+    style: {},
+  }, `${fiatDisplayNumber} ${fiatSuffix}`)
+}
+
+BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) {
+  const balanceObj = generateBalanceObject(formattedBalance, shorten ? 1 : 3)
+
+  const balanceValue = shorten ? balanceObj.shortBalance : balanceObj.balance
+  const label = balanceObj.label
+
+  return `${balanceValue} ${label}`
+}
+
+BalanceComponent.prototype.getFiatDisplayNumber = function (formattedBalance, conversionRate) {
   if (formattedBalance === 'None') return formattedBalance
-  var fiatDisplayNumber
-  var splitBalance = formattedBalance.split(' ')
+  if (conversionRate === 0) return 'N/A'
 
-  if (conversionRate !== 0) {
-    fiatDisplayNumber = (Number(splitBalance[0]) * conversionRate).toFixed(2)
-  } else {
-    fiatDisplayNumber = 'N/A'
-  }
+  const splitBalance = formattedBalance.split(' ')
 
-  return fiatDisplay(fiatDisplayNumber, currentCurrency)
-}
-
-function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
-  if (fiatDisplayNumber !== 'N/A') {
-    return h('div.fiat-amount', {
-      style: {},
-    }, `${fiatDisplayNumber} ${fiatSuffix}`)
-  } else {
-    return h('div')
-  }
+  return (Number(splitBalance[0]) * conversionRate).toFixed(2)
 }