Some Ui tests

test/lib/render-helpers.js

@@ -0,0 +1,42 @@
+const { shallow, mount } = require('enzyme')
+import { BrowserRouter } from 'react-router-dom'
+import { shape } from 'prop-types'
+
+module.exports = {
+  shallowWithStore,
+  mountWithStore,
+  mountWithRouter,
+}
+
+function shallowWithStore (component, store) {
+  const context = {
+    store,
+  }
+  return shallow(component, {context})
+}
+
+function mountWithStore (component, store) {
+  const context = {
+    store,
+  }
+  return mount(component, {context})
+}
+
+function mountWithRouter (node) {
+
+  // Instantiate router context
+  const router = {
+    history: new BrowserRouter().history,
+    route: {
+      location: {},
+      match: {},
+    },
+  }
+
+  const createContext = () => ({
+    context: { router, t: () => {} },
+    childContextTypes: { router: shape({}), t: () => {} },
+  })
+
+  return mount(node, createContext())
+}

test/lib/shallow-with-store.js

@@ -1,20 +0,0 @@
-const { shallow, mount } = require('enzyme')
-
-module.exports = {
-  shallowWithStore,
-  mountWithStore,
-}
-
-function shallowWithStore (component, store) {
-  const context = {
-    store,
-  }
-  return shallow(component, {context})
-}
-
-function mountWithStore (component, store) {
-  const context = {
-    store,
-  }
-  return mount(component, {context})
-}

test/unit/app/cleanErrorStack.spec.js

@@ -0,0 +1,33 @@
+const assert = require('assert')
+const cleanErrorStack = require('../../../app/scripts/lib/cleanErrorStack')
+
+describe('Clean Error Stack', () => {
+
+  const testMessage = 'Test Message'
+  const testError = new Error(testMessage)
+  const undefinedErrorName = new Error(testMessage)
+  const blankErrorName = new Error(testMessage)
+  const blankMsgError = new Error()
+
+  beforeEach(() => {
+    undefinedErrorName.name = undefined
+    blankErrorName.name = ''
+  })
+
+  it('tests error with message', () => {
+    assert.equal(cleanErrorStack(testError), 'Error: Test Message')
+  })
+
+  it('tests error with undefined name', () => {
+    assert.equal(cleanErrorStack(undefinedErrorName).toString(), 'Error: Test Message')
+  })
+
+  it('tests error with blank name', () => {
+    assert.equal(cleanErrorStack(blankErrorName).toString(), 'Test Message')
+  })
+
+  it('tests error with blank message', () => {
+    assert.equal(cleanErrorStack(blankMsgError), 'Error')
+  })
+
+})

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

@@ -1,7 +1,7 @@
 const assert = require('assert')
 const h = require('react-hyperscript')
 const { createMockStore } = require('redux-test-utils')
-const { shallowWithStore } = require('../../lib/shallow-with-store')
+const { shallowWithStore } = require('../../lib/render-helpers')
 const BalanceComponent = require('../../../ui/app/components/balance-component')
 const mockState = {
   metamask: {
@@ -42,4 +42,3 @@ describe('BalanceComponent', function () {
   })
 
 })
-

test/unit/responsive/components/dropdown-test.js

@@ -6,7 +6,7 @@ const path = require('path')
 const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdowns', 'index.js')).Dropdown
 
 const { createMockStore } = require('redux-test-utils')
