From afde2215c1bc3010b3674831bd47e79ff5a545f2 Mon Sep 17 00:00:00 2001
From: Francis Rodriguez <francisngg@gmail.com>
Date: Fri, 12 Jul 2024 11:00:44 -0400
Subject: [PATCH] FEAT/ADDED-TESTIDS Added a few test ids

---
 src/app/user/Balances/StakeRIFCell.tsx   |  6 +++++-
 src/app/user/Balances/UnStakeRIFCell.tsx |  6 +++++-
 src/app/user/Stake/StakePreview.tsx      |  8 ++++++--
 src/app/user/Stake/StakeRIF.tsx          | 11 ++++++++++-
 src/app/user/Stake/StakeStatus.tsx       | 10 ++++++++--
 src/app/user/Stake/hooks/useStakeRIF.tsx | 11 +++++++++--
 src/components/Button/Button.tsx         | 12 ++++++++++--
 src/components/TextInput/TextInput.tsx   |  4 ++--
 8 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/app/user/Balances/StakeRIFCell.tsx b/src/app/user/Balances/StakeRIFCell.tsx
index dd0d1f64e..63b824551 100644
--- a/src/app/user/Balances/StakeRIFCell.tsx
+++ b/src/app/user/Balances/StakeRIFCell.tsx
@@ -4,7 +4,11 @@ export const StakeRIFCell = () => {
   const { stakeModal } = useBalancesContext()
 
   return (
-    <p onClick={stakeModal.openModal} className="text-link underline cursor-pointer">
+    <p
+      onClick={stakeModal.openModal}
+      className="text-link underline cursor-pointer"
+      data-testid={'StakeRIFParagraph'}
+    >
       Stake
     </p>
   )
diff --git a/src/app/user/Balances/UnStakeRIFCell.tsx b/src/app/user/Balances/UnStakeRIFCell.tsx
index c77919573..008d4030c 100644
--- a/src/app/user/Balances/UnStakeRIFCell.tsx
+++ b/src/app/user/Balances/UnStakeRIFCell.tsx
@@ -4,7 +4,11 @@ export const UnStakeRIFCell = () => {
   const { unstakeModal } = useBalancesContext()
 
   return (
-    <p onClick={unstakeModal.openModal} className="text-link underline cursor-pointer">
+    <p
+      onClick={unstakeModal.openModal}
+      className="text-link underline cursor-pointer"
+      data-testid="UnstakeRIFParagraph"
+    >
       Unstake
     </p>
   )
diff --git a/src/app/user/Stake/StakePreview.tsx b/src/app/user/Stake/StakePreview.tsx
index 9f8db4fa4..a66386262 100644
--- a/src/app/user/Stake/StakePreview.tsx
+++ b/src/app/user/Stake/StakePreview.tsx
@@ -51,10 +51,14 @@ export const StakePreview = ({
       {customComponentBeforeFooter}
       {/* Stake Actions */}
       <div className="flex justify-center pt-10 gap-4">
-        <Button variant="secondary" onClick={onCancel}>
+        <Button variant="secondary" onClick={onCancel} buttonProps={{ 'data-testid': 'Cancel' }}>
           Cancel
         </Button>
-        <Button onClick={!disableConfirm ? onConfirm : undefined} disabled={disableConfirm}>
+        <Button
+          onClick={!disableConfirm ? onConfirm : undefined}
+          disabled={disableConfirm}
+          buttonProps={{ 'data-testid': 'Confirm' }}
+        >
           Confirm
         </Button>
       </div>
diff --git a/src/app/user/Stake/StakeRIF.tsx b/src/app/user/Stake/StakeRIF.tsx
index dc90349fc..eaf4faacd 100644
--- a/src/app/user/Stake/StakeRIF.tsx
+++ b/src/app/user/Stake/StakeRIF.tsx
@@ -80,7 +80,13 @@ export const StakeRIF = ({
         {/* @TODO if we're unstaking we should have a component here - check design */}
         {/* Stake */}
         <div className="flex justify-center pt-10">
-          <Button onClick={shouldEnableGoNext ? onGoNext : undefined} disabled={!shouldEnableGoNext}>
+          <Button
+            onClick={shouldEnableGoNext ? onGoNext : undefined}
+            disabled={!shouldEnableGoNext}
+            buttonProps={{
+              'data-testid': 'StakeRIF',
+            }}
+          >
             {textsDependingOnAction[actionName].confirmButtonText}
           </Button>
         </div>
@@ -108,6 +114,9 @@ const PercentageButton = ({ amount, percentage, totalAmountAllowed, onClick }: P
     <Button
       variant={isActive ? 'secondary-full' : 'secondary'}
       onClick={onPercentageButtonClick}
+      buttonProps={{
+        'data-testid': `Percentage${percentage}`,
+      }}
     >{`${percentage}%`}</Button>
   )
 }
diff --git a/src/app/user/Stake/StakeStatus.tsx b/src/app/user/Stake/StakeStatus.tsx
index 9535d92d2..e3f47b619 100644
--- a/src/app/user/Stake/StakeStatus.tsx
+++ b/src/app/user/Stake/StakeStatus.tsx
@@ -63,10 +63,16 @@ export const StakeStatus = ({
       </div>
       {/* Stake Actions */}
       <div className="flex justify-center pt-10 gap-4">
-        <Button variant="secondary" onClick={onViewOnExplorer}>
+        <Button
+          variant="secondary"
+          onClick={onViewOnExplorer}
+          buttonProps={{ 'data-testid': 'GoToExplorer' }}
+        >
           View on explorer
         </Button>
-        <Button onClick={onReturnToBalances}>Return to balances</Button>
+        <Button onClick={onReturnToBalances} buttonProps={{ 'data-testid': 'ReturnToBalances' }}>
+          Return to balances
+        </Button>
       </div>
     </div>
   )
diff --git a/src/app/user/Stake/hooks/useStakeRIF.tsx b/src/app/user/Stake/hooks/useStakeRIF.tsx
index 353b3e2f8..f9730806a 100644
--- a/src/app/user/Stake/hooks/useStakeRIF.tsx
+++ b/src/app/user/Stake/hooks/useStakeRIF.tsx
@@ -132,7 +132,9 @@ function CustomStakingRIFFooter({
       return (
         <div className="flex flex-col mt-2 gap-2 items-center">
           <Paragraph>You need to request allowance for stRIF to be able to stake.</Paragraph>
-          <Button onClick={onRequestAllowance}>Request allowance</Button>
+          <Button onClick={onRequestAllowance} buttonProps={{ 'data-testid': 'Allowance' }}>
+            Request allowance
+          </Button>
         </div>
       )
     case isAllowanceNeeded && isAllowanceTxPending && !!hash:
@@ -140,7 +142,12 @@ function CustomStakingRIFFooter({
         <div className="flex flex-col mt-2 gap-2 items-center">
           <Paragraph>Allowance TX is in process.</Paragraph>
           <Paragraph>Wait for Allowance TX to be mined.</Paragraph>
-          <Button onClick={() => goToExplorerWithTxHash(hash)}>Click here to go to the explorer</Button>
+          <Button
+            onClick={() => goToExplorerWithTxHash(hash)}
+            buttonProps={{ 'data-testid': 'GoToExplorer' }}
+          >
+            Click here to go to the explorer
+          </Button>
         </div>
       )
     default:
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 86c16b5f5..1ed252de7 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -14,9 +14,11 @@ interface Props {
   disabled?: boolean
   className?: string
   textClassName?: string
-  buttonProps?: JSX.IntrinsicElements['button']
+  buttonProps?: JSX.IntrinsicElements['button'] & { 'data-testid': string }
 }
 
+const DEFAULT_DATA_TESTID = 'Button'
+
 export const Button: FC<Props> = ({
   children: text,
   onClick,
@@ -54,7 +56,13 @@ export const Button: FC<Props> = ({
   })
 
   return (
-    <button type="button" className={classes} onClick={e => !disabled && onClick?.(e)} {...buttonProps}>
+    <button
+      type="button"
+      className={classes}
+      onClick={e => !disabled && onClick?.(e)}
+      {...buttonProps}
+      data-testid={`${DEFAULT_DATA_TESTID}${buttonProps['data-testid']}`}
+    >
       <span className={textClasses}>
         <span className="absolute left-[-20px] top-[4px]">{startIcon}</span>
         {text}
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index fbb6fff20..81d67d460 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -52,7 +52,7 @@ export const TextInput: FC<Props> = ({
     'text-text-secondary focus-visible:ring-0': readonly,
   })
   return (
-    <div className={className}>
+    <div className={className} data-testid={`Input_Container_${name}`}>
       {label && (
         <div className="pb-[10px]" {...labelWrapperProps}>
           <Label variant="semibold">{label}</Label>
@@ -65,7 +65,7 @@ export const TextInput: FC<Props> = ({
         value={value}
         onChange={handleOnChange}
         name={name}
-        data-testid={name}
+        data-testid={`Input_${name}`}
         readOnly={readonly}
         {...inputProps}
       />