From f5bef009794bf1d9a26b4321c139e19e73924974 Mon Sep 17 00:00:00 2001
From: Evgeny Taktarov <je.mouth@gmail.com>
Date: Thu, 14 Dec 2023 16:18:21 +0700
Subject: [PATCH] fix: add test ids

---
 features/stake/stake-form/stake-form-info.tsx |  2 +-
 features/stake/stake-form/stake-form.tsx      |  2 +-
 features/stake/stake-form/wallet/wallet.tsx   |  2 +-
 features/withdrawals/claim/form/form.tsx      |  2 +-
 .../claim/form/requests-list/request-item.tsx | 18 ++++++++----
 .../withdrawals/claim/form/submit-button.tsx  |  1 +
 .../claim/form/transaction-info.tsx           |  6 +++-
 .../claim/wallet/wallet-availale-amount.tsx   |  1 +
 .../claim/wallet/wallet-pending-amount.tsx    |  1 +
 features/withdrawals/claim/wallet/wallet.tsx  |  2 +-
 .../request/form/options/dex-options.tsx      |  2 +-
 .../request/form/options/lido-option.tsx      |  6 ++--
 .../request/form/options/options-picker.tsx   | 28 +++++++++++++------
 .../withdrawals/request/form/request-form.tsx |  2 +-
 .../request/form/transaction-info.tsx         | 12 ++++++--
 .../request/wallet/wallet-mode.tsx            |  1 +
 .../request/wallet/wallet-queue-tooltip.tsx   |  1 +
 .../withdrawals/request/wallet/wallet.tsx     |  2 +-
 features/wsteth/shared/wallet/wallet.tsx      |  2 +-
 .../wsteth/unwrap/unwrap-form/unwrap-form.tsx |  2 +-
 features/wsteth/wrap/wrap-form/wrap-form.tsx  |  2 +-
 features/wsteth/wrap/wrap-form/wrap-stats.tsx |  8 ++++--
 shared/banners/l2-wsteth/l2-wsteth.tsx        |  4 +--
 .../header/components/header-wallet.tsx       |  2 +-
 .../tx-stage-modal-content.tsx                | 12 ++++----
 25 files changed, 82 insertions(+), 41 deletions(-)

