diff options
Diffstat (limited to 'ui')
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') + }) +}) |