test: advanced swap details component unit test (#6363)

* init

* init

* init

* use test constants

* use constants

* change address

* more comprehensive tests

* move noop

* add eslint rule

* return null in noop

* merge

* checkpoint

* fixes

* add tooltip test

* remove unused file

* merge swap modal header

* add third test

* add test for syncing and loading case

* respond to comments

* more descriptive comments

* update snapshot

* update

* change to act

src/components/swap/AdvancedSwapDetails.test.tsx

@@ -0,0 +1,46 @@
+import userEvent from '@testing-library/user-event'
+import {
+  TEST_ALLOWED_SLIPPAGE,
+  TEST_TOKEN_1,
+  TEST_TRADE_EXACT_INPUT,
+  TEST_TRADE_EXACT_OUTPUT,
+  toCurrencyAmount,
+} from 'test-utils/constants'
+import { act, render, screen } from 'test-utils/render'
+
+import { AdvancedSwapDetails } from './AdvancedSwapDetails'
+
+describe('AdvancedSwapDetails.tsx', () => {
+  it('matches base snapshot', () => {
+    const { asFragment } = render(
+      <AdvancedSwapDetails trade={TEST_TRADE_EXACT_INPUT} allowedSlippage={TEST_ALLOWED_SLIPPAGE} />
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('renders correct copy on mouseover', async () => {
+    render(<AdvancedSwapDetails trade={TEST_TRADE_EXACT_INPUT} allowedSlippage={TEST_ALLOWED_SLIPPAGE} />)
+    await act(() => userEvent.hover(screen.getByText('Price Impact')))
+    expect(await screen.getByText(/The impact your trade has on the market price of this pool./i)).toBeVisible()
+    await act(() => userEvent.hover(screen.getByText('Expected Output')))
+    expect(await screen.getByText(/The amount you expect to receive at the current market price./i)).toBeVisible()
+    await act(() => userEvent.hover(screen.getByText(/Minimum received/i)))
+    expect(await screen.getByText(/The minimum amount you are guaranteed to receive./i)).toBeVisible()
+  })
+
+  it('renders correct tooltips for test trade with exact output and gas use estimate USD', async () => {
+    TEST_TRADE_EXACT_OUTPUT.gasUseEstimateUSD = toCurrencyAmount(TEST_TOKEN_1, 1)
+    render(<AdvancedSwapDetails trade={TEST_TRADE_EXACT_OUTPUT} allowedSlippage={TEST_ALLOWED_SLIPPAGE} />)
+    await act(() => userEvent.hover(screen.getByText(/Maximum sent/i)))
+    expect(await screen.getByText(/The minimum amount you are guaranteed to receive./i)).toBeVisible()
+    await act(() => userEvent.hover(screen.getByText('Network Fee')))
+    expect(await screen.getByText(/The fee paid to miners who process your transaction./i)).toBeVisible()
+  })
+
+  it('renders loading rows when syncing', async () => {
+    render(
+      <AdvancedSwapDetails trade={TEST_TRADE_EXACT_OUTPUT} allowedSlippage={TEST_ALLOWED_SLIPPAGE} syncing={true} />
+    )
+    expect(screen.getAllByTestId('loading-rows').length).toBeGreaterThan(0)
+  })
+})

src/components/swap/AdvancedSwapDetails.tsx

@@ -37,7 +37,7 @@ function TextWithLoadingPlaceholder({
   children: JSX.Element
 }) {
   return syncing ? (
-    <LoadingRows>
+    <LoadingRows data-testid="loading-rows">
       <div style={{ height: '15px', width: `${width}px` }} />
     </LoadingRows>
   ) : (

src/components/swap/SwapModalHeader.test.tsx

@@ -20,7 +20,7 @@ describe('SwapModalHeader.tsx', () => {
     sendAnalyticsEventMock = jest.fn()
   })
 
-  it('matches base snapshot, test trade exact input', () => {
+  it('matches base snapshot for test trade with exact input', () => {
     const { asFragment } = render(
       <SwapModalHeader
         trade={TEST_TRADE_EXACT_INPUT}
@@ -33,28 +33,9 @@ describe('SwapModalHeader.tsx', () => {
       />
     )
     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', () => {
+  it('shows accept changes section and logs amplitude event', () => {
     const setShouldLogModalCloseEventFn = jest.fn()
     mockSendAnalyticsEvent.mockImplementation(sendAnalyticsEventMock)
     render(
@@ -76,7 +57,7 @@ describe('SwapModalHeader.tsx', () => {
     expect(sendAnalyticsEventMock).toHaveBeenCalledTimes(1)
   })
 
-  it('test trade exact output, no recipient', () => {
+  it('renders correctly for test trade with exact output and no recipient', () => {
     const rendered = render(
       <SwapModalHeader
         trade={TEST_TRADE_EXACT_OUTPUT}

src/components/swap/__snapshots__/AdvancedSwapDetails.test.tsx.snap

@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdvancedSwapDetails.tsx matches base snapshot 1`] = `
+<DocumentFragment>
+  .c0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
+.c4 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.c5 {
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c6 {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.c8 {
+  color: #0D111C;
+}
+
+.c10 {
+  width: 100%;
+  height: 1px;
+  background-color: #D2D9EE;
+}
+
+.c1 {
+  width: 100%;
+  padding: 1rem;
+  border-radius: 16px;
+}
+
+.c3 {
+  display: grid;
+  grid-auto-rows: auto;
+  grid-row-gap: 8px;
+}
+
+.c7 {
+  display: inline-block;
+  height: inherit;
+}
+
+.c9 {
+  color: #7780A0;
+}
+
+.c2 {
+  padding: 0;
+}
+
+<div
+    class="c0 c1 c2"
+  >
+    <div
+      class="c3"
+    >
+      <div
+        class="c0 c4 c5"
+      >
+        <div
+          class="c0 c4 c6"
+        >
+          <div
+            class="c7"
+          >
+            <div>
+              <div
+                class="css-zhpkf8"
+              >
+                Expected Output
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="c8 css-q4yjm0"
+        >
+          0.000000000000001  DEF
+        </div>
+      </div>
+      <div
+        class="c0 c4 c5"
+      >
+        <div
+          class="c0 c4 c6"
+        >
+          <div
+            class="c7"
+          >
+            <div>
+              <div
+                class="css-zhpkf8"
+              >
+                Price Impact
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="c8 css-q4yjm0"
+        >
+          <div
+            class="c9 css-1aekuku"
+          >
+            105567.37%
+          </div>
+        </div>
+      </div>
+      <div
+        class="c10"
+      />
+      <div
+        class="c0 c4 c5"
+      >
+        <div
+          class="c0 c4 c6"
+          style="margin-right: 20px;"
+        >
+          <div
+            class="c7"
+          >
+            <div>
+              <div
+                class="css-zhpkf8"
+              >
+                Minimum received after slippage (2.00%)
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="css-q4yjm0"
+        >
+          0.00000000000000098 DEF
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] = `
+exports[`SwapModalHeader.tsx matches base snapshot for test trade with exact input 1`] = `
 <DocumentFragment>
   .c1 {
   box-sizing: border-box;