Merge branch 'master' into i3076-UseStorageLocalInstead

5 files changed, 464 insertions, 21 deletions

diff --git a/test/integration/lib/add-token.js b/test/integration/lib/add-token.js
new file mode 100644
index 000000000..dd4251cc4
--- /dev/null
+++ b/test/integration/lib/add-token.js
@@ -0,0 +1,153 @@
+const reactTriggerChange = require('react-trigger-change')
+
+QUnit.module('Add token flow')
+
+QUnit.test('successful add token flow', (assert) => {
+  const done = assert.async()
+  runAddTokenFlowTest(assert)
+    .then(done)
+    .catch(err => {
+      assert.notOk(err, `Error was thrown: ${err.stack}`)
+      done()
+    })
+})
+
+async function runAddTokenFlowTest (assert, done) {
+  const selectState = $('select')
+  selectState.val('add token')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
+
+  // Check that no tokens have been added
+  assert.ok($('.token-list-item').length === 0, 'no tokens added')
+
+  // Go to Add Token screen
+  let addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
+  assert.ok(addTokenButton[0], 'add token button present')
+  addTokenButton[0].click()
+
+  await timeout(1000)
+
+  // Verify Add Token screen
+  let addTokenWrapper = $('.add-token__wrapper')
+  assert.ok(addTokenWrapper[0], 'add token wrapper renders')
+
+  let addTokenTitle = $('.add-token__title')
+  assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
+
+  // Cancel Add Token
+  const cancelAddTokenButton = $('button.btn-cancel.add-token__button')
+  assert.ok(cancelAddTokenButton[0], 'cancel add token button present')
+  cancelAddTokenButton.click()
+
+  await timeout(1000)
+
+  assert.ok($('.wallet-view')[0], 'cancelled and returned to account detail wallet view')
+
+  // Return to Add Token Screen
+  addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
+  assert.ok(addTokenButton[0], 'add token button present')
+  addTokenButton[0].click()
+
+  await timeout(1000)
+
+  // Verify Add Token Screen
+  addTokenWrapper = $('.add-token__wrapper')
+  addTokenTitle = $('.add-token__title')
+  assert.ok(addTokenWrapper[0], 'add token wrapper renders')
+  assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct')
+
+  // Search for token
+  const searchInput = $('input.add-token__input')
+  searchInput.val('a')
+  reactTriggerChange(searchInput[0])
+
+  await timeout()
+
+  // Click token to add
+  const tokenWrapper = $('div.add-token__token-wrapper')
+  assert.ok(tokenWrapper[0], 'token found')
+  const tokenImageProp = tokenWrapper.find('.add-token__token-icon').css('background-image')
+  const tokenImageUrl = tokenImageProp.slice(5, -2)
+  tokenWrapper[0].click()
+
+  await timeout()
+
+  // Click Next button
+  let nextButton = $('button.btn-clear.add-token__button')
+  assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
+  nextButton[0].click()
+
+  await timeout()
+
+  // Confirm Add token
+  assert.equal(
+    $('.add-token__description')[0].textContent,
+    'Would you like to add these tokens?',
+    'confirm add token rendered'
+  )
+  assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found')
+  $('button.btn-clear.add-token__button')[0].click()
+
+  await timeout(2000)
+
+  // Verify added token image
+  let heroBalance = $('.hero-balance')
+  assert.ok(heroBalance, 'rendered hero balance')
+  assert.ok(tokenImageUrl.indexOf(heroBalance.find('img').attr('src')) > -1, 'token added')
+
+  // Return to Add Token Screen
+  addTokenButton = $('button.btn-clear.wallet-view__add-token-button')
+  assert.ok(addTokenButton[0], 'add token button present')
+  addTokenButton[0].click()
+
+  await timeout(1000)
+
+  const addCustom = $('.add-token__add-custom')
+  assert.ok(addCustom[0], 'add custom token button present')
+  addCustom[0].click()
+
+  await timeout()
+
+  // Input token contract address
+  const customInput = $('input.add-token__add-custom-input')
+  customInput.val('0x177af043D3A1Aed7cc5f2397C70248Fc6cDC056c')
+  reactTriggerChange(customInput[0])
+
+  await timeout(1000)
+
+  // Click Next button
+  nextButton = $('button.btn-clear.add-token__button')
+  assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
+  nextButton[0].click()
+
+  await timeout(1000)
+
+  // Verify symbol length error since contract address won't return symbol
+  const errorMessage = $('.add-token__add-custom-error-message')
+  assert.ok(errorMessage[0], 'error rendered')
+  $('button.btn-cancel.add-token__button')[0].click()
+
+  await timeout(2000)
+
+  // // Confirm Add token
+  // assert.equal(
+  //   $('.add-token__description')[0].textContent,
+  //   'Would you like to add these tokens?',
+  //   'confirm add token rendered'
+  // )
+  // assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found')
+  // $('button.btn-clear.add-token__button')[0].click()
+
+  // // Verify added token image
+  // heroBalance = $('.hero-balance')
+  // assert.ok(heroBalance, 'rendered hero balance')
+  // assert.ok(heroBalance.find('.identicon')[0], 'token added')
+}
+
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time || 1500)
+  })
+}
diff --git a/test/integration/lib/confirm-sig-requests.js b/test/integration/lib/confirm-sig-requests.js
new file mode 100644
index 000000000..e49424c37
--- /dev/null
+++ b/test/integration/lib/confirm-sig-requests.js
@@ -0,0 +1,67 @@
+const reactTriggerChange = require('react-trigger-change')
+
+const PASSWORD = 'password123'
+
+QUnit.module('confirm sig requests')
+
+QUnit.test('successful confirmation of sig requests', (assert) => {
+  const done = assert.async()
+  runConfirmSigRequestsTest(assert).then(done).catch((err) => {
+    assert.notOk(err, `Error was thrown: ${err.stack}`)
+    done()
+  })
+})
+
+async function runConfirmSigRequestsTest(assert, done) {
+  let selectState = $('select')
+  selectState.val('confirm sig requests')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
+
+  let confirmSigHeadline = $('.request-signature__headline')
+  assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
+
+  let confirmSigRowValue = $('.request-signature__row-value')
+  assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/))
+
+  let confirmSigSignButton = $('.request-signature__footer__sign-button')
+  confirmSigSignButton[0].click()
+
+  await timeout(2000)
+
+  confirmSigHeadline = $('.request-signature__headline')
+  assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
+
+  let confirmSigMessage = $('.request-signature__notice')
+  assert.ok(confirmSigMessage[0].textContent.match(/^Signing\sthis\smessage/))
+
+  confirmSigRowValue = $('.request-signature__row-value')
+  assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
+
+  confirmSigSignButton = $('.request-signature__footer__sign-button')
+  confirmSigSignButton[0].click()
+
+  await timeout(2000)
+
+  confirmSigHeadline = $('.request-signature__headline')
+  assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
+
+  confirmSigRowValue = $('.request-signature__row-value')
+  assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!')
+  assert.equal(confirmSigRowValue[1].textContent, '1337')
+
+  confirmSigSignButton = $('.request-signature__footer__sign-button')
+  confirmSigSignButton[0].click()
+
+  await timeout(2000)
+
+  const txView = $('.tx-view')
+  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/integration/lib/first-time.js b/test/integration/lib/first-time.js
index 61b38897e..764eae47c 100644
--- a/test/integration/lib/first-time.js
+++ b/test/integration/lib/first-time.js
@@ -1,3 +1,4 @@
+const reactTriggerChange = require('react-trigger-change')
 const PASSWORD = 'password123'
 const runMascaraFirstTimeTest = require('./mascara-first-time')
 
