From b55680dbcece569035ad0656943dd5aad45dc020 Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Fri, 28 Jul 2023 16:36:13 -0700 Subject: [PATCH] test: deflake and clean universal search (#7034) --- cypress/e2e/universal-search.test.ts | 92 ++++++------------- src/components/NavBar/SearchBarDropdown.tsx | 2 +- src/components/NavBar/SuggestionRow.tsx | 2 +- .../SearchBarDropdown.test.tsx.snap | 6 +- 4 files changed, 32 insertions(+), 70 deletions(-) diff --git a/cypress/e2e/universal-search.test.ts b/cypress/e2e/universal-search.test.ts index 5f8e7edb66..f55de3378a 100644 --- a/cypress/e2e/universal-search.test.ts +++ b/cypress/e2e/universal-search.test.ts @@ -1,3 +1,5 @@ +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') }) }) diff --git a/src/components/NavBar/SearchBarDropdown.tsx b/src/components/NavBar/SearchBarDropdown.tsx index 0d0d2cfe82..9c0c68b968 100644 --- a/src/components/NavBar/SearchBarDropdown.tsx +++ b/src/components/NavBar/SearchBarDropdown.tsx @@ -57,7 +57,7 @@ const SearchBarDropdownSection = ({ eventProperties, }: SearchBarDropdownSectionProps) => { return ( - + {headerIcon ? headerIcon : null} {header} diff --git a/src/components/NavBar/SuggestionRow.tsx b/src/components/NavBar/SuggestionRow.tsx index 86d0760bd9..4655f11a6f 100644 --- a/src/components/NavBar/SuggestionRow.tsx +++ b/src/components/NavBar/SuggestionRow.tsx @@ -160,7 +160,7 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index, return ( !isHovered && setHoveredIndex(index)} diff --git a/src/components/NavBar/__snapshots__/SearchBarDropdown.test.tsx.snap b/src/components/NavBar/__snapshots__/SearchBarDropdown.test.tsx.snap index 85b52371c9..4307ed35e8 100644 --- a/src/components/NavBar/__snapshots__/SearchBarDropdown.test.tsx.snap +++ b/src/components/NavBar/__snapshots__/SearchBarDropdown.test.tsx.snap @@ -13,7 +13,7 @@ exports[`disable nft on searchbar dropdown should not render popular nft collect >