Unit tests for send from, gas, to and wrapper row components.

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(<SendFromRow
+      closeFromDropdown={propsMethodSpies.closeFromDropdown}
+      conversionRate={15}
+      from={ { address: 'mockAddress' } }
+      fromAccounts={['mockAccount']}
+      fromDropdownOpen={false}
+      openFromDropdown={propsMethodSpies.openFromDropdown}
+      setSendTokenBalance={propsMethodSpies.setSendTokenBalance}
+      tokenContract={null}
+      updateSendFrom={propsMethodSpies.updateSendFrom}
+    />, { 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']
+      )
+    })
+  })
+})

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(<SendGasRow
+      conversionRate={20}
+      convertedCurrency={'mockConvertedCurrency'}
+      gasLoadingError={false}
+      gasTotal={'mockGasTotal'}
+      showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
+    />, { 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)
+    })
+  })
+})

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(<SendRowWrapper
+      errorType={'mockErrorType'}
+      label={'mockLabel'}
+      showError={false}
+    >
+      <span>Mock Form Field</span>
+    </SendRowWrapper>)
+  })
+
+  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(<SendRowWrapper
+      errorType={'mockErrorType'}
+      label={'mockLabel'}
+      showError={false}
+    >
+      <span>Mock Custom Label Content</span>
+      <span>Mock Form Field</span>
+    </SendRowWrapper>)
+      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(<SendRowWrapper
+      errorType={'mockErrorType'}
+      label={'mockLabel'}
+      showError={false}
+    >
+      <span>Mock Custom Label Content</span>
+      <span>Mock Form Field</span>
+    </SendRowWrapper>)
+      assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1).text(), 'Mock Custom Label Content')
+    })
+  })
+})

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(<SendToRow
+      closeToDropdown={propsMethodSpies.closeToDropdown}
+      inError={false}
+      network={'mockNetwork'}
+      openToDropdown={propsMethodSpies.openToDropdown}
+      to={'mockTo'}
+      toAccounts={['mockAccount']}
+      toDropdownOpen={false}
+      updateSendTo={propsMethodSpies.updateSendTo}
+      updateSendToError={propsMethodSpies.updateSendToError}
+    />, { 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']
+      )
+    })
+  })
+})