chore: universal search e2e test (#5839)

* init

* change comments

* init

* done

* charlie comments

* fix lint

* fix explore filter test

cypress/e2e/token-explore-filter.test.ts

@@ -4,62 +4,80 @@ describe('Token explore filter', () => {
   })
 
   it('should filter correctly by uni search term', () => {
-    cy.visit('/tokens/ethereum')
+    cy.visit('/tokens')
     cy.get('[data-cy="token-name"]').then(($els) => {
       const tokenNames = Array.from($els, (el) => el.innerText)
       const filteredByUni = tokenNames.filter((tokenName) => tokenName.toLowerCase().includes('uni'))
       cy.wrap(filteredByUni).as('filteredByUni')
     })
 
-    cy.get('[data-cy="explore-tokens-search-input"]').clear().type('uni').type('{enter}')
-    cy.get('@filteredByUni').then((filteredByUni) => {
-      cy.get('[data-cy="token-name"]').then(($els) => {
-        const tokenNames = Array.from($els, (el) => el.innerText)
-        expect(tokenNames.length).to.equal(filteredByUni.length)
-        tokenNames.forEach((tokenName) => {
-          expect(filteredByUni).to.include(tokenName)
+    cy.get('[data-cy="explore-tokens-search-input"]')
+      .clear()
+      .type('uni')
+      .type('{enter}')
+      .then(() => {
+        cy.get('[data-cy="token-name"]').its('length').should('be.lt', 100)
+        cy.get('@filteredByUni').then((filteredByUni) => {
+          cy.get('[data-cy="token-name"]').then(($els) => {
+            const tokenNames = Array.from($els, (el) => el.innerText)
+            expect(tokenNames.length).to.equal(filteredByUni.length)
+            tokenNames.forEach((tokenName) => {
+              expect(filteredByUni).to.include(tokenName)
+            })
+          })
         })
       })
-    })
   })
 
   it('should filter correctly by dao search term', () => {
-    cy.visit('/tokens/ethereum')
+    cy.visit('/tokens')
     cy.get('[data-cy="token-name"]').then(($els) => {
       const tokenNames = Array.from($els, (el) => el.innerText)
       const filteredByDao = tokenNames.filter((tokenName) => tokenName.toLowerCase().includes('dao'))
       cy.wrap(filteredByDao).as('filteredByDao')
     })
 
-    cy.get('[data-cy="explore-tokens-search-input"]').clear().type('dao').type('{enter}')
-    cy.get('@filteredByDao').then((filteredByDao) => {
-      cy.get('[data-cy="token-name"]').then(($els) => {
-        const tokenNames = Array.from($els, (el) => el.innerText)
-        expect(tokenNames.length).to.equal(filteredByDao.length)
-        tokenNames.forEach((tokenName) => {
-          expect(filteredByDao).to.include(tokenName)
+    cy.get('[data-cy="explore-tokens-search-input"]')
+      .clear()
+      .type('dao')
+      .type('{enter}')
+      .then(() => {
+        cy.get('[data-cy="token-name"]').its('length').should('be.lt', 100)
+        cy.get('@filteredByDao').then((filteredByDao) => {
+          cy.get('[data-cy="token-name"]').then(($els) => {
+            const tokenNames = Array.from($els, (el) => el.innerText)
+            expect(tokenNames.length).to.equal(filteredByDao.length)
+            tokenNames.forEach((tokenName) => {
+              expect(filteredByDao).to.include(tokenName)
+            })
+          })
         })
       })
-    })
   })
 
   it('should filter correctly by ax search term', () => {
-    cy.visit('/tokens/ethereum')
+    cy.visit('/tokens')
     cy.get('[data-cy="token-name"]').then(($els) => {
       const tokenNames = Array.from($els, (el) => el.innerText)
       const filteredByAx = tokenNames.filter((tokenName) => tokenName.toLowerCase().includes('ax'))
       cy.wrap(filteredByAx).as('filteredByAx')
     })
 
-    cy.get('[data-cy="explore-tokens-search-input"]').clear().type('ax').type('{enter}')
-    cy.get('@filteredByAx').then((filteredByAx) => {
-      cy.get('[data-cy="token-name"]').then(($els) => {
-        const tokenNames = Array.from($els, (el) => el.innerText)
-        expect(tokenNames.length).to.equal(filteredByAx.length)
-        tokenNames.forEach((tokenName) => {
-          expect(filteredByAx).to.include(tokenName)
+    cy.get('[data-cy="explore-tokens-search-input"]')
+      .clear()
+      .type('ax')
+      .type('{enter}')
+      .then(() => {
+        cy.get('[data-cy="token-name"]').its('length').should('be.lt', 100)
+        cy.get('@filteredByAx').then((filteredByAx) => {
+          cy.get('[data-cy="token-name"]').then(($els) => {
+            const tokenNames = Array.from($els, (el) => el.innerText)
+            expect(tokenNames.length).to.equal(filteredByAx.length)
+            tokenNames.forEach((tokenName) => {
+              expect(filteredByAx).to.include(tokenName)
+            })
+          })
         })
       })
-    })
   })
 })

cypress/e2e/universal-search.test.ts

+import { getTestSelector } from '../utils'
+
+describe('Universal search bar', () => {
+  before(() => {
+    cy.visit('/')
+    cy.get('[data-cy="magnifying-icon"]')
+      .parent()
+      .then(($navIcon) => {
+        $navIcon.click()
+      })
+  })
+
+  it('should yield no results found when contract address is search term', () => {
+    // Search for uni token contract address.
+    cy.get('[data-cy="search-bar-input"]').last().type('0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+    cy.get('[data-cy="search-bar"]')
+      .should('contain.text', 'No tokens found.')
+      .and('contain.text', 'No NFT collections found.')
+  })
+
+  it('should yield clickable result for regular token or nft collection search term', () => {
+    // Search for uni token by name.
+    cy.get('[data-cy="search-bar-input"]').last().clear().type('uni')
+    cy.get('[data-cy="searchbar-token-row-UNI"]')
+      .should('contain.text', 'Uniswap')
+      .and('contain.text', 'UNI')
+      .and('contain.text', '$')
+      .and('contain.text', '%')
+    cy.get('[data-cy="searchbar-token-row-UNI"]').click()
+
+    cy.get('div').contains('Uniswap').should('exist')
+    // Stats should have: TVL, 24H Volume, 52W low, 52W high.
+    cy.get(getTestSelector('token-details-stats')).should('exist')
+    cy.get(getTestSelector('token-details-stats')).within(() => {
+      cy.get('[data-cy="tvl"]').should('include.text', '$')
+      cy.get('[data-cy="volume-24h"]').should('include.text', '$')
+      cy.get('[data-cy="52w-low"]').should('include.text', '$')
+      cy.get('[data-cy="52w-high"]').should('include.text', '$')
+    })
+
+    // About section should have description of token.
+    cy.get(getTestSelector('token-details-about-section')).should('exist')
+    cy.contains('UNI is the governance token for Uniswap').should('exist')
+  })
+
+  it('should show recent tokens and popular tokens with empty search term', () => {
+    cy.get('[data-cy="magnifying-icon"]')
+      .parent()
+      .then(($navIcon) => {
+        $navIcon.click()
+      })
+    // Recently searched UNI token should exist.
+    cy.get('[data-cy="search-bar-input"]').last().clear()
+    cy.get('[data-cy="searchbar-dropdown"]')
+      .contains('[data-cy="searchbar-dropdown"]', 'Recent searches')
+      .find('[data-cy="searchbar-token-row-UNI"]')
+      .should('exist')
+
+    // Most popular 3 tokens should be shown.
+    cy.get('[data-cy="searchbar-dropdown"]')
+      .contains('[data-cy="searchbar-dropdown"]', 'Popular tokens')
+      .find('[data-cy^="searchbar-token-row"]')
+      .its('length')
+      .should('be.eq', 3)
+  })
+
+  it('should show blocked badge when blocked token is searched for', () => {
+    // Search for mTSLA, which is a blocked token.
+    cy.get('[data-cy="search-bar-input"]').last().clear().type('mtsla')
+    cy.get('[data-cy="searchbar-token-row-mTSLA"]').find('[data-cy="blocked-icon"]').should('exist')
+  })
+})

src/components/NavBar/SearchBar.tsx

@@ -148,6 +148,7 @@ export const SearchBar = () => {
   return (
     <Trace section={InterfaceSectionName.NAVBAR_SEARCH}>
       <Box
+        data-cy="search-bar"
         position={{ sm: 'fixed', md: 'absolute', xl: 'relative' }}
         width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
         ref={searchRef}
@@ -187,6 +188,7 @@ export const SearchBar = () => {
               render={({ translation }) => (
                 <Box
                   as="input"
+                  data-cy="search-bar-input"
                   placeholder={translation as string}
                   onChange={(event: ChangeEvent<HTMLInputElement>) => {
                     !isOpen && toggleOpen()

src/components/NavBar/SearchBarDropdown.tsx

@@ -46,7 +46,7 @@ const SearchBarDropdownSection = ({
   eventProperties,
 }: SearchBarDropdownSectionProps) => {
   return (
-    <Column gap="12">
+    <Column gap="12" data-cy="searchbar-dropdown">
       <Row paddingX="16" paddingY="4" gap="8" color="gray300" className={subheadSmall} style={{ lineHeight: '20px' }}>
         {headerIcon ? headerIcon : null}
         <Box>{header}</Box>

src/components/NavBar/SuggestionRow.tsx

@@ -181,6 +181,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index,
 
   return (
     <Link
+      data-cy={`searchbar-token-row-${token.symbol}`}
       to={tokenDetailsPath}
       onClick={handleClick}
       onMouseEnter={() => !isHovered && setHoveredIndex(index)}

src/components/TokenSafety/TokenSafetyIcon.tsx

@@ -28,7 +28,7 @@ export default function TokenSafetyIcon({ warning }: { warning: Warning | null }
     case WARNING_LEVEL.BLOCKED:
       return (
         <WarningContainer>
-          <BlockedIcon strokeWidth={2.5} />
+          <BlockedIcon data-cy="blocked-icon" strokeWidth={2.5} />
         </WarningContainer>
       )
     case WARNING_LEVEL.UNKNOWN:

src/nft/components/icons.tsx

@@ -366,7 +366,14 @@ export const MagnifyingGlassIcon = (props: SVGProps) => (
 )
 
 export const NavMagnifyingGlassIcon = () => (
-  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    data-cy="magnifying-icon"
+  >
     <path
       d="M10.5 18C14.6421 18 18 14.6421 18 10.5C18 6.35786 14.6421 3 10.5 3C6.35786 3 3 6.35786 3 10.5C3 14.6421 6.35786 18 10.5 18Z"
       stroke="currentColor"