Fix merge conflicts from uat-next

6 files changed, 281 insertions, 58 deletions

diff --git a/test/integration/lib/first-time.js b/test/integration/lib/first-time.js
index e59897713..06325ab98 100644
--- a/test/integration/lib/first-time.js
+++ b/test/integration/lib/first-time.js
@@ -39,9 +39,8 @@ async function runFirstTimeUsageTest(assert, done) {
   await timeout()
 
   // Scroll through terms
-  const title = app.find('h1').text()
-  // TODO Find where Metamask is getting added twice in the title
-  assert.equal(title, 'MetaMaskMetaMask', 'title screen')
+  const title = app.find('h1')[1]
+  assert.equal(title.textContent, 'MetaMask', 'title screen')
 
   // enter password
   const pwBox = app.find('#password-box')[0]
@@ -67,19 +66,19 @@ async function runFirstTimeUsageTest(assert, done) {
 
   await timeout(1000)
 
-  const detail = app.find('.wallet-view')[0]
+  const detail = app.find('.account-detail-section')[0]
   assert.ok(detail, 'Account detail section loaded.')
 
-  await timeout(1000)
-
-  const menu = app.find('.account-menu__icon')[0]
-  menu.click()
+  const sandwich = app.find('.sandwich-expando')[0]
+  sandwich.click()
 
-  await timeout(1000)
+  await timeout()
 
-  const lock = app.find('.account-menu__logout-button')[0]
-  assert.ok(lock, 'Lock menu item found')
-  lock.click()
+  const menu = app.find('.menu-droppo')[0]
+  const children = menu.children
+  const logout = children[2]
+  assert.ok(logout, 'Lock menu item found')
+  logout.click()
 
   await timeout(1000)
 
@@ -91,30 +90,36 @@ async function runFirstTimeUsageTest(assert, done) {
 
   await timeout(1000)
 
-  const detail2 = app.find('.wallet-view')[0]
+  const detail2 = app.find('.account-detail-section')[0]
   assert.ok(detail2, 'Account detail section loaded again.')
 
   await timeout()
 
   // open account settings dropdown
-  const qrButton = app.find('.wallet-view__details-button')[0]
+  const qrButton = app.find('.fa.fa-ellipsis-h')[0]
   qrButton.click()
 
   await timeout(1000)
 
-  const qrHeader = app.find('.editable-label__value')[0]
-  const qrContainer = app.find('.qr-wrapper')[0]
+  // qr code item
+  const qrButton2 = app.find('.dropdown-menu-item')[1]
+  qrButton2.click()
+
+  await timeout(1000)
+
+  const qrHeader = app.find('.qr-header')[0]
+  const qrContainer = app.find('#qr-container')[0]
   assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
   assert.ok(qrContainer, 'QR Container found')
 
   await timeout()
 
-  const networkMenu = app.find('.network-component')[0]
+  const networkMenu = app.find('.network-indicator')[0]
   networkMenu.click()
 
   await timeout()
 
-  const networkMenu2 = app.find('.menu-droppo')[0]
+  const networkMenu2 = app.find('.network-indicator')[0]
   const children2 = networkMenu2.children
   children2.length[3]
   assert.ok(children2, 'All network options present')
diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js
new file mode 100644
index 000000000..99571d0e8
--- /dev/null
+++ b/test/integration/lib/send-new-ui.js
@@ -0,0 +1,229 @@
+const reactTriggerChange = require('react-trigger-change')
+
+const PASSWORD = 'password123'
+
+QUnit.module('new ui send flow')
+
+QUnit.test('successful send flow', (assert) => {
+  const done = assert.async()
+  runSendFlowTest(assert).then(done).catch((err) => {
+    assert.notOk(err, `Error was thrown: ${err.stack}`)
+    done()
+  })
+})
+
+global.ethQuery = {
+  sendTransaction: () => {},
+}
+
+async function runSendFlowTest(assert, done) {
+  console.log('*** start runSendFlowTest')
+  const selectState = $('select')
+  selectState.val('send new ui')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
+
+  const sendScreenButton = $('button.btn-clear.hero-balance-button')
+  assert.ok(sendScreenButton[1], 'send screen button present')
+  sendScreenButton[1].click()
+
+  await timeout(1000)
+
+  const sendContainer = $('.send-v2__container')
+  assert.ok(sendContainer[0], 'send container renders')
+
+  const sendHeader = $('.send-v2__send-header-icon')
+  assert.ok(sendHeader[0], 'send screen has a header icon')
+
+  const sendTitle = $('.send-v2__title')
+  assert.equal(sendTitle[0].textContent, 'Send Funds', 'Send screen title is correct')
+
+  const sendCopy = $('.send-v2__copy')
+  assert.equal(sendCopy[0].textContent, 'Only send ETH to an Ethereum address.', 'Send screen has copy')
+
+  const sendFromField = $('.send-v2__form-field')
+  assert.ok(sendFromField[0], 'send screen has a from field')
+
+  let sendFromFieldItemAddress = $('.account-list-item__account-name')
+  assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 4', 'send from field shows correct account name')
+
+  const sendFromFieldItem = $('.account-list-item')
+  sendFromFieldItem[0].click()
+
+  await timeout()
+
+  const sendFromDropdownList = $('.send-v2__from-dropdown__list')
+  assert.equal(sendFromDropdownList.children().length, 4, 'send from dropdown shows all accounts')
+  console.log(`!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! sendFromDropdownList.children()[1]`, sendFromDropdownList.children()[1]);
+  sendFromDropdownList.children()[1].click()
+
+  await timeout()
+
+  sendFromFieldItemAddress = $('.account-list-item__account-name')
+  console.log(`!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! sendFromFieldItemAddress[0]`, sendFromFieldItemAddress[0]);
+  assert.equal(sendFromFieldItemAddress[0].textContent, 'Send Account 2', 'send from field dropdown changes account name')
+
+  let sendToFieldInput = $('.send-v2__to-autocomplete__input')
+  sendToFieldInput[0].focus()
+
+  await timeout()
+
+  const sendToDropdownList = $('.send-v2__from-dropdown__list')
+  assert.equal(sendToDropdownList.children().length, 5, 'send to dropdown shows all accounts and address book accounts')
+
+  sendToDropdownList.children()[2].click()
+
+  await timeout()
+
+  const sendToAccountAddress = sendToFieldInput.val()
+  assert.equal(sendToAccountAddress, '0x2f8d4a878cfa04a6e60d46362f5644deab66572d', 'send to dropdown selects the correct address')
+
+  const sendAmountField = $('.send-v2__form-row:eq(2)')
+  sendAmountField.find('.currency-display')[0].click()
+
+  await timeout()
+
+  const sendAmountFieldInput = sendAmountField.find('input:text')
+  sendAmountFieldInput.val('5.1')
+  reactTriggerChange(sendAmountField.find('input')[0])
+
+  await timeout()
+
+  let errorMessage = $('.send-v2__error')
+  assert.equal(errorMessage[0].textContent, 'Insufficient funds.', 'send should render an insufficient fund error message')
+
+  sendAmountFieldInput.val('2.0')
+  reactTriggerChange(sendAmountFieldInput[0])
+
+  await timeout()
+  errorMessage = $('.send-v2__error')
+  assert.equal(errorMessage.length, 0, 'send should stop rendering amount error message after amount is corrected')
+
+  const sendGasField = $('.send-v2__gas-fee-display')
+  assert.equal(
+    sendGasField.find('.currency-display__input-wrapper > input').val(),
+    '0.000198',
+    'send gas field should show estimated gas total'
+  )
+  assert.equal(
+    sendGasField.find('.currency-display__converted-value')[0].textContent,
+    '0.24 USD',
+    'send gas field should show estimated gas total converted to USD'
+  )
+
+  const sendGasOpenCustomizeModalButton = $('.send-v2__sliders-icon-container'
+  )
+  sendGasOpenCustomizeModalButton[0].click()
+
+  await timeout(1000)
+
+  const customizeGasModal = $('.send-v2__customize-gas')
+  assert.ok(customizeGasModal[0], 'should render the customize gas modal')
+  
+  const customizeGasPriceInput = $('.send-v2__gas-modal-card').first().find('input')
+  customizeGasPriceInput.val(50)
+  reactTriggerChange(customizeGasPriceInput[0])
+  const customizeGasLimitInput = $('.send-v2__gas-modal-card').last().find('input')
+  customizeGasLimitInput.val(60000)
+  reactTriggerChange(customizeGasLimitInput[0])
+
+  await timeout()
+
+  const customizeGasSaveButton = $('.send-v2__customize-gas__save')
+  customizeGasSaveButton[0].click()
+
+  await timeout()
+
+  assert.equal(
+    sendGasField.find('.currency-display__input-wrapper > input').val(),
+    '0.003',
+    'send gas field should show customized gas total'
+  )
+  assert.equal(
+    sendGasField.find('.currency-display__converted-value')[0].textContent,
+    '3.60 USD',
+    'send gas field should show customized gas total converted to USD'
+  )
+
+  const sendButton = $('.send-v2__next-btn')
+  sendButton[0].click()
+
+  await timeout(2000)
+
+  selectState.val('send edit')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
+
+  const confirmFromName = $('.confirm-screen-account-name').first()
+  assert.equal(confirmFromName[0].textContent, 'Send Account 2', 'confirm screen should show correct from name')
+
+  const confirmToName = $('.confirm-screen-account-name').last()
+  assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name')
+
+  const confirmScreenRows = $('.confirm-screen-rows')
+  const confirmScreenGas = confirmScreenRows.find('.confirm-screen-row-info')[2]
+  assert.equal(confirmScreenGas.textContent, '3.6 USD', 'confirm screen should show correct gas')
+  const confirmScreenTotal = confirmScreenRows.find('.confirm-screen-row-info')[3]
+  assert.equal(confirmScreenTotal.textContent, '2405.36 USD', 'confirm screen should show correct total')
+
+  const confirmScreenBackButton = $('.confirm-screen-back-button')
+  confirmScreenBackButton[0].click()
+
+  await timeout(1000)
+
+  const sendFromFieldItemInEdit = $('.account-list-item')
+  sendFromFieldItemInEdit[0].click()
+
+  await timeout()
+
+  const sendFromDropdownListInEdit = $('.send-v2__from-dropdown__list')
+  sendFromDropdownListInEdit.children()[2].click()
+
+  await timeout()
+
+  const sendToFieldInputInEdit = $('.send-v2__to-autocomplete__input')
+  sendToFieldInputInEdit[0].focus()
+  sendToFieldInputInEdit.val('0xd85a4b6a394794842887b8284293d69163007bbb')
+
+  await timeout()
+
+  const sendAmountFieldInEdit = $('.send-v2__form-row:eq(2)')
+  sendAmountFieldInEdit.find('.currency-display')[0].click()
+
+  await timeout()
+
+  const sendAmountFieldInputInEdit = sendAmountFieldInEdit.find('input:text')
+  sendAmountFieldInputInEdit.val('1.0')
+  reactTriggerChange(sendAmountFieldInputInEdit[0])
+
+  await timeout()
+
+  const sendButtonInEdit = $('.send-v2__next-btn')
+  sendButtonInEdit[0].click()
+
+  await timeout()
+
+  // TODO: Need a way to mock background so that we can test correct transition from editing to confirm
+  selectState.val('confirm new ui')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
+  const confirmScreenConfirmButton = $('.confirm-screen-confirm-button')
+  console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]);
+  confirmScreenConfirmButton[0].click()
+
+  await timeout(2000)
+
+  const txView = $('.tx-view')
+  console.log(`++++++++++++++++++++++++++++++++ txView[0]`, txView[0]);
+
+  assert.ok(txView[0], 'Should return to the account details screen after confirming')
+}
+
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time || 1500)
+  })
+}
\ No newline at end of file
diff --git a/test/stub/provider.js b/test/stub/provider.js
index 85e1da707..e77db4e28 100644
--- a/test/stub/provider.js
+++ b/test/stub/provider.js
@@ -1,12 +1,12 @@
 const JsonRpcEngine = require('json-rpc-engine')
 const scaffoldMiddleware = require('eth-json-rpc-middleware/scaffold')
