test: deflake and clean universal search (#7034)

cypress/e2e/universal-search.test.ts

+import { getTestSelector } from '../utils'
+
 describe('Universal search bar', () => {
   function openSearch() {
     // can't just type "/" because on mobile it doesn't respond to that
@@ -6,86 +8,46 @@ describe('Universal search bar', () => {
 
   beforeEach(() => {
     cy.visit('/')
-    openSearch()
   })
 
   function getSearchBar() {
     return cy.get('[data-cy="search-bar-input"]').last()
   }
 
-  it('should yield clickable result for regular token or nft collection search term', () => {
-    // Search for uni token by name.
+  it('should yield clickable result that is then added to recent searches', () => {
+    // Search for UNI token by name.
+    openSearch()
     getSearchBar().clear().type('uni')
-    cy.get('[data-cy="searchbar-token-row-UNI"]')
+
+    cy.get(getTestSelector('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"]').first().click()
+      .click()
     cy.location('hash').should('equal', '#/tokens/ethereum/0x1f9840a85d5af5bf1d1762f925bdaddc4201f984')
-  })
-
-  it(
-    'should go to the selected result when recent results are shown',
-    // this test is experiencing flake despite being correct, i can see the right value in DOM
-    // but for some reason cypress doesn't find it, so adding retries for now :/
-    {
-      retries: {
-        runMode: 3,
-        openMode: 3,
-      },
-    },
-    () => {
-      // Search for uni token by name.
-      getSearchBar().type('uni')
-      cy.get('[data-cy="searchbar-token-row-UNI"]')
-
-      // Clear search
-      getSearchBar().clear()
-
-      // Close search
-      getSearchBar().type('{esc}')
-
-      openSearch()
-
-      // Search a different token by name.
-      getSearchBar().type('eth')
 
-      // Validate ETH result now exists.
-      cy.get('[data-cy="searchbar-token-row-ETH"]')
-
-      // Hit enter
-      getSearchBar().type('{enter}')
-
-      // Validate we went to ethereum address
-      cy.url().should('contain', 'tokens/ethereum/NATIVE')
-    }
-  )
-
-  it.skip('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.
-    getSearchBar().clear()
-    cy.get('[data-cy="searchbar-dropdown"]')
-      .contains('[data-cy="searchbar-dropdown"]', 'Recent searches')
-      .find('[data-cy="searchbar-token-row-UNI"]')
+    openSearch()
+    cy.get(getTestSelector('searchbar-dropdown'))
+      .contains(getTestSelector('searchbar-dropdown'), 'Recent searches')
+      .find(getTestSelector('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.skip('should show blocked badge when blocked token is searched for', () => {
-    // Search for mTSLA, which is a blocked token.
-    getSearchBar().clear().type('mtsla')
-    cy.get('[data-cy="searchbar-token-row-mTSLA"]').find('[data-cy="blocked-icon"]').should('exist')
+  it('should go to the selected result when recent results are shown', () => {
+    // Seed recent results with UNI.
+    openSearch()
+    getSearchBar().type('uni')
+    cy.get(getTestSelector('searchbar-token-row-UNI'))
+    getSearchBar().clear().type('{esc}')
+
+    // Search a different token by name.
+    openSearch()
+    getSearchBar().type('eth')
+    cy.get(getTestSelector('searchbar-token-row-ETH'))
+
+    // Validate that we go to the searched/selected result.
+    getSearchBar().type('{enter}')
+    cy.url().should('contain', 'tokens/ethereum/NATIVE')
   })
 })

src/components/NavBar/SearchBarDropdown.tsx

@@ -57,7 +57,7 @@ const SearchBarDropdownSection = ({
   eventProperties,
 }: SearchBarDropdownSectionProps) => {
   return (
-    <Column gap="12" data-cy="searchbar-dropdown">
+    <Column gap="12" data-testid="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

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

src/components/NavBar/__snapshots__/SearchBarDropdown.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`disable nft on searchbar dropdown should not render popular nft collect
       >
         <div
           class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_column_sm__rgw6ez477 sprinkles_gap_12_sm__rgw6ez3tj"
-          data-cy="searchbar-dropdown"
+          data-testid="searchbar-dropdown"
         >
           <div
             class="reset_base__1klryar0 sprinkles_paddingLeft_16_sm__rgw6ez2e7 sprinkles_paddingRight_16_sm__rgw6ez2jp sprinkles_paddingTop_4_sm__rgw6ez2o7 sprinkles_paddingBottom_4_sm__rgw6ez27p sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_row_sm__rgw6ez471 sprinkles_alignItems_center_sm__rgw6ez3j sprinkles_gap_8_sm__rgw6ez3t7 sprinkles_color_gray300_default__rgw6ez4k1 common__127l8hd4 sprinkles_fontWeight_medium_sm__rgw6ezcv sprinkles_fontSize_14_sm__rgw6ezav sprinkles_lineHeight_14_sm__rgw6ezdv"
@@ -133,7 +133,7 @@ exports[`disable nft on searchbar dropdown should render popular nft collections
       >
         <div
           class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_column_sm__rgw6ez477 sprinkles_gap_12_sm__rgw6ez3tj"
-          data-cy="searchbar-dropdown"
+          data-testid="searchbar-dropdown"
         >
           <div
             class="reset_base__1klryar0 sprinkles_paddingLeft_16_sm__rgw6ez2e7 sprinkles_paddingRight_16_sm__rgw6ez2jp sprinkles_paddingTop_4_sm__rgw6ez2o7 sprinkles_paddingBottom_4_sm__rgw6ez27p sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_row_sm__rgw6ez471 sprinkles_alignItems_center_sm__rgw6ez3j sprinkles_gap_8_sm__rgw6ez3t7 sprinkles_color_gray300_default__rgw6ez4k1 common__127l8hd4 sprinkles_fontWeight_medium_sm__rgw6ezcv sprinkles_fontSize_14_sm__rgw6ezav sprinkles_lineHeight_14_sm__rgw6ezdv"
@@ -236,7 +236,7 @@ exports[`disable nft on searchbar dropdown should render popular nft collections
         </div>
         <div
           class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_column_sm__rgw6ez477 sprinkles_gap_12_sm__rgw6ez3tj"
-          data-cy="searchbar-dropdown"
+          data-testid="searchbar-dropdown"
         >
           <div
             class="reset_base__1klryar0 sprinkles_paddingLeft_16_sm__rgw6ez2e7 sprinkles_paddingRight_16_sm__rgw6ez2jp sprinkles_paddingTop_4_sm__rgw6ez2o7 sprinkles_paddingBottom_4_sm__rgw6ez27p sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_row_sm__rgw6ez471 sprinkles_alignItems_center_sm__rgw6ez3j sprinkles_gap_8_sm__rgw6ez3t7 sprinkles_color_gray300_default__rgw6ez4k1 common__127l8hd4 sprinkles_fontWeight_medium_sm__rgw6ezcv sprinkles_fontSize_14_sm__rgw6ezav sprinkles_lineHeight_14_sm__rgw6ezdv"