-const { mountWithStore } = require('../../../lib/shallow-with-store')
+const { mountWithStore } = require('../../../lib/render-helpers')
 
 const mockState = {
   metamask: {

test/unit/ui/add-token.spec.js

@@ -1,7 +1,7 @@
 const assert = require('assert')
 const { createMockStore } = require('redux-test-utils')
 const h = require('react-hyperscript')
-const { shallowWithStore } = require('../../lib/shallow-with-store')
+const { shallowWithStore } = require('../../lib/render-helpers')
 const AddTokenScreen = require('../../../old-ui/app/add-token')
 
 describe('Add Token Screen', function () {

test/unit/ui/app/components/identicon.spec.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import assert from 'assert'
+import thunk from 'redux-thunk'
+import configureMockStore from 'redux-mock-store'
+import { mount } from 'enzyme'
+
+import IdenticonComponent from '../../../../../ui/app/components/identicon'
+
+describe('Identicon Component', () => {
+
+  const state = {
+    metamask: {
+      useBlockie: false,
+    },
+  }
+
+  const middlewares = [thunk]
+  const mockStore = configureMockStore(middlewares)
+  const store = mockStore(state)
+
+  it('renders default eth_logo identicon with no props', () => {
+    const wrapper = mount(<IdenticonComponent store={store}/>)
+    assert.equal(wrapper.find('img.balance-icon').prop('src'), './images/eth_logo.svg')
+  })
+
+  it('renders custom image and add className props', () => {
+    const wrapper = mount(<IdenticonComponent store={store} className={'test-image'} image={'test-image'} />)
+    assert.equal(wrapper.find('img.test-image').prop('className'), 'test-image identicon')
+    assert.equal(wrapper.find('img.test-image').prop('src'), 'test-image')
+  })
+
+  it('renders div with address prop', () => {
+    const wrapper = mount(<IdenticonComponent store={store} className={'test-address'} address={'0xTest'} />)
+    assert.equal(wrapper.find('div.test-address').prop('className'), 'test-address identicon')
+  })
+})

test/unit/ui/app/components/token-cell.spec.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import assert from 'assert'
+import thunk from 'redux-thunk'
+import { Provider } from 'react-redux'
+import configureMockStore from 'redux-mock-store'
+import { mount } from 'enzyme'
+
+import TokenCell from '../../../../../ui/app/components/token-cell'
+import Identicon from '../../../../../ui/app/components/identicon'
+
+describe('Token Cell', () => {
+  let wrapper
+
+  const state = {
+    metamask: {
+      network: 'test',
+      currentCurrency: 'usd',
+      selectedTokenAddress: '0xToken',
+      selectedAddress: '0xAddress',
+      contractExchangeRates: {
+        '0xAnotherToken': 0.015,
+      },
+      conversionRate: 7.00,
+    },
+    appState: {
+      sidebar: {
+        isOpen: true,
+      },
+    },
+  }
+
+  const middlewares = [thunk]
+  const mockStore = configureMockStore(middlewares)
+  const store = mockStore(state)
+
+  beforeEach(() => {
+    wrapper = mount(
+      <Provider store={store}>
+        <TokenCell
+          address={'0xAnotherToken'}
+          symbol={'TEST'}
+          string={'5.000'}
+          network={22}
+          currentCurrency={'usd'}
+          image={'./test-image'}
+        />
+      </Provider>
+    )
+  })
+
+  it('renders Identicon with props from token cell', () => {
+    assert.equal(wrapper.find(Identicon).prop('address'), '0xAnotherToken')
+    assert.equal(wrapper.find(Identicon).prop('network'), 'test')
+    assert.equal(wrapper.find(Identicon).prop('image'), './test-image')
+  })
+
+  it('renders token balance', () => {
+    assert.equal(wrapper.find('.token-list-item__token-balance').text(), '5.000')
+  })
+
+  it('renders token symbol', () => {
+    assert.equal(wrapper.find('.token-list-item__token-symbol').text(), 'TEST')
+  })
+
+  it('renders converted fiat amount', () => {
+    assert.equal(wrapper.find('.token-list-item__fiat-amount').text(), '0.52 USD')
+  })
+
+})

test/unit/ui/app/selectors.spec.js

@@ -0,0 +1,175 @@
+const assert = require('assert')
+const selectors = require('../../../../ui/app/selectors')
+const mockState = require('../../../data/mock-state.json')
+const Eth = require('ethjs')
+
+const { createTestProviderTools } = require('../../../stub/provider')
+const provider = createTestProviderTools({ scaffold: {}}).provider
+
+describe('Selectors', function () {
+
+  describe('#getSelectedAddress', function () {
+    let state
+    beforeEach(function () {
+      state = {
+        metamask: {
+          accounts: {
+            '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': {
+              'balance': '0x0',
+              'address': '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+            },
+          },
+        },
+      }
+    })
+
+    it('returns first account if selectedAddress is undefined', function () {
+      assert.equal(selectors.getSelectedAddress(state), '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc')
+    })
+
+    it('returns selectedAddress', function () {
+      assert.equal(selectors.getSelectedAddress(mockState), '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc')
+    })
+
+  })
+
+  it('returns selected identity', function () {
+    const identity = selectors.getSelectedIdentity(mockState)
+    assert.equal(identity.address, '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc')
+    assert.equal(identity.name, 'Test Account')
+  })
+
+  it('returns selected account', function () {
+    const account = selectors.getSelectedAccount(mockState)
+    assert.equal(account.balance, '0x0')
+    assert.equal(account.address, '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc')
+  })
+
+  it('returns selected token from first token list', function () {
+    const token = selectors.getSelectedToken(mockState)
+    assert.equal(token.address, '0x108cf70c7d384c552f42c07c41c0e1e46d77ea0d')
+    assert.equal(token.symbol, 'TEST')
+    assert.equal(token.decimals, '0')
+  })
+
+  describe('#getSelectedTokenExchangeRate', function () {
+    it('returns token exchange rate for first token', function () {
+      const tokenRate = selectors.getSelectedTokenExchangeRate(mockState)
+      assert.equal(tokenRate, '0.00039345803819379796')
+    })
+  })
+
+
+  describe('#getTokenExchangeRate', function () {
+    let missingTokenRate
+
+    beforeEach(function () {
+      missingTokenRate = {
+        metamask: {
+          'contractExchangeRates': {},
+        },
+      }
+    })
+
+    it('returns 0 token exchange rate for a token not in state', function () {
+      const tokenRate = selectors.getTokenExchangeRate(missingTokenRate, '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5')
+      assert.equal(tokenRate, 0)
+    })
+
+    it('returns token exchange rate for specified token in state', function () {
+      const tokenRate = selectors.getTokenExchangeRate(mockState, '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5')
+      assert.equal(tokenRate, 0.00008189274407698049)
+    })
+
+  })
+
+  it('returns conversionRate from state', function () {
+    assert.equal(selectors.conversionRateSelector(mockState), 556.12)
+  })
+
+  it('returns address book from state', function () {
+    const addressBook = selectors.getAddressBook(mockState)
+    assert.equal(addressBook[0].address, '0xc42edfcc21ed14dda456aa0756c153f7985d8813')
+    assert.equal(addressBook[0].name, '')
+  })
+
+  it('returns accounts with balance, address, and name from identity and accounts in state', function () {
+    const accountsWithSendEther = selectors.accountsWithSendEtherInfoSelector(mockState)
+    assert.equal(accountsWithSendEther.length, 2)
+    assert.equal(accountsWithSendEther[0].balance, '0x0')
+    assert.equal(accountsWithSendEther[0].address, '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc')
+    assert.equal(accountsWithSendEther[0].name, 'Test Account')
+  })
+
+  it('returns selected account with balance, address, and name from accountsWithSendEtherInfoSelector', function () {
+    const currentAccountwithSendEther = selectors.getCurrentAccountWithSendEtherInfo(mockState)
+    assert.equal(currentAccountwithSendEther.balance, '0x0')
+    assert.equal(currentAccountwithSendEther.address, '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc')
+    assert.equal(currentAccountwithSendEther.name, 'Test Account')
+  })
+
+  describe('#transactionSelector', function () {
+    it('returns transactions from state', function () {
+      selectors.transactionsSelector(mockState)
+    })
+  })
+
+  it('#getGasIsLoading', () => {
+    const gasIsLoading = selectors.getGasIsLoading(mockState)
+    assert.equal(gasIsLoading, false)
+  })
+
+  describe('Send From', () => {
+    it('#getSendFrom', () => {
+      const sendFrom = selectors.getSendFrom(mockState)
+      assert.equal(sendFrom, '0xc42edfcc21ed14dda456aa0756c153f7985d8813')
+    })
+
+    it('#getForceGasMin', () => {
+      const forceGasMin = selectors.getForceGasMin(mockState)
+      assert.equal(forceGasMin, null)
+    })
+
+    it('#getSendAmount', () => {
+      const sendAmount = selectors.getSendAmount(mockState)
+      assert.equal(sendAmount, '1bc16d674ec80000')
+    })
+
+    it('#getSendMaxModeState', () => {
+      const sendMaxModeState = selectors.getSendMaxModeState(mockState)
+      assert.equal(sendMaxModeState, false)
+    })
+  })
+
+  it('#getCurrentCurrency', () => {
+    const currentCurrency = selectors.getCurrentCurrency(mockState)
+    assert.equal(currentCurrency, 'usd')
+  })
+
+  it('#getSelectedTokenToFiatRate', () => {
+    const selectedTokenToFiatRate = selectors.getSelectedTokenToFiatRate(mockState)
+    assert.equal(selectedTokenToFiatRate, '0.21880988420033493')
+  })
+
+  describe('#getSelectedTokenContract', () => {
+
+    beforeEach(() => {
+      global.eth = new Eth(provider)
+    })
+
+    it('', () => {
+      const selectedTokenContract = selectors.getSelectedTokenContract(mockState)
+      assert(selectedTokenContract.abi)
+    })
+  })
+
+  it('#getCurrentViewContext', () => {
+    const currentViewContext = selectors.getCurrentViewContext(mockState)
+    assert.equal(currentViewContext, '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc')
+  })
+
+  it('#getTotalUnapprovedCount', () => {
+    const totalUnapprovedCount = selectors.getTotalUnapprovedCount(mockState)
+    assert.equal(totalUnapprovedCount, 1)
+  })
+})

test/unit/ui/etherscan-prefix-for-network.spec.js

@@ -0,0 +1,26 @@
+const assert = require('assert')
+const etherscanNetworkPrefix = require('../../../ui/lib/etherscan-prefix-for-network')
+
+describe('Etherscan Network Prefix', () => {
+
+  it('returns empy string as default value', () => {
+    assert.equal(etherscanNetworkPrefix(), '')
+  })
+
+  it('returns empty string as a prefix for networkId of 1', () => {
+    assert.equal(etherscanNetworkPrefix(1), '')
+  })
+
+  it('returns ropsten as prefix for networkId of 3', () => {
+    assert.equal(etherscanNetworkPrefix(3), 'ropsten.')
+  })
+
+  it('returns rinkeby as prefix for networkId of 4', () => {
+    assert.equal(etherscanNetworkPrefix(4), 'rinkeby.')
+  })
+
+  it('returs kovan as prefix for networkId of 42', () => {
+    assert.equal(etherscanNetworkPrefix(42), 'kovan.')
+  })
+
+})

ui/app/components/dropdowns/tests/dropdown.test.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import { shallow } from 'enzyme'
+import { DropdownMenuItem } from '../components/dropdown.js'
+
+describe('', () => {
+  let wrapper
+  const onClickSpy = sinon.spy()
+  const closeMenuSpy = sinon.spy()
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <DropdownMenuItem
+        onClick = {onClickSpy}
+        style = {{test: 'style'}}
+        closeMenu = {closeMenuSpy}
+      >
+      </DropdownMenuItem>
+    )
+  })
+
+  it('renders li with dropdown-menu-item class', () => {
+    assert.equal(wrapper.find('li.dropdown-menu-item').length, 1)
+  })
+
+  it('adds style based on props passed', () => {
+    assert.equal(wrapper.prop('style').test, 'style')
+  })
+
+  it('simulates click event and calls onClick and closeMenu', () => {
+    wrapper.prop('onClick')()
+    assert.equal(onClickSpy.callCount, 1)
+    assert.equal(closeMenuSpy.callCount, 1)
+  })
+
+})

ui/app/components/dropdowns/tests/menu.test.js

@@ -0,0 +1,87 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import { shallow } from 'enzyme'
+import { Menu, Item, Divider, CloseArea } from '../components/menu'
+
+describe('Dropdown Menu Components', () => {
+
+  describe('Menu', () => {
+    let wrapper
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <Menu className = {'Test Class'} isShowing = {true}/>
+      )
+    })
+
+    it('adds prop className to menu', () => {
+      assert.equal(wrapper.find('.menu').prop('className'), 'menu Test Class')
+    })
+
+  })
+
+  describe('Item', () => {
+    let wrapper
+
+    const onClickSpy = sinon.spy()
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <Item
+          icon = {'test icon'}
+          text = {'test text'}
+          className = {'test className'}
+          onClick = {onClickSpy}
+        />
+      )
+    })
+
+    it('add className based on props', () => {
+      assert.equal(wrapper.find('.menu__item').prop('className'), 'menu__item menu__item test className menu__item--clickable')
+    })
+
+    it('simulates onClick called', () => {
+      wrapper.find('.menu__item').prop('onClick')()
+      assert.equal(onClickSpy.callCount, 1)
+    })
+
+    it('adds icon based on icon props', () => {
+      assert.equal(wrapper.find('.menu__item__icon').text(), 'test icon')
+    })
+
+    it('adds html text based on text props', () => {
+      assert.equal(wrapper.find('.menu__item__text').text(), 'test text')
+    })
+  })
+
+  describe('Divider', () => {
+    let wrapper
+
+    before(() => {
+      wrapper = shallow(<Divider />)
+    })
+
+    it('renders menu divider', () => {
+      assert.equal(wrapper.find('.menu__divider').length, 1)
+    })
+  })
+
+  describe('CloseArea', () => {
+    let wrapper
+
+    const onClickSpy = sinon.spy()
+
+    beforeEach(() => {
+      wrapper = shallow(<CloseArea
+        onClick = {onClickSpy}
+      />)
+    })
+
+    it('simulates click', () => {
+      wrapper.prop('onClick')()
+      assert.equal(onClickSpy.callCount, 1)
+    })
+  })
+
+})

