test: adding in some basic token tests (#5686)

* adding in some basic token tests

cypress/e2e/token.test.ts

+import { getTestSelector, getTestSelectorStartsWith } from '../utils'
+
+describe('Testing tokens on uniswap page', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('should load token leaderboard', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.gte', 25)
+  })
+
+  it('should load go to ethereum token and return to token list page', () => {
+    cy.visit('/tokens/ethereum')
+    cy.get(getTestSelector('token-table-row-Ether')).click()
+    cy.get(getTestSelector('token-details-stats')).should('exist')
+    cy.get(getTestSelector('token-details-return-button')).click()
+    cy.get(getTestSelectorStartsWith('token-table')).its('length').should('be.gte', 25)
+  })
+})

cypress/utils/index.ts

 export const getTestSelector = (selectorId: string) => `[data-testid=${selectorId}]`
+
+export const getTestSelectorStartsWith = (selectorId: string) => `[data-testid^=${selectorId}]`

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -84,7 +84,7 @@ export default function StatsSection(props: StatsSectionProps) {
   const { priceLow52W, priceHigh52W, TVL, volume24H } = props
   if (TVL || volume24H || priceLow52W || priceHigh52W) {
     return (
-      <StatsWrapper>
+      <StatsWrapper data-testid="token-details-stats">
         <Header>
           <Trans>Stats</Trans>
         </Header>

src/components/Tokens/TokenDetails/index.tsx

@@ -185,7 +185,7 @@ export default function TokenDetails({
         {token && !isPending ? (
           <LeftPanel>
             <BreadcrumbNavLink to={`/tokens/${chain.toLowerCase()}`}>
-              <ArrowLeft size={14} /> Tokens
+              <ArrowLeft data-testid="token-details-return-button" size={14} /> Tokens
             </BreadcrumbNavLink>
             <TokenInfoContainer>
               <TokenNameCell>

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -457,7 +457,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
 
   // TODO: currency logo sizing mobile (32px) vs. desktop (24px)
   return (
-    <div ref={ref}>
+    <div ref={ref} data-testid={`token-table-row-${tokenName}`}>
       <StyledLink
         to={getTokenDetailsURL(token.address, token.chain)}
         onClick={() => sendAnalyticsEvent(EventName.EXPLORE_TOKEN_ROW_CLICKED, exploreTokenSelectedEventProperties)}