test: unsupported currency footer unit test (#6360)

* tests are complete

* update comment

* remove console log, and test close icon

* init

* lets try something else to avoid timeout

* try splitting up last test for timeout

* undo, it wasnt working

* revert order test

* add comment for sanity check

* test another way

* try userEvent

* increase timeout

* move timeout

* init

* use test constants

* use constants

* change address

* more comprehensive tests

* merge constants and use mocked

* remove comments

* remove dual import

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

* respond comments

* update tests

* remove console log

* fixes

* add act

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

src/components/swap/UnsupportedCurrencyFooter.test.tsx

+import userEvent from '@testing-library/user-event'
+import { Token } from '@uniswap/sdk-core'
+import { useUnsupportedTokens } from 'hooks/Tokens'
+import { mocked } from 'test-utils/mocked'
+import { act, render, screen, waitForElementToBeRemoved, within } from 'test-utils/render'
+import { getExplorerLink } from 'utils/getExplorerLink'
+
+import UnsupportedCurrencyFooter from './UnsupportedCurrencyFooter'
+
+const unsupportedTokenAddress = '0x4e83b6287588a96321B2661c5E041845fF7814af'
+const unsupportedTokenSymbol = 'ALTDOM-MAR2021'
+const unsupportedToken = new Token(1, unsupportedTokenAddress, 18, 'ALTDOM-MAR2021')
+const unsupportedTokenExplorerLink = 'www.blahblah.com'
+
+jest.mock('../../hooks/Tokens')
+jest.mock('../../utils/getExplorerLink')
+
+describe('UnsupportedCurrencyFooter.tsx with unsupported tokens', () => {
+  beforeEach(() => {
+    mocked(useUnsupportedTokens).mockReturnValue({ [unsupportedTokenAddress]: unsupportedToken })
+    mocked(getExplorerLink).mockReturnValue(unsupportedTokenExplorerLink)
+  })
+
+  it('renders', () => {
+    const { asFragment } = render(<UnsupportedCurrencyFooter show={true} currencies={[unsupportedToken]} />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('works as expected when one unsupported token exists', async () => {
+    const rendered = render(<UnsupportedCurrencyFooter show={true} currencies={[unsupportedToken]} />)
+    await act(() => userEvent.click(screen.getByTestId('read-more-button')))
+    expect(screen.getByText('Unsupported Assets')).toBeInTheDocument()
+    expect(
+      screen.getByText((content) => content.startsWith('Some assets are not available through this interface'))
+    ).toBeInTheDocument()
+    expect(screen.getAllByTestId('unsupported-token-card').length).toBe(1)
+    const unsupportedCard = screen.getByTestId('unsupported-token-card')
+    expect(within(unsupportedCard).getByText(unsupportedTokenSymbol)).toBeInTheDocument()
+    expect(within(unsupportedCard).getByText(unsupportedTokenAddress).closest('a')).toHaveAttribute(
+      'href',
+      unsupportedTokenExplorerLink
+    )
+    await act(() => userEvent.click(screen.getByTestId('close-icon')))
+    await waitForElementToBeRemoved(rendered.queryByTestId('unsupported-token-card'))
+    expect(rendered.queryByText('Unsupported Assets')).toBeNull()
+    expect(rendered.queryByTestId('unsupported-token-card')).toBeNull()
+    expect(
+      rendered.queryByText((content) => content.startsWith('Some assets are not available through this interface'))
+    ).toBeNull()
+  })
+})
+
+describe('UnsupportedCurrencyFooter.tsx with no unsupported tokens', () => {
+  beforeEach(() => {
+    mocked(useUnsupportedTokens).mockReturnValue({})
+  })
+
+  it('works as expected when no unsupported tokens exist', async () => {
+    const rendered = render(<UnsupportedCurrencyFooter show={true} currencies={[unsupportedToken]} />)
+    await act(() => userEvent.click(screen.getByTestId('read-more-button')))
+    expect(screen.getByText('Unsupported Assets')).toBeInTheDocument()
+    expect(
+      screen.getByText((content) => content.startsWith('Some assets are not available through this interface'))
+    ).toBeInTheDocument()
+    expect(rendered.queryByTestId('unsupported-token-card')).toBeNull()
+    await act(() => userEvent.click(screen.getByTestId('close-icon')))
+    await waitForElementToBeRemoved(screen.getByText('Unsupported Assets'))
+    expect(rendered.queryByText('Unsupported Assets')).toBeNull()
+    expect(
+      rendered.queryByText((content) => content.startsWith('Some assets are not available through this interface'))
+    ).toBeNull()
+  })
+})

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -74,14 +74,14 @@ export default function UnsupportedCurrencyFooter({
               <ThemedText.DeprecatedMediumHeader>
                 <Trans>Unsupported Assets</Trans>
               </ThemedText.DeprecatedMediumHeader>
-              <CloseIcon onClick={() => setShowDetails(false)} />
+              <CloseIcon onClick={() => setShowDetails(false)} data-testid="close-icon" />
             </RowBetween>
             {tokens.map((token) => {
               return (
                 token &&
                 unsupportedTokens &&
                 Object.keys(unsupportedTokens).includes(token.address) && (
-                  <OutlineCard key={token.address?.concat('not-supported')}>
+                  <OutlineCard key={token.address?.concat('not-supported')} data-testid="unsupported-token-card">
                     <AutoColumn gap="10px">
                       <AutoRow gap="5px" align="center">
                         <CurrencyLogo currency={token} size="24px" />
@@ -108,7 +108,7 @@ export default function UnsupportedCurrencyFooter({
           </AutoColumn>
         </Card>
       </Modal>
-      <StyledButtonEmpty padding="0" onClick={() => setShowDetails(true)}>
+      <StyledButtonEmpty padding="0" onClick={() => setShowDetails(true)} data-testid="read-more-button">
         <ThemedText.DeprecatedBlue>
           <Trans>Read more about unsupported assets</Trans>
         </ThemedText.DeprecatedBlue>

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnsupportedCurrencyFooter.tsx with unsupported tokens renders 1`] = `
+<DocumentFragment>
+  .c1 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: inline-block;
+  text-align: center;
+  line-height: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: inherit;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: white;
+  background-color: primary;
+  border: 0;
+  border-radius: 4px;
+  padding: 0;
+}
+
+.c5 {
+  color: #FB118E;
+}
+
+.c2 {
+  padding: 0;
+  width: 100%;
+  font-weight: 500;
+  text-align: center;
+  border-radius: 20px;
+  outline: none;
+  border: 1px solid transparent;
+  color: #0D111C;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  will-change: transform;
+  -webkit-transition: -webkit-transform 450ms ease;
+  -webkit-transition: transform 450ms ease;
+  transition: transform 450ms ease;
+  -webkit-transform: perspective(1px) translateZ(0);
+  -ms-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+}
+
+.c2:disabled {
+  opacity: 50%;
+  cursor: auto;
+  pointer-events: none;
+}
+
+.c2 > * {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c2 > a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c3 {
+  background-color: transparent;
+  color: #FB118E;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c3:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c3:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c3:active {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c3:disabled {
+  opacity: 50%;
+  cursor: auto;
+}
+
+.c0 {
+  padding-top: calc(16px + 2rem);
+  padding-bottom: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: -2rem;
+  width: 100%;
+  max-width: 400px;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  color: #7780A0;
+  background-color: #FFFFFF99;
+  z-index: 0;
+  -webkit-transform: translateY(0%);
+  -ms-transform: translateY(0%);
+  transform: translateY(0%);
+  -webkit-transition: -webkit-transform 300ms ease-in-out;
+  -webkit-transition: transform 300ms ease-in-out;
+  transition: transform 300ms ease-in-out;
+  text-align: center;
+}
+
+.c4 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    class="c0"
+  >
+    <button
+      class="c1 c2 c3 c4"
+      data-testid="read-more-button"
+    >
+      <div
+        class="c5 css-8mokm4"
+      >
+        Read more about unsupported assets
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;