ui/app/components/dropdowns/tests/network-dropdown-icon.test.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import NetworkDropdownIcon from '../components/network-dropdown-icon'
+
+describe('Network Dropdown Icon', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<NetworkDropdownIcon
+      backgroundColor = {'red'}
+      isSelected = {false}
+      innerBorder = {'none'}
+      diameter = {'12'}
+    />)
+  })
+
+  it('adds style props based on props', () => {
+    const styleProp = wrapper.find('.menu-icon-circle').children().prop('style')
+    assert.equal(styleProp.background, 'red')
+    assert.equal(styleProp.border, 'none')
+    assert.equal(styleProp.height, '12px')
+    assert.equal(styleProp.width, '12px')
+  })
+})

ui/app/components/dropdowns/tests/network-dropdown.test.js

@@ -0,0 +1,97 @@
+import React from 'react'
+import assert from 'assert'
+import { createMockStore } from 'redux-test-utils'
+import { mountWithRouter } from '../../../../../test/lib/render-helpers'
+import NetworkDropdown from '../network-dropdown'
+import { DropdownMenuItem } from '../components/dropdown'
+import NetworkDropdownIcon from '../components/network-dropdown-icon'
+
+describe('Network Dropdown', () => {
+  let wrapper
+
+  describe('NetworkDropdown in appState in false', () => {
+    const mockState = {
+      metamask: {
+        provider: {
+          type: 'test',
+        },
+      },
+      appState: {
+        networkDropdown: false,
+      },
+    }
+
+    const store = createMockStore(mockState)
+
+    beforeEach(() => {
+      wrapper = mountWithRouter(
+        <NetworkDropdown store={store} />
+      )
+    })
+
+    it('checks for network droppo class', () => {
+      assert.equal(wrapper.find('.network-droppo').length, 1)
+    })
+
+    it('renders only one child when networkDropdown is false in state', () => {
+      assert.equal(wrapper.children().length, 1)
+    })
+
+  })
+
+  describe('NetworkDropdown in appState is true', () => {
+    const mockState = {
+      metamask: {
+        provider: {
+          'type': 'test',
+        },
+        frequentRpcList: [
+          'http://localhost:7545',
+        ],
+      },
+      appState: {
+        'networkDropdownOpen': true,
+      },
+    }
+    const store = createMockStore(mockState)
+
+    beforeEach(() => {
+      wrapper = mountWithRouter(
+        <NetworkDropdown store={store}/>,
+      )
+    })
+
+    it('renders 7 DropDownMenuItems ', () => {
+      assert.equal(wrapper.find(DropdownMenuItem).length, 7)
+    })
+
+    it('checks background color for first NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(0).prop('backgroundColor'), '#29B6AF') // Main Ethereum Network Teal
+    })
+
+    it('checks background color for second NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(1).prop('backgroundColor'), '#ff4a8d') // Ropsten Red
+    })
+
+    it('checks background color for third NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(2).prop('backgroundColor'), '#7057ff') // Kovan Purple
+    })
+
+    it('checks background color for fourth NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(3).prop('backgroundColor'), '#f6c343') // Rinkeby Yellow
+    })
+
+    it('checks background color for fifth NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(4).prop('innerBorder'), '1px solid #9b9b9b')
+    })
+
+    it('checks dropdown for frequestRPCList from  state ', () => {
+      assert.equal(wrapper.find(DropdownMenuItem).at(5).text(), '✓http://localhost:7545')
+    })
+
+    it('checks background color for sixth NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(5).prop('innerBorder'), '1px solid #9b9b9b')
+    })
+
+  })
+})

ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import Button from '../../../button'
+import PageFooter from '../page-container-footer.component'
+
+describe('Page Footer', () => {
+  let wrapper
+  const onCancel = sinon.spy()
+  const onSubmit = sinon.spy()
+
+  beforeEach(() => {
+    wrapper = shallow(<PageFooter
+      onCancel = {onCancel}
+      onSubmit = {onSubmit}
+      cancelText = {'Cancel'}
+      submitText = {'Submit'}
+      disabled = {false}
+      submitButtonType = {'Test Type'}
+    />)
+  })
+
+  it('renders page container footer', () => {
+    assert.equal(wrapper.find('.page-container__footer').length, 1)
+  })
+
+  it('renders two button components', () => {
+    assert.equal(wrapper.find(Button).length, 2)
+  })
+
+  describe('Cancel Button', () => {
+
+    it('has button type of default', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').first().prop('type'), 'default')
+    })
+
+    it('has children text of Cancel', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').first().prop('children'), 'Cancel')
+    })
+
+    it('should call cancel when click is simulated', () => {
+      wrapper.find('.page-container__footer-button').first().prop('onClick')()
+      assert.equal(onCancel.callCount, 1)
+    })
+
+  })
+
+  describe('Submit Button', () => {
+
+    it('assigns button type based on props', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').last().prop('type'), 'Test Type')
+    })
+
+    it('has disabled prop', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').last().prop('disabled'), false)
+    })
+
+    it('has children text when submitText prop exists', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').last().prop('children'), 'Submit')
+    })
+
+    it('should call submit when click is simulated', () => {
+      wrapper.find('.page-container__footer-button').last().prop('onClick')()
+      assert.equal(onSubmit.callCount, 1)
+    })
+  })
+
+})

ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js

