chore: Cypress utility function for selecting feature flags and walletdrop...

chore: Cypress utility function for selecting feature flags and walletdrop down cypress tests (#4536)

* Adding feature flag utility to cypress and adding wallet cypress tests
Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>

cypress/e2e/wallet-dropdown.test.ts

+import { FeatureFlag } from '../../src/featureFlags/flags/featureFlags'
+import { getTestSelector } from '../utils'
+
+describe('Wallet Dropdown', () => {
+  before(() => {
+    cy.visit('/', { featureFlags: [FeatureFlag.navBar, FeatureFlag.tokenSafety] })
+  })
+
+  it('should change the theme', () => {
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get(getTestSelector('wallet-select-theme')).click()
+    cy.get(getTestSelector('wallet-select-theme')).contains('Light theme').should('exist')
+  })
+
+  it('should select a language', () => {
+    cy.get(getTestSelector('wallet-select-language')).click()
+    cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
+    cy.get(getTestSelector('wallet-header')).should('contain', 'Taal')
+    cy.get(getTestSelector('wallet-language-item')).contains('English').click({ force: true })
+    cy.get(getTestSelector('wallet-header')).should('contain', 'Language')
+    cy.get(getTestSelector('wallet-back')).click()
+  })
+
+  it('should be able to view transactions', () => {
+    cy.get(getTestSelector('wallet-transactions')).click()
+    cy.get(getTestSelector('wallet-empty-transaction-text')).should('exist')
+    cy.get(getTestSelector('wallet-back')).click()
+  })
+
+  it('should change the theme when not connected', () => {
+    cy.get(getTestSelector('wallet-disconnect')).click()
+    cy.get(getTestSelector('wallet-select-theme')).click()
+    cy.get(getTestSelector('wallet-select-theme')).contains('Dark theme').should('exist')
+  })
+
+  it('should select a language when not connected', () => {
+    cy.get(getTestSelector('wallet-select-language')).click()
+    cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
+    cy.get(getTestSelector('wallet-header')).should('contain', 'Taal')
+    cy.get(getTestSelector('wallet-language-item')).contains('English').click({ force: true })
+    cy.get(getTestSelector('wallet-header')).should('contain', 'Language')
+    cy.get(getTestSelector('wallet-back')).click()
+  })
+
+  it('should open the wallet connect modal from the drop down when not connected', () => {
+    cy.get(getTestSelector('wallet-connect-wallet')).click()
+    cy.get(getTestSelector('wallet-modal')).should('exist')
+    cy.get(getTestSelector('wallet-modal-close')).click()
+  })
+})

cypress/support/e2e.ts

@@ -9,6 +9,8 @@
 import { injected } from './ethereum'
 import assert = require('assert')
 
+import { FeatureFlag } from '../../src/featureFlags/flags/featureFlags'
+
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
@@ -17,6 +19,7 @@ declare global {
     }
     interface VisitOptions {
       serviceWorker?: true
+      featureFlags?: Array<FeatureFlag>
     }
   }
 }
@@ -36,6 +39,18 @@ Cypress.Commands.overwrite(
           options?.onBeforeLoad?.(win)
           win.localStorage.clear()
           win.localStorage.setItem('redux_localstorage_simple_user', '{"selectedWallet":"INJECTED"}')
+
+          if (options?.featureFlags) {
+            const featureFlags = options.featureFlags.reduce(
+              (flags, flag) => ({
+                ...flags,
+                [flag]: 'enabled',
+              }),
+              {}
+            )
+            win.localStorage.setItem('featureFlags', JSON.stringify(featureFlags))
+          }
+
           win.ethereum = injected
         },
       })

cypress/utils/index.ts

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

src/components/WalletDropdown/AuthenticatedHeader.tsx