+const TestBlockchain = require('eth-block-tracker/test/util/testBlockMiddleware')
 
 module.exports = {
   createEngineForTestData,
   providerFromEngine,
   scaffoldMiddleware,
-  createEthJsQueryStub,
-  createStubedProvider,
+  createTestProviderTools,
 }
 
 
@@ -19,20 +19,13 @@ function providerFromEngine (engine) {
   return provider
 }
 
-function createEthJsQueryStub (stubProvider) {
-  return new Proxy({}, {
-    get: (obj, method) => {
-      return (...params) => {
-        return new Promise((resolve, reject) => {
-          stubProvider.sendAsync({ method: `eth_${method}`, params }, (err, ress) => resolve(ress.result))
-        })
-      }
-    },
-  })
-}
-
-function createStubedProvider (resultStub) {
+function createTestProviderTools (opts = {}) {
   const engine = createEngineForTestData()
-  engine.push(scaffoldMiddleware(resultStub))
-  return providerFromEngine(engine)
-}
\ No newline at end of file
+  const testBlockchain = new TestBlockchain()
+  // handle provided hooks
+  engine.push(scaffoldMiddleware(opts.scaffold || {}))
+  // handle block tracker methods
+  engine.push(testBlockchain.createMiddleware())
+  const provider = providerFromEngine(engine)
+  return { provider, engine, testBlockchain }
+}
diff --git a/test/unit/pending-tx-test.js b/test/unit/pending-tx-test.js
index 64547a505..f0b4e3bfc 100644
--- a/test/unit/pending-tx-test.js
+++ b/test/unit/pending-tx-test.js
@@ -3,7 +3,7 @@ const ethUtil = require('ethereumjs-util')
 const EthTx = require('ethereumjs-tx')
 const ObservableStore = require('obs-store')
 const clone = require('clone')