diff --git a/features/stake/stake-form/stake-form-info.tsx b/features/stake/stake-form/stake-form-info.tsx
index 4b927cac5..803592c0c 100644
--- a/features/stake/stake-form/stake-form-info.tsx
+++ b/features/stake/stake-form/stake-form-info.tsx
@@ -23,7 +23,7 @@ export const StakeFormInfo = () => {
   const txCostInUsd = useEthUsd(gasCost);
 
   return (
-    <DataTable>
+    <DataTable data-testid="stakeFormInfo">
       <DataTableRow title="You will receive" data-testid="youWillReceive">
         <FormatToken amount={amount ?? Zero} symbol="stETH" />
       </DataTableRow>
diff --git a/features/stake/stake-form/stake-form.tsx b/features/stake/stake-form/stake-form.tsx
index b6c3dd296..ef9346a4d 100644
--- a/features/stake/stake-form/stake-form.tsx
+++ b/features/stake/stake-form/stake-form.tsx
@@ -16,7 +16,7 @@ export const StakeForm: FC = memo(() => {
     <TransactionModalProvider>
       <StakeFormProvider>
         <Wallet />
-        <Block>
+        <Block data-testid="stakeForm">
           <FormControllerStyled>
             <StakeAmountInput />
             <StakeSubmitButton />
diff --git a/features/stake/stake-form/wallet/wallet.tsx b/features/stake/stake-form/wallet/wallet.tsx
index 8363fe620..08682224b 100644
--- a/features/stake/stake-form/wallet/wallet.tsx
+++ b/features/stake/stake-form/wallet/wallet.tsx
@@ -23,7 +23,7 @@ const WalletComponent: WalletComponentType = (props) => {
   const lidoApr = useLidoApr();
 
   return (
-    <StyledCard {...props}>
+    <StyledCard data-testid="stakeCardSection" {...props}>
       <CardRow>
         <CardBalance
           title={
diff --git a/features/withdrawals/claim/form/form.tsx b/features/withdrawals/claim/form/form.tsx
index 4af754637..fe0c154c1 100644
--- a/features/withdrawals/claim/form/form.tsx
+++ b/features/withdrawals/claim/form/form.tsx
@@ -21,7 +21,7 @@ export const ClaimForm = () => {
 
   return (
     <form onSubmit={onSubmit}>
-      <ClaimFormBody>
+      <ClaimFormBody data-testid="claimList">
         {isBunker && <BunkerInfo />}
         <div ref={refRequests}>
           <RequestsList />
diff --git a/features/withdrawals/claim/form/requests-list/request-item.tsx b/features/withdrawals/claim/form/requests-list/request-item.tsx
index 1043ccc8a..69bc4326b 100644
--- a/features/withdrawals/claim/form/requests-list/request-item.tsx
+++ b/features/withdrawals/claim/form/requests-list/request-item.tsx
@@ -43,23 +43,29 @@ export const RequestItem = forwardRef<HTMLInputElement, RequestItemProps>(
     const symbol = isClaimable ? 'ETH' : 'stETH';
 
     const label = (
-      <FormatToken showAmountTip amount={amountValue} symbol={symbol} />
+      <FormatToken
+        data-testid="requestAmount"
+        showAmountTip
+        amount={amountValue}
+        symbol={symbol}
+      />
     );
 
     return (
-      <RequestStyled $disabled={isDisabled}>
+      <RequestStyled data-testid={'requestItem'} $disabled={isDisabled}>
         <Checkbox
           {...props}
-          // TODO: Update Checkbox props in lido-ui
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
+          data-testid="requestCheckbox"
           label={label}
           disabled={isDisabled}
           name={name}
           ref={ref}
         />
         <RequestStatus status={status.isFinalized ? 'ready' : 'pending'} />
-        <LinkStyled href={getNFTUrl(token_id, chainId)}>
+        <LinkStyled
+          data-testid="requestNftLink"
+          href={getNFTUrl(token_id, chainId)}
+        >
           <External />
         </LinkStyled>
       </RequestStyled>
diff --git a/features/withdrawals/claim/form/submit-button.tsx b/features/withdrawals/claim/form/submit-button.tsx
index ea507b68b..da88f5d8c 100644
--- a/features/withdrawals/claim/form/submit-button.tsx
+++ b/features/withdrawals/claim/form/submit-button.tsx
@@ -27,6 +27,7 @@ export const SubmitButton = () => {
 
   return (
     <Button
+      data-testid="claimButton"
       fullwidth
       disabled={disabled}
       loading={isSubmitting || isValidating}
diff --git a/features/withdrawals/claim/form/transaction-info.tsx b/features/withdrawals/claim/form/transaction-info.tsx
index 2487b457b..c349a0bd2 100644
--- a/features/withdrawals/claim/form/transaction-info.tsx
+++ b/features/withdrawals/claim/form/transaction-info.tsx
@@ -8,7 +8,11 @@ export const TransactionInfo = () => {
   const { claimTxPriceInUsd, loading: claimTxPriceLoading } =
     useClaimTxPrice(selectedRequests);
   return (
-    <DataTableRow title="Max transaction cost" loading={claimTxPriceLoading}>
+    <DataTableRow
+      data-testid="maxTxCost"
+      title="Max transaction cost"
+      loading={claimTxPriceLoading}
+    >
       <FormatPrice amount={claimTxPriceInUsd} />
     </DataTableRow>
   );
diff --git a/features/withdrawals/claim/wallet/wallet-availale-amount.tsx b/features/withdrawals/claim/wallet/wallet-availale-amount.tsx
index 8c47a0528..441f45b7d 100644
--- a/features/withdrawals/claim/wallet/wallet-availale-amount.tsx
+++ b/features/withdrawals/claim/wallet/wallet-availale-amount.tsx
@@ -16,6 +16,7 @@ export const WalletAvailableAmount = () => {
   return (
     <CardBalance
       small
+      data-testid="availableToClaim"
       title="Available to claim"
       loading={initialLoading}
       value={availableAmount}
diff --git a/features/withdrawals/claim/wallet/wallet-pending-amount.tsx b/features/withdrawals/claim/wallet/wallet-pending-amount.tsx
index bd74554d7..110feab86 100644
--- a/features/withdrawals/claim/wallet/wallet-pending-amount.tsx
+++ b/features/withdrawals/claim/wallet/wallet-pending-amount.tsx
@@ -24,6 +24,7 @@ export const WalletPendingAmount = () => {
   return (
     <CardBalance
       small
+      data-testid="myPendingAmount"
       title="My pending amount"
       loading={initialLoading}
       value={pendingAmount}
diff --git a/features/withdrawals/claim/wallet/wallet.tsx b/features/withdrawals/claim/wallet/wallet.tsx
index 9308f19c6..910f008ef 100644
--- a/features/withdrawals/claim/wallet/wallet.tsx
+++ b/features/withdrawals/claim/wallet/wallet.tsx
@@ -17,7 +17,7 @@ export const WalletComponent = () => {
   const { account } = useSDK();
 
   return (
-    <WalletWrapperStyled>
+    <WalletWrapperStyled data-testid="claimCardSection">
       <CardRow>
         <WalletAvailableAmount />
         <CardAccount account={account} />
diff --git a/features/withdrawals/request/form/options/dex-options.tsx b/features/withdrawals/request/form/options/dex-options.tsx
index cc9cfecd3..be6c9d491 100644
--- a/features/withdrawals/request/form/options/dex-options.tsx
+++ b/features/withdrawals/request/form/options/dex-options.tsx
@@ -122,7 +122,7 @@ export const DexOptions: React.FC<
     useWithdrawalRates();
 
   return (
-    <DexOptionsContainer {...props}>
+    <DexOptionsContainer data-testid="dexOptionContainer" {...props}>
       {initialLoading
         ? placeholder.map((_, i) => <DexOptionLoader key={i} />)
         : data?.map(({ name, toReceive, rate }) => {
diff --git a/features/withdrawals/request/form/options/lido-option.tsx b/features/withdrawals/request/form/options/lido-option.tsx
index 86584e17c..a7163a1d7 100644
--- a/features/withdrawals/request/form/options/lido-option.tsx
+++ b/features/withdrawals/request/form/options/lido-option.tsx
@@ -23,6 +23,7 @@ import {
 const TooltipWithdrawalAmount = () => {
   return (
     <Tooltip
+      data-testid="lidoOptionToolTip"
       placement="topRight"
       title={
         <>
@@ -30,6 +31,7 @@ const TooltipWithdrawalAmount = () => {
           <br /> For more info, please read{' '}
           <Link href="#amountDifferentFromRequested">
             <a
+              data-testid="lidoOptionToolTipFAQ"
               aria-hidden="true"
               onClick={() =>
                 trackMatomoEvent(
@@ -60,10 +62,10 @@ export const LidoOption = () => {
   });
 
   return (
-    <LidoOptionContainer>
+    <LidoOptionContainer data-testid="lidoOptionSection">
       <LidoIcon />
       Lido
-      <LidoOptionValue>
+      <LidoOptionValue data-testid="lidoOptionAmount">
         <FormatTokenStyled
           data-testid="lidoOptionAmount"
           showAmountTip
diff --git a/features/withdrawals/request/form/options/options-picker.tsx b/features/withdrawals/request/form/options/options-picker.tsx
index 5d054e050..106c12da8 100644
--- a/features/withdrawals/request/form/options/options-picker.tsx
+++ b/features/withdrawals/request/form/options/options-picker.tsx
@@ -50,18 +50,23 @@ const LidoButton: React.FC<OptionButtonProps> = ({ isActive, onClick }) => {
   const ratio = isSteth ? '1 : 1' : `1 : ${formatBalance(wstethAsStethBN)}`;
 
   return (
-    <OptionsPickerButton type="button" $active={isActive} onClick={onClick}>
+    <OptionsPickerButton
+      data-testid="lidoOption"
+      type="button"
+      $active={isActive}
+      onClick={onClick}
+    >
       <OptionsPickerRow>
         <OptionsPickerLabel>Use Lido</OptionsPickerLabel>
         <OptionsPickerIcons>
           <LidoIcon />
         </OptionsPickerIcons>
       </OptionsPickerRow>
-      <OptionsPickerRow>
+      <OptionsPickerRow data-testid="lidoOptionRate">
         <OptionsPickerSubLabel>Rate:</OptionsPickerSubLabel>
         {ratioLoading ? <InlineLoaderSmall /> : ratio}
       </OptionsPickerRow>
-      <OptionsPickerRow>
+      <OptionsPickerRow data-testid="lidoOptionWaitingTime">
         <OptionsPickerSubLabel>Waiting time:</OptionsPickerSubLabel>
         {initialLoading ? <InlineLoaderSmall /> : waitingTime}
       </OptionsPickerRow>
@@ -75,20 +80,25 @@ const DexButton: React.FC<OptionButtonProps> = ({ isActive, onClick }) => {
   });
   const bestRateValue = bestRate ? `1 : ${bestRate.toFixed(4)}` : '-';
   return (
-    <OptionsPickerButton type="button" $active={isActive} onClick={onClick}>
+    <OptionsPickerButton
+      data-testid="dexOptions"
+      type="button"
+      $active={isActive}
+      onClick={onClick}
+    >
       <OptionsPickerRow>
         <OptionsPickerLabel>Use aggregators</OptionsPickerLabel>
         <OptionsPickerIcons>
-          <OneInchIcon />
-          <CowSwapIcon />
-          <ParaSwapIcon />
+          <OneInchIcon data-testid="DexOneInchIcon" />
+          <CowSwapIcon data-testid="DexCowSwapIcon" />
+          <ParaSwapIcon data-testid="DexParaSwapIcon" />
         </OptionsPickerIcons>
       </OptionsPickerRow>
-      <OptionsPickerRow>
+      <OptionsPickerRow data-testid="dexBestRate">
         <OptionsPickerSubLabel>Best Rate:</OptionsPickerSubLabel>
         {loading ? <InlineLoaderSmall /> : bestRateValue}
       </OptionsPickerRow>
-      <OptionsPickerRow>
+      <OptionsPickerRow data-testid="dexWaitingTime">
         <OptionsPickerSubLabel>Waiting time:</OptionsPickerSubLabel>~&nbsp;1-5
         minutes
       </OptionsPickerRow>
diff --git a/features/withdrawals/request/form/request-form.tsx b/features/withdrawals/request/form/request-form.tsx
index dc4f61095..27090a141 100644
--- a/features/withdrawals/request/form/request-form.tsx
+++ b/features/withdrawals/request/form/request-form.tsx
@@ -31,7 +31,7 @@ export const RequestForm = () => {
   const mode = useWatch<RequestFormInputType, 'mode'>({ name: 'mode' });
 
   return (
-    <Block>
+    <Block data-testid="requestForm">
       {isPaused && <PausedInfo />}
       {isBunker && <BunkerInfo />}
       <form autoComplete="off" onSubmit={onSubmit}>
diff --git a/features/withdrawals/request/form/transaction-info.tsx b/features/withdrawals/request/form/transaction-info.tsx
index 2dcd1ae46..4f58272f7 100644
--- a/features/withdrawals/request/form/transaction-info.tsx
+++ b/features/withdrawals/request/form/transaction-info.tsx
@@ -41,6 +41,7 @@ export const TransactionInfo = () => {
   return (
     <>
       <DataTableRow
+        data-testid="maxUnlockCost"
         help={unlockCostTooltip}
         title="Max unlock cost"
         loading={isApprovalFlowLoading}
@@ -49,11 +50,16 @@ export const TransactionInfo = () => {
       </DataTableRow>
       <DataTableRow
         title="Max transaction cost"
+        data-testid="maxTxCost"
         loading={requestTxPriceLoading}
       >
         <FormatPrice amount={requestTxPriceInUsd} />
       </DataTableRow>
-      <DataTableRow title="Allowance" loading={isApprovalFlowLoading}>
+      <DataTableRow
+        data-testid="allowance"
+        title="Allowance"
+        loading={isApprovalFlowLoading}
+      >
         {isInfiniteAllowance ? (
           'Infinite'
         ) : (
@@ -65,7 +71,9 @@ export const TransactionInfo = () => {
         )}
       </DataTableRow>
       {token === TOKENS.STETH ? (
-        <DataTableRow title="Exchange rate">1 stETH = 1 ETH</DataTableRow>
+        <DataTableRow data-testid="exchangeRate" title="Exchange rate">
+          1 stETH = 1 ETH
+        </DataTableRow>
       ) : (
         <DataTableRowStethByWsteth toSymbol="ETH" />
       )}
diff --git a/features/withdrawals/request/wallet/wallet-mode.tsx b/features/withdrawals/request/wallet/wallet-mode.tsx
index 23cfe8d15..846cf4e48 100644
--- a/features/withdrawals/request/wallet/wallet-mode.tsx
+++ b/features/withdrawals/request/wallet/wallet-mode.tsx
@@ -26,6 +26,7 @@ export const WalletMode = () => {
   return (
     <CardBalance
       small
+      data-testid="withdrawalsMode"
       title={timeTitle}
       loading={isWithdrawalsStatusLoading}
       value={content}
diff --git a/features/withdrawals/request/wallet/wallet-queue-tooltip.tsx b/features/withdrawals/request/wallet/wallet-queue-tooltip.tsx
index 06327821c..1ee5c1ed3 100644
--- a/features/withdrawals/request/wallet/wallet-queue-tooltip.tsx
+++ b/features/withdrawals/request/wallet/wallet-queue-tooltip.tsx
@@ -41,6 +41,7 @@ export const WalletQueueTooltip = () => {
       <Link href="#withdrawalsPeriod">
         <a
           aria-hidden="true"
+          data-testid="otherFactorsLink"
           onClick={() =>
             trackMatomoEvent(
               MATOMO_CLICK_EVENTS_TYPES.withdrawalOtherFactorsTooltipMode,
diff --git a/features/withdrawals/request/wallet/wallet.tsx b/features/withdrawals/request/wallet/wallet.tsx
index fb3c7ddea..cbf155902 100644
--- a/features/withdrawals/request/wallet/wallet.tsx
+++ b/features/withdrawals/request/wallet/wallet.tsx
@@ -20,7 +20,7 @@ export const WalletComponent = () => {
   const token = useWatch<RequestFormInputType, 'token'>({ name: 'token' });
   const isSteth = token === TOKENS.STETH;
   return (
-    <WalletWrapperStyled>
+    <WalletWrapperStyled data-testid="requestCardSection">
       <CardRow>
         {isSteth ? <WalletStethBalance /> : <WalletWstethBalance />}
         <CardAccount account={account} />
diff --git a/features/wsteth/shared/wallet/wallet.tsx b/features/wsteth/shared/wallet/wallet.tsx
index cfbfb4fef..9697b3b9b 100644
--- a/features/wsteth/shared/wallet/wallet.tsx
+++ b/features/wsteth/shared/wallet/wallet.tsx
@@ -30,7 +30,7 @@ const WalletComponent: WalletComponentType = (props) => {
   const stethByWstethBalance = useStethByWsteth(wstethBalance.data);
 
   return (
-    <StyledCard {...props}>
+    <StyledCard data-testid="wrapCardSection" {...props}>
       <CardRow>
         <CardBalance
           title="ETH Balance"
diff --git a/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx b/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx
index 960666691..8370375c8 100644
--- a/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx
+++ b/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx
@@ -15,7 +15,7 @@ export const UnwrapForm: FC = memo(() => {
   return (
     <TransactionModalProvider>
       <UnwrapFormProvider>
-        <WrapBlock>
+        <WrapBlock data-testid="unwrapForm">
           <FormController>
             <InputWrap>
               <TokenAmountInputUnwrap />
diff --git a/features/wsteth/wrap/wrap-form/wrap-form.tsx b/features/wsteth/wrap/wrap-form/wrap-form.tsx
index dc12665d9..2376174ac 100644
--- a/features/wsteth/wrap/wrap-form/wrap-form.tsx
+++ b/features/wsteth/wrap/wrap-form/wrap-form.tsx
@@ -17,7 +17,7 @@ export const WrapForm: React.FC = memo(() => {
   return (
     <TransactionModalProvider>
       <WrapFormProvider>
-        <WrapBlock>
+        <WrapBlock data-testid="wrapForm">
           <FormControllerWrap>
             <InputGroupHookForm errorField="amount">
               <TokenSelectWrap />
diff --git a/features/wsteth/wrap/wrap-form/wrap-stats.tsx b/features/wsteth/wrap/wrap-form/wrap-stats.tsx
index e20f81dd5..be578f8cd 100644
--- a/features/wsteth/wrap/wrap-form/wrap-stats.tsx
+++ b/features/wsteth/wrap/wrap-form/wrap-stats.tsx
@@ -28,7 +28,7 @@ export const WrapFormStats = () => {
   const wrapTxCostInUsd = useTxCostInUsd(wrapGasLimit && Number(wrapGasLimit));
 
   return (
-    <DataTable>
+    <DataTable data-testid="wrapStats">
       <DataTableRow
         title="Max unlock cost"
         data-testid="maxUnlockFee"
@@ -49,7 +49,11 @@ export const WrapFormStats = () => {
         loading={!oneWstethConverted}
       >
         1 {isSteth ? 'stETH' : 'ETH'} ={' '}
-        <FormatToken amount={oneWstethConverted} symbol="wstETH" />
+        <FormatToken
+          data-testid="rate"
+          amount={oneWstethConverted}
+          symbol="wstETH"
+        />
       </DataTableRow>
       <DataTableRow
         data-testid="allowance"
diff --git a/shared/banners/l2-wsteth/l2-wsteth.tsx b/shared/banners/l2-wsteth/l2-wsteth.tsx
index 6d57d6f8c..13f582257 100644
--- a/shared/banners/l2-wsteth/l2-wsteth.tsx
+++ b/shared/banners/l2-wsteth/l2-wsteth.tsx
@@ -14,7 +14,7 @@ const linkClickHandler = () => trackEvent(...MATOMO_CLICK_EVENTS.l2BannerWrap);
 
 export const L2Wsteth = () => {
   return (
-    <Banner>
+    <Banner data-testid="L2wstETHbanner">
       <TextContent>
         Enjoy <b>lower gas</b> fees and <b>DeFi opportunities</b> using wstETH
         across Arbitrum, Optimism, Base and zkSync.
@@ -27,7 +27,7 @@ export const L2Wsteth = () => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <LinkButton>Learn More</LinkButton>
+          <LinkButton data-testid="l2WSstethlearnMore">Learn More</LinkButton>
         </OverlayLink>
       </FooterWrapper>
     </Banner>
diff --git a/shared/components/layout/header/components/header-wallet.tsx b/shared/components/layout/header/components/header-wallet.tsx
index a7c36a000..836b9197e 100644
--- a/shared/components/layout/header/components/header-wallet.tsx
+++ b/shared/components/layout/header/components/header-wallet.tsx
@@ -40,7 +40,7 @@ const HeaderWallet: FC = () => {
         <Connect size="sm" />
       )}
       {dynamics.ipfsMode && <HeaderSettingsButton />}
-      <ThemeToggler />
+      <ThemeToggler data-testid="themeToggler" />
       {dynamics.ipfsMode && (
         <IPFSInfoBoxOnlyDesktopWrapper>
           <IPFSInfoBox />
diff --git a/shared/components/tx-stage-modal-content/tx-stage-modal-content.tsx b/shared/components/tx-stage-modal-content/tx-stage-modal-content.tsx
index 152df0f9c..79e85ca2b 100644
--- a/shared/components/tx-stage-modal-content/tx-stage-modal-content.tsx
+++ b/shared/components/tx-stage-modal-content/tx-stage-modal-content.tsx
@@ -13,12 +13,14 @@ export const TxStageModalContent = memo((props: TxStageModalContentProps) => {
   const { icon, title, description, footerHint, footer } = props;
 
   return (
-    <Wrap>
+    <Wrap data-testid="txStage">
       {icon}
-      <Title>{title}</Title>
-      <Description>{description}</Description>
-      {footerHint && <FooterHint>{footerHint}</FooterHint>}
-      {footer && <Footer>{footer}</Footer>}
+      <Title data-testid="title">{title}</Title>
+      <Description data-testid="description">{description}</Description>
+      {footerHint && (
+        <FooterHint data-testid="footerHint">{footerHint}</FooterHint>
+      )}
+      {footer && <Footer data-testid="footer">{footer}</Footer>}
     </Wrap>
   );
 });