test: swap details dropdown unit test (#6349)

* init for swap details dropdown test

* more tests

* complete tests, ready for review

* add to dev deps

* init

* merge main

* init

* use test constants

* use constants

* change address

* more comprehensive tests

* merge with constants

* move noop

* add eslint rule

* return null in noop

* merge

* update snapshot

* constant name

* snapshot change

* lint

* undo eslint change

* Update src/components/swap/SwapDetailsDropdown.test.tsx
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* Update src/components/swap/SwapDetailsDropdown.test.tsx
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* Update src/components/swap/SwapDetailsDropdown.test.tsx
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* respond comments

* update snapshot

* merge main

* user event instead

* add act

* import fix

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

package.json

@@ -113,6 +113,7 @@
     "ms.macro": "^2.0.0",
     "prettier": "^2.7.1",
     "react-scripts": "^4.0.3",
+    "resize-observer-polyfill": "^1.5.1",
     "serve": "^11.3.2",
     "source-map-explorer": "^2.5.3",
     "ts-transform-graphql-tag": "^0.2.1",

src/components/swap/SwapDetailsDropdown.test.tsx

+import userEvent from '@testing-library/user-event'
+import { TEST_ALLOWED_SLIPPAGE, TEST_TOKEN_1, TEST_TRADE_EXACT_INPUT, toCurrencyAmount } from 'test-utils/constants'
+import { act, render, screen } from 'test-utils/render'
+
+import SwapDetailsDropdown from './SwapDetailsDropdown'
+
+describe('SwapDetailsDropdown.tsx', () => {
+  it('renders a trade', () => {
+    const { asFragment } = render(
+      <SwapDetailsDropdown
+        trade={TEST_TRADE_EXACT_INPUT}
+        syncing={false}
+        loading={false}
+        allowedSlippage={TEST_ALLOWED_SLIPPAGE}
+      />
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('renders loading state', () => {
+    render(
+      <SwapDetailsDropdown trade={undefined} syncing={true} loading={true} allowedSlippage={TEST_ALLOWED_SLIPPAGE} />
+    )
+    expect(screen.getByText('Fetching best price...')).toBeInTheDocument()
+  })
+
+  it('is interactive once loaded', async () => {
+    TEST_TRADE_EXACT_INPUT.gasUseEstimateUSD = toCurrencyAmount(TEST_TOKEN_1, 1)
+    render(
+      <SwapDetailsDropdown
+        trade={TEST_TRADE_EXACT_INPUT}
+        syncing={false}
+        loading={false}
+        allowedSlippage={TEST_ALLOWED_SLIPPAGE}
+      />
+    )
+    expect(screen.getByTestId('swap-details-header-row')).toBeInTheDocument()
+    expect(screen.getByTestId('trade-price-container')).toBeInTheDocument()
+    await act(() => userEvent.click(screen.getByTestId('swap-details-header-row')))
+    expect(screen.getByTestId('advanced-swap-details')).toBeInTheDocument()
+    expect(screen.getByTestId('swap-route-info')).toBeInTheDocument()
+  })
+})

src/components/swap/SwapDetailsDropdown.tsx

@@ -118,7 +118,12 @@ export default function SwapDetailsDropdown({ trade, syncing, loading, allowedSl
           element={InterfaceElementName.SWAP_DETAILS_DROPDOWN}
           shouldLogImpression={!showDetails}
         >
-          <StyledHeaderRow onClick={() => setShowDetails(!showDetails)} disabled={!trade} open={showDetails}>
+          <StyledHeaderRow
+            data-testid="swap-details-header-row"
+            onClick={() => setShowDetails(!showDetails)}
+            disabled={!trade}
+            open={showDetails}
+          >
             <RowFixed style={{ position: 'relative' }} align="center">
               {Boolean(loading || syncing) && (
                 <StyledPolling>
@@ -128,7 +133,7 @@ export default function SwapDetailsDropdown({ trade, syncing, loading, allowedSl
                 </StyledPolling>
               )}
               {trade ? (
-                <LoadingOpacityContainer $loading={syncing}>
+                <LoadingOpacityContainer $loading={syncing} data-testid="trade-price-container">
                   <TradePrice price={trade.executionPrice} />
                 </LoadingOpacityContainer>
               ) : loading || syncing ? (
@@ -159,11 +164,11 @@ export default function SwapDetailsDropdown({ trade, syncing, loading, allowedSl
         <AnimatedDropdown open={showDetails}>
           <AutoColumn gap="sm" style={{ padding: '0', paddingBottom: '8px' }}>
             {trade ? (
-              <StyledCard>
+              <StyledCard data-testid="advanced-swap-details">
                 <AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} syncing={syncing} />
               </StyledCard>
             ) : null}
-            {trade ? <SwapRoute trade={trade} syncing={syncing} /> : null}
+            {trade ? <SwapRoute data-testid="swap-route-info" trade={trade} syncing={syncing} /> : null}
           </AutoColumn>
         </AnimatedDropdown>
       </AutoColumn>

src/setupTests.ts

@@ -3,6 +3,7 @@ import 'jest-styled-components' // adds style diffs to snapshot tests
 
 import type { createPopper } from '@popperjs/core'
 import { useWeb3React } from '@web3-react/core'
+import ResizeObserver from 'resize-observer-polyfill'
 import { Readable } from 'stream'
 import { mocked } from 'test-utils/mocked'
 import { TextDecoder, TextEncoder } from 'util'
@@ -16,6 +17,8 @@ if (typeof global.TextEncoder === 'undefined') {
   global.TextDecoder = TextDecoder as typeof global.TextDecoder
 }
 
+global.ResizeObserver = ResizeObserver
+
 global.matchMedia =
   global.matchMedia ||
   function () {