Fixes #3425: Better support for batch transactions (#5437)

3 files changed, 229 insertions, 5 deletions

diff --git a/test/e2e/beta/from-import-beta-ui.spec.js b/test/e2e/beta/from-import-beta-ui.spec.js
index d2c3f8958..77a61a73e 100644
--- a/test/e2e/beta/from-import-beta-ui.spec.js
+++ b/test/e2e/beta/from-import-beta-ui.spec.js
@@ -159,6 +159,7 @@ describe('Using MetaMask with an existing account', function () {
 
     it('clicks through the ToS', async () => {
       // terms of use
+      await delay(largeDelayMs)
       const canClickThrough = await driver.findElement(By.css('.tou button')).isEnabled()
       assert.equal(canClickThrough, false, 'disabled continue button')
       const bottomOfTos = await findElement(driver, By.linkText('Attributions'))
diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index 3bfa1eaf2..2b5c8ee18 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -484,6 +484,142 @@ describe('MetaMask', function () {
     })
   })
 
+  describe('Navigate transactions', () => {
+    it('adds multiple transactions', async () => {
+      await delay(regularDelayMs)
+
+      await waitUntilXWindowHandles(driver, 2)
+      const windowHandles = await driver.getAllWindowHandles()
+      const extension = windowHandles[0]
+      const dapp = windowHandles[1]
+
+      await driver.switchTo().window(dapp)
+      await delay(regularDelayMs)
+
+      const send3eth = await findElement(driver, By.xpath(`//button[contains(text(), 'Send')]`), 10000)
+      await send3eth.click()
+      await delay(regularDelayMs)
+
+      const contractDeployment = await findElement(driver, By.xpath(`//button[contains(text(), 'Deploy Contract')]`), 10000)
+      await contractDeployment.click()
+      await delay(regularDelayMs)
+
+      await send3eth.click()
+      await contractDeployment.click()
+      await delay(regularDelayMs)
+
+      await driver.switchTo().window(extension)
+      await delay(regularDelayMs)
+
+      const transactions = await findElements(driver, By.css('.transaction-list-item'))
+      await transactions[3].click()
+      await delay(regularDelayMs)
+    })
+
+    it('navigates the transactions', async () => {
+      let navigateTxButtons = await findElements(driver, By.css('.confirm-page-container-navigation__arrow'))
+      assert.equal(navigateTxButtons.length, 4, 'navigation button present')
+
+      await navigateTxButtons[2].click()
+      let navigationElement = await findElement(driver, By.css('.confirm-page-container-navigation'))
+      let navigationText = await navigationElement.getText()
+      assert.equal(navigationText.includes('2'), true, 'changed transaction right')
+
+      navigateTxButtons = await findElements(driver, By.css('.confirm-page-container-navigation__arrow'))
+      await navigateTxButtons[2].click()
+      navigationElement = await findElement(driver, By.css('.confirm-page-container-navigation'))
+      navigationText = await navigationElement.getText()
+      assert.equal(navigationText.includes('3'), true, 'changed transaction right')
+
+      navigateTxButtons = await findElements(driver, By.css('.confirm-page-container-navigation__arrow'))
+      await navigateTxButtons[2].click()
+      navigationElement = await findElement(driver, By.css('.confirm-page-container-navigation'))
+      navigationText = await navigationElement.getText()
+      assert.equal(navigationText.includes('4'), true, 'changed transaction right')
+
+      navigateTxButtons = await findElements(driver, By.css('.confirm-page-container-navigation__arrow'))
+      await navigateTxButtons[0].click()
+      navigationElement = await findElement(driver, By.css('.confirm-page-container-navigation'))
+      navigationText = await navigationElement.getText()
+      assert.equal(navigationText.includes('1'), true, 'navigate to first transaction')
+
+      navigateTxButtons = await findElements(driver, By.css('.confirm-page-container-navigation__arrow'))
+      await navigateTxButtons[3].click()
+      navigationElement = await findElement(driver, By.css('.confirm-page-container-navigation'))
+      navigationText = await navigationElement.getText()
+      assert.equal(navigationText.split('4').length, 3, 'navigate to last transaction')
+
+      navigateTxButtons = await findElements(driver, By.css('.confirm-page-container-navigation__arrow'))
+      await navigateTxButtons[1].click()
+      navigationElement = await findElement(driver, By.css('.confirm-page-container-navigation'))
+      navigationText = await navigationElement.getText()
+      assert.equal(navigationText.includes('3'), true, 'changed transaction left')
+
+      navigateTxButtons = await findElements(driver, By.css('.confirm-page-container-navigation__arrow'))
+      await navigateTxButtons[1].click()
+      navigationElement = await findElement(driver, By.css('.confirm-page-container-navigation'))
+      navigationText = await navigationElement.getText()
+      assert.equal(navigationText.includes('2'), true, 'changed transaction left')
+    })
+
+    it('adds a transaction while confirm screen is in focus', async () => {
+      let navigationElement = await findElement(driver, By.css('.confirm-page-container-navigation'))
+      let navigationText = await navigationElement.getText()
+      assert.equal(navigationText.includes('2'), true, 'second transaction in focus')
+
+      const windowHandles = await driver.getAllWindowHandles()
+      const extension = windowHandles[0]
+      const dapp = windowHandles[1]
+
+      await driver.switchTo().window(dapp)
+      await delay(regularDelayMs)
+
+      const send3eth = await findElement(driver, By.xpath(`//button[contains(text(), 'Send')]`), 10000)
+      await send3eth.click()
+      await delay(regularDelayMs)
+
+      await driver.switchTo().window(extension)
+      await delay(regularDelayMs)
+
+      navigationElement = await findElement(driver, By.css('.confirm-page-container-navigation'))
+      navigationText = await navigationElement.getText()
+      assert.equal(navigationText.includes('3'), true, 'correct transaction in focus')
+    })
+
+    it('confirms a transaction', async () => {
+      const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`), 10000)
+      await confirmButton.click()
+      await delay(regularDelayMs)
+
+      const navigationElement = await findElement(driver, By.css('.confirm-page-container-navigation'))
+      const navigationText = await navigationElement.getText()
+      assert.equal(navigationText.includes('4'), true, 'transaction confirmed')
+    })
+
+    it('rejects a transaction', async () => {
+      const rejectButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Reject')]`), 10000)
+      await rejectButton.click()
+      await delay(regularDelayMs)
+
+      const navigationElement = await findElement(driver, By.css('.confirm-page-container-navigation'))
+      const navigationText = await navigationElement.getText()
+      assert.equal(navigationText.includes('3'), true, 'transaction rejected')
+    })
+
+    it('rejects the rest of the transactions', async () => {
+      const rejectAllButton = await findElement(driver, By.xpath(`//a[contains(text(), 'Reject 3')]`), 10000)
+      await rejectAllButton.click()
+      await delay(regularDelayMs)
+
+      const rejectButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Reject All')]`), 10000)
+      await rejectButton.click()
+      await delay(largeDelayMs * 2)
+
+      const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
+      assert.equal(confirmedTxes.length, 3, '3 transactions present')
+    })
+  })
+
   describe('Deploy contract and call contract methods', () => {
     let extension
     let dapp
@@ -531,7 +667,7 @@ describe('MetaMask', function () {
 
       driver.wait(async () => {
         const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
-        return confirmedTxes.length === 3
+        return confirmedTxes.length === 4
       }, 10000)
 
       const txAction = await findElements(driver, By.css('.transaction-list-item__action'))
@@ -588,7 +724,7 @@ describe('MetaMask', function () {
 
       driver.wait(async () => {
         const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
-        return confirmedTxes.length === 4
+        return confirmedTxes.length === 5
       }, 10000)
 
       const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
@@ -620,7 +756,7 @@ describe('MetaMask', function () {
 
       driver.wait(async () => {
         const confirmedTxes = await findElements(driver, By.css('.transaction-list__completed-transactions .transaction-list-item'))
-        return confirmedTxes.length === 5
+        return confirmedTxes.length === 6
       }, 10000)
 
       const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
@@ -634,9 +770,9 @@ describe('MetaMask', function () {
       const balance = await findElement(driver, By.css('.transaction-view-balance__primary-balance'))
       await delay(regularDelayMs)
       if (process.env.SELENIUM_BROWSER !== 'firefox') {
-        await driver.wait(until.elementTextMatches(balance, /^92.*\s*ETH.*$/), 10000)
+        await driver.wait(until.elementTextMatches(balance, /^89.*\s*ETH.*$/), 10000)
         const tokenAmount = await balance.getText()
-        assert.ok(/^92.*\s*ETH.*$/.test(tokenAmount))
+        assert.ok(/^89.*\s*ETH.*$/.test(tokenAmount))
         await delay(regularDelayMs)
       }
     })
diff --git a/test/integration/lib/navigate-txs.js b/test/integration/lib/navigate-txs.js
new file mode 100644
index 000000000..0679d6b00
--- /dev/null
+++ b/test/integration/lib/navigate-txs.js
@@ -0,0 +1,87 @@
+const reactTriggerChange = require('react-trigger-change')
+const {
+  timeout,
+  queryAsync,
+} = require('../../lib/util')
+
+QUnit.module('navigate txs')
+
+QUnit.test('successful navigate', (assert) => {
+  const done = assert.async()
+  runNavigateTxsFlowTest(assert)
+    .then(done)
+    .catch(err => {
+      assert.notOk(err, `Error was thrown: ${err.stack}`)
+      done()
+    })
+})
+
+async function runNavigateTxsFlowTest (assert, done) {
+  const selectState = await queryAsync($, 'select')
+
+  selectState.val('navigate txs')
+  reactTriggerChange(selectState[0])
+
+  // Confirm navigation buttons present
+  let navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow')
+  assert.ok(navigateTxButtons[0], 'navigation button present')
+  assert.ok(navigateTxButtons[1], 'navigation button present')
+  assert.ok(navigateTxButtons[2], 'navigation button present')
+  assert.ok(navigateTxButtons[3], 'navigation button present')
+
+  // Verify number of transactions present
+  let trxNum = await queryAsync($, '.confirm-page-container-navigation')
+  assert.equal(trxNum[0].innerText.includes('1'), true, 'starts on first')
+
+  // Verify correct route
+  let summaryAction = await queryAsync($, '.confirm-page-container-summary__action')
+  assert.equal(summaryAction[0].innerText, 'CONTRACT DEPLOYMENT', 'correct route')
+
+  // Click navigation button
+  navigateTxButtons[2].click()
+  await timeout(2000)
+
+  // Verify transaction changed to num 2 and routed correctly
+  trxNum = await queryAsync($, '.confirm-page-container-navigation')
+  assert.equal(trxNum[0].innerText.includes('2'), true, 'changed transaction right')
+  summaryAction = await queryAsync($, '.confirm-page-container-summary__action')
+  // assert.equal(summaryAction[0].innerText, 'CONFIRM', 'correct route')
+
+  // Click navigation button
+  navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow')
+  navigateTxButtons[2].click()
+
+  // Verify transation changed to num 3 and routed correctly
+  trxNum = await queryAsync($, '.confirm-page-container-navigation')
+  assert.equal(trxNum[0].innerText.includes('3'), true, 'changed transaction right')
+  summaryAction = await queryAsync($, '.confirm-page-container-summary__action')
+  assert.equal(summaryAction[0].innerText, 'CONFIRM', 'correct route')
+
+  // Click navigation button
+  navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow')
+  navigateTxButtons[2].click()
+
+  // Verify transation changed to num 4 and routed correctly
+  trxNum = await queryAsync($, '.confirm-page-container-navigation')
+  assert.equal(trxNum[0].innerText.split('4').length, 3, '4 transactions present')
+  summaryAction = await queryAsync($, '.confirm-page-container-summary__action')
+  assert.equal(summaryAction[0].innerText, 'TRANSFER', 'correct route')
+
+  // Verify left arrow is working correctly
+  navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow')
+  navigateTxButtons[1].click()
+  trxNum = await queryAsync($, '.confirm-page-container-navigation')
+  assert.equal(trxNum[0].innerText.includes('3'), true, 'changed transaction left')
+
+  // Verify navigate to last transaction is working correctly
+  navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow')
+  navigateTxButtons[3].click()
+  trxNum = await queryAsync($, '.confirm-page-container-navigation')
+  assert.equal(trxNum[0].innerText.split('4').length, 3, 'navigate to last transaction')
+
+  // Verify navigate to first transaction is working correctly
+  navigateTxButtons = await queryAsync($, '.confirm-page-container-navigation__arrow')
+  navigateTxButtons[0].click()
+  trxNum = await queryAsync($, '.confirm-page-container-navigation')
+  assert.equal(trxNum[0].innerText.includes('1'), true, 'navigate to first transaction')
+}