fix: update CurrencyList unit tests (#6321)

* fix: testing snapshot updates

* fix: remove inline style and update snapshots tests

src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders currency rows correctly when currencies list is non-empty 1`] = `
-<DocumentFragment>
-  .c0 {
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
-}
-
-.c1 {
-  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;
-}
-
-.c2 {
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.c11 {
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.c10 {
-  color: #98A1C0;
-}
-
-.c8 {
-  margin-left: 4px;
-  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;
-}
-
-.c9 {
-  width: 1em;
-  height: 1em;
-  color: #98A1C0;
-}
-
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.c5 {
-  display: grid;
-  grid-auto-rows: auto;
-}
-
-.c3 {
-  padding: 4px 20px;
-  height: 56px;
-  display: grid;
-  grid-template-columns: auto minmax(auto,1fr) auto minmax(0,72px);
-  grid-gap: 16px;
-  cursor: pointer;
-  opacity: 1;
-}
-
-.c3:hover {
-  background-color: #98A1C014;
-}
-
-.c6 {
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.c7 {
-  margin-left: 0.3em;
-}
-
-<div
-    style="padding-right: 4px;"
-  >
-    <div
-      class="CurrencyList_scrollbarStyle__1pi21y70"
-      style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
-    >
-      <div
-        style="height: 168px; width: 100%;"
-      >
-        <div
-          class="c0 c1 c2 c3 token-item-0x6B175474E89094C44Da98b954EedeAC495271d0F"
-          style="position: absolute; left: 0px; top: 0px; height: 56px; width: 100%;"
-          tabindex="0"
-        >
-          <div
-            class="c4"
-          >
-            CurrencyLogo currency=DAI
-          </div>
-          <div
-            class="c5"
-            style="opacity: 1;"
-          >
-            <div
-              class="c0 c1"
-            >
-              <div
-                class="c6 css-vurnku"
-                title="Dai Stablecoin"
-              >
-                Dai Stablecoin
-              </div>
-              <div
-                class="c7"
-              >
-                <div
-                  class="c8"
-                >
-                  <svg
-                    class="c9"
-                    fill="none"
-                    height="24"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-                    />
-                    <line
-                      x1="12"
-                      x2="12"
-                      y1="9"
-                      y2="13"
-                    />
-                    <line
-                      x1="12"
-                      x2="12.01"
-                      y1="17"
-                      y2="17"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-            <div
-              class="c10 css-yfjwjl"
-            >
-              DAI
-            </div>
-          </div>
-          <div
-            class="c4"
-          >
-            <div
-              class="c0 c1 c11"
-              style="justify-self: flex-end;"
-            />
-          </div>
-        </div>
-        <div
-          class="c0 c1 c2 c3 token-item-0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
-          style="position: absolute; left: 0px; top: 56px; height: 56px; width: 100%;"
-          tabindex="0"
-        >
-          <div
-            class="c4"
-          >
-            CurrencyLogo currency=USDC
-          </div>
-          <div
-            class="c5"
-            style="opacity: 1;"
-          >
-            <div
-              class="c0 c1"
-            >
-              <div
-                class="c6 css-vurnku"
-                title="USD//C"
-              >
-                USD//C
-              </div>
-              <div
-                class="c7"
-              >
-                <div
-                  class="c8"
-                >
-                  <svg
-                    class="c9"
-                    fill="none"
-                    height="24"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-                    />
-                    <line
-                      x1="12"
-                      x2="12"
-                      y1="9"
-                      y2="13"
-                    />
-                    <line
-                      x1="12"
-                      x2="12.01"
-                      y1="17"
-                      y2="17"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-            <div
-              class="c10 css-yfjwjl"
-            >
-              USDC
-            </div>
-          </div>
-          <div
-            class="c4"
-          >
-            <div
-              class="c0 c1 c11"
-              style="justify-self: flex-end;"
-            />
-          </div>
-        </div>
-        <div
-          class="c0 c1 c2 c3 token-item-0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
-          style="position: absolute; left: 0px; top: 112px; height: 56px; width: 100%;"
-          tabindex="0"
-        >
-          <div
-            class="c4"
-          >
-            CurrencyLogo currency=WBTC
-          </div>
-          <div
-            class="c5"
-            style="opacity: 1;"
-          >
-            <div
-              class="c0 c1"
-            >
-              <div
-                class="c6 css-vurnku"
-                title="Wrapped BTC"
-              >
-                Wrapped BTC
-              </div>
-              <div
-                class="c7"
-              >
-                <div
-                  class="c8"
-                >
-                  <svg
-                    class="c9"
-                    fill="none"
-                    height="24"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-                    />
-                    <line
-                      x1="12"
-                      x2="12"
-                      y1="9"
-                      y2="13"
-                    />
-                    <line
-                      x1="12"
-                      x2="12.01"
-                      y1="17"
-                      y2="17"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-            <div
-              class="c10 css-yfjwjl"
-            >
-              WBTC
-            </div>
-          </div>
-          <div
-            class="c4"
-          >
-            <div
-              class="c0 c1 c11"
-              style="justify-self: flex-end;"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`renders loading rows when isLoading is true 1`] = `
-<DocumentFragment>
-  .c0 {
-  display: grid;
-}
-
-.c0 > div {
-  -webkit-animation: fAQEyV 1.5s infinite;
-  animation: fAQEyV 1.5s infinite;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-  background: linear-gradient( to left,#F5F6FC 25%,#E8ECFB 50%,#F5F6FC 75% );
-  background-size: 400%;
-  border-radius: 12px;
-  height: 2.4em;
-  will-change: background-position;
-}
-
-.c1 {
-  grid-column-gap: 0.5em;
-  grid-template-columns: repeat(12,1fr);
-  max-width: 960px;
-  padding: 12px 20px;
-}
-
-.c1 > div:nth-child(4n + 1) {
-  grid-column: 1 / 8;
-  height: 1em;
-  margin-bottom: 0.25em;
-}
-
-.c1 > div:nth-child(4n + 2) {
-  grid-column: 12;
-  height: 1em;
-  margin-top: 0.25em;
-}
-
-.c1 > div:nth-child(4n + 3) {
-  grid-column: 1 / 4;
-  height: 0.75em;
-}
-
-<div
-    style="padding-right: 4px;"
-  >
-    <div
-      class="CurrencyList_scrollbarStyle__1pi21y70"
-      style="position: relative; height: 10px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
-    >
-      <div
-        style="height: 560px; width: 100%;"
-      >
-        <div
-          class="c0 c1"
-        >
-          <div />
-          <div />
-          <div />
-        </div>
-        <div
-          class="c0 c1"
-        >
-          <div />
-          <div />
-          <div />
-        </div>
-        <div
-          class="c0 c1"
-        >
-          <div />
-          <div />
-          <div />
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;

src/components/SearchModal/CurrencyList/index.test.tsx

+import { screen } from '@testing-library/react'
 import { Currency, CurrencyAmount as mockCurrencyAmount, Token as mockToken } from '@uniswap/sdk-core'
 import { DAI, USDC_MAINNET, WBTC } from 'constants/tokens'
 import * as mockJSBI from 'jsbi'
@@ -42,37 +43,38 @@ jest.mock('../../../state/connection/hooks', () => {
 })
 
 it('renders loading rows when isLoading is true', () => {
-  const { asFragment } = render(
+  const component = render(
     <CurrencyList
       height={10}
       currencies={[]}
       otherListTokens={[]}
       selectedCurrency={null}
       onCurrencySelect={noOp}
-      showImportView={noOp}
-      setImportToken={noOp}
       isLoading={true}
       searchQuery=""
       isAddressSearch=""
     />
   )
-  expect(asFragment()).toMatchSnapshot()
+  expect(component.findByTestId('loading-rows')).toBeTruthy()
+  expect(screen.queryByText('Wrapped BTC')).not.toBeInTheDocument()
+  expect(screen.queryByText('DAI')).not.toBeInTheDocument()
+  expect(screen.queryByText('USDC')).not.toBeInTheDocument()
 })
 
 it('renders currency rows correctly when currencies list is non-empty', () => {
-  const { asFragment } = render(
+  render(
     <CurrencyList
       height={10}
       currencies={[DAI, USDC_MAINNET, WBTC]}
       otherListTokens={[]}
       selectedCurrency={null}
       onCurrencySelect={noOp}
-      showImportView={noOp}
-      setImportToken={noOp}
       isLoading={false}
       searchQuery=""
       isAddressSearch=""
     />
   )
-  expect(asFragment()).toMatchSnapshot()
+  expect(screen.getByText('Wrapped BTC')).toBeInTheDocument()
+  expect(screen.getByText('DAI')).toBeInTheDocument()
+  expect(screen.getByText('USDC')).toBeInTheDocument()
 })

src/components/SearchModal/CurrencyList/index.tsx

@@ -20,7 +20,7 @@ import CurrencyLogo from '../../Logo/CurrencyLogo'
 import Row, { RowFixed } from '../../Row'
 import { MouseoverTooltip } from '../../Tooltip'
 import { LoadingRows, MenuItem } from '../styleds'
-import * as styles from './index.css'
+import { scrollbarStyle } from './index.css'
 
 function currencyKey(currency: Currency): string {
   return currency.isToken ? currency.address : 'ETHER'
@@ -65,6 +65,10 @@ const WarningContainer = styled.div`
   margin-left: 0.3em;
 `
 
+const ListWrapper = styled.div`
+  padding-right: 0.25rem;
+`
+
 function Balance({ balance }: { balance: CurrencyAmount<Currency> }) {
   return <StyledBalanceText title={balance.toExact()}>{balance.toSignificant(4)}</StyledBalanceText>
 }
@@ -212,7 +216,7 @@ export const formatAnalyticsEventProperties = (
 })
 
 const LoadingRow = () => (
-  <LoadingRows>
+  <LoadingRows data-testid="loading-rows">
     <div />
     <div />
     <div />
@@ -290,10 +294,10 @@ export default function CurrencyList({
   }, [])
 
   return (
-    <div style={{ paddingRight: '4px' }}>
+    <ListWrapper>
       {isLoading ? (
         <FixedSizeList
-          className={styles.scrollbarStyle}
+          className={scrollbarStyle}
           height={height}
           ref={fixedListRef as any}
           width="100%"
@@ -305,7 +309,7 @@ export default function CurrencyList({
         </FixedSizeList>
       ) : (
         <FixedSizeList
-          className={styles.scrollbarStyle}
+          className={scrollbarStyle}
           height={height}
           ref={fixedListRef as any}
           width="100%"
@@ -317,6 +321,6 @@ export default function CurrencyList({
           {Row}
         </FixedSizeList>
       )}
-    </div>
+    </ListWrapper>
   )
 }