-const { createStubedProvider } = require('../stub/provider')
+const { createTestProviderTools } = require('../stub/provider')
 const PendingTransactionTracker = require('../../app/scripts/lib/pending-tx-tracker')
 const MockTxGen = require('../lib/mock-tx-gen')
 const sinon = require('sinon')
@@ -40,7 +40,7 @@ describe('PendingTransactionTracker', function () {
       txParams: { from: '0x1678a085c290ebd122dc42cba69373b5953b831d'},
     }
     providerResultStub = {}
-    provider = createStubedProvider(providerResultStub)
+    provider = createTestProviderTools({ scaffold: providerResultStub }).provider
 
     pendingTxTracker = new PendingTransactionTracker({
       provider,
diff --git a/test/unit/tx-controller-test.js b/test/unit/tx-controller-test.js
index 36f3e1c68..cc99afee4 100644
--- a/test/unit/tx-controller-test.js
+++ b/test/unit/tx-controller-test.js
@@ -1,11 +1,12 @@
 const assert = require('assert')
 const ethUtil = require('ethereumjs-util')
 const EthTx = require('ethereumjs-tx')
+const EthjsQuery = require('ethjs-query')
 const ObservableStore = require('obs-store')
 const sinon = require('sinon')
 const TransactionController = require('../../app/scripts/controllers/transactions')
 const TxGasUtils = require('../../app/scripts/lib/tx-gas-utils')
-const { createStubedProvider, createEthJsQueryStub } = require('../stub/provider')
+const { createTestProviderTools } = require('../stub/provider')
 
 const noop = () => true
 const currentNetworkId = 42
@@ -14,11 +15,18 @@ const privKey = new Buffer('8718b9618a37d1fc78c436511fc6df3c8258d3250635bba617f3
 
 
 describe('Transaction Controller', function () {
-  let txController, provider, providerResultStub
+  let txController, provider, providerResultStub, testBlockchain
 
   beforeEach(function () {
-    providerResultStub = {}
-    provider = createStubedProvider(providerResultStub)
+    providerResultStub = {
+      // 1 gwei
+      eth_gasPrice: '0x0de0b6b3a7640000',
+      // by default, all accounts are external accounts (not contracts)
+      eth_getCode: '0x',
+    }
+    const providerTools = createTestProviderTools({ scaffold: providerResultStub })
+    provider = providerTools.provider
+    testBlockchain = providerTools.testBlockchain
 
     txController = new TransactionController({
       provider,
@@ -30,10 +38,7 @@ describe('Transaction Controller', function () {
         resolve()
       }),
     })
-    txController.query = createEthJsQueryStub(provider)
-    txController.txGasUtil.query = createEthJsQueryStub(provider)
     txController.nonceTracker.getNonceLock = () => Promise.resolve({ nextNonce: 0, releaseLock: noop })
-    txController.txProviderUtils = new TxGasUtils(txController.provider)
   })
 
   describe('#getState', function () {
@@ -155,15 +160,6 @@ describe('Transaction Controller', function () {
   })
 
   describe('#addUnapprovedTransaction', function () {
-    let addTxDefaults
-    beforeEach(() => {
-      addTxDefaults = txController.addTxDefaults
-      txController.addTxDefaults = function addTxDefaultsStub () { return Promise.resolve() }
-
-    })
-    afterEach(() => {
-      txController.addTxDefaults = addTxDefaults
-    })
 
     it('should add an unapproved transaction and return a valid txMeta', function (done) {
       txController.addUnapprovedTransaction({})
@@ -219,7 +215,7 @@ describe('Transaction Controller', function () {
       var sample = {
         value: '0x01',
       }
-      txController.txProviderUtils.validateTxParams(sample).then(() => {
+      txController.txGasUtil.validateTxParams(sample).then(() => {
         done()
       }).catch(done)
     })
@@ -228,7 +224,7 @@ describe('Transaction Controller', function () {
       var sample = {
         value: '-0x01',
       }
-      txController.txProviderUtils.validateTxParams(sample)
+      txController.txGasUtil.validateTxParams(sample)
       .then(() => done('expected to thrown on negativity values but didn\'t'))
       .catch((err) => {
         assert.ok(err, 'error')
diff --git a/test/unit/tx-gas-util-test.js b/test/unit/tx-gas-util-test.js
index ccef31359..d9a12d1c3 100644
--- a/test/unit/tx-gas-util-test.js
+++ b/test/unit/tx-gas-util-test.js
@@ -1,12 +1,12 @@
 const assert = require('assert')
 const TxGasUtils = require('../../app/scripts/lib/tx-gas-utils')
-const { createStubedProvider } = require('../stub/provider')
+const { createTestProviderTools } = require('../stub/provider')
 
 describe('Tx Gas Util', function () {
   let txGasUtil, provider, providerResultStub
   beforeEach(function () {
     providerResultStub = {}
-    provider = createStubedProvider(providerResultStub)
+    provider = createTestProviderTools({ scaffold: providerResultStub }).provider
     txGasUtil = new TxGasUtils({
       provider,
     })