Merge pull request #36 from input-output-hk/test/LW-10799-create-wall…

…et-e2e [LW-10799] test: add test ids for PasswordBox [LW-10799]
input-output-hk · Jul 26, 2024 · e219e74 · e219e74
2 parents aad2e00 + cb2bfa2
commit e219e74
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/design-system/password-box/password-box-button.component.tsx b/src/design-system/password-box/password-box-button.component.tsx
@@ -10,19 +10,22 @@ 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
       type="button"
       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
@@ -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);