From cb2bfa2014eb151359c78c815c6d8c54cdffc526 Mon Sep 17 00:00:00 2001
From: "przemyslaw.wlodek" <przem.wlodek.github@gmail.com>
Date: Fri, 26 Jul 2024 12:19:48 +0200
Subject: [PATCH] test: add test ids for PasswordBox

---
 .../password-box/password-box-button.component.tsx            | 3 +++
 .../password-box/password-box-input.component.tsx             | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/src/design-system/password-box/password-box-button.component.tsx b/src/design-system/password-box/password-box-button.component.tsx
index 175471e..e93564f 100644
--- a/src/design-system/password-box/password-box-button.component.tsx
+++ b/src/design-system/password-box/password-box-button.component.tsx
@@ -10,12 +10,14 @@ interface PasswordBoxButtonProps {
   onClick: (event: Readonly<React.MouseEvent<HTMLButtonElement>>) => void;
   disabled: boolean;
   isPasswordVisible: boolean;
+  testId?: string;
 }
 
 export const PasswordInputButton = ({
   onClick,
   disabled,
   isPasswordVisible,
+  testId,
 }: Readonly<PasswordBoxButtonProps>): JSX.Element => {
   return (
     <button
@@ -23,6 +25,7 @@ export const PasswordInputButton = ({
       className={cx.inputButton}
       onClick={onClick}
       disabled={disabled}
+      data-testid={testId}
     >
       {isPasswordVisible ? (
         <CloseEye
diff --git a/src/design-system/password-box/password-box-input.component.tsx b/src/design-system/password-box/password-box-input.component.tsx
index 384ad3e..efa0c85 100644
--- a/src/design-system/password-box/password-box-input.component.tsx
+++ b/src/design-system/password-box/password-box-input.component.tsx
@@ -21,6 +21,7 @@ export interface PasswordInputProps extends Form.FormControlProps {
   defaultIsPasswordVisible?: boolean;
   containerClassName?: string;
   containerStyle?: React.CSSProperties;
+  testId?: string;
 }
 
 export const PasswordInput = ({
@@ -35,6 +36,7 @@ export const PasswordInput = ({
   onChange,
   defaultIsPasswordVisible = false,
   containerStyle,
+  testId,
 }: Readonly<PasswordInputProps>): JSX.Element => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(
     defaultIsPasswordVisible,
@@ -62,6 +64,7 @@ export const PasswordInput = ({
               value={value}
               onChange={onChange}
               id={id}
+              data-testid={testId}
             />
           </Form.Control>
           <Form.Label
@@ -70,6 +73,7 @@ export const PasswordInput = ({
             {label}
           </Form.Label>
           <PasswordInputButton
+            testId={testId && `${testId}-toggle`}
             onClick={(event): void => {
               event.preventDefault();
               setIsPasswordVisible(!isPasswordVisible);