test: swap modal header unit test (#6361)

* init

* init

* use test constants

* use constants

* change address

* more comprehensive tests

* move noop

* add eslint rule

* return null in noop

* merge

* fixes

src/components/swap/SwapModalHeader.test.tsx

+import { sendAnalyticsEvent } from '@uniswap/analytics'
+import {
+  TEST_ALLOWED_SLIPPAGE,
+  TEST_RECIPIENT_ADDRESS,
+  TEST_TRADE_EXACT_INPUT,
+  TEST_TRADE_EXACT_OUTPUT,
+} from 'test-utils/constants'
+import { render, screen, within } from 'test-utils/render'
+import noop from 'utils/noop'
+
+import SwapModalHeader from './SwapModalHeader'
+
+jest.mock('@web3-react/core', () => {
+  const web3React = jest.requireActual('@web3-react/core')
+  return {
+    ...web3React,
+    useWeb3React: () => ({
+      chainId: 1,
+    }),
+  }
+})
+
+jest.mock('@uniswap/analytics')
+const mockSendAnalyticsEvent = sendAnalyticsEvent as jest.MockedFunction<typeof sendAnalyticsEvent>
+
+describe('SwapModalHeader.tsx', () => {
+  let sendAnalyticsEventMock: jest.Mock<any, any>
+
+  beforeAll(() => {
+    sendAnalyticsEventMock = jest.fn()
+  })
+
+  it('matches base snapshot, test trade exact input', () => {
+    const { asFragment } = render(
+      <SwapModalHeader
+        trade={TEST_TRADE_EXACT_INPUT}
+        allowedSlippage={TEST_ALLOWED_SLIPPAGE}
+        shouldLogModalCloseEvent={false}
+        showAcceptChanges={false}
+        setShouldLogModalCloseEvent={noop}
+        onAcceptChanges={noop}
+        recipient={TEST_RECIPIENT_ADDRESS}
+      />
+    )
+    expect(asFragment()).toMatchSnapshot()
+    expect(screen.getByText(/Output is estimated. You will receive at least /i)).toBeInTheDocument()
+    expect(screen.getByTestId('input-symbol')).toHaveTextContent(
+      TEST_TRADE_EXACT_INPUT.inputAmount.currency.symbol ?? ''
+    )
+    expect(screen.getByTestId('output-symbol')).toHaveTextContent(
+      TEST_TRADE_EXACT_INPUT.outputAmount.currency.symbol ?? ''
+    )
+    expect(screen.getByTestId('input-amount')).toHaveTextContent(TEST_TRADE_EXACT_INPUT.inputAmount.toExact())
+    expect(screen.getByTestId('output-amount')).toHaveTextContent(TEST_TRADE_EXACT_INPUT.outputAmount.toExact())
+    const recipientInfo = screen.getByTestId('recipient-info')
+    expect(recipientInfo).toHaveTextContent(/Output will be sent to/i)
+    expect(within(recipientInfo).getByText('0x0000...0004')).toBeVisible()
+    expect(
+      screen.getByText(
+        'The minimum amount you are guaranteed to receive. If the price slips any further, your transaction will revert.'
+      )
+    ).toBeInTheDocument()
+    expect(screen.getByText(/The amount you expect to receive at the current market price./i)).toBeInTheDocument()
+    expect(screen.getByText('The impact your trade has on the market price of this pool.')).toBeInTheDocument()
+  })
+
+  it('shows accept changes section when available, and logs amplitude event when accept clicked', () => {
+    const setShouldLogModalCloseEventFn = jest.fn()
+    mockSendAnalyticsEvent.mockImplementation(sendAnalyticsEventMock)
+    render(
+      <SwapModalHeader
+        trade={TEST_TRADE_EXACT_INPUT}
+        allowedSlippage={TEST_ALLOWED_SLIPPAGE}
+        shouldLogModalCloseEvent
+        showAcceptChanges
+        setShouldLogModalCloseEvent={setShouldLogModalCloseEventFn}
+        onAcceptChanges={noop}
+        recipient={TEST_RECIPIENT_ADDRESS}
+      />
+    )
+    expect(setShouldLogModalCloseEventFn).toHaveBeenCalledWith(false)
+    const showAcceptChanges = screen.getByTestId('show-accept-changes')
+    expect(showAcceptChanges).toBeInTheDocument()
+    expect(within(showAcceptChanges).getByText('Price Updated')).toBeVisible()
+    expect(within(showAcceptChanges).getByText('Accept')).toBeVisible()
+    expect(sendAnalyticsEventMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('test trade exact output, no recipient', () => {
+    const rendered = render(
+      <SwapModalHeader
+        trade={TEST_TRADE_EXACT_OUTPUT}
+        allowedSlippage={TEST_ALLOWED_SLIPPAGE}
+        shouldLogModalCloseEvent={false}
+        showAcceptChanges={false}
+        setShouldLogModalCloseEvent={noop}
+        onAcceptChanges={noop}
+        recipient={null}
+      />
+    )
+    expect(rendered.queryByTestId('recipient-info')).toBeNull()
+    expect(screen.getByText(/Input is estimated. You will sell at most/i)).toBeInTheDocument()
+    expect(screen.getByTestId('input-symbol')).toHaveTextContent(
+      TEST_TRADE_EXACT_OUTPUT.inputAmount.currency.symbol ?? ''
+    )
+    expect(screen.getByTestId('output-symbol')).toHaveTextContent(
+      TEST_TRADE_EXACT_OUTPUT.outputAmount.currency.symbol ?? ''
+    )
+    expect(screen.getByTestId('input-amount')).toHaveTextContent(TEST_TRADE_EXACT_OUTPUT.inputAmount.toExact())
+    expect(screen.getByTestId('output-amount')).toHaveTextContent(TEST_TRADE_EXACT_OUTPUT.outputAmount.toExact())
+  })
+})

src/components/swap/SwapModalHeader.tsx

@@ -89,11 +89,12 @@ export default function SwapModalHeader({
   }, [lastExecutionPrice, setLastExecutionPrice, trade.executionPrice])
 
   useEffect(() => {
-    if (shouldLogModalCloseEvent && showAcceptChanges)
+    if (shouldLogModalCloseEvent && showAcceptChanges) {
       sendAnalyticsEvent(
         SwapEventName.SWAP_PRICE_UPDATE_ACKNOWLEDGED,
         formatAnalyticsEventProperties(trade, priceUpdate, SwapPriceUpdateUserResponse.REJECTED)
       )
+    }
     setShouldLogModalCloseEvent(false)
   }, [shouldLogModalCloseEvent, showAcceptChanges, setShouldLogModalCloseEvent, trade, priceUpdate])
 
@@ -107,13 +108,14 @@ export default function SwapModalHeader({
                 fontSize={24}
                 fontWeight={500}
                 color={showAcceptChanges && trade.tradeType === TradeType.EXACT_OUTPUT ? theme.accentAction : ''}
+                data-testid="input-amount"
               >
                 {trade.inputAmount.toSignificant(6)}
               </TruncatedText>
             </RowFixed>
             <RowFixed gap="0px">
               <CurrencyLogo currency={trade.inputAmount.currency} size="20px" style={{ marginRight: '12px' }} />
-              <Text fontSize={20} fontWeight={500}>
+              <Text fontSize={20} fontWeight={500} data-testid="input-symbol">
                 {trade.inputAmount.currency.symbol}
               </Text>
             </RowFixed>
@@ -130,13 +132,13 @@ export default function SwapModalHeader({
         <AutoColumn gap="sm">
           <RowBetween align="flex-end">
             <RowFixed gap="0px">
-              <TruncatedText fontSize={24} fontWeight={500}>
+              <TruncatedText fontSize={24} fontWeight={500} data-testid="output-amount">
                 {trade.outputAmount.toSignificant(6)}
               </TruncatedText>
             </RowFixed>
             <RowFixed gap="0px">
               <CurrencyLogo currency={trade.outputAmount.currency} size="20px" style={{ marginRight: '12px' }} />
-              <Text fontSize={20} fontWeight={500}>
+              <Text fontSize={20} fontWeight={500} data-testid="output-symbol">
                 {trade.outputAmount.currency.symbol}
               </Text>
             </RowFixed>
@@ -158,7 +160,7 @@ export default function SwapModalHeader({
         <AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} />
       </LightCard>
       {showAcceptChanges ? (
-        <SwapShowAcceptChanges justify="flex-start" gap="0px">
+        <SwapShowAcceptChanges justify="flex-start" gap="0px" data-testid="show-accept-changes">
           <RowBetween>
             <RowFixed>
               <AlertTriangle size={20} style={{ marginRight: '8px', minWidth: 24 }} />
@@ -200,7 +202,7 @@ export default function SwapModalHeader({
         )}
       </AutoColumn>
       {recipient !== null ? (
-        <AutoColumn justify="flex-start" gap="sm" style={{ padding: '12px 0 0 0px' }}>
+        <AutoColumn justify="flex-start" gap="sm" style={{ padding: '12px 0 0 0px' }} data-testid="recipient-info">
           <ThemedText.DeprecatedMain>
             <Trans>
               Output will be sent to{' '}

src/test-utils/constants.ts

-import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
+import { V3Route } from '@uniswap/smart-order-router'
 import { FeeAmount, Pool } from '@uniswap/v3-sdk'
 import JSBI from 'jsbi'
+import { InterfaceTrade } from 'state/routing/types'
 
 export const TEST_TOKEN_1 = new Token(1, '0x0000000000000000000000000000000000000001', 18, 'ABC', 'Abc')
 export const TEST_TOKEN_2 = new Token(1, '0x0000000000000000000000000000000000000002', 18, 'DEF', 'Def')
@@ -27,3 +29,29 @@ export const TEST_POOL_13 = new Pool(
 
 export const toCurrencyAmount = (token: Token, amount: number) =>
   CurrencyAmount.fromRawAmount(token, JSBI.BigInt(amount))
+
+export const TEST_TRADE_EXACT_INPUT = new InterfaceTrade({
+  v3Routes: [
+    {
+      routev3: new V3Route([TEST_POOL_12], TEST_TOKEN_1, TEST_TOKEN_2),
+      inputAmount: toCurrencyAmount(TEST_TOKEN_1, 1000),
+      outputAmount: toCurrencyAmount(TEST_TOKEN_2, 1000),
+    },
+  ],
+  v2Routes: [],
+  tradeType: TradeType.EXACT_INPUT,
+})
+
+export const TEST_TRADE_EXACT_OUTPUT = new InterfaceTrade({
+  v3Routes: [
+    {
+      routev3: new V3Route([TEST_POOL_13], TEST_TOKEN_1, TEST_TOKEN_3),
+      inputAmount: toCurrencyAmount(TEST_TOKEN_1, 1000),
+      outputAmount: toCurrencyAmount(TEST_TOKEN_3, 1000),
+    },
+  ],
+  v2Routes: [],
+  tradeType: TradeType.EXACT_OUTPUT,
+})
+
+export const TEST_ALLOWED_SLIPPAGE = new Percent(2, 100)