@@ -0,0 +1,82 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import PageContainerHeader from '../page-container-header.component'
+
+describe('Page Container Header', () => {
+  let wrapper, style, onBackButtonClick, onClose
+
+  beforeEach(() => {
+    style = {test: 'style'}
+    onBackButtonClick = sinon.spy()
+    onClose = sinon.spy()
+
+    wrapper = shallow(<PageContainerHeader
+      showBackButton = {true}
+      onBackButtonClick = {onBackButtonClick}
+      backButtonStyles = {style}
+      title = {'Test Title'}
+      subtitle = {'Test Subtitle'}
+      tabs = {'Test Tab'}
+      onClose = {onClose}
+    />)
+  })
+
+  describe('Render Header Row', () => {
+
+    it('renders back button', () => {
+      assert.equal(wrapper.find('.page-container__back-button').length, 1)
+      assert.equal(wrapper.find('.page-container__back-button').text(), 'Back')
+    })
+
+    it('ensures style prop', () => {
+      assert.equal(wrapper.find('.page-container__back-button').props().style, style)
+    })
+
+    it('should call back button when click is simulated', () => {
+      wrapper.find('.page-container__back-button').prop('onClick')()
+      assert.equal(onBackButtonClick.callCount, 1)
+    })
+  })
+
+  describe('Render', () => {
+    let header, headerRow, pageTitle, pageSubtitle, pageClose, pageTab
+
+    beforeEach(() => {
+      header = wrapper.find('.page-container__header--no-padding-bottom')
+      headerRow = wrapper.find('.page-container__header-row')
+      pageTitle = wrapper.find('.page-container__title')
+      pageSubtitle = wrapper.find('.page-container__subtitle')
+      pageClose = wrapper.find('.page-container__header-close')
+      pageTab = wrapper.find('.page-container__tabs')
+    })
+
+    it('renders page container', () => {
+      assert.equal(header.length, 1)
+      assert.equal(headerRow.length, 1)
+      assert.equal(pageTitle.length, 1)
+      assert.equal(pageSubtitle.length, 1)
+      assert.equal(pageClose.length, 1)
+      assert.equal(pageTab.length, 1)
+    })
+
+    it('renders title', () => {
+      assert.equal(pageTitle.text(), 'Test Title')
+    })
+
+    it('renders subtitle', () => {
+      assert.equal(pageSubtitle.text(), 'Test Subtitle')
+    })
+
+    it('renders tabs', () => {
+      assert.equal(pageTab.text(), 'Test Tab')
+    })
+
+    it('should call close when click is simulated', () => {
+      pageClose.prop('onClick')()
+      assert.equal(onClose.callCount, 1)
+    })
+  })
+
+})

