Add data-testid for create backup progress

mudita · Dec 5, 2024 · 7fdd980 · 7fdd980
1 parent 20c5009
commit 7fdd980
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/libs/e2e-test-ids/src/e2e-test-ids.ts b/libs/e2e-test-ids/src/e2e-test-ids.ts
@@ -23,6 +23,18 @@ export enum PredefinedBackupPasswordTestIds {
   SkipButton = "predefined-backup-password-skip-button",
 }
 
+export enum PredefinedBackupProgressTestIds {
+  Title = "predefined-backup-progress-title",
+  Description = "predefined-backup-progress-description",
+  ProgressBar = "predefined-backup-progress-progressbar",
+}
+
+export enum ProgressBarTestIds {
+  Description = "progressbar-description",
+  Progress = "progressbar-progress",
+  Details = "progressbar-details",
+}
+
 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/progress-bar/progress-bar.tsx b/libs/generic-view/ui/src/lib/interactive/progress-bar/progress-bar.tsx
@@ -7,6 +7,7 @@ import React, { useId } from "react"
 import { APIFC } from "generic-view/utils"
 import styled from "styled-components"
 import { ProgressBarConfig, ProgressBarData } from "generic-view/models"
+import { ProgressBarTestIds } from "e2e-test-ids"
 
 export const ProgressBar: APIFC<ProgressBarData, ProgressBarConfig> = ({
   data,
@@ -16,13 +17,21 @@ export const ProgressBar: APIFC<ProgressBarData, ProgressBarConfig> = ({
   const id = useId()
   return (
     <Wrapper {...props}>
-      {data?.message && <Message>{data?.message}</Message>}
+      {data?.message && (
+        <Message data-testid={ProgressBarTestIds.Description}>
+          {data?.message}
+        </Message>
+      )}
       <Progress
         id={"progress-" + id}
         max={config.maxValue}
         value={data?.value}
+        data-testid={ProgressBarTestIds.Progress}
       />
-      <Label htmlFor={"progress-" + id}>
+      <Label
+        htmlFor={"progress-" + id}
+        data-testid={ProgressBarTestIds.Details}
+      >
         {data?.value}
         {config.valueUnit || "%"}
       </Label>

diff --git a/libs/generic-view/ui/src/lib/predefined/backup/backup-progress.tsx b/libs/generic-view/ui/src/lib/predefined/backup/backup-progress.tsx
@@ -12,6 +12,7 @@ import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { useSelector } from "react-redux"
 import { backupProgress } from "generic-view/store"
+import { PredefinedBackupProgressTestIds } from "e2e-test-ids"
 
 const messages = defineMessages({
   title: {
@@ -50,8 +51,12 @@ export const BackupProgress: FunctionComponent<Props> = ({ features }) => {
   return (
     <>
       <Modal.TitleIcon config={{ type: IconType.Backup }} />
-      <Modal.Title>{intl.formatMessage(messages.title)}</Modal.Title>
-      <p>{intl.formatMessage(messages.description)}</p>
+      <Modal.Title data-testid={PredefinedBackupProgressTestIds.Title}>
+        {intl.formatMessage(messages.title)}
+      </Modal.Title>
+      <p data-testid={PredefinedBackupProgressTestIds.Description}>
+        {intl.formatMessage(messages.description)}
+      </p>
       <Progress
         config={{
           maxValue: 100,
@@ -60,6 +65,7 @@ export const BackupProgress: FunctionComponent<Props> = ({ features }) => {
           value: progressStatus.progress,
           message: detailMessage,
         }}
+        data-testid={PredefinedBackupProgressTestIds.ProgressBar}
       />
     </>
   )