From 418ee08b009cb75b914eef649c0731dfe908ee98 Mon Sep 17 00:00:00 2001
From: Jack Short <john.short.tj@gmail.com>
Date: Wed, 8 Nov 2023 13:27:10 -0500
Subject: [PATCH] chore: adds e2e test for when usd quote fetch fails (#7215)

* chore: adds e2e test for when usd quote fetch fails

* Update src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* Update cypress/e2e/swap/errors.test.ts

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

---------

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>
---
 cypress/e2e/swap/errors.test.ts                              | 4 +++-
 src/components/CurrencyInputPanel/FiatValue.tsx              | 4 +++-
 src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/cypress/e2e/swap/errors.test.ts b/cypress/e2e/swap/errors.test.ts
index da28dc2c7a..0c6522bbd5 100644
--- a/cypress/e2e/swap/errors.test.ts
+++ b/cypress/e2e/swap/errors.test.ts
@@ -1,4 +1,5 @@
 import { BigNumber } from '@ethersproject/bignumber'
+import { InterfaceSectionName } from '@uniswap/analytics-events'
 import { CurrencyAmount } from '@uniswap/sdk-core'
 
 import { DEFAULT_DEADLINE_FROM_NOW } from '../../../src/constants/misc'
@@ -117,7 +118,7 @@ describe('Swap errors', () => {
     })
   })
 
-  it('no liquidity', () => {
+  it('insufficient liquidity', () => {
     // The API response is too variable so stubbing a 404.
     cy.intercept('POST', 'https://api.uniswap.org/v2/quote', {
       statusCode: 404,
@@ -128,5 +129,6 @@ describe('Swap errors', () => {
     cy.get('#swap-currency-output .token-amount-input').type('100000000000000').should('have.value', '100000000000000') // 100 trillion
     cy.contains('Insufficient liquidity for this trade.')
     cy.get('#swap-button').should('not.exist')
+    cy.get(getTestSelector(`fiat-value-${InterfaceSectionName.CURRENCY_OUTPUT_PANEL}`)).contains('-')
   })
 })
diff --git a/src/components/CurrencyInputPanel/FiatValue.tsx b/src/components/CurrencyInputPanel/FiatValue.tsx
index cf7a3bde54..e591ca49ae 100644
--- a/src/components/CurrencyInputPanel/FiatValue.tsx
+++ b/src/components/CurrencyInputPanel/FiatValue.tsx
@@ -18,9 +18,11 @@ const FiatLoadingBubble = styled(LoadingBubble)`
 export function FiatValue({
   fiatValue,
   priceImpact,
+  testId,
 }: {
   fiatValue: { data?: number; isLoading: boolean }
   priceImpact?: Percent
+  testId?: string
 }) {
   const { formatNumber, formatPercent } = useFormatter()
 
@@ -39,7 +41,7 @@ export function FiatValue({
 
   return (
     <Row gap="sm">
-      <ThemedText.BodySmall color="neutral2">
+      <ThemedText.BodySmall color="neutral2" data-testid={testId}>
         {fiatValue.data ? (
           formatNumber({
             input: fiatValue.data,
diff --git a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
index a9de21dc51..22d659b3c0 100644
--- a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
+++ b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
@@ -382,7 +382,9 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
             <FiatRow>
               <RowBetween>
                 <LoadingOpacityContainer $loading={loading}>
-                  {fiatValue && <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />}
+                  {fiatValue && (
+                    <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} testId={`fiat-value-${id}`} />
+                  )}
                 </LoadingOpacityContainer>
                 {account ? (
                   <RowFixed style={{ height: '16px' }}>