Merge pull request #4408 from MetaMask/v4.7.0rc2

Version 4.7.0 - rc2

3 files changed, 65 insertions, 42 deletions

diff --git a/test/integration/lib/add-token.js b/test/integration/lib/add-token.js
index 1840bdd39..e51c854d2 100644
--- a/test/integration/lib/add-token.js
+++ b/test/integration/lib/add-token.js
@@ -22,6 +22,11 @@ async function runAddTokenFlowTest (assert, done) {
   selectState.val('add token')
   reactTriggerChange(selectState[0])
 
+  // Used to set values on TextField input component
+  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype, 'value'
+  ).set
+
   // Check that no tokens have been added
   assert.ok($('.token-list-item').length === 0, 'no tokens added')
 
@@ -31,14 +36,14 @@ async function runAddTokenFlowTest (assert, done) {
   addTokenButton[0].click()
 
   // Verify Add Token screen
-  let addTokenWrapper = await queryAsync($, '.add-token__wrapper')
+  let addTokenWrapper = await queryAsync($, '.page-container')
   assert.ok(addTokenWrapper[0], 'add token wrapper renders')
 
-  let addTokenTitle = await queryAsync($, '.add-token__header__title')
+  let addTokenTitle = await queryAsync($, '.page-container__title')
   assert.equal(addTokenTitle[0].textContent, 'Add Tokens', 'add token title is correct')
 
   // Cancel Add Token
-  const cancelAddTokenButton = await queryAsync($, 'button.btn-secondary--lg.add-token__cancel-button')
+  const cancelAddTokenButton = await queryAsync($, 'button.btn-secondary--lg.page-container__footer-button')
   assert.ok(cancelAddTokenButton[0], 'cancel add token button present')
   cancelAddTokenButton.click()
 
@@ -50,20 +55,22 @@ async function runAddTokenFlowTest (assert, done) {
   addTokenButton[0].click()
 
   // Verify Add Token Screen
-  addTokenWrapper = await queryAsync($, '.add-token__wrapper')
-  addTokenTitle = await queryAsync($, '.add-token__header__title')
+  addTokenWrapper = await queryAsync($, '.page-container')
+  addTokenTitle = await queryAsync($, '.page-container__title')
   assert.ok(addTokenWrapper[0], 'add token wrapper renders')
   assert.equal(addTokenTitle[0].textContent, 'Add Tokens', 'add token title is correct')
 
   // Search for token
-  const searchInput = await queryAsync($, 'input.add-token__input')
-  searchInput.val('a')
-  reactTriggerChange(searchInput[0])
+  const searchInput = (await findAsync(addTokenWrapper, '#search-tokens'))[0]
+  searchInput.focus()
+  await timeout(1000)
+  nativeInputValueSetter.call(searchInput, 'a')
+  searchInput.dispatchEvent(new Event('input', { bubbles: true}))
 
   // Click token to add
-  const tokenWrapper = await queryAsync($, 'div.add-token__token-wrapper')
+  const tokenWrapper = await queryAsync($, 'div.token-list__token')
   assert.ok(tokenWrapper[0], 'token found')
-  const tokenImageProp = tokenWrapper.find('.add-token__token-icon').css('background-image')
+  const tokenImageProp = tokenWrapper.find('.token-list__token-icon').css('background-image')
   const tokenImageUrl = tokenImageProp.slice(5, -2)
   tokenWrapper[0].click()
 
@@ -73,11 +80,8 @@ async function runAddTokenFlowTest (assert, done) {
   nextButton[0].click()
 
   // Confirm Add token
-  assert.equal(
-    $('.add-token__description')[0].textContent,
-    'Token balance(s)',
-    'confirm add token rendered'
-  )
+  const confirmAddToken = await queryAsync($, '.confirm-add-token')
+  assert.ok(confirmAddToken[0], 'confirm add token rendered')
   assert.ok($('button.btn-primary--lg')[0], 'confirm add token button found')
   $('button.btn-primary--lg')[0].click()
 
@@ -91,39 +95,46 @@ async function runAddTokenFlowTest (assert, done) {
   assert.ok(addTokenButton[0], 'add token button present')
   addTokenButton[0].click()
 
-  const addTokenTabs = await queryAsync($, '.add-token__header__tabs__tab')
+  addTokenWrapper = await queryAsync($, '.page-container')
+  const addTokenTabs = await queryAsync($, '.page-container__tab')
   assert.equal(addTokenTabs.length, 2, 'expected number of tabs')
   assert.equal(addTokenTabs[1].textContent, 'Custom Token', 'Custom Token tab present')
   assert.ok(addTokenTabs[1], 'add custom token tab present')
   addTokenTabs[1].click()
+  await timeout(1000)
 
   // Input token contract address
-  const customInput = await queryAsync($, 'input.add-token__add-custom-input')
-  customInput.val('0x177af043D3A1Aed7cc5f2397C70248Fc6cDC056c')
-  reactTriggerChange(customInput[0])
+  const customInput = (await findAsync(addTokenWrapper, '#custom-address'))[0]
+  customInput.focus()
+  await timeout(1000)
+  nativeInputValueSetter.call(customInput, '0x177af043D3A1Aed7cc5f2397C70248Fc6cDC056c')
+  customInput.dispatchEvent(new Event('input', { bubbles: true}))
+
 
   // Click Next button
-  nextButton = await queryAsync($, 'button.btn-primary--lg')
-  assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
-  nextButton[0].click()
+  // nextButton = await queryAsync($, 'button.btn-primary--lg')
+  // assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
+  // nextButton[0].click()
 
-  // Verify symbol length error since contract address won't return symbol
-  const errorMessage = await queryAsync($, '.add-token__add-custom-error-message')
+  // // Verify symbol length error since contract address won't return symbol
+  const errorMessage = await queryAsync($, '#custom-symbol-helper-text')
   assert.ok(errorMessage[0], 'error rendered')
 
   $('button.btn-secondary--lg')[0].click()
 
-  // // Confirm Add token
+  // await timeout(100000)
+
+  // Confirm Add token
   // assert.equal(
-  //   $('.add-token__description')[0].textContent,
+  //   $('.page-container__subtitle')[0].textContent,
   //   'Would you like to add these tokens?',
   //   'confirm add token rendered'
   // )
   // assert.ok($('button.btn-primary--lg')[0], 'confirm add token button found')
   // $('button.btn-primary--lg')[0].click()
 
-  // // Verify added token image
-  // heroBalance = await queryAsync($, '.hero-balance')
-  // assert.ok(heroBalance, 'rendered hero balance')
-  // assert.ok(heroBalance.find('.identicon')[0], 'token added')
+  // Verify added token image
+  heroBalance = await queryAsync($, '.hero-balance')
+  assert.ok(heroBalance, 'rendered hero balance')
+  assert.ok(heroBalance.find('.identicon')[0], 'token added')
 }
diff --git a/test/integration/lib/mascara-first-time.js b/test/integration/lib/mascara-first-time.js
index 5e07ab0b4..f43a30c74 100644
--- a/test/integration/lib/mascara-first-time.js
+++ b/test/integration/lib/mascara-first-time.js
@@ -1,5 +1,4 @@
 const PASSWORD = 'password123'
-const reactTriggerChange = require('react-trigger-change')
 const {
   timeout,
   findAsync,
@@ -11,6 +10,11 @@ async function runFirstTimeUsageTest (assert, done) {
 
   const app = await queryAsync($, '#app-content')
 
+  // Used to set values on TextField input component
+  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype, 'value'
+  ).set
+
   await skipNotices(app)
 
   const welcomeButton = (await findAsync(app, '.welcome-screen__button'))[0]
@@ -21,12 +25,14 @@ async function runFirstTimeUsageTest (assert, done) {
   assert.equal(title, 'Create Password', 'create password screen')
 
   // enter password
-  const pwBox = (await findAsync(app, '.first-time-flow__input'))[0]
-  const confBox = (await findAsync(app, '.first-time-flow__input'))[1]
-  pwBox.value = PASSWORD
-  confBox.value = PASSWORD
-  reactTriggerChange(pwBox)
-  reactTriggerChange(confBox)
+  const pwBox = (await findAsync(app, '#create-password'))[0]
+  const confBox = (await findAsync(app, '#confirm-password'))[0]
+
+  nativeInputValueSetter.call(pwBox, PASSWORD)
+  pwBox.dispatchEvent(new Event('input', { bubbles: true}))
+
+  nativeInputValueSetter.call(confBox, PASSWORD)
+  confBox.dispatchEvent(new Event('input', { bubbles: true}))
 
   // Create Password
   const createButton = (await findAsync(app, 'button.first-time-flow__button'))[0]
@@ -71,10 +77,16 @@ async function runFirstTimeUsageTest (assert, done) {
   assert.ok(lock, 'Lock menu item found')
   lock.click()
 
-  const pwBox2 = (await findAsync(app, '#password-box'))[0]
-  pwBox2.value = PASSWORD
+  await timeout(1000)
+
+  const pwBox2 = (await findAsync(app, '#password'))[0]
+  pwBox2.focus()
+  await timeout(1000)
+
+  nativeInputValueSetter.call(pwBox2, PASSWORD)
+  pwBox2.dispatchEvent(new Event('input', { bubbles: true}))
 
-  const createButton2 = (await findAsync(app, 'button.primary'))[0]
+  const createButton2 = (await findAsync(app, 'button[type="submit"]'))[0]
   createButton2.click()
 
   const detail2 = (await findAsync(app, '.wallet-view'))[0]
diff --git a/test/integration/lib/tx-list-items.js b/test/integration/lib/tx-list-items.js
index 0c0c5a77f..4856b3852 100644
--- a/test/integration/lib/tx-list-items.js
+++ b/test/integration/lib/tx-list-items.js
@@ -21,7 +21,7 @@ async function runTxListItemsTest(assert, done) {
   selectState.val('tx list items')
   reactTriggerChange(selectState[0])
 
-  const metamaskLogo = await queryAsync($, '.left-menu-wrapper')
+  const metamaskLogo = await queryAsync($, '.app-header__logo-container')
   assert.ok(metamaskLogo[0], 'metamask logo present')
   metamaskLogo[0].click()
 
@@ -46,7 +46,7 @@ async function runTxListItemsTest(assert, done) {
   const failedTx = txListItems[4]
   const failedTxRenderedStatus = await findAsync($(failedTx), '.tx-list-status')
   assert.equal(failedTxRenderedStatus[0].textContent, 'Failed', 'failedTx has correct label')
-  
+
   const shapeShiftTx = txListItems[5]
   const shapeShiftTxStatus = await findAsync($(shapeShiftTx), '.flex-column div:eq(1)')
   assert.equal(shapeShiftTxStatus[0].textContent, 'No deposits received', 'shapeShiftTx has correct status')