From 19f10e197eb91782936979f6e894477d48815ef2 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Tue, 14 Jan 2020 14:53:02 -0400
Subject: [PATCH] Simplify e2e test transaction navigation (#7816)

The transaction navigation in the e2e tests has been made simpler with
the addition of data attributes to help with finding the navigation
buttons. Each button is now labelled according to its purpose.
---
 test/e2e/metamask-ui.spec.js                  | 23 ++++++-------------
 ...irm-page-container-navigation.component.js |  4 ++++
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index 5230a9d1c..047865e8a 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -577,46 +577,37 @@ describe('MetaMask', function () {
     })
 
     it('navigates the transactions', async () => {
-      let navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      assert.equal(navigateTxButtons.length, 4, 'navigation button present')
-
-      await navigateTxButtons[2].click()
+      await driver.clickElement(By.css('[data-testid="next-page"]'))
       let navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       let navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('2'), true, 'changed transaction right')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[2].click()
+      await driver.clickElement(By.css('[data-testid="next-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('3'), true, 'changed transaction right')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[2].click()
+      await driver.clickElement(By.css('[data-testid="next-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('4'), true, 'changed transaction right')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[0].click()
+      await driver.clickElement(By.css('[data-testid="first-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('1'), true, 'navigate to first transaction')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[3].click()
+      await driver.clickElement(By.css('[data-testid="last-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.split('4').length, 3, 'navigate to last transaction')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[1].click()
+      await driver.clickElement(By.css('[data-testid="previous-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('3'), true, 'changed transaction left')
 
-      navigateTxButtons = await driver.findElements(By.css('.confirm-page-container-navigation__arrow'))
-      await navigateTxButtons[1].click()
+      await driver.clickElement(By.css('[data-testid="previous-page"]'))
       navigationElement = await driver.findElement(By.css('.confirm-page-container-navigation'))
       navigationText = await navigationElement.getText()
       assert.equal(navigationText.includes('2'), true, 'changed transaction left')
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
index dd1fd2da4..a3eaf3255 100755
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
@@ -19,12 +19,14 @@ const ConfirmPageContainerNavigation = props => {
       >
         <div
           className="confirm-page-container-navigation__arrow"
+          data-testid="first-page"
           onClick={() => onNextTx(firstTx)}
         >
           <img src="/images/double-arrow.svg" />
         </div>
         <div
           className="confirm-page-container-navigation__arrow"
+          data-testid="previous-page"
           onClick={() => onNextTx(prevTxId)}
         >
           <img src="/images/single-arrow.svg" />
@@ -46,12 +48,14 @@ const ConfirmPageContainerNavigation = props => {
       >
         <div
           className="confirm-page-container-navigation__arrow"
+          data-testid="next-page"
           onClick={() => onNextTx(nextTxId)}
         >
           <img className="confirm-page-container-navigation__imageflip" src="/images/single-arrow.svg" />
         </div>
         <div
           className="confirm-page-container-navigation__arrow"
+          data-testid="last-page"
           onClick={() => onNextTx(lastTx)}
         >
           <img className="confirm-page-container-navigation__imageflip" src="/images/double-arrow.svg" />