Various component tests and some conditional statements (MetaMask#7765)

* Various component tests and some conditional statements

Conditional in account-menu in removeAccount when keyring sometimes is not initially provideed
Conditional on unlock-page when there is no target.getBoundingClientRect on the element.

* Update helpers

* Remove component debugging

* Add default params for render helpers

* Remove stubComponent for old Mascot
Changes in MetaMask#7893 has prevented the need to stub it out.

Change logout to lock in account-menu test

test/helper.js

@@ -73,6 +73,9 @@ require('jsdom-global')()
 // localStorage
 window.localStorage = {}
 
+// override metamask-logo
+window.requestAnimationFrame = () => {}
+
 // crypto.getRandomValues
 if (!window.crypto) {
   window.crypto = {}

test/lib/render-helpers.js

@@ -1,14 +1,7 @@
-import { shallow, mount } from 'enzyme'
 import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-import { shape } from 'prop-types'
-
-export function shallowWithStore (component, store) {
-  const context = {
-    store,
-  }
-  return shallow(component, { context })
-}
+import { mount } from 'enzyme'
+import { MemoryRouter } from 'react-router-dom'
+import PropTypes from 'prop-types'
 
 export function mountWithStore (component, store) {
   const context = {
@@ -17,22 +10,41 @@ export function mountWithStore (component, store) {
   return mount(component, { context })
 }
 
-export function mountWithRouter (node) {
+export function mountWithRouter (component, store = {}, pathname = '/') {
+
   // Instantiate router context
   const router = {
-    history: new BrowserRouter().history,
+    history: new MemoryRouter().history,
     route: {
-      location: {},
+      location: {
+        pathname: pathname,
+      },
       match: {},
     },
   }
 
   const createContext = () => ({
-    context: { router, t: () => {} },
-    childContextTypes: { router: shape({}), t: () => {} },
+    context: {
+      router,
+      t: str => str,
+      tOrKey: str => str,
+      metricsEvent: () => {},
+      store,
+    },
+    childContextTypes: {
+      router: PropTypes.object,
+      t: PropTypes.func,
+      tOrKey: PropTypes.func,
+      metricsEvent: PropTypes.func,
+      store: PropTypes.object,
+    },
   })
 
-  const Wrapper = () => <BrowserRouter>{node}</BrowserRouter>
+  const Wrapper = () => (
+    <MemoryRouter initialEntries={[{ pathname }]} initialIndex={0}>
+      {component}
+    </MemoryRouter>
+  )
 
   return mount(<Wrapper />, createContext())
 }

ui/app/components/app/account-menu/account-menu.component.js

@@ -195,6 +195,12 @@ export default class AccountMenu extends Component {
 
   renderRemoveAccount (keyring, identity) {
     const { t } = this.context
+
+    // Sometimes keyrings aren't loaded yet
+    if (!keyring) {
+      return null
+    }
+
     // Any account that's not from the HD wallet Keyring can be removed
     const { type } = keyring
     const isRemovable = type !== 'HD Key Tree'

ui/app/components/app/account-menu/tests/account-menu.test.js

@@ -0,0 +1,209 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import configureMockStore from 'redux-mock-store'
+import { mountWithRouter } from '../../../../../../test/lib/render-helpers'
+import AccountMenu from '../index'
+import { Provider } from 'react-redux'
+
+describe('Account Menu', async () => {
+
+  let wrapper
+
+  const mockStore = {
+    metamask: {
+      provider: {
+        type: 'test',
+      },
+      preferences: {
+        useNativeCurrencyAsPrimaryCurrency: true,
+      },
+    },
+  }
+
+  const store = configureMockStore()(mockStore)
+
+  const props = {
+    isAccountMenuOpen: true,
+    addressConnectedDomainMap: {},
+    accounts: [
+      {
+        address: '0xAddress',
+        name: 'Account 1',
+        balance: '0x0',
+      },
+      {
+        address: '0xImportedAddress',
+        name: 'Imported Account 1',
+        balance: '0x0',
+      },
+    ],
+    keyrings: [
+      {
+        type: 'HD Key Tree',
+        accounts: [
+          '0xAdress',
+        ],
+      },
+      {
+        type: 'Simple Key Pair',
+        accounts: [
+          '0xImportedAddress',
+        ],
+      },
+    ],
+    prevIsAccountMenuOpen: false,
+    lockMetamask: sinon.spy(),
+    showAccountDetail: sinon.spy(),
+    showRemoveAccountConfirmationModal: sinon.spy(),
+    toggleAccountMenu: sinon.spy(),
+    history: {
+      push: sinon.spy(),
+    },
+
+  }
+
+  before(() => {
+    wrapper = mountWithRouter(
+      <Provider store={store}>
+        <AccountMenu.WrappedComponent {...props} />
+      </Provider>, store
+    )
+  })
+
+  afterEach(() => {
+    props.toggleAccountMenu.resetHistory()
+    props.history.push.resetHistory()
+  })
+
+  describe('Render Content', () => {
+    it('returns account name from identities', () => {
+      const accountName = wrapper.find('.account-menu__name')
+      assert.equal(accountName.length, 2)
+    })
+
+    it('renders user preference currency display balance from account balance', () => {
+      const accountBalance = wrapper.find('.currency-display-component.account-menu__balance')
+      assert.equal(accountBalance.length, 2)
+    })
+
+    it('simulate click', () => {
+      const click = wrapper.find('.account-menu__account.menu__item--clickable')
+      click.first().simulate('click')
+
+      assert(props.showAccountDetail.calledOnce)
+      assert.equal(props.showAccountDetail.getCall(0).args[0], '0xAddress')
+    })
+
+    it('render imported account label', () => {
+      const importedAccount = wrapper.find('.keyring-label.allcaps')
+      assert.equal(importedAccount.text(), 'imported')
+    })
+
+    it('remove account', () => {
+      const removeAccount = wrapper.find('.remove-account-icon')
+      removeAccount.simulate('click', {
+        preventDefault: () => {},
+        stopPropagation: () => {},
+      })
+
+      assert(props.showRemoveAccountConfirmationModal.calledOnce)
+      assert.deepEqual(props.showRemoveAccountConfirmationModal.getCall(0).args[0],
+        { address: '0xImportedAddress', balance: '0x0', name: 'Imported Account 1' }
+      )
+    })
+  })
+
+  describe('Log Out', () => {
+    let logout
+
+    it('logout', () => {
+      logout = wrapper.find('.account-menu__lock-button')
+      assert.equal(logout.length, 1)
+    })
+
+    it('simulate click', () => {
+      logout.simulate('click')
+      assert(props.lockMetamask.calledOnce)
+      assert.equal(props.history.push.getCall(0).args[0], '/')
+    })
+  })
+
+  describe('Create Account', () => {
+    let createAccount
+
+    it('renders create account item', () => {
+      createAccount = wrapper.find({ text: 'createAccount' })
+      assert.equal(createAccount.length, 1)
+    })
+
+    it('calls toggle menu and push new-account route to history', () => {
+      createAccount.simulate('click')
+      assert(props.toggleAccountMenu.calledOnce)
+      assert.equal(props.history.push.getCall(0).args[0], '/new-account')
+    })
+  })
+
+  describe('Import Account', () => {
+    let importAccount
+
+    it('renders import account item', () => {
+      importAccount = wrapper.find({ text: 'importAccount' })
+      assert.equal(importAccount.length, 1)
+    })
+
+    it('calls toggle menu and push /new-account/import route to history', () => {
+      importAccount.simulate('click')
+      assert(props.toggleAccountMenu.calledOnce)
+      assert(props.history.push.getCall(0).args[0], '/new-account/import')
+    })
+  })
+
+  describe('Connect Hardware Wallet', () => {
+
+    let connectHardwareWallet
+
+    it('renders import account item', () => {
+      connectHardwareWallet = wrapper.find({ text: 'connectHardwareWallet' })
+      assert.equal(connectHardwareWallet.length, 1)
+    })
+
+    it('calls toggle menu and push /new-account/connect route to history', () => {
+      connectHardwareWallet.simulate('click')
+      assert(props.toggleAccountMenu.calledOnce)
+      assert.equal(props.history.push.getCall(0).args[0], '/new-account/connect')
+    })
+  })
+
+  describe('Info & Help', () => {
+
+    let infoHelp
+
+    it('renders import account item', () => {
+      infoHelp = wrapper.find({ text: 'infoHelp' })
+      assert.equal(infoHelp.length, 1)
+    })
+
+    it('calls toggle menu and push /new-account/connect route to history', () => {
+      infoHelp.simulate('click')
+      assert(props.toggleAccountMenu.calledOnce)
+      assert.equal(props.history.push.getCall(0).args[0], '/settings/about-us')
+    })
+  })
+
+  describe('Settings', () => {
+
+    let settings
+
+    it('renders import account item', () => {
+      settings = wrapper.find({ text: 'settings' })
+      assert.equal(settings.length, 1)
+    })
+
+    it('calls toggle menu and push /new-account/connect route to history', () => {
+      settings.simulate('click')
+      assert(props.toggleAccountMenu.calledOnce)
+      assert.equal(props.history.push.getCall(0).args[0], '/settings')
+    })
+  })
+})

ui/app/components/app/app-header/tests/app-header.test.js

@@ -0,0 +1,99 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import { shallow } from 'enzyme'
+import MetaFoxLogo from '../../../ui/metafox-logo'
+import AppHeader from '../index'
+
+describe('App Header', () => {
+  let wrapper
+
+  const props = {
+    hideNetworkDropdown: sinon.spy(),
+    showNetworkDropdown: sinon.spy(),
+    toggleAccountMenu: sinon.spy(),
+    history: {
+      push: sinon.spy(),
+    },
+    network: 'test',
+    provider: {},
+    selectedAddress: '0xAddress',
+    disabled: false,
+    hideNetworkIndicator: false,
+    networkDropdownOpen: false,
+    isAccountMenuOpen: false,
+    isUnlocked: true,
+  }
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <AppHeader.WrappedComponent {...props} />, {
+        context: {
+          t: str => str,
+          metricsEvent: () => {},
+        },
+      }
+    )
+  })
+
+  afterEach(() => {
+    props.toggleAccountMenu.resetHistory()
+  })
+
+  describe('App Header Logo', () => {
+    it('routes to default route when logo is clicked', () => {
+      const appLogo = wrapper.find(MetaFoxLogo)
+      appLogo.simulate('click')
+      assert(props.history.push.calledOnce)
+      assert.equal(props.history.push.getCall(0).args[0], '/')
+    })
+  })
+
+  describe('Network', () => {
+    it('shows network dropdown when networkDropdownOpen is false', () => {
+      const network = wrapper.find({ network: 'test' })
+
+      network.simulate('click', {
+        preventDefault: () => {},
+        stopPropagation: () => {},
+      })
+
+      assert(props.showNetworkDropdown.calledOnce)
+    })
+
+    it('hides network dropdown when networkDropdownOpen is true', () => {
+      wrapper.setProps({ networkDropdownOpen: true })
+      const network = wrapper.find({ network: 'test' })
+
+      network.simulate('click', {
+        preventDefault: () => {},
+        stopPropagation: () => {},
+      })
+
+      assert(props.hideNetworkDropdown.calledOnce)
+    })
+
+    it('hides network indicator', () => {
+      wrapper.setProps({ hideNetworkIndicator: true })
+      const network = wrapper.find({ network: 'test' })
+      assert.equal(network.length, 0)
+    })
+  })
+
+  describe('Account Menu', () => {
+
+    it('toggles account menu', () => {
+      const accountMenu = wrapper.find('.account-menu__icon')
+      accountMenu.simulate('click')
+      assert(props.toggleAccountMenu.calledOnce)
+    })
+
+    it('does not toggle account menu when disabled', () => {
+      wrapper.setProps({ disabled: true })
+      const accountMenu = wrapper.find('.account-menu__icon')
+      accountMenu.simulate('click')
+      assert(props.toggleAccountMenu.notCalled)
+    })
+  })
+
+})