ui/app/components/send/currency-display/tests/currency-display.test.js

@@ -0,0 +1,91 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import { shallow, mount } from 'enzyme'
+import CurrencyDisplay from '../currency-display'
+
+describe('', () => {
+
+  const token = {
+    address: '0xTest',
+    symbol: 'TST',
+    decimals: '13',
+  }
+
+  it('retuns ETH value for wei value', () => {
+    const wrapper = mount(<CurrencyDisplay />, {context: {t: str => str + '_t'}})
+
+    const value = wrapper.instance().getValueToRender({
+      // 1000000000000000000
+      value: 'DE0B6B3A7640000',
+    })
+
+    assert.equal(value, 1)
+  })
+
+  it('returns value of token based on token decimals', () => {
+    const wrapper = mount(<CurrencyDisplay />, {context: {t: str => str + '_t'}})
+
+    const value = wrapper.instance().getValueToRender({
+      selectedToken: token,
+      // 1000000000000000000
+      value: 'DE0B6B3A7640000',
+    })
+
+    assert.equal(value, 100000)
+  })
+
+  it('returns hex value with decimal adjustment', () => {
+
+    const wrapper = mount(
+      <CurrencyDisplay
+        selectedToken={token}
+      />, {context: {t: str => str + '_t'}})
+
+    const value = wrapper.instance().getAmount(1)
+    // 10000000000000
+    assert.equal(value, '9184e72a000')
+  })
+
+  it('#getConvertedValueToRender converts input value based on conversionRate', () => {
+
+    const wrapper = mount(
+      <CurrencyDisplay
+        primaryCurrency={'usd'}
+        convertedCurrency={'ja'}
+        conversionRate={2}
+      />, {context: {t: str => str + '_t'}})
+
+    const value = wrapper.instance().getConvertedValueToRender(32)
+
+    assert.equal(value, 64)
+  })
+
+  it('#onlyRenderConversions renders single element for converted currency and value', () => {
+    const wrapper = mount(
+      <CurrencyDisplay
+        convertedCurrency={'test'}
+      />, {context: {t: str => str + '_t'}})
+
+    const value = wrapper.instance().onlyRenderConversions(10)
+    assert.equal(value.props.className, 'currency-display__converted-value')
+    assert.equal(value.props.children, '10 TEST')
+  })
+
+  it('simulates change value in input', () => {
+    const handleChangeSpy = sinon.spy()
+
+    const wrapper = shallow(
+      <CurrencyDisplay
+        onChange={handleChangeSpy}
+      />, {context: {t: str => str + '_t'}})
+
+    const input = wrapper.find('input')
+    input.simulate('focus')
+    input.simulate('change', { target: { value: '100' } })
+
+    assert.equal(wrapper.state().valueToRender, '100')
+    assert.equal(wrapper.find('input').prop('value'), '100')
+  })
+
+})