From 2b1f3725d1e84f11077e3437bbd02bc75df1cf92 Mon Sep 17 00:00:00 2001
From: Daniel Karski <daniel.karski5q@gmail.com>
Date: Tue, 17 Sep 2024 15:14:12 +0200
Subject: [PATCH] [CP-3108] Add data-testid to Backup modals (#2055)

---
 libs/e2e-test-ids/src/e2e-test-ids.ts         | 16 +++++++++++++
 .../lib/interactive/form/input/text-input.tsx | 24 ++++++++++++++-----
 .../lib/predefined/backup/backup-password.tsx |  9 +++++--
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/libs/e2e-test-ids/src/e2e-test-ids.ts b/libs/e2e-test-ids/src/e2e-test-ids.ts
index 3d7bc89b59..fa38cbdbf6 100644
--- a/libs/e2e-test-ids/src/e2e-test-ids.ts
+++ b/libs/e2e-test-ids/src/e2e-test-ids.ts
@@ -7,6 +7,22 @@ export enum ModalCloseButtonTestIds {
   IconButton = "modal-close-button-icon-button",
 }
 
+export enum InteractiveTextInputTestIds {
+  Text = "interactive-text-input-text",
+  Input = "interactive-text-input-input",
+  IconButton = "interactive-text-input-icon-button",
+  ErrorText = "interactive-text-input-error-text",
+}
+
+export enum PredefinedBackupPasswordTestIds {
+  Title = "predefined-backup-password-title",
+  Description = "predefined-backup-password-description",
+  PasswordPlaceholder = "predefined-backup-password-placeholder",
+  PasswordRepeatPlaceholder = "predefined-backup-password-repeat-placeholder",
+  ConfirmButton = "predefined-backup-password-confirm-button",
+  SkipButton = "predefined-backup-password-skip-button",
+}
+
 export enum ContactSupportModalTestIds {
   Title = "contact-support-modal-success-title",
   Description = "contact-support-modal-success-description",
diff --git a/libs/generic-view/ui/src/lib/interactive/form/input/text-input.tsx b/libs/generic-view/ui/src/lib/interactive/form/input/text-input.tsx
index 3ec4d5ac2d..06025e14cb 100644
--- a/libs/generic-view/ui/src/lib/interactive/form/input/text-input.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/form/input/text-input.tsx
@@ -4,16 +4,18 @@
  */
 
 import React, { useEffect, useId, useState } from "react"
-import { APIFC, IconType } from "generic-view/utils"
 import styled, { css } from "styled-components"
-import { IconButton } from "../../../shared/button"
-import { Icon } from "../../../icon/icon"
 import { useFormContext } from "react-hook-form"
+import { InteractiveTextInputTestIds } from "e2e-test-ids"
+import { APIFC, IconType } from "generic-view/utils"
 import { FormTextInputConfig, FormTextInputData } from "generic-view/models"
+import { IconButton } from "../../../shared/button"
+import { Icon } from "../../../icon/icon"
 
 export const TextInput: APIFC<FormTextInputData, FormTextInputConfig> = ({
   data,
   config,
+  ...props
 }) => {
   const id = useId()
   const {
@@ -40,8 +42,9 @@ export const TextInput: APIFC<FormTextInputData, FormTextInputConfig> = ({
   }, [config.name, data?.value, setValue])
 
   return (
-    <Wrapper>
+    <Wrapper {...props}>
       <Label
+        data-testid={InteractiveTextInputTestIds.Text}
         htmlFor={"input-" + id}
         $inactive={value.length === 0}
         $withError={!!error}
@@ -50,13 +53,18 @@ export const TextInput: APIFC<FormTextInputData, FormTextInputConfig> = ({
       </Label>
       <InputWrapper>
         <Input
+          data-testid={InteractiveTextInputTestIds.Input}
           id={"input-" + id}
           type={inputType}
           $withError={!!error}
           {...register(config.name, { ...config.validation })}
         />
         {config.type === "password" && value.length > 0 && (
-          <IconButton type={"button"} onClick={togglePasswordVisibility}>
+          <IconButton
+            data-testid={InteractiveTextInputTestIds.IconButton}
+            type={"button"}
+            onClick={togglePasswordVisibility}
+          >
             <Icon
               data={{
                 type: passwordVisible
@@ -67,7 +75,11 @@ export const TextInput: APIFC<FormTextInputData, FormTextInputConfig> = ({
           </IconButton>
         )}
       </InputWrapper>
-      {error && <Error>{error?.message?.toString()}</Error>}
+      {error && (
+        <Error data-testid={InteractiveTextInputTestIds.ErrorText}>
+          {error?.message?.toString()}
+        </Error>
+      )}
     </Wrapper>
   )
 }
diff --git a/libs/generic-view/ui/src/lib/predefined/backup/backup-password.tsx b/libs/generic-view/ui/src/lib/predefined/backup/backup-password.tsx
index 37bf9ea581..c6f189db6d 100644
--- a/libs/generic-view/ui/src/lib/predefined/backup/backup-password.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/backup/backup-password.tsx
@@ -13,6 +13,7 @@ import { Modal } from "../../interactive/modal"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { Form } from "../../interactive/form/form"
+import { PredefinedBackupPasswordTestIds } from "e2e-test-ids"
 
 const messages = defineMessages({
   title: {
@@ -66,17 +67,18 @@ export const BackupPassword: FunctionComponent<Props> = ({
           type: IconType.Settings,
         }}
       />
-      <Modal.Title>
+      <Modal.Title data-testid={PredefinedBackupPasswordTestIds.Title}>
         {intl.formatMessage(messages.title)}
         <HeadlineOptional>
           {intl.formatMessage(messages.subtitle)}
         </HeadlineOptional>
       </Modal.Title>
-      <Text>
+      <Text data-testid={PredefinedBackupPasswordTestIds.Description}>
         {intl.formatMessage(messages.description)}
         <span>{intl.formatMessage(messages.description2)}</span>
       </Text>
       <Form.TextInput
+        data-testid={PredefinedBackupPasswordTestIds.PasswordPlaceholder}
         config={{
           name: "password",
           label: intl.formatMessage(messages.passwordPlaceholder),
@@ -84,6 +86,7 @@ export const BackupPassword: FunctionComponent<Props> = ({
         }}
       />
       <Form.TextInput
+        data-testid={PredefinedBackupPasswordTestIds.PasswordRepeatPlaceholder}
         config={{
           name: "passwordRepeat",
           label: intl.formatMessage(messages.passwordRepeatPlaceholder),
@@ -100,6 +103,7 @@ export const BackupPassword: FunctionComponent<Props> = ({
       />
       <Modal.Buttons config={{ vertical: true }}>
         <ButtonPrimary
+          data-testid={PredefinedBackupPasswordTestIds.ConfirmButton}
           config={{
             text: intl.formatMessage(messages.confirmButtonLabel),
             action: nextAction,
@@ -107,6 +111,7 @@ export const BackupPassword: FunctionComponent<Props> = ({
           }}
         />
         <ButtonText
+          data-testid={PredefinedBackupPasswordTestIds.SkipButton}
           config={{
             text: intl.formatMessage(messages.skipButtonLabel),
             action: skipAction,