From e712336189e1a0a453ea30dbb58abbc3c57db8f8 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 May 2018 14:39:31 -0230 Subject: [PATCH] Send refactor: fix error handling and form disabling in send form. --- .../send-footer/send-footer.component.js | 4 +-- .../send-footer/send-footer.container.js | 4 ++- .../send-footer/send-footer.selectors.js | 3 +- .../tests/send-footer-component.test.js | 6 ++++ .../tests/send-footer-container.test.js | 3 +- .../tests/send-footer-selectors.test.js | 24 +++++++++++++ ui/app/components/send_/send.selectors.js | 6 ---- .../send_/tests/send-selectors.test.js | 34 ------------------- 8 files changed, 37 insertions(+), 47 deletions(-) create mode 100644 ui/app/components/send_/send-footer/tests/send-footer-selectors.test.js diff --git a/ui/app/components/send_/send-footer/send-footer.component.js b/ui/app/components/send_/send-footer/send-footer.component.js index 7ff44c9d5..6471ae1a3 100644 --- a/ui/app/components/send_/send-footer/send-footer.component.js +++ b/ui/app/components/send_/send-footer/send-footer.component.js @@ -77,9 +77,9 @@ export default class SendFooter extends Component { } formShouldBeDisabled () { - const { inError, selectedToken, tokenBalance, gasTotal } = this.props + const { inError, selectedToken, tokenBalance, gasTotal, to } = this.props const missingTokenBalance = selectedToken && !tokenBalance - return inError || !gasTotal || missingTokenBalance + return inError || !gasTotal || missingTokenBalance || !to } render () { diff --git a/ui/app/components/send_/send-footer/send-footer.container.js b/ui/app/components/send_/send-footer/send-footer.container.js index 64e4b4bd3..260ff40bc 100644 --- a/ui/app/components/send_/send-footer/send-footer.container.js +++ b/ui/app/components/send_/send-footer/send-footer.container.js @@ -20,8 +20,10 @@ import { getSendToAccounts, getTokenBalance, getUnapprovedTxs, - isSendFormInError, } from '../send.selectors' +import { + isSendFormInError, +} from './send-footer.selectors' import { addressIsNew, constructTxParams, diff --git a/ui/app/components/send_/send-footer/send-footer.selectors.js b/ui/app/components/send_/send-footer/send-footer.selectors.js index 15a053ae0..e20addfdc 100644 --- a/ui/app/components/send_/send-footer/send-footer.selectors.js +++ b/ui/app/components/send_/send-footer/send-footer.selectors.js @@ -7,6 +7,5 @@ const selectors = { module.exports = selectors function isSendFormInError (state) { - const { amount, to } = getSendErrors(state) - return Boolean(amount || to !== null) + return Object.values(getSendErrors(state)).some(n => n) } diff --git a/ui/app/components/send_/send-footer/tests/send-footer-component.test.js b/ui/app/components/send_/send-footer/tests/send-footer-component.test.js index a74b6195c..e071fe54f 100644 --- a/ui/app/components/send_/send-footer/tests/send-footer-component.test.js +++ b/ui/app/components/send_/send-footer/tests/send-footer-component.test.js @@ -86,6 +86,12 @@ describe('SendFooter Component', function () { gasTotal: false, expectedResult: true, }, + 'should return true if to is truthy': { + to: '0xsomevalidAddress', + inError: false, + gasTotal: false, + expectedResult: true, + }, 'should return true if selectedToken is truthy and tokenBalance is falsy': { selectedToken: true, tokenBalance: null, diff --git a/ui/app/components/send_/send-footer/tests/send-footer-container.test.js b/ui/app/components/send_/send-footer/tests/send-footer-container.test.js index 9a616777e..39d6a7686 100644 --- a/ui/app/components/send_/send-footer/tests/send-footer-container.test.js +++ b/ui/app/components/send_/send-footer/tests/send-footer-container.test.js @@ -39,9 +39,8 @@ proxyquire('../send-footer.container.js', { getSendToAccounts: (s) => `mockToAccounts:${s}`, getTokenBalance: (s) => `mockTokenBalance:${s}`, getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`, - isSendFormInError: (s) => `mockInError:${s}`, }, - './send-footer.selectors': { isSendFormInError: () => {} }, + './send-footer.selectors': { isSendFormInError: (s) => `mockInError:${s}` }, './send-footer.utils': utilsStubs, }) diff --git a/ui/app/components/send_/send-footer/tests/send-footer-selectors.test.js b/ui/app/components/send_/send-footer/tests/send-footer-selectors.test.js new file mode 100644 index 000000000..8de032f57 --- /dev/null +++ b/ui/app/components/send_/send-footer/tests/send-footer-selectors.test.js @@ -0,0 +1,24 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' + +const { + isSendFormInError, +} = proxyquire('../send-footer.selectors', { + '../send.selectors': { + getSendErrors: (mockState) => mockState.errors, + }, +}) + +describe('send-footer selectors', () => { + + describe('getTitleKey()', () => { + it('should return true if any of the values of the object returned by getSendErrors are truthy', () => { + assert.equal(isSendFormInError({ errors: { a: 'abc', b: false} }), true) + }) + + it('should return false if all of the values of the object returned by getSendErrors are falsy', () => { + assert.equal(isSendFormInError({ errors: { a: false, b: null} }), false) + }) + }) + +}) diff --git a/ui/app/components/send_/send.selectors.js b/ui/app/components/send_/send.selectors.js index 476e77cac..c5ae1ab7f 100644 --- a/ui/app/components/send_/send.selectors.js +++ b/ui/app/components/send_/send.selectors.js @@ -39,7 +39,6 @@ const selectors = { getTokenBalance, getTokenExchangeRate, getUnapprovedTxs, - isSendFormInError, transactionsSelector, } @@ -251,11 +250,6 @@ function getUnapprovedTxs (state) { return state.metamask.unapprovedTxs } -function isSendFormInError (state) { - const { amount, to } = getSendErrors(state) - return Boolean(amount || to !== null) -} - function transactionsSelector (state) { const { network, selectedTokenAddress } = state.metamask const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs) diff --git a/ui/app/components/send_/tests/send-selectors.test.js b/ui/app/components/send_/tests/send-selectors.test.js index 9dc207ead..977fe2a47 100644 --- a/ui/app/components/send_/tests/send-selectors.test.js +++ b/ui/app/components/send_/tests/send-selectors.test.js @@ -36,7 +36,6 @@ const { getTokenBalance, getTokenExchangeRate, getUnapprovedTxs, - isSendFormInError, transactionsSelector, } = selectors import mockState from './send-selectors-test-data' @@ -546,39 +545,6 @@ describe('send selectors', () => { }) }) - describe('isSendFormInError()', () => { - it('should return true if amount or to errors are truthy', () => { - const editedMockState1 = { - send: Object.assign({}, mockState.send, { - errors: { amount: true }, - }), - } - assert.deepEqual( - isSendFormInError(editedMockState1), - true - ) - const editedMockState2 = { - send: Object.assign({}, mockState.send, { - errors: { to: true }, - }), - } - assert.deepEqual( - isSendFormInError(editedMockState2), - true - ) - }) - - it('should return false if amount is falsy and to is null', () => { - const editedMockState = { - send: Object.assign({}, mockState.send, { errors: { amount: false, to: null } }), - } - assert.deepEqual( - isSendFormInError(editedMockState), - false - ) - }) - }) - describe('transactionsSelector()', () => { it('should return the selected addresses selected token transactions', () => { assert.deepEqual(