FEAT/ADDED-TESTIDS Added a few test ids

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>
   )

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>
   )

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>

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>
   )
 }

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>
   )

src/app/user/Stake/hooks/useStakeRIF.tsx

@@ -132,15 +132,22 @@ 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:
       return (
         <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:

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}

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}
       />