diff --git a/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-component.test.js b/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-component.test.js
index e69de29bb..16463abf3 100644
--- a/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-component.test.js
+++ b/ui/app/components/send_/send-content/send-from-row/tests/send-from-row-component.test.js
@@ -0,0 +1,125 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import SendFromRow from '../send-from-row.component.js'
+
+import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
+import FromDropdown from '../from-dropdown/from-dropdown.component'
+
+const propsMethodSpies = {
+ closeFromDropdown: sinon.spy(),
+ openFromDropdown: sinon.spy(),
+ updateSendFrom: sinon.spy(),
+ setSendTokenBalance: sinon.spy(),
+}
+
+const MOCK_EVENT = { preventDefault: () => {} }
+
+sinon.spy(SendFromRow.prototype, 'handleFromChange')
+
+describe('SendFromRow Component', function () {
+ let wrapper
+ let instance
+
+ beforeEach(() => {
+ wrapper = shallow(, { context: { t: str => str + '_t' } })
+ instance = wrapper.instance()
+ })
+
+ afterEach(() => {
+ propsMethodSpies.closeFromDropdown.resetHistory()
+ propsMethodSpies.openFromDropdown.resetHistory()
+ propsMethodSpies.updateSendFrom.resetHistory()
+ propsMethodSpies.setSendTokenBalance.resetHistory()
+ SendFromRow.prototype.handleFromChange.resetHistory()
+ })
+
+ describe('handleFromChange', () => {
+
+ it('should call updateSendFrom', () => {
+ assert.equal(propsMethodSpies.updateSendFrom.callCount, 0)
+ instance.handleFromChange('mockFrom')
+ assert.equal(propsMethodSpies.updateSendFrom.callCount, 1)
+ assert.deepEqual(
+ propsMethodSpies.updateSendFrom.getCall(0).args,
+ ['mockFrom']
+ )
+ })
+
+ it('should call tokenContract.balanceOf and setSendTokenBalance if tokenContract is defined', async () => {
+ wrapper.setProps({
+ tokenContract: {
+ balanceOf: () => new Promise((resolve) => resolve('mockUsersToken'))
+ }
+ })
+ assert.equal(propsMethodSpies.setSendTokenBalance.callCount, 0)
+ await instance.handleFromChange('mockFrom')
+ assert.equal(propsMethodSpies.setSendTokenBalance.callCount, 1)
+ assert.deepEqual(
+ propsMethodSpies.setSendTokenBalance.getCall(0).args,
+ ['mockUsersToken']
+ )
+ })
+
+ })
+
+ describe('render', () => {
+ it('should render a SendRowWrapper component', () => {
+ assert.equal(wrapper.find(SendRowWrapper).length, 1)
+ })
+
+ it('should pass the correct props to SendRowWrapper', () => {
+ const {
+ errorType,
+ label,
+ showError,
+ } = wrapper.find(SendRowWrapper).props()
+
+ assert.equal(label, 'from_t:')
+ })
+
+ it('should render an FromDropdown as a child of the SendRowWrapper', () => {
+ assert(wrapper.find(SendRowWrapper).childAt(0).is(FromDropdown))
+ })
+
+ it('should render the FromDropdown with the correct props', () => {
+ const {
+ accounts,
+ closeDropdown,
+ conversionRate,
+ dropdownOpen,
+ onSelect,
+ openDropdown,
+ selectedAccount,
+ } = wrapper.find(SendRowWrapper).childAt(0).props()
+ assert.deepEqual(accounts, ['mockAccount'])
+ assert.equal(dropdownOpen, false)
+ assert.equal(conversionRate, 15)
+ assert.deepEqual(selectedAccount, { address: 'mockAddress' })
+ assert.equal(propsMethodSpies.closeFromDropdown.callCount, 0)
+ closeDropdown()
+ assert.equal(propsMethodSpies.closeFromDropdown.callCount, 1)
+ assert.equal(propsMethodSpies.openFromDropdown.callCount, 0)
+ openDropdown()
+ assert.equal(propsMethodSpies.openFromDropdown.callCount, 1)
+ assert.equal(SendFromRow.prototype.handleFromChange.callCount, 0)
+ onSelect('mockNewFrom')
+ assert.equal(SendFromRow.prototype.handleFromChange.callCount, 1)
+ assert.deepEqual(
+ SendFromRow.prototype.handleFromChange.getCall(0).args,
+ ['mockNewFrom']
+ )
+ })
+ })
+})
diff --git a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js
index e69de29bb..a96e8c8bb 100644
--- a/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js
+++ b/ui/app/components/send_/send-content/send-gas-row/tests/send-gas-row-component.test.js
@@ -0,0 +1,69 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import SendGasRow from '../send-gas-row.component.js'
+
+import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
+import GasFeeDisplay from '../../../../send/gas-fee-display-v2'
+
+const propsMethodSpies = {
+ showCustomizeGasModal: sinon.spy(),
+}
+
+const MOCK_EVENT = { preventDefault: () => {} }
+
+describe('SendGasRow Component', function () {
+ let wrapper
+ let instance
+
+ beforeEach(() => {
+ wrapper = shallow(, { context: { t: str => str + '_t' } })
+ instance = wrapper.instance()
+ })
+
+ afterEach(() => {
+ propsMethodSpies.showCustomizeGasModal.resetHistory()
+ })
+
+ describe('render', () => {
+ it('should render a SendRowWrapper component', () => {
+ assert.equal(wrapper.find(SendRowWrapper).length, 1)
+ })
+
+ it('should pass the correct props to SendRowWrapper', () => {
+ const {
+ label,
+ } = wrapper.find(SendRowWrapper).props()
+
+ assert.equal(label, 'gasFee_t:')
+ })
+
+ it('should render a GasFeeDisplay as a child of the SendRowWrapper', () => {
+ assert(wrapper.find(SendRowWrapper).childAt(0).is(GasFeeDisplay))
+ })
+
+ it('should render the GasFeeDisplay with the correct props', () => {
+ const {
+ conversionRate,
+ convertedCurrency,
+ gasLoadingError,
+ gasTotal,
+ onClick,
+ } = wrapper.find(SendRowWrapper).childAt(0).props()
+ assert.equal(conversionRate,20)
+ assert.equal(convertedCurrency,'mockConvertedCurrency')
+ assert.equal(gasLoadingError, false)
+ assert.equal(gasTotal,'mockGasTotal')
+ assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 0)
+ onClick()
+ assert.equal(propsMethodSpies.showCustomizeGasModal.callCount, 1)
+ })
+ })
+})
diff --git a/ui/app/components/send_/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js b/ui/app/components/send_/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
index e69de29bb..30280e1d0 100644
--- a/ui/app/components/send_/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
+++ b/ui/app/components/send_/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
@@ -0,0 +1,79 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import SendRowWrapper from '../send-row-wrapper.component.js'
+
+import SendRowErrorMessage from '../send-row-error-message/send-row-error-message.container'
+
+describe('SendContent Component', function () {
+ let wrapper
+
+ beforeEach(() => {
+ wrapper = shallow(
+ Mock Form Field
+ )
+ })
+
+ describe('render', () => {
+ it('should render a div with a send-v2__form-row class', () => {
+ assert.equal(wrapper.find('div.send-v2__form-row').length, 1)
+ })
+
+ it('should render two children of the root div, with send-v2_form label and field classes', () => {
+ assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').length, 1)
+ assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').length, 1)
+ })
+
+ it('should render the label as a child of the send-v2__form-label', () => {
+ assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(0).text(), 'mockLabel')
+ })
+
+ it('should render its first child as a child of the send-v2__form-field', () => {
+ assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field')
+ })
+
+ it('should not render a SendRowErrorMessage if showError is false', () => {
+ assert.equal(wrapper.find(SendRowErrorMessage).length, 0)
+ })
+
+ it('should render a SendRowErrorMessage with and errorType props if showError is true', () => {
+ wrapper.setProps({showError: true})
+ assert.equal(wrapper.find(SendRowErrorMessage).length, 1)
+
+ const expectedSendRowErrorMessage = wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1)
+ assert(expectedSendRowErrorMessage.is(SendRowErrorMessage))
+ assert.deepEqual(
+ expectedSendRowErrorMessage.props(),
+ { errorType: 'mockErrorType' }
+ )
+ })
+
+ it('should render its second child as a child of the send-v2__form-field, if it has two children', () => {
+ wrapper = shallow(
+ Mock Custom Label Content
+ Mock Form Field
+ )
+ assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field')
+ })
+
+ it('should render its first child as the last child of the send-v2__form-label, if it has two children', () => {
+ wrapper = shallow(
+ Mock Custom Label Content
+ Mock Form Field
+ )
+ assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1).text(), 'Mock Custom Label Content')
+ })
+ })
+})
diff --git a/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js
index e69de29bb..a4084a360 100644
--- a/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js
+++ b/ui/app/components/send_/send-content/send-to-row/tests/send-to-row-component.test.js
@@ -0,0 +1,130 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import SendToRow from '../send-to-row.component.js'
+
+import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
+import EnsInput from '../../../../ens-input'
+
+const propsMethodSpies = {
+ closeToDropdown: sinon.spy(),
+ openToDropdown: sinon.spy(),
+ updateSendTo: sinon.spy(),
+ updateSendToError: sinon.spy(),
+}
+
+const MOCK_EVENT = { preventDefault: () => {} }
+
+sinon.spy(SendToRow.prototype, 'handleToChange')
+
+describe('SendToRow Component', function () {
+ let wrapper
+ let instance
+
+ beforeEach(() => {
+ wrapper = shallow(, { context: { t: str => str + '_t' } })
+ instance = wrapper.instance()
+ })
+
+ afterEach(() => {
+ propsMethodSpies.closeToDropdown.resetHistory()
+ propsMethodSpies.openToDropdown.resetHistory()
+ propsMethodSpies.updateSendTo.resetHistory()
+ propsMethodSpies.updateSendToError.resetHistory()
+ SendToRow.prototype.handleToChange.resetHistory()
+ })
+
+ describe('handleToChange', () => {
+
+ it('should call updateSendTo', () => {
+ assert.equal(propsMethodSpies.updateSendTo.callCount, 0)
+ instance.handleToChange('mockTo2', 'mockNickname')
+ assert.equal(propsMethodSpies.updateSendTo.callCount, 1)
+ assert.deepEqual(
+ propsMethodSpies.updateSendTo.getCall(0).args,
+ ['mockTo2', 'mockNickname']
+ )
+ })
+
+ it('should call updateSendToError', () => {
+ assert.equal(propsMethodSpies.updateSendToError.callCount, 0)
+ instance.handleToChange('mockTo2')
+ assert.equal(propsMethodSpies.updateSendToError.callCount, 1)
+ assert.deepEqual(
+ propsMethodSpies.updateSendToError.getCall(0).args,
+ ['mockTo2']
+ )
+ })
+
+ })
+
+ describe('render', () => {
+ it('should render a SendRowWrapper component', () => {
+ assert.equal(wrapper.find(SendRowWrapper).length, 1)
+ })
+
+ it('should pass the correct props to SendRowWrapper', () => {
+ const {
+ errorType,
+ label,
+ showError,
+ } = wrapper.find(SendRowWrapper).props()
+
+ assert.equal(errorType, 'to')
+
+ assert.equal(label, 'to_t:')
+
+ assert.equal(showError, false)
+ })
+
+ it('should render an EnsInput as a child of the SendRowWrapper', () => {
+ assert(wrapper.find(SendRowWrapper).childAt(0).is(EnsInput))
+ })
+
+ it('should render the EnsInput with the correct props', () => {
+ const {
+ accounts,
+ closeDropdown,
+ dropdownOpen,
+ inError,
+ name,
+ network,
+ onChange,
+ openDropdown,
+ placeholder,
+ to,
+ } = wrapper.find(SendRowWrapper).childAt(0).props()
+ assert.deepEqual(accounts, ['mockAccount'])
+ assert.equal(dropdownOpen, false)
+ assert.equal(inError, false)
+ assert.equal(name, 'address')
+ assert.equal(network, 'mockNetwork')
+ assert.equal(placeholder, 'recipientAddress_t')
+ assert.equal(to, 'mockTo')
+ assert.equal(propsMethodSpies.closeToDropdown.callCount, 0)
+ closeDropdown()
+ assert.equal(propsMethodSpies.closeToDropdown.callCount, 1)
+ assert.equal(propsMethodSpies.openToDropdown.callCount, 0)
+ openDropdown()
+ assert.equal(propsMethodSpies.openToDropdown.callCount, 1)
+ assert.equal(SendToRow.prototype.handleToChange.callCount, 0)
+ onChange('mockNewTo', 'mockNewNickname')
+ assert.equal(SendToRow.prototype.handleToChange.callCount, 1)
+ assert.deepEqual(
+ SendToRow.prototype.handleToChange.getCall(0).args,
+ ['mockNewTo', 'mockNewNickname']
+ )
+ })
+ })
+})