style: use data-testid in cypress test (#4001)

* use data-testid

* findByTestId

test -> it

add types

temp

rm exclude

get -> find

* Revert "findByTestId"

This reverts commit 1e1c483ef90596b41f649443be1b191414ab3876.

* rm some test ids

* fix

cypress/e2e/wallet.test.ts

@@ -6,25 +6,25 @@ describe('Wallet', () => {
   })
 
   it('displays account details', () => {
-    cy.get('#web3-status-connected').contains(TEST_ADDRESS_NEVER_USE_SHORTENED).click()
+    cy.get('[data-testid=web3-status-connected]').contains(TEST_ADDRESS_NEVER_USE_SHORTENED).click()
   })
 
   it('displays account view in wallet modal', () => {
-    cy.get('#web3-account-identifier-row').contains(TEST_ADDRESS_NEVER_USE_SHORTENED)
+    cy.get('[data-testid=web3-account-identifier-row]').contains(TEST_ADDRESS_NEVER_USE_SHORTENED)
   })
 
   it('changes back to the options grid', () => {
-    cy.get('[data-cy=wallet-change]').click()
-    cy.get('[data-cy=option-grid]').should('exist')
+    cy.contains('Change').click()
+    cy.get('[data-testid=option-grid]').should('exist')
   })
 
   it('selects injected wallet option', () => {
     cy.contains('Injected').click()
-    cy.get('#web3-account-identifier-row').contains(TEST_ADDRESS_NEVER_USE_SHORTENED)
+    cy.get('[data-testid=web3-account-identifier-row]').contains(TEST_ADDRESS_NEVER_USE_SHORTENED)
   })
 
   it('shows connect buttons after disconnect', () => {
-    cy.get('[data-cy=wallet-disconnect]').click()
-    cy.get('[data-cy=option-grid]').should('exist')
+    cy.contains('Disconnect').click()
+    cy.get('[data-testid=option-grid]').should('exist')
   })
 })

src/components/AccountDetails/index.tsx

@@ -274,7 +274,6 @@ export default function AccountDetails({
                         dispatch(updateSelectedWallet({ wallet: undefined }))
                         openOptions()
                       }}
-                      data-cy="wallet-disconnect"
                     >
                       <Trans>Disconnect</Trans>
                     </WalletAction>
@@ -284,13 +283,12 @@ export default function AccountDetails({
                     onClick={() => {
                       openOptions()
                     }}
-                    data-cy="wallet-change"
                   >
                     <Trans>Change</Trans>
                   </WalletAction>
                 </div>
               </AccountGroupingRow>
-              <AccountGroupingRow id="web3-account-identifier-row">
+              <AccountGroupingRow data-testid="web3-account-identifier-row">
                 <AccountControl>
                   {ENSName ? (
                     <>

src/components/WalletModal/index.tsx

@@ -334,7 +334,7 @@ export default function WalletModal({
                 tryActivation={tryActivation}
               />
             )}
-            {walletView !== WALLET_VIEWS.PENDING && <OptionGrid data-cy="option-grid">{getOptions()}</OptionGrid>}
+            {walletView !== WALLET_VIEWS.PENDING && <OptionGrid data-testid="option-grid">{getOptions()}</OptionGrid>}
             {!pendingError && (
               <LightCard>
                 <AutoRow style={{ flexWrap: 'nowrap' }}>

src/components/Web3Status/index.tsx

@@ -181,7 +181,11 @@ function Web3StatusInner() {
     )
   } else if (account) {
     return (
-      <Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
+      <Web3StatusConnected
+        data-testid="web3-status-connected"
+        onClick={toggleWalletModal}
+        pending={hasPendingTransactions}
+      >
         {hasPendingTransactions ? (
           <RowBetween>
             <Text>
@@ -200,7 +204,7 @@ function Web3StatusInner() {
     )
   } else {
     return (
-      <Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
+      <Web3StatusConnect onClick={toggleWalletModal} faded={!account}>
         <Text>
           <Trans>Connect Wallet</Trans>
         </Text>