@@ -132,7 +132,12 @@ const AuthenticatedHeader = () => {
         <IconContainer>
           <IconButton onClick={copy} Icon={Copy} text={isCopied ? <Trans>Copied!</Trans> : <Trans>Copy</Trans>} />
           <IconButton href={`${explorer}address/${account}`} Icon={ExternalLink} text={<Trans>Explore</Trans>} />
-          <IconButton onClick={disconnect} Icon={Power} text={<Trans>Disconnect</Trans>} />
+          <IconButton
+            dataTestId="wallet-disconnect"
+            onClick={disconnect}
+            Icon={Power}
+            text={<Trans>Disconnect</Trans>}
+          />
         </IconContainer>
       </HeaderWrapper>
       <Column>

src/components/WalletDropdown/DefaultMenu.tsx

@@ -114,11 +114,13 @@ const WalletDropdown = ({ setMenu }: { setMenu: (state: MenuState) => void }) =>
       {isAuthenticated ? (
         <AuthenticatedHeader />
       ) : (
-        <ConnectButton onClick={toggleWalletModal}>Connect wallet</ConnectButton>
+        <ConnectButton data-testid="wallet-connect-wallet" onClick={toggleWalletModal}>
+          Connect wallet
+        </ConnectButton>
       )}
       <Divider />
       {isAuthenticated && (
-        <ToggleMenuItem onClick={() => setMenu(MenuState.TRANSACTIONS)}>
+        <ToggleMenuItem data-testid="wallet-transactions" onClick={() => setMenu(MenuState.TRANSACTIONS)}>
           <DefaultText>
             <Trans>Transactions</Trans>{' '}
             {pendingTransactions.length > 0 && (
@@ -132,7 +134,7 @@ const WalletDropdown = ({ setMenu }: { setMenu: (state: MenuState) => void }) =>
           </IconWrap>
         </ToggleMenuItem>
       )}
-      <ToggleMenuItem onClick={() => setMenu(MenuState.LANGUAGE)}>
+      <ToggleMenuItem data-testid="wallet-select-language" onClick={() => setMenu(MenuState.LANGUAGE)}>
         <DefaultText>
           <Trans>Language</Trans>
         </DefaultText>
@@ -145,7 +147,7 @@ const WalletDropdown = ({ setMenu }: { setMenu: (state: MenuState) => void }) =>
           </IconWrap>
         </FlexContainer>
       </ToggleMenuItem>
-      <ToggleMenuItem onClick={toggleDarkMode}>
+      <ToggleMenuItem data-testid="wallet-select-theme" onClick={toggleDarkMode}>
         <DefaultText>{darkMode ? <Trans> Light theme</Trans> : <Trans>Dark theme</Trans>}</DefaultText>
         <IconWrap>{darkMode ? <Sun size={16} /> : <Moon size={16} />}</IconWrap>
       </ToggleMenuItem>

src/components/WalletDropdown/IconButton.tsx

@@ -64,18 +64,19 @@ interface IconButtonProps {
   Icon: Icon
   onClick?: () => void
   href?: string
+  dataTestId?: string
 }
 
-const IconButton = ({ Icon, onClick, text, href }: IconButtonProps) => {
+const IconButton = ({ Icon, onClick, text, href, dataTestId }: IconButtonProps) => {
   return href ? (
-    <IconBlockLink href={href} target="_blank">
+    <IconBlockLink data-testId={dataTestId} href={href} target="_blank">
       <IconWrapper>
         <Icon strokeWidth={1.5} size={16} />
         <IconHoverText>{text}</IconHoverText>
       </IconWrapper>
     </IconBlockLink>
   ) : (
-    <IconBlockButton onClick={onClick}>
+    <IconBlockButton data-testId={dataTestId} onClick={onClick}>
       <IconWrapper>
         <Icon strokeWidth={1.5} size={16} />
         <IconHoverText>{text}</IconHoverText>

src/components/WalletDropdown/LanguageMenu.tsx

@@ -45,7 +45,7 @@ function LanguageMenuItem({ locale, isActive }: { locale: SupportedLocale; isAct
 
   return (
     <InternalLinkMenuItem onClick={onClick} to={to}>
-      <Text fontSize={16} fontWeight={400} lineHeight="24px">
+      <Text data-testid="wallet-language-item" fontSize={16} fontWeight={400} lineHeight="24px">
         {LOCALE_LABEL[locale]}
       </Text>
       {isActive && <Check color={theme.accentActive} opacity={1} size={20} />}

src/components/WalletDropdown/SlideOutMenu.tsx

@@ -101,8 +101,8 @@ export const SlideOutMenu = ({
   <Menu>
     <BackSection>
       <BackSectionContainer>
-        <StyledChevron onClick={onClose} size={24} />
-        <Header>{title}</Header>
+        <StyledChevron data-testid="wallet-back" onClick={onClose} size={24} />
+        <Header data-testid="wallet-header">{title}</Header>
         {onClear && <ClearAll onClick={onClear}>Clear All</ClearAll>}
       </BackSectionContainer>
     </BackSection>

src/components/WalletDropdown/TransactionMenu.tsx

@@ -158,7 +158,7 @@ export const TransactionHistoryMenu = ({ onClose }: { onClose: () => void }) =>
           ))}
         </>
       ) : (
-        <EmptyTransaction>
+        <EmptyTransaction data-testid="wallet-empty-transaction-text">
           <Trans>Your transactions will appear here</Trans>
         </EmptyTransaction>
       )}

src/components/WalletModal/index.tsx

@@ -333,7 +333,7 @@ export default function WalletModal({
 
     return (
       <UpperSection>
-        <CloseIcon onClick={toggleWalletModal}>
+        <CloseIcon data-testid="wallet-modal-close" onClick={toggleWalletModal}>
           <CloseColor />
         </CloseIcon>
         {headerRow}
@@ -363,7 +363,9 @@ export default function WalletModal({
       maxHeight={90}
       redesignFlag={redesignFlagEnabled}
     >
-      <Wrapper redesignFlag={redesignFlagEnabled}>{getModalContent()}</Wrapper>
+      <Wrapper data-testid="wallet-modal" redesignFlag={redesignFlagEnabled}>
+        {getModalContent()}
+      </Wrapper>
     </Modal>
   )
 }

src/components/Web3Status/index.tsx

@@ -252,14 +252,22 @@ function Web3StatusInner() {
       >
         {navbarFlagEnabled ? (
           <Web3StatusConnectNavbar faded={!account}>
-            <StyledConnect onClick={toggleWalletModal}>
+            <StyledConnect data-testid="navbar-connect-wallet" onClick={toggleWalletModal}>
               <Trans>Connect</Trans>
             </StyledConnect>
             <VerticalDivider />
             {walletIsOpen ? (
-              <StyledChevronUp customColor={theme.accentAction} onClick={toggleWalletDropdown} />
+              <StyledChevronUp
+                data-testid="navbar-wallet-dropdown"
+                customColor={theme.accentAction}
+                onClick={toggleWalletDropdown}
+              />
             ) : (
-              <StyledChevronDown customColor={theme.accentAction} onClick={toggleWalletDropdown} />
+              <StyledChevronDown
+                data-testid="navbar-wallet-dropdown"
+                customColor={theme.accentAction}
+                onClick={toggleWalletDropdown}
+              />
             )}
           </Web3StatusConnectNavbar>
         ) : (

src/featureFlags/flags/featureFlags.ts

+export enum FeatureFlag {
+  navBar = 'navBar',
+  nft = 'nfts',
+  redesign = 'redesign',
+  tokens = 'tokens',
+  tokensNetworkFilter = 'tokensNetworkFilter',
+  tokenSafety = 'tokenSafety',
+}

src/featureFlags/index.tsx

 import { useAtom } from 'jotai'
 import { atomWithStorage, useAtomValue } from 'jotai/utils'
 import { createContext, ReactNode, useCallback, useContext } from 'react'
+export { FeatureFlag } from './flags/featureFlags'
 
 interface FeatureFlagsContextType {
   isLoaded: boolean
@@ -53,16 +54,6 @@ export enum BaseVariant {
   Enabled = 'enabled',
 }
 
-export enum FeatureFlag {
-  navBar = 'navBar',
-  wallet = 'wallet',
-  nft = 'nfts',
-  redesign = 'redesign',
-  tokens = 'tokens',
-  tokensNetworkFilter = 'tokensNetworkFilter',
-  tokenSafety = 'tokenSafety',
-}
-
 export function useBaseFlag(flag: string): BaseVariant {
   switch (useFeatureFlagsContext().flags[flag]) {
     case 'enabled':