@@ -16,6 +17,11 @@ async function runFirstTimeUsageTest(assert, done) {
     return runMascaraFirstTimeTest(assert, done)
   }
 
+  const selectState = $('select')
+  selectState.val('first time')
+  reactTriggerChange(selectState[0])
+
+  await timeout(2000)
   const app = $('#app-content')
 
   // recurse notices
@@ -39,8 +45,8 @@ async function runFirstTimeUsageTest(assert, done) {
   await timeout()
 
   // Scroll through terms
-  const title = app.find('h1').text()
-  assert.equal(title, 'MetaMask', 'title screen')
+  const title = app.find('h1')[0]
+  assert.equal(title.textContent, 'MetaMask', 'title screen')
 
   // enter password
   const pwBox = app.find('#password-box')[0]
@@ -76,9 +82,9 @@ async function runFirstTimeUsageTest(assert, done) {
 
   const menu = app.find('.menu-droppo')[0]
   const children = menu.children
-  const lock = children[children.length - 2]
-  assert.ok(lock, 'Lock menu item found')
-  lock.click()
+  const logout = children[2]
+  assert.ok(logout, 'Lock menu item found')
+  logout.click()
 
   await timeout(1000)
 
diff --git a/test/integration/lib/mascara-first-time.js b/test/integration/lib/mascara-first-time.js
index 5c18cd254..515c7f383 100644
--- a/test/integration/lib/mascara-first-time.js
+++ b/test/integration/lib/mascara-first-time.js
@@ -71,14 +71,12 @@ async function runFirstTimeUsageTest (assert, done) {
   app.find('.buy-ether__do-it-later').click()
   await timeout(1000)
 
-  const sandwich = app.find('.sandwich-expando')[0]
-  sandwich.click()
+  const menu = app.find('.account-menu__icon')[0]
+  menu.click()
 
   await timeout()
 
-  const menu = app.find('.menu-droppo')[0]
-  const children = menu.children
-  const lock = children[children.length - 2]
+  const lock = app.find('.account-menu__logout-button')[0]
   assert.ok(lock, 'Lock menu item found')
   lock.click()
 
@@ -92,31 +90,25 @@ async function runFirstTimeUsageTest (assert, done) {
 
   await timeout(1000)
 
-  const detail2 = app.find('.account-detail-section')[0]
+  const detail2 = app.find('.wallet-view')[0]
   assert.ok(detail2, 'Account detail section loaded again.')
 
   await timeout()
 
   // open account settings dropdown
-  const qrButton = app.find('.fa.fa-ellipsis-h')[0]
+  const qrButton = app.find('.wallet-view__details-button')[0]
   qrButton.click()
 
   await timeout(1000)
 
-  // 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]
+  const qrHeader = app.find('.editable-label__value')[0]
+  const qrContainer = app.find('.qr-wrapper')[0]
   assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
   assert.ok(qrContainer, 'QR Container found')
 
   await timeout()
 
-  const networkMenu = app.find('.network-indicator')[0]
+  const networkMenu = app.find('.network-component')[0]
   networkMenu.click()
 
   await timeout()
diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js
new file mode 100644
index 000000000..3456f2367
--- /dev/null
+++ b/test/integration/lib/send-new-ui.js
@@ -0,0 +1,225 @@
+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 sendTitle = $('.page-container__title')
+  assert.equal(sendTitle[0].textContent, 'Send ETH', 'Send screen title is correct')
+
+  const sendCopy = $('.page-container__subtitle')
+  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 = $('button.btn-clear.page-container__footer-button')
+  assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
+  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 = $('.btn-clear.page-container__footer-button')
+  assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered')
+  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