From 171704d980e30a374cc8f82bc076a010ad7ee1c0 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Wed, 3 Jun 2020 10:54:55 -0300
Subject: [PATCH] Fix gas price intermittent test failure (#8728)

The "the transaction has the expected gas price" test was assuming the
fifth element with the `transaction-breakdown__value` class was the
element with the gas price. In practice that was sometimes not the
case, because some transaction detail fields would not be present, or
would appear after the first render.

The field is now looked up with a test id, ensuring it always finds the
correct field.
---
 test/e2e/metamask-ui.spec.js                                | 6 ++----
 .../transaction-breakdown.component.js                      | 1 +
 .../ui/currency-display/currency-display.component.js       | 3 +++
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index ecee19cee..a38af5ec3 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -472,10 +472,8 @@ describe('MetaMask', function () {
       const txValue = await driver.findClickableElement(By.css('.transaction-list-item__primary-currency'))
       await txValue.click()
       const popoverCloseButton = await driver.findClickableElement(By.css('.popover-header__button'))
-      const txGasPrices = await driver.findElements(By.css('.transaction-breakdown__value'))
-      const txGasPriceLabels = await driver.findElements(By.css('.transaction-breakdown-row__title'))
-      await driver.wait(until.elementTextMatches(txGasPrices[4], /^10$/), 10000)
-      assert(txGasPriceLabels[2])
+      const txGasPrice = await driver.findElement(By.css('[data-testid="transaction-breakdown__gas-price"]'))
+      await driver.wait(until.elementTextMatches(txGasPrice, /^10$/), 10000)
       await popoverCloseButton.click()
     })
   })
diff --git a/ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js
index 2c3d5e924..85c24a3e3 100644
--- a/ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js
+++ b/ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js
@@ -85,6 +85,7 @@ export default class TransactionBreakdown extends PureComponent {
             ? (
               <CurrencyDisplay
                 className="transaction-breakdown__value"
+                data-testid="transaction-breakdown__gas-price"
                 currency={nativeCurrency}
                 denomination={GWEI}
                 value={gasPrice}
diff --git a/ui/app/components/ui/currency-display/currency-display.component.js b/ui/app/components/ui/currency-display/currency-display.component.js
index 5b6311b6a..e5bfc0bb1 100644
--- a/ui/app/components/ui/currency-display/currency-display.component.js
+++ b/ui/app/components/ui/currency-display/currency-display.component.js
@@ -7,6 +7,7 @@ import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay'
 export default function CurrencyDisplay ({
   value,
   displayValue,
+  'data-testid': dataTestId,
   style,
   className,
   prefix,
@@ -30,6 +31,7 @@ export default function CurrencyDisplay ({
   return (
     <div
       className={classnames('currency-display-component', className)}
+      data-testid={dataTestId}
       style={style}
       title={(!hideTitle && title) || null}
     >
@@ -49,6 +51,7 @@ export default function CurrencyDisplay ({
 CurrencyDisplay.propTypes = {
   className: PropTypes.string,
   currency: PropTypes.string,
+  'data-testid': PropTypes.string,
   denomination: PropTypes.oneOf([GWEI]),
   displayValue: PropTypes.string,
   hideLabel: PropTypes.bool,