[CP-3108] Add data-testid to Backup modals (#2055)

mudita · Sep 17, 2024 · 2b1f372 · 2b1f372
1 parent 93600ea
commit 2b1f372
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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,24 +67,26 @@ 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),
           type: "password",
         }}
       />
       <Form.TextInput
+        data-testid={PredefinedBackupPasswordTestIds.PasswordRepeatPlaceholder}
         config={{
           name: "passwordRepeat",
           label: intl.formatMessage(messages.passwordRepeatPlaceholder),
@@ -100,13 +103,15 @@ export const BackupPassword: FunctionComponent<Props> = ({
       />
       <Modal.Buttons config={{ vertical: true }}>
         <ButtonPrimary
+          data-testid={PredefinedBackupPasswordTestIds.ConfirmButton}
           config={{
             text: intl.formatMessage(messages.confirmButtonLabel),
             action: nextAction,
             disabled: !password || !passwordsMatching,
           }}
         />
         <ButtonText
+          data-testid={PredefinedBackupPasswordTestIds.SkipButton}
           config={{
             text: intl.formatMessage(messages.skipButtonLabel),
             action: skipAction,