test: permit2 flow component tests (#6551)

* test: swap flow cypress tests

* fix: use default parameter

* feat: use Swap Component on TDP

* feat: auto nav for TDP tokens

* chore: merge

* chore: merge

* chore: merge

* chore: merge

* fix: remove extra inputCurrency URL parsing logic

* fix: undo last change

* fix: pass expected chain id to swap component

* fix: search for default tokens on unconnected networks if needed

* test: e2e test for l2 token

* fix: delete irrelevant tests

* fix: address comments

* fix: lint error

* test: update TDP e2e tests

* fix: use pageChainId for filter

* fix: rename chainId

* fix: typecheck

* fix: chainId bug

* fix: chainId required fixes

* fix: bad merge in e2e test

* fix: remove unused test util

* fix: remove unnecessary variable

* fix: token defaults

* fix: address comments

* fix: address comments and fix tests

* fix: e2e test formatting, remove Maybe<>

* fix: remove unused variable

* fix: use feature flag for swap component on TDP

* fix: back button

* feat: copy review screen UI from widgetg

* fix: modal padding

* feat: add final detail row

* fix: remove widget comment

* fix: update unit tests

* fix: code style consistency

* fix: remove padding from AutoColumn

* fix: update snapshots

* fix: use semantic gaps

* fix: more px and gaps

* fix: design feedbacks

* fix: button radius in summary modal

* fix: design nits

* feat: update design of summary modal

* fix: font weight and vertical spacing

* fix: update snapshots

* fix: css nits

* wip: move approval to summary modal

* wip: not working

* feat: working

* fix: fix flow

* feat: simplify states and build new modal UI

* feat: todos and differs fix

* feat: update tx status modal

* feat: split up approve and permit

* feat: error state

* feat: update success and error states

* feat: undo changes to TxConfirmationModal

* feat: re-order functions

* wip: move approval to summary modal

* wip: not working

* feat: update permit2 e2e tests

* feat: tests passing

* fix: swap test

* fix: bad merge

* wip: move approval to summary modal

* wip: not working

* feat: PendingModalContent tests

* feat: useMaxAmountIn

* fix: bad merge

* fix: naming

* fix: modal flicker when refetching trade

* wip: move approval to summary modal

* wip: not working

* feat: working

* fix: fix flow

* feat: simplify states and build new modal UI

* feat: todos and differs fix

* feat: update tx status modal

* feat: split up approve and permit

* feat: error state

* feat: update success and error states

* feat: undo changes to TxConfirmationModal

* feat: remove step indicators when only one step

* feat: move content into PendingModalContent component

* fix: lint

* chore: merge

* fix: update tests for new modal

* fix: correct modal state when moving between steps

* fix: comments

* fix: code style improvements

* feat: require trade to be defined

* fix: remove extra props from ThemedTexts

* fix: one more trans

* fix: remove unused export

* feat: remove undefined checks and other fixes

* fix: update test

* fix: add missing dollar sign

* fix: remove null check and update test

* fix: remove max width from detail row value

* fix: remove isOpen prop

* fix: isopen

* feat: refactor approval flow into a hook

* fix: testid fix

* fix: tradeMeaningfullyDiffers improvement and prepareFlow fix

* fix: address  comments

* feat: add comments explaining async state

* fix: test updates

* fix: nits

* fix: reduce nesting

* fix: address comments

* test: remove line from test for debugging

* fix: update tests

* fix: update tests

* fix: more nesting in test

* fix: update test

* fix: reorganize test code

src/components/TransactionConfirmationModal/AnimatedConfirmation.tsx

@@ -42,7 +42,7 @@ export default function AnimatedConfirmation({ className }: { className?: string
   const theme = useTheme()
 
   return (
-    <Wrapper className={className}>
+    <Wrapper className={className} data-testid="animated-confirmation">
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
         <Circle
           className="path circle"

src/components/swap/PendingModalContent.test.tsx

+import { DAI_MAINNET } from '@uniswap/smart-order-router'
+import { useIsTransactionConfirmed } from 'state/transactions/hooks'
+import { mocked } from 'test-utils/mocked'
+import { render, screen } from 'test-utils/render'
+
+import { ConfirmModalState } from './ConfirmSwapModal'
+import { ErrorModalContent, PendingModalContent, PendingModalError } from './PendingModalContent'
+
+jest.mock('state/transactions/hooks')
+
+describe('PendingModalContent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mocked(useIsTransactionConfirmed).mockReturnValue(false)
+  })
+
+  it('renders null for invalid content', () => {
+    const result = render(<PendingModalContent steps={[]} currentStep={ConfirmModalState.APPROVING_TOKEN} />)
+    expect(result.container).toBeEmptyDOMElement()
+  })
+
+  it('renders correctly with only one step', () => {
+    render(
+      <PendingModalContent
+        steps={[ConfirmModalState.APPROVING_TOKEN]}
+        currentStep={ConfirmModalState.APPROVING_TOKEN}
+        approvalCurrency={DAI_MAINNET}
+      />
+    )
+    expect(screen.getByText('Approve permit')).toBeInTheDocument()
+    expect(screen.getByText('Proceed in wallet')).toBeInTheDocument()
+    expect(screen.getByText('Why are permits required?')).toBeInTheDocument()
+    expect(
+      screen.getByText('Permit2 allows token approvals to be shared and managed across different applications.')
+    ).toBeInTheDocument()
+  })
+
+  describe('renders the correct step when there are multiple', () => {
+    it('renders the first step with activeStepIndex=0', () => {
+      render(
+        <PendingModalContent
+          steps={[
+            ConfirmModalState.APPROVING_TOKEN,
+            ConfirmModalState.PERMITTING,
+            ConfirmModalState.PENDING_CONFIRMATION,
+          ]}
+          currentStep={ConfirmModalState.APPROVING_TOKEN}
+          approvalCurrency={DAI_MAINNET}
+        />
+      )
+      expect(screen.getByText('Approve permit')).toBeInTheDocument()
+      expect(screen.getByText('Proceed in wallet')).toBeInTheDocument()
+      expect(screen.getByText('Why are permits required?')).toBeInTheDocument()
+      expect(
+        screen.getByText('Permit2 allows token approvals to be shared and managed across different applications.')
+      ).toBeInTheDocument()
+      expect(screen.queryByText('Approve DAI')).toBeNull()
+      expect(screen.queryByText('Why are approvals required?')).toBeNull()
+      expect(
+        screen.queryByText(
+          'This provides the Uniswap protocol access to your token for trading. For security, this will expire after 30 days.'
+        )
+      ).toBeNull()
+    })
+
+    it('renders the second step with activeStepIndex=1', () => {
+      render(
+        <PendingModalContent
+          steps={[
+            ConfirmModalState.APPROVING_TOKEN,
+            ConfirmModalState.PERMITTING,
+            ConfirmModalState.PENDING_CONFIRMATION,
+          ]}
+          currentStep={ConfirmModalState.PERMITTING}
+          approvalCurrency={DAI_MAINNET}
+        />
+      )
+      expect(screen.queryByText('Approve permit')).toBeNull()
+      expect(screen.queryByText('Why are permits required?')).toBeNull()
+      expect(
+        screen.queryByText('Permit2 allows token approvals to be shared and managed across different applications.')
+      ).toBeNull()
+      expect(screen.queryByText('Approve DAI')).toBeInTheDocument()
+      expect(screen.queryByText('Proceed in wallet')).toBeInTheDocument()
+      expect(screen.queryByText('Why are approvals required?')).toBeInTheDocument()
+      expect(
+        screen.queryByText(
+          'This provides the Uniswap protocol access to your token for trading. For security, this will expire after 30 days.'
+        )
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe('renders the correct logo', () => {
+    it('renders the given logo when not overridden with confirmed', () => {
+      render(
+        <PendingModalContent
+          steps={[
+            ConfirmModalState.APPROVING_TOKEN,
+            ConfirmModalState.PERMITTING,
+            ConfirmModalState.PENDING_CONFIRMATION,
+          ]}
+          currentStep={ConfirmModalState.APPROVING_TOKEN}
+          approvalCurrency={DAI_MAINNET}
+        />
+      )
+      expect(screen.getByTestId('pending-modal-currency-logo-loader-DAI')).toBeInTheDocument()
+      expect(screen.queryByTestId('pending-modal-failure-icon')).toBeNull()
+    })
+
+    it('renders the failure icon instead of the given logo when confirmed and unsuccessful', () => {
+      render(<ErrorModalContent errorType={PendingModalError.TOKEN_APPROVAL_ERROR} onRetry={jest.fn()} />)
+      expect(screen.getByTestId('pending-modal-failure-icon')).toBeInTheDocument()
+      expect(screen.queryByTestId('pending-modal-currency-logo-loader')).toBeNull()
+    })
+
+    it('renders the success icon instead of the given logo when confirmed and successful', () => {
+      mocked(useIsTransactionConfirmed).mockReturnValue(true)
+
+      render(
+        <PendingModalContent
+          steps={[
+            ConfirmModalState.APPROVING_TOKEN,
+            ConfirmModalState.PERMITTING,
+            ConfirmModalState.PENDING_CONFIRMATION,
+          ]}
+          currentStep={ConfirmModalState.PENDING_CONFIRMATION}
+          approvalCurrency={DAI_MAINNET}
+        />
+      )
+      expect(screen.queryByTestId('pending-modal-failure-icon')).toBeNull()
+      expect(screen.queryByTestId('pending-modal-currency-logo-loader')).toBeNull()
+      expect(screen.getByTestId('animated-confirmation')).toBeInTheDocument()
+    })
+  })
+})

src/components/swap/PendingModalContent.tsx

@@ -78,7 +78,7 @@ interface PendingModalContentProps {
 function CurrencyLoader({ currency }: { currency?: Currency }) {
   const theme = useTheme()
   return (
-    <LogoContainer>
+    <LogoContainer data-testid={`pending-modal-currency-logo-loader-${currency?.symbol}`}>
       <LogoLayer>
         <CurrencyLogo currency={currency} size="48px" />
       </LogoLayer>
@@ -134,6 +134,9 @@ export function PendingModalContent({
     confirmed,
     theme
   )
+  if (steps.length === 0) {
+    return null
+  }
   return (
     <Container gap="lg">
       {logo}
@@ -207,7 +210,7 @@ export function ErrorModalContent({ errorType, onRetry }: ErrorModalContentProps
 
   return (
     <Container gap="lg">
-      <AlertTriangle strokeWidth={1} color={theme.accentFailure} size="48px" />
+      <AlertTriangle strokeWidth={1} color={theme.accentFailure} size="48px" data-testid="pending-modal-failure-icon" />
       <ColumnCenter gap="md">
         <ThemedText.HeadlineSmall>{title}</ThemedText.HeadlineSmall>
         <Row justify="center">

src/hooks/useMaxAmountIn.test.tsx

+import { TEST_ALLOWED_SLIPPAGE, TEST_TRADE_EXACT_INPUT } from 'test-utils/constants'
+import { renderHook } from 'test-utils/render'
+
+import { useMaxAmountIn } from './useMaxAmountIn'
+
+describe('useMaxAmountIn', () => {
+  it('returns undefined for an undefined trade', () => {
+    const { result } = renderHook(() => useMaxAmountIn(undefined, TEST_ALLOWED_SLIPPAGE))
+    expect(result.current).toEqual(undefined)
+  })
+
+  it('returns the expected value calculated using the exact-input trade and the given slippage', () => {
+    const { result } = renderHook(() => useMaxAmountIn(TEST_TRADE_EXACT_INPUT, TEST_ALLOWED_SLIPPAGE))
+    const expectedResult = TEST_TRADE_EXACT_INPUT.maximumAmountIn(TEST_ALLOWED_SLIPPAGE)
+    expect(result.current?.toExact()).toEqual(expectedResult?.toExact())
+  })
+})