From 2cfdc95eebc3e0a878017090f22e5136cff709a6 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Wed, 19 Sep 2018 14:30:52 -0700
Subject: Add unit tests

---
 .../cancel-transaction-gas-fee.component.js        |  7 +--
 .../cancel-transaction-gas-fee.component.test.js   | 27 +++++++++++
 .../cancel-transaction.component.js                |  7 ++-
 .../tests/cancel-transaction.component.test.js     | 56 ++++++++++++++++++++++
 4 files changed, 88 insertions(+), 9 deletions(-)
 create mode 100644 ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
 create mode 100644 ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js

(limited to 'ui/app/components/modals/cancel-transaction')

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)
+  })
+})
-- 
cgit