Merge pull request #188 from lidofinance/feature/si-1134-set-test-id

Add test ids
lidofinance · Dec 14, 2023 · e3ea954 · e3ea954
2 parents cb59327 + 79961fc
commit e3ea954
Show file tree

Hide file tree

Showing 25 changed files with 82 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -23,13 +23,15 @@ import {
 const TooltipWithdrawalAmount = () => {
   return (
     <Tooltip
+      data-testid="lidoOptionToolTip"
       placement="topRight"
       title={
         <>
           The final amount of claimable ETH can differ
           <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 });