test: batch deposit e2e (#1892)

Co-authored-by: Dewansh <[email protected]>
OffchainLabs · Sep 19, 2024 · 6703c0a · 6703c0a
1 parent c1893a6
commit 6703c0a
Show file tree

Hide file tree

Showing 13 changed files with 358 additions and 23 deletions.
diff --git a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRow.tsx b/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRow.tsx
@@ -167,11 +167,27 @@ export function TransactionsTableRow({
     return tx.status === 'Failure'
   }, [tx])
 
+  const testId = useMemo(() => {
+    const type = isClaimableTx ? 'claimable' : 'deposit'
+    const id = `${type}-row-${tx.txId}-${tx.value}${tx.asset}`
+
+    if (tx.value2) {
+      return `${id}-${tx.value2}${nativeCurrency.symbol}`
+    }
+
+    return id
+  }, [
+    isClaimableTx,
+    nativeCurrency.symbol,
+    tx.asset,
+    tx.txId,
+    tx.value,
+    tx.value2
+  ])
+
   return (
     <div
-      data-testid={`${isClaimableTx ? 'claimable' : 'deposit'}-row-${tx.txId}-${
-        tx.value
-      }${tx.asset}`}
+      data-testid={testId}
       className={twMerge(
         'relative mx-4 grid h-[60px] grid-cols-[140px_140px_140px_140px_100px_170px_140px] items-center justify-between border-b border-white/30 text-xs text-white',
         className

diff --git a/...s/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/...s/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
@@ -48,7 +48,10 @@ function Amount2ToggleButton({
       className="border-white/30 shadow-2"
       onClick={onClick}
     >
-      <div className="flex items-center space-x-1">
+      <div
+        aria-label="Add native currency button"
+        className="flex items-center space-x-1"
+      >
         <PlusCircleIcon width={18} />
         <span>Add {nativeCurrency.symbol}</span>
       </div>
@@ -185,6 +188,7 @@ export function SourceNetworkBox({
                 maxAmount={maxAmount2}
                 isMaxAmount={isMaxAmount2}
                 decimals={nativeCurrency.decimals}
+                aria-label="Amount2 input"
               />
               <p className="mt-1 text-xs font-light text-white">
                 You can transfer {nativeCurrency.symbol} in the same transaction

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
@@ -74,9 +74,11 @@ function MaxButton({
 }
 
 function SourceChainTokenBalance({
-  balanceOverride
+  balanceOverride,
+  symbolOverride
 }: {
   balanceOverride?: AmountInputOptions['balance']
+  symbolOverride?: AmountInputOptions['symbol']
 }) {
   const {
     app: { selectedToken }
@@ -105,15 +107,18 @@ function SourceChainTokenBalance({
         })
       : null
 
+  const symbol =
+    symbolOverride ?? selectedToken?.symbol ?? nativeCurrency.symbol
+
   if (formattedBalance) {
     return (
       <>
         <span className="text-sm font-light text-white">Balance: </span>
         <span
           className="whitespace-nowrap text-sm text-white"
-          aria-label={`${
-            selectedToken?.symbol ?? nativeCurrency.symbol
-          } balance amount on ${isDepositMode ? 'parentChain' : 'childChain'}`}
+          aria-label={`${symbol} balance amount on ${
+            isDepositMode ? 'parentChain' : 'childChain'
+          }`}
         >
           {formattedBalance}
         </span>
@@ -284,7 +289,10 @@ export const TransferPanelMainInput = React.memo(
             <div className="flex flex-col items-end">
               <TokenButton options={options} />
               <div className="flex items-center space-x-1 px-3 pb-2 pt-1">
-                <SourceChainTokenBalance balanceOverride={options?.balance} />
+                <SourceChainTokenBalance
+                  balanceOverride={options?.balance}
+                  symbolOverride={options?.symbol}
+                />
                 <MaxButton onClick={handleMaxButtonClick} />
               </div>
             </div>

diff --git a/packages/arb-token-bridge-ui/src/hooks/TransferPanel/useIsBatchTransferSupported.ts b/packages/arb-token-bridge-ui/src/hooks/TransferPanel/useIsBatchTransferSupported.ts
@@ -1,5 +1,4 @@
 import { useAppState } from '../../state'
-import { isExperimentalFeatureEnabled } from '../../util'
 import { isTokenNativeUSDC } from '../../util/TokenUtils'
 import { useNetworks } from '../useNetworks'
 import { useNetworksRelationship } from '../useNetworksRelationship'
@@ -11,9 +10,6 @@ export const useIsBatchTransferSupported = () => {
     app: { selectedToken }
   } = useAppState()
 
-  if (!isExperimentalFeatureEnabled('batch')) {
-    return false
-  }
   if (!selectedToken) {
     return false
   }

diff --git a/packages/arb-token-bridge-ui/src/util/TokenDepositUtils.ts b/packages/arb-token-bridge-ui/src/util/TokenDepositUtils.ts
@@ -13,7 +13,6 @@ import { addressIsSmartContract } from './AddressUtils'
 import { getChainIdFromProvider } from '../token-bridge-sdk/utils'
 import { captureSentryErrorWithExtraData } from './SentryUtils'
 import { MergedTransaction } from '../state/app/state'
-import { isExperimentalFeatureEnabled } from '.'
 
 async function fetchTokenFallbackGasEstimates({
   inboxAddress,
@@ -221,7 +220,6 @@ async function addressIsCustomGatewayToken({
 
 export function isBatchTransfer(tx: MergedTransaction) {
   return (
-    isExperimentalFeatureEnabled('batch') &&
     !tx.isCctp &&
     !tx.isWithdrawal &&
     tx.assetType === AssetType.ERC20 &&

diff --git a/packages/arb-token-bridge-ui/src/util/index.ts b/packages/arb-token-bridge-ui/src/util/index.ts
@@ -54,7 +54,8 @@ export const getAPIBaseUrl = () => {
   return process.env.NODE_ENV === 'test' ? 'http://localhost:3000' : ''
 }
 
-const featureFlags = ['batch'] as const
+// add feature flags to the array
+const featureFlags = [] as const
 
 type FeatureFlag = (typeof featureFlags)[number]
 

diff --git a/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts b/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
@@ -8,7 +8,9 @@ import {
   searchAndSelectToken,
   fillCustomDestinationAddress,
   typeAmount,
+  typeAmount2,
   findAmountInput,
+  findAmount2Input,
   findSourceChainButton,
   findDestinationChainButton,
   findGasFeeSummary,
@@ -53,7 +55,9 @@ declare global {
       }): typeof searchAndSelectToken
       fillCustomDestinationAddress(): typeof fillCustomDestinationAddress
       typeAmount: typeof typeAmount
+      typeAmount2: typeof typeAmount2
       findAmountInput: typeof findAmountInput
+      findAmount2Input: typeof findAmount2Input
       findSourceChainButton: typeof findSourceChainButton
       findDestinationChainButton: typeof findDestinationChainButton
       findGasFeeForChain: typeof findGasFeeForChain

diff --git a/packages/arb-token-bridge-ui/tests/e2e/specfiles.json b/packages/arb-token-bridge-ui/tests/e2e/specfiles.json
@@ -24,6 +24,11 @@
     "file": "tests/e2e/specs/**/withdrawERC20.cy.{js,jsx,ts,tsx}",
     "recordVideo": "false"
   },
+  {
+    "name": "Batch deposit",
+    "file": "tests/e2e/specs/**/batchDeposit.cy.{js,jsx,ts,tsx}",
+    "recordVideo": "false"
+  },
   {
     "name": "TX history",
     "file": "tests/e2e/specs/**/txHistory.cy.{js,jsx,ts,tsx}",