chore: token explore filter e2e test (#5835)

* init

* fix

* init

* remove old token test

* fixes

* remove extraneous tokens test

* init

* tests working

* remove unnecessary data-cy

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

+describe('Token explore filter', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('should filter correctly by uni search term', () => {
+    cy.visit('/tokens/ethereum')
+    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)
+        })
+      })
+    })
+  })
+
+  it('should filter correctly by dao search term', () => {
+    cy.visit('/tokens/ethereum')
+    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)
+        })
+      })
+    })
+  })
+
+  it('should filter correctly by ax search term', () => {
+    cy.visit('/tokens/ethereum')
+    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)
+        })
+      })
+    })
+  })
+})

src/components/Tokens/TokenTable/SearchBar.tsx

@@ -84,6 +84,7 @@ export default function SearchBar() {
             element={InterfaceElementName.EXPLORE_SEARCH_INPUT}
           >
             <SearchInput
+              data-cy="explore-tokens-search-input"
               type="search"
               placeholder={`${translation}`}
               id="searchBar"

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -490,7 +490,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
                 <L2NetworkLogo networkUrl={L2Icon} />
               </LogoContainer>
               <TokenInfoCell>
-                <TokenName>{token.name}</TokenName>
+                <TokenName data-cy="token-name">{token.name}</TokenName>
                 <TokenSymbol>{token.symbol}</TokenSymbol>
               </TokenInfoCell>
             </ClickableName>