From a8268728d3974e1a5055a68fec4b1dd2f86f081c Mon Sep 17 00:00:00 2001 From: lynn <41491154+lynnshaoyu@users.noreply.github.com> Date: Thu, 27 Apr 2023 16:36:36 -0400 Subject: [PATCH] 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 --- .../swap/AdvancedSwapDetails.test.tsx | 46 +++++ src/components/swap/AdvancedSwapDetails.tsx | 2 +- src/components/swap/SwapModalHeader.test.tsx | 25 +-- .../AdvancedSwapDetails.test.tsx.snap | 165 ++++++++++++++++++ .../SwapModalHeader.test.tsx.snap | 2 +- 5 files changed, 216 insertions(+), 24 deletions(-) create mode 100644 src/components/swap/AdvancedSwapDetails.test.tsx create mode 100644 src/components/swap/__snapshots__/AdvancedSwapDetails.test.tsx.snap diff --git a/src/components/swap/AdvancedSwapDetails.test.tsx b/src/components/swap/AdvancedSwapDetails.test.tsx new file mode 100644 index 0000000000..f234088b30 --- /dev/null +++ b/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( + + ) + expect(asFragment()).toMatchSnapshot() + }) + + it('renders correct copy on mouseover', async () => { + render() + 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() + 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( + + ) + expect(screen.getAllByTestId('loading-rows').length).toBeGreaterThan(0) + }) +}) diff --git a/src/components/swap/AdvancedSwapDetails.tsx b/src/components/swap/AdvancedSwapDetails.tsx index e277da2cc2..4b7f20f0af 100644 --- a/src/components/swap/AdvancedSwapDetails.tsx +++ b/src/components/swap/AdvancedSwapDetails.tsx @@ -37,7 +37,7 @@ function TextWithLoadingPlaceholder({ children: JSX.Element }) { return syncing ? ( - +
) : ( diff --git a/src/components/swap/SwapModalHeader.test.tsx b/src/components/swap/SwapModalHeader.test.tsx index b0f362fb5c..17889002e3 100644 --- a/src/components/swap/SwapModalHeader.test.tsx +++ b/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( { /> ) 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( + .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; +} + +
+
+
+
+
+
+
+ Expected Output +
+
+
+
+
+ 0.000000000000001 DEF +
+
+
+
+
+
+
+ Price Impact +
+
+
+
+
+
+ 105567.37% +
+
+
+
+
+
+
+
+
+ Minimum received after slippage (2.00%) +
+
+
+
+
+ 0.00000000000000098 DEF +
+
+
+
+ +`; diff --git a/src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap b/src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap index 9f93455be6..5219a6f615 100644 --- a/src/components/swap/__snapshots__/SwapModalHeader.test.tsx.snap +++ b/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`] = ` .c1 { box-sizing: border-box;