aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/error-message/tests/error-message.component.test.js36
-rw-r--r--ui/app/components/modal/modal-content/modal-content.component.js20
-rw-r--r--ui/app/components/modal/modal-content/tests/modal-content.component.test.js44
-rw-r--r--ui/app/components/modal/tests/modal.component.test.js117
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js7
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js27
-rw-r--r--ui/app/components/modals/cancel-transaction/cancel-transaction.component.js7
-rw-r--r--ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js56
-rw-r--r--ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js43
9 files changed, 342 insertions, 15 deletions
diff --git a/ui/app/components/error-message/tests/error-message.component.test.js b/ui/app/components/error-message/tests/error-message.component.test.js
new file mode 100644
index 000000000..8c5347173
--- /dev/null
+++ b/ui/app/components/error-message/tests/error-message.component.test.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import ErrorMessage from '../error-message.component'
+
+describe('ErrorMessage Component', () => {
+ const t = key => `translate ${key}`
+
+ it('should render a message from props.errorMessage', () => {
+ const wrapper = shallow(
+ <ErrorMessage
+ errorMessage="This is an error."
+ />,
+ { context: { t }}
+ )
+
+ assert.ok(wrapper)
+ assert.equal(wrapper.find('.error-message').length, 1)
+ assert.equal(wrapper.find('.error-message__icon').length, 1)
+ assert.equal(wrapper.find('.error-message__text').text(), 'ALERT: This is an error.')
+ })
+
+ it('should render a message translated from props.errorKey', () => {
+ const wrapper = shallow(
+ <ErrorMessage
+ errorKey="testKey"
+ />,
+ { context: { t }}
+ )
+
+ assert.ok(wrapper)
+ assert.equal(wrapper.find('.error-message').length, 1)
+ assert.equal(wrapper.find('.error-message__icon').length, 1)
+ assert.equal(wrapper.find('.error-message__text').text(), 'ALERT: translate testKey')
+ })
+})
diff --git a/ui/app/components/modal/modal-content/modal-content.component.js b/ui/app/components/modal/modal-content/modal-content.component.js
index 8beb854e0..ecec0ee5b 100644
--- a/ui/app/components/modal/modal-content/modal-content.component.js
+++ b/ui/app/components/modal/modal-content/modal-content.component.js
@@ -12,12 +12,20 @@ export default class ModalContent extends PureComponent {
return (
<div className="modal-content">
- <div className="modal-content__title">
- { title }
- </div>
- <div className="modal-content__description">
- { description }
- </div>
+ {
+ title && (
+ <div className="modal-content__title">
+ { title }
+ </div>
+ )
+ }
+ {
+ description && (
+ <div className="modal-content__description">
+ { description }
+ </div>
+ )
+ }
</div>
)
}
diff --git a/ui/app/components/modal/modal-content/tests/modal-content.component.test.js b/ui/app/components/modal/modal-content/tests/modal-content.component.test.js
new file mode 100644
index 000000000..17af09f45
--- /dev/null
+++ b/ui/app/components/modal/modal-content/tests/modal-content.component.test.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import ModalContent from '../modal-content.component'
+
+describe('ModalContent Component', () => {
+ it('should render a title', () => {
+ const wrapper = shallow(
+ <ModalContent
+ title="Modal Title"
+ />
+ )
+
+ assert.equal(wrapper.find('.modal-content__title').length, 1)
+ assert.equal(wrapper.find('.modal-content__title').text(), 'Modal Title')
+ assert.equal(wrapper.find('.modal-content__description').length, 0)
+ })
+
+ it('should render a description', () => {
+ const wrapper = shallow(
+ <ModalContent
+ description="Modal Description"
+ />
+ )
+
+ assert.equal(wrapper.find('.modal-content__title').length, 0)
+ assert.equal(wrapper.find('.modal-content__description').length, 1)
+ assert.equal(wrapper.find('.modal-content__description').text(), 'Modal Description')
+ })
+
+ it('should render both a title and a description', () => {
+ const wrapper = shallow(
+ <ModalContent
+ title="Modal Title"
+ description="Modal Description"
+ />
+ )
+
+ assert.equal(wrapper.find('.modal-content__title').length, 1)
+ assert.equal(wrapper.find('.modal-content__title').text(), 'Modal Title')
+ assert.equal(wrapper.find('.modal-content__description').length, 1)
+ assert.equal(wrapper.find('.modal-content__description').text(), 'Modal Description')
+ })
+})
diff --git a/ui/app/components/modal/tests/modal.component.test.js b/ui/app/components/modal/tests/modal.component.test.js
new file mode 100644
index 000000000..31457751f
--- /dev/null
+++ b/ui/app/components/modal/tests/modal.component.test.js
@@ -0,0 +1,117 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import Modal from '../modal.component'
+import Button from '../../button'
+
+describe('Modal Component', () => {
+ it('should render a modal with a submit button', () => {
+ const wrapper = shallow(<Modal />)
+
+ assert.equal(wrapper.find('.modal-container').length, 1)
+ const buttons = wrapper.find(Button)
+ assert.equal(buttons.length, 1)
+ assert.equal(buttons.at(0).props().type, 'primary')
+ })
+
+ it('should render a modal with a cancel and a submit button', () => {
+ const handleCancel = sinon.spy()
+ const handleSubmit = sinon.spy()
+ const wrapper = shallow(
+ <Modal
+ onCancel={handleCancel}
+ cancelText="Cancel"
+ onSubmit={handleSubmit}
+ submitText="Submit"
+ />
+ )
+
+ const buttons = wrapper.find(Button)
+ assert.equal(buttons.length, 2)
+ const cancelButton = buttons.at(0)
+ const submitButton = buttons.at(1)
+
+ assert.equal(cancelButton.props().type, 'default')
+ assert.equal(cancelButton.props().children, 'Cancel')
+ assert.equal(handleCancel.callCount, 0)
+ cancelButton.simulate('click')
+ assert.equal(handleCancel.callCount, 1)
+
+ assert.equal(submitButton.props().type, 'primary')
+ assert.equal(submitButton.props().children, 'Submit')
+ assert.equal(handleSubmit.callCount, 0)
+ submitButton.simulate('click')
+ assert.equal(handleSubmit.callCount, 1)
+ })
+
+ it('should render a modal with different button types', () => {
+ const wrapper = shallow(
+ <Modal
+ onCancel={() => {}}
+ cancelText="Cancel"
+ cancelType="secondary"
+ onSubmit={() => {}}
+ submitText="Submit"
+ submitType="confirm"
+ />
+ )
+
+ const buttons = wrapper.find(Button)
+ assert.equal(buttons.length, 2)
+ assert.equal(buttons.at(0).props().type, 'secondary')
+ assert.equal(buttons.at(1).props().type, 'confirm')
+ })
+
+ it('should render a modal with children', () => {
+ const wrapper = shallow(
+ <Modal
+ onCancel={() => {}}
+ cancelText="Cancel"
+ onSubmit={() => {}}
+ submitText="Submit"
+ >
+ <div className="test-child" />
+ </Modal>
+ )
+
+ assert.ok(wrapper.find('.test-class'))
+ })
+
+ it('should render a modal with a header', () => {
+ const handleCancel = sinon.spy()
+ const handleSubmit = sinon.spy()
+ const wrapper = shallow(
+ <Modal
+ onCancel={handleCancel}
+ cancelText="Cancel"
+ onSubmit={handleSubmit}
+ submitText="Submit"
+ headerText="My Header"
+ />
+ )
+
+ assert.ok(wrapper.find('.modal-container__header'))
+ assert.equal(wrapper.find('.modal-container__header-text').text(), 'My Header')
+ assert.equal(handleCancel.callCount, 0)
+ assert.equal(handleSubmit.callCount, 0)
+ wrapper.find('.modal-container__header-close').simulate('click')
+ assert.equal(handleCancel.callCount, 1)
+ assert.equal(handleSubmit.callCount, 0)
+ })
+
+ it('should call onSubmit when onCancel is undefined and the header close button is clicked', () => {
+ const handleSubmit = sinon.spy()
+ const wrapper = shallow(
+ <Modal
+ onSubmit={handleSubmit}
+ submitText="Submit"
+ headerText="My Header"
+ />
+ )
+
+ assert.equal(handleSubmit.callCount, 0)
+ wrapper.find('.modal-container__header-close').simulate('click')
+ assert.equal(handleSubmit.callCount, 1)
+ })
+})
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
index 56765698e..b082db1d0 100644
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
@@ -1,21 +1,18 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
-import classnames from 'classnames'
import CurrencyDisplay from '../../../currency-display'
import { ETH } from '../../../../constants/common'
export default class CancelTransaction extends PureComponent {
static propTypes = {
- className: PropTypes.string,
value: PropTypes.string,
}
render () {
- const { className, value } = this.props
- console.log('VALUE', value)
+ const { value } = this.props
return (
- <div className={classnames('cancel-transaction-gas-fee', className)}>
+ <div className="cancel-transaction-gas-fee">
<CurrencyDisplay
className="cancel-transaction-gas-fee__eth"
currency={ETH}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
new file mode 100644
index 000000000..994c2a577
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import CancelTransactionGasFee from '../cancel-transaction-gas-fee.component'
+import CurrencyDisplay from '../../../../currency-display'
+
+describe('CancelTransactionGasFee Component', () => {
+ it('should render', () => {
+ const wrapper = shallow(
+ <CancelTransactionGasFee
+ value="0x3b9aca00"
+ />
+ )
+
+ assert.ok(wrapper)
+ assert.equal(wrapper.find(CurrencyDisplay).length, 2)
+ const ethDisplay = wrapper.find(CurrencyDisplay).at(0)
+ const fiatDisplay = wrapper.find(CurrencyDisplay).at(1)
+
+ assert.equal(ethDisplay.props().value, '0x3b9aca00')
+ assert.equal(ethDisplay.props().currency, 'ETH')
+ assert.equal(ethDisplay.props().className, 'cancel-transaction-gas-fee__eth')
+
+ assert.equal(fiatDisplay.props().value, '0x3b9aca00')
+ assert.equal(fiatDisplay.props().className, 'cancel-transaction-gas-fee__fiat')
+ })
+})
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
index f5f0ea783..a30fbea96 100644
--- a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
@@ -57,10 +57,9 @@ export default class CancelTransaction extends PureComponent {
<div className="cancel-transaction__title">
{ t('cancellationGasFee') }
</div>
- <CancelTransactionGasFee
- className="cancel-transaction__cancel-transaction-gas-fee-container"
- value={newGasFee}
- />
+ <div className="cancel-transaction__cancel-transaction-gas-fee-container">
+ <CancelTransactionGasFee value={newGasFee} />
+ </div>
<div className="cancel-transaction__description">
{ t('attemptToCancelDescription') }
</div>
diff --git a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js
new file mode 100644
index 000000000..053223467
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js
@@ -0,0 +1,56 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import CancelTransaction from '../cancel-transaction.component'
+import CancelTransactionGasFee from '../cancel-transaction-gas-fee'
+import Modal from '../../../modal'
+
+describe('CancelTransaction Component', () => {
+ const t = key => key
+
+ it('should render a CancelTransaction modal', () => {
+ const wrapper = shallow(
+ <CancelTransaction
+ defaultNewGasPrice="0x3b9aca00"
+ />,
+ { context: { t }}
+ )
+
+ assert.ok(wrapper)
+ assert.equal(wrapper.find(Modal).length, 1)
+ assert.equal(wrapper.find(CancelTransactionGasFee).length, 1)
+ assert.equal(wrapper.find(CancelTransactionGasFee).props().value, '0x1319718a5000')
+ assert.equal(wrapper.find('.cancel-transaction__title').text(), 'cancellationGasFee')
+ assert.equal(wrapper.find('.cancel-transaction__description').text(), 'attemptToCancelDescription')
+ })
+
+ it('should pass the correct props to the Modal component', async () => {
+ const createCancelTransactionSpy = sinon.stub().callsFake(() => Promise.resolve())
+ const hideModalSpy = sinon.spy()
+
+ const wrapper = shallow(
+ <CancelTransaction
+ defaultNewGasPrice="0x3b9aca00"
+ createCancelTransaction={createCancelTransactionSpy}
+ hideModal={hideModalSpy}
+ />,
+ { context: { t }}
+ )
+
+ assert.equal(wrapper.find(Modal).length, 1)
+ const modalProps = wrapper.find(Modal).props()
+
+ assert.equal(modalProps.headerText, 'attemptToCancel')
+ assert.equal(modalProps.submitText, 'yesLetsTry')
+ assert.equal(modalProps.cancelText, 'nevermind')
+
+ assert.equal(createCancelTransactionSpy.callCount, 0)
+ assert.equal(hideModalSpy.callCount, 0)
+ await modalProps.onSubmit()
+ assert.equal(createCancelTransactionSpy.callCount, 1)
+ assert.equal(hideModalSpy.callCount, 1)
+ modalProps.onCancel()
+ assert.equal(hideModalSpy.callCount, 2)
+ })
+})
diff --git a/ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js b/ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js
new file mode 100644
index 000000000..654e7062a
--- /dev/null
+++ b/ui/app/higher-order-components/with-modal-props/tests/with-modal-props.test.js
@@ -0,0 +1,43 @@
+
+import assert from 'assert'
+import configureMockStore from 'redux-mock-store'
+import { mount } from 'enzyme'
+import React from 'react'
+import withModalProps from '../with-modal-props'
+
+const mockState = {
+ appState: {
+ modal: {
+ modalState: {
+ props: {
+ prop1: 'prop1',
+ prop2: 2,
+ prop3: true,
+ },
+ },
+ },
+ },
+}
+
+describe('withModalProps', () => {
+ it('should return a component wrapped with modal state props', () => {
+ const TestComponent = props => (
+ <div className="test">Testing</div>
+ )
+ const WrappedComponent = withModalProps(TestComponent)
+ const store = configureMockStore()(mockState)
+ const wrapper = mount(
+ <WrappedComponent store={store} />
+ )
+
+ assert.ok(wrapper)
+ const testComponent = wrapper.find(TestComponent).at(0)
+ assert.equal(testComponent.length, 1)
+ assert.equal(testComponent.find('.test').text(), 'Testing')
+ const testComponentProps = testComponent.props()
+ assert.equal(testComponentProps.prop1, 'prop1')
+ assert.equal(testComponentProps.prop2, 2)
+ assert.equal(testComponentProps.prop3, true)
+ assert.equal(typeof testComponentProps.hideModal, 'function')
+ })
+})