From 284dd85a99f538b77fd477f4952117d1792f64a5 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 6 Apr 2018 19:59:51 -0230 Subject: first commit --- ui/app/components/send_/send-header/README.md | 0 .../send_/send-header/send-header.component.js | 32 ++++++++++++++++++++++ .../send_/send-header/send-header.container.js | 19 +++++++++++++ .../tests/send-header-component.test.js | 0 .../tests/send-header-container.test.js | 0 5 files changed, 51 insertions(+) create mode 100644 ui/app/components/send_/send-header/README.md create mode 100644 ui/app/components/send_/send-header/send-header.component.js create mode 100644 ui/app/components/send_/send-header/send-header.container.js create mode 100644 ui/app/components/send_/send-header/tests/send-header-component.test.js create mode 100644 ui/app/components/send_/send-header/tests/send-header-container.test.js (limited to 'ui/app/components/send_/send-header') diff --git a/ui/app/components/send_/send-header/README.md b/ui/app/components/send_/send-header/README.md new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-header/send-header.component.js b/ui/app/components/send_/send-header/send-header.component.js new file mode 100644 index 000000000..99adfc7e8 --- /dev/null +++ b/ui/app/components/send_/send-header/send-header.component.js @@ -0,0 +1,32 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import PageContainerHeader from '../../page-container/page-container-header.component' + +export default class SendHeader extends Component { + + static propTypes = { + isToken: PropTypes.bool, + clearSend: PropTypes.func, + goHome: PropTypes.func, + }; + + render () { + const { isToken, clearSend, goHome } = this.props + + return ( + { + clearSend() + goHome() + }} + /> + ); + } + +} + +SendHeader.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/send_/send-header/send-header.container.js b/ui/app/components/send_/send-header/send-header.container.js new file mode 100644 index 000000000..a4d3ac54f --- /dev/null +++ b/ui/app/components/send_/send-header/send-header.container.js @@ -0,0 +1,19 @@ +import { connect } from 'react-redux' +import { goHome, clearSend } from '../../../actions' +import SendHeader from './send-header.component' +import { getSelectedToken } from '../../../selectors' + +export default connect(mapStateToProps, mapDispatchToProps)(SendHeader) + +function mapStateToProps (state) { + return { + isToken: Boolean(getSelectedToken(state)) + } +} + +function mapDispatchToProps (dispatch) { + return { + goHome: () => dispatch(goHome()), + clearSend: () => dispatch(clearSend()), + } +} diff --git a/ui/app/components/send_/send-header/tests/send-header-component.test.js b/ui/app/components/send_/send-header/tests/send-header-component.test.js new file mode 100644 index 000000000..e69de29bb diff --git a/ui/app/components/send_/send-header/tests/send-header-container.test.js b/ui/app/components/send_/send-header/tests/send-header-container.test.js new file mode 100644 index 000000000..e69de29bb -- cgit From 91c201aa72581a59a0d2ef73a225b1768584dea7 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 26 Apr 2018 22:08:14 -0230 Subject: Lint fixes and alphabetization for i3725-refactor-send-component --- ui/app/components/send_/send-header/send-header.component.js | 8 ++++---- ui/app/components/send_/send-header/send-header.container.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) (limited to 'ui/app/components/send_/send-header') diff --git a/ui/app/components/send_/send-header/send-header.component.js b/ui/app/components/send_/send-header/send-header.component.js index 99adfc7e8..30cb5c749 100644 --- a/ui/app/components/send_/send-header/send-header.component.js +++ b/ui/app/components/send_/send-header/send-header.component.js @@ -5,9 +5,9 @@ import PageContainerHeader from '../../page-container/page-container-header.comp export default class SendHeader extends Component { static propTypes = { - isToken: PropTypes.bool, clearSend: PropTypes.func, goHome: PropTypes.func, + isToken: PropTypes.bool, }; render () { @@ -15,14 +15,14 @@ export default class SendHeader extends Component { return ( { clearSend() goHome() }} + subtitle={this.context.t('onlySendToEtherAddress')} + title={isToken ? this.context.t('sendTokens') : this.context.t('sendETH')} /> - ); + ) } } diff --git a/ui/app/components/send_/send-header/send-header.container.js b/ui/app/components/send_/send-header/send-header.container.js index a4d3ac54f..8eb2bbe2e 100644 --- a/ui/app/components/send_/send-header/send-header.container.js +++ b/ui/app/components/send_/send-header/send-header.container.js @@ -7,13 +7,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(SendHeader) function mapStateToProps (state) { return { - isToken: Boolean(getSelectedToken(state)) + isToken: Boolean(getSelectedToken(state)), } } function mapDispatchToProps (dispatch) { return { - goHome: () => dispatch(goHome()), clearSend: () => dispatch(clearSend()), + goHome: () => dispatch(goHome()), } } -- cgit From 5529ec6efd6fa659d790b4641e47cf247b7cfca7 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 30 Apr 2018 13:00:51 -0230 Subject: Fix close button on send screen --- ui/app/components/send_/send-header/send-header.component.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'ui/app/components/send_/send-header') diff --git a/ui/app/components/send_/send-header/send-header.component.js b/ui/app/components/send_/send-header/send-header.component.js index 30cb5c749..098fd89a4 100644 --- a/ui/app/components/send_/send-header/send-header.component.js +++ b/ui/app/components/send_/send-header/send-header.component.js @@ -1,23 +1,24 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import PageContainerHeader from '../../page-container/page-container-header.component' +import { DEFAULT_ROUTE } from '../../../routes' export default class SendHeader extends Component { static propTypes = { clearSend: PropTypes.func, - goHome: PropTypes.func, + history: PropTypes.object, isToken: PropTypes.bool, }; render () { - const { isToken, clearSend, goHome } = this.props + const { isToken, clearSend, history } = this.props return ( { clearSend() - goHome() + history.push(DEFAULT_ROUTE) }} subtitle={this.context.t('onlySendToEtherAddress')} title={isToken ? this.context.t('sendTokens') : this.context.t('sendETH')} -- cgit From 954394f81090b1a6a4afe55243caa3671b88addc Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 30 Apr 2018 14:08:03 -0230 Subject: Remove 'goHome' from send_ --- ui/app/components/send_/send-header/send-header.container.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui/app/components/send_/send-header') diff --git a/ui/app/components/send_/send-header/send-header.container.js b/ui/app/components/send_/send-header/send-header.container.js index 8eb2bbe2e..0c92da3a6 100644 --- a/ui/app/components/send_/send-header/send-header.container.js +++ b/ui/app/components/send_/send-header/send-header.container.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux' -import { goHome, clearSend } from '../../../actions' +import { clearSend } from '../../../actions' import SendHeader from './send-header.component' import { getSelectedToken } from '../../../selectors' @@ -14,6 +14,5 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { clearSend: () => dispatch(clearSend()), - goHome: () => dispatch(goHome()), } } -- cgit From 7c490098548522c16be1b1e84bce37f5bf87f1f4 Mon Sep 17 00:00:00 2001 From: Dan Date: Sat, 5 May 2018 11:11:53 -0400 Subject: Unit tests for containers, utils and selectors in send_/ --- .../tests/send-header-container.test.js | 55 ++++++++++++++++++++++ 1 file changed, 55 insertions(+) (limited to 'ui/app/components/send_/send-header') diff --git a/ui/app/components/send_/send-header/tests/send-header-container.test.js b/ui/app/components/send_/send-header/tests/send-header-container.test.js index e69de29bb..abce9af6b 100644 --- a/ui/app/components/send_/send-header/tests/send-header-container.test.js +++ b/ui/app/components/send_/send-header/tests/send-header-container.test.js @@ -0,0 +1,55 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' +import sinon from 'sinon' + +let mapStateToProps +let mapDispatchToProps + +const actionSpies = { + clearSend: sinon.spy(), +} + +proxyquire('../send-header.container.js', { + 'react-redux': { + connect: (ms, md) => { + mapStateToProps = ms + mapDispatchToProps = md + return () => ({}) + }, + }, + '../../../actions': actionSpies, + '../../../selectors': { getSelectedToken: (s) => `mockSelectedToken:${s}` }, +}) + +describe('send-header container', () => { + + describe('mapStateToProps()', () => { + + it('should map the correct properties to props', () => { + assert.deepEqual(mapStateToProps('mockState'), { + isToken: true, + }) + }) + + }) + + describe('mapDispatchToProps()', () => { + let dispatchSpy + let mapDispatchToPropsObject + + beforeEach(() => { + dispatchSpy = sinon.spy() + mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy) + }) + + describe('clearSend()', () => { + it('should dispatch an action', () => { + mapDispatchToPropsObject.clearSend() + assert(dispatchSpy.calledOnce) + assert(actionSpies.clearSend.calledOnce) + }) + }) + + }) + +}) -- cgit From 9ccc609e567b373b5f02bddc4d1095b2ce2d6c44 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 7 May 2018 08:03:20 -0400 Subject: Adds test for send, send-content, send-footer and send-header components. --- .../send_/send-header/send-header.component.js | 14 ++--- .../tests/send-header-component.test.js | 70 ++++++++++++++++++++++ 2 files changed, 77 insertions(+), 7 deletions(-) (limited to 'ui/app/components/send_/send-header') diff --git a/ui/app/components/send_/send-header/send-header.component.js b/ui/app/components/send_/send-header/send-header.component.js index dc4190b93..0d75dbdae 100644 --- a/ui/app/components/send_/send-header/send-header.component.js +++ b/ui/app/components/send_/send-header/send-header.component.js @@ -11,17 +11,17 @@ export default class SendHeader extends Component { isToken: PropTypes.bool, }; - render () { - const { isToken, clearSend, history } = this.props + onClose () { + this.props.clearSend() + this.props.history.push(DEFAULT_ROUTE) + } + render () { return ( { - clearSend() - history.push(DEFAULT_ROUTE) - }} + onClose={() => this.onClose()} subtitle={this.context.t('onlySendToEtherAddress')} - title={isToken ? this.context.t('sendTokens') : this.context.t('sendETH')} + title={this.props.isToken ? this.context.t('sendTokens') : this.context.t('sendETH')} /> ) } diff --git a/ui/app/components/send_/send-header/tests/send-header-component.test.js b/ui/app/components/send_/send-header/tests/send-header-component.test.js index e69de29bb..f1e387b72 100644 --- a/ui/app/components/send_/send-header/tests/send-header-component.test.js +++ b/ui/app/components/send_/send-header/tests/send-header-component.test.js @@ -0,0 +1,70 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import { DEFAULT_ROUTE } from '../../../../routes' +import SendHeader from '../send-header.component.js' + +import PageContainerHeader from '../../../page-container/page-container-header' + +const propsMethodSpies = { + clearSend: sinon.spy(), +} +const historySpies = { + push: sinon.spy(), +} + +sinon.spy(SendHeader.prototype, 'onClose') + +describe('Send Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow(, { context: { t: str => str } }) + instance = wrapper.instance() + }) + + afterEach(() => { + propsMethodSpies.clearSend.resetHistory() + historySpies.push.resetHistory() + SendHeader.prototype.onClose.resetHistory() + }) + + describe('onClose', () => { + it('should call clearSend', () => { + assert.equal(propsMethodSpies.clearSend.callCount, 0) + wrapper.instance().onClose() + assert.equal(propsMethodSpies.clearSend.callCount, 1) + }) + + it('should call history.push', () => { + assert.equal(historySpies.push.callCount, 0) + wrapper.instance().onClose() + assert.equal(historySpies.push.callCount, 1) + assert.equal(historySpies.push.getCall(0).args[0], DEFAULT_ROUTE) + }) + }) + + describe('render', () => { + it('should render a PageContainerHeader compenent', () => { + assert.equal(wrapper.find(PageContainerHeader).length, 1) + }) + + it('should pass the correct props to PageContainerHeader', () => { + const { + onClose, + subtitle, + title, + } = wrapper.find(PageContainerHeader).props() + assert.equal(subtitle, 'onlySendToEtherAddress') + assert.equal(title, 'sendETH') + assert.equal(SendHeader.prototype.onClose.callCount, 0) + onClose() + assert.equal(SendHeader.prototype.onClose.callCount, 1) + }) + }) +}) -- cgit From f94ffa022c9f76a8d7acbf331f49a363d5e7362d Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 10 May 2018 07:37:33 -0400 Subject: Fix test descriptions and remove unnecessary proptypes. --- .../components/send_/send-header/tests/send-header-component.test.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/components/send_/send-header') diff --git a/ui/app/components/send_/send-header/tests/send-header-component.test.js b/ui/app/components/send_/send-header/tests/send-header-component.test.js index f1e387b72..17629eb65 100644 --- a/ui/app/components/send_/send-header/tests/send-header-component.test.js +++ b/ui/app/components/send_/send-header/tests/send-header-component.test.js @@ -16,8 +16,9 @@ const historySpies = { sinon.spy(SendHeader.prototype, 'onClose') -describe('Send Component', function () { +describe('SendHeader Component', function () { let wrapper + let instance beforeEach(() => { wrapper = shallow( Date: Mon, 14 May 2018 07:01:41 -0230 Subject: Lint fixes --- ui/app/components/send_/send-header/tests/send-header-component.test.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui/app/components/send_/send-header') diff --git a/ui/app/components/send_/send-header/tests/send-header-component.test.js b/ui/app/components/send_/send-header/tests/send-header-component.test.js index 17629eb65..c9d6d8023 100644 --- a/ui/app/components/send_/send-header/tests/send-header-component.test.js +++ b/ui/app/components/send_/send-header/tests/send-header-component.test.js @@ -18,7 +18,6 @@ sinon.spy(SendHeader.prototype, 'onClose') describe('SendHeader Component', function () { let wrapper - let instance beforeEach(() => { wrapper = shallow(, { context: { t: str => str } }) - instance = wrapper.instance() }) afterEach(() => { -- cgit From 77ee23d4935c72816e4d141472f53d8ade170cdf Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 14 May 2018 20:33:04 -0230 Subject: Add index.js files to send_ subdirectories --- ui/app/components/send_/send-header/index.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 ui/app/components/send_/send-header/index.js (limited to 'ui/app/components/send_/send-header') diff --git a/ui/app/components/send_/send-header/index.js b/ui/app/components/send_/send-header/index.js new file mode 100644 index 000000000..b808eabbf --- /dev/null +++ b/ui/app/components/send_/send-header/index.js @@ -0,0 +1 @@ +export { default } from './send-header.container' \ No newline at end of file -- cgit From 5bb399e55a819d52f2742e3491d50547be435a97 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 24 May 2018 17:27:33 -0230 Subject: Display correct titles and subtitles on send token and editing send transaction screens. --- .../send_/send-header/send-header.component.js | 7 ++-- .../send_/send-header/send-header.container.js | 5 ++- .../send_/send-header/send-header.selectors.js | 37 +++++++++++++++++ .../tests/send-header-component.test.js | 9 +++-- .../tests/send-header-container.test.js | 8 +++- .../tests/send-header-selectors.test.js | 47 ++++++++++++++++++++++ 6 files changed, 102 insertions(+), 11 deletions(-) create mode 100644 ui/app/components/send_/send-header/send-header.selectors.js create mode 100644 ui/app/components/send_/send-header/tests/send-header-selectors.test.js (limited to 'ui/app/components/send_/send-header') diff --git a/ui/app/components/send_/send-header/send-header.component.js b/ui/app/components/send_/send-header/send-header.component.js index 0d75dbdae..5f6617fce 100644 --- a/ui/app/components/send_/send-header/send-header.component.js +++ b/ui/app/components/send_/send-header/send-header.component.js @@ -8,7 +8,8 @@ export default class SendHeader extends Component { static propTypes = { clearSend: PropTypes.func, history: PropTypes.object, - isToken: PropTypes.bool, + titleKey: PropTypes.string, + subtitleParams: PropTypes.array, }; onClose () { @@ -20,8 +21,8 @@ export default class SendHeader extends Component { return ( this.onClose()} - subtitle={this.context.t('onlySendToEtherAddress')} - title={this.props.isToken ? this.context.t('sendTokens') : this.context.t('sendETH')} + subtitle={this.context.t(...this.props.subtitleParams)} + title={this.context.t(this.props.titleKey)} /> ) } diff --git a/ui/app/components/send_/send-header/send-header.container.js b/ui/app/components/send_/send-header/send-header.container.js index 0c92da3a6..4bcd0d1b6 100644 --- a/ui/app/components/send_/send-header/send-header.container.js +++ b/ui/app/components/send_/send-header/send-header.container.js @@ -1,13 +1,14 @@ import { connect } from 'react-redux' import { clearSend } from '../../../actions' import SendHeader from './send-header.component' -import { getSelectedToken } from '../../../selectors' +import { getSubtitleParams, getTitleKey } from './send-header.selectors' export default connect(mapStateToProps, mapDispatchToProps)(SendHeader) function mapStateToProps (state) { return { - isToken: Boolean(getSelectedToken(state)), + titleKey: getTitleKey(state), + subtitleParams: getSubtitleParams(state), } } diff --git a/ui/app/components/send_/send-header/send-header.selectors.js b/ui/app/components/send_/send-header/send-header.selectors.js new file mode 100644 index 000000000..d7c9d3766 --- /dev/null +++ b/ui/app/components/send_/send-header/send-header.selectors.js @@ -0,0 +1,37 @@ +const { + getSelectedToken, + getSendEditingTransactionId, +} = require('../send.selectors.js') + +const selectors = { + getTitleKey, + getSubtitleParams, +} + +module.exports = selectors + +function getTitleKey (state) { + const isEditing = Boolean(getSendEditingTransactionId(state)) + const isToken = Boolean(getSelectedToken(state)) + + if (isEditing) { + return 'edit' + } else if (isToken) { + return 'sendTokens' + } else { + return 'sendETH' + } +} + +function getSubtitleParams (state) { + const isEditing = Boolean(getSendEditingTransactionId(state)) + const token = getSelectedToken(state) + + if (isEditing) { + return [ 'editingTransaction' ] + } else if (token) { + return [ 'onlySendTokensToAccountAddress', [ token.symbol ] ] + } else { + return [ 'onlySendToEtherAddress' ] + } +} diff --git a/ui/app/components/send_/send-header/tests/send-header-component.test.js b/ui/app/components/send_/send-header/tests/send-header-component.test.js index c9d6d8023..930bfa387 100644 --- a/ui/app/components/send_/send-header/tests/send-header-component.test.js +++ b/ui/app/components/send_/send-header/tests/send-header-component.test.js @@ -23,8 +23,9 @@ describe('SendHeader Component', function () { wrapper = shallow(, { context: { t: str => str } }) + titleKey={'mockTitleKey'} + subtitleParams={[ 'mockSubtitleKey', 'mockVal']} + />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }) }) afterEach(() => { @@ -59,8 +60,8 @@ describe('SendHeader Component', function () { subtitle, title, } = wrapper.find(PageContainerHeader).props() - assert.equal(subtitle, 'onlySendToEtherAddress') - assert.equal(title, 'sendETH') + assert.equal(subtitle, 'mockSubtitleKeymockVal') + assert.equal(title, 'mockTitleKey') assert.equal(SendHeader.prototype.onClose.callCount, 0) onClose() assert.equal(SendHeader.prototype.onClose.callCount, 1) diff --git a/ui/app/components/send_/send-header/tests/send-header-container.test.js b/ui/app/components/send_/send-header/tests/send-header-container.test.js index abce9af6b..41a7e8a89 100644 --- a/ui/app/components/send_/send-header/tests/send-header-container.test.js +++ b/ui/app/components/send_/send-header/tests/send-header-container.test.js @@ -18,7 +18,10 @@ proxyquire('../send-header.container.js', { }, }, '../../../actions': actionSpies, - '../../../selectors': { getSelectedToken: (s) => `mockSelectedToken:${s}` }, + './send-header.selectors': { + getTitleKey: (s) => `mockTitleKey:${s}`, + getSubtitleParams: (s) => `mockSubtitleParams:${s}`, + }, }) describe('send-header container', () => { @@ -27,7 +30,8 @@ describe('send-header container', () => { it('should map the correct properties to props', () => { assert.deepEqual(mapStateToProps('mockState'), { - isToken: true, + titleKey: 'mockTitleKey:mockState', + subtitleParams: 'mockSubtitleParams:mockState', }) }) diff --git a/ui/app/components/send_/send-header/tests/send-header-selectors.test.js b/ui/app/components/send_/send-header/tests/send-header-selectors.test.js new file mode 100644 index 000000000..e0c6a3ab3 --- /dev/null +++ b/ui/app/components/send_/send-header/tests/send-header-selectors.test.js @@ -0,0 +1,47 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' + +const { + getTitleKey, + getSubtitleParams, +} = proxyquire('../send-header.selectors', { + '../send.selectors': { + getSelectedToken: (mockState) => mockState.t, + getSendEditingTransactionId: (mockState) => mockState.e, + }, +}) + +describe('send-header selectors', () => { + + describe('getTitleKey()', () => { + it('should return the correct key when getSendEditingTransactionId is truthy', () => { + assert.equal(getTitleKey({ e: 1, t: true }), 'edit') + }) + + it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => { + assert.equal(getTitleKey({ e: null, t: 'abc' }), 'sendTokens') + }) + + it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => { + assert.equal(getTitleKey({ e: null }), 'sendETH') + }) + }) + + describe('getSubtitleParams()', () => { + it('should return the correct params when getSendEditingTransactionId is truthy', () => { + assert.deepEqual(getSubtitleParams({ e: 1, t: true }), [ 'editingTransaction' ]) + }) + + it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => { + assert.deepEqual( + getSubtitleParams({ e: null, t: { symbol: 'ABC' } }), + [ 'onlySendTokensToAccountAddress', [ 'ABC' ] ] + ) + }) + + it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => { + assert.deepEqual(getSubtitleParams({ e: null }), [ 'onlySendToEtherAddress' ]) + }) + }) + +}) -- cgit