aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorThomas Huang <tmashuang@users.noreply.github.com>2018-09-26 12:17:17 +0800
committerGitHub <noreply@github.com>2018-09-26 12:17:17 +0800
commitdb30bbce4c0d977e4efe901fddc46fbe5a6aaac4 (patch)
tree8f84b8116a7b6760dd46c7ce3ff1cd6ba001e3df /ui
parent88b5f82e1360ab7dd9873a5d7105fbbe1130d839 (diff)
parenta0a57c24fd639c4808ed3e083089b9f1fb3373e6 (diff)
downloadtangerine-wallet-browser-db30bbce4c0d977e4efe901fddc46fbe5a6aaac4.tar
tangerine-wallet-browser-db30bbce4c0d977e4efe901fddc46fbe5a6aaac4.tar.gz
tangerine-wallet-browser-db30bbce4c0d977e4efe901fddc46fbe5a6aaac4.tar.bz2
tangerine-wallet-browser-db30bbce4c0d977e4efe901fddc46fbe5a6aaac4.tar.lz
tangerine-wallet-browser-db30bbce4c0d977e4efe901fddc46fbe5a6aaac4.tar.xz
tangerine-wallet-browser-db30bbce4c0d977e4efe901fddc46fbe5a6aaac4.tar.zst
tangerine-wallet-browser-db30bbce4c0d977e4efe901fddc46fbe5a6aaac4.zip
Merge pull request #5332 from MetaMask/ui-unit-tests
Some Ui tests
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/dropdowns/tests/dropdown.test.js37
-rw-r--r--ui/app/components/dropdowns/tests/menu.test.js87
-rw-r--r--ui/app/components/dropdowns/tests/network-dropdown-icon.test.js25
-rw-r--r--ui/app/components/dropdowns/tests/network-dropdown.test.js97
-rw-r--r--ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js69
-rw-r--r--ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js82
-rw-r--r--ui/app/components/send/currency-display/tests/currency-display.test.js91
7 files changed, 488 insertions, 0 deletions
diff --git a/ui/app/components/dropdowns/tests/dropdown.test.js b/ui/app/components/dropdowns/tests/dropdown.test.js
new file mode 100644
index 000000000..2b026589a
--- /dev/null
+++ b/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)
+ })
+
+})
diff --git a/ui/app/components/dropdowns/tests/menu.test.js b/ui/app/components/dropdowns/tests/menu.test.js
new file mode 100644
index 000000000..9f5f13f00
--- /dev/null
+++ b/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)
+ })
+ })
+
+})
diff --git a/ui/app/components/dropdowns/tests/network-dropdown-icon.test.js b/ui/app/components/dropdowns/tests/network-dropdown-icon.test.js
new file mode 100644
index 000000000..67b192c11
--- /dev/null
+++ b/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')
+ })
+})
diff --git a/ui/app/components/dropdowns/tests/network-dropdown.test.js b/ui/app/components/dropdowns/tests/network-dropdown.test.js
new file mode 100644
index 000000000..699b54605
--- /dev/null
+++ b/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')
+ })
+
+ })
+})
diff --git a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
index e69de29bb..5e5dbf00b 100644
--- a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
+++ b/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)
+ })
+ })
+
+})
diff --git a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
index e69de29bb..59304b2bd 100644
--- a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
+++ b/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)
+ })
+ })
+
+})
diff --git a/ui/app/components/send/currency-display/tests/currency-display.test.js b/ui/app/components/send/currency-display/tests/currency-display.test.js
new file mode 100644
index 000000000..c9560b81c
--- /dev/null
+++ b/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')
+ })
+
+})