[#1965] fix duplicate testIds for reference errors and hints

IntersectMBO · Oct 18, 2024 · 537ebbc · 537ebbc
1 parent 5372420
commit 537ebbc
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ changes.
 ### Fixed
 
 - Fix unwanted horizontal page scroll on Governance Actions page [Issue 1897](https://github.com/IntersectMBO/govtool/issues/1897)
+- Fix duplicate testIds for reference errors and hints in DRep metadata form [Issue 1965](https://github.com/IntersectMBO/govtool/issues/1965)
 
 ### Changed
 

diff --git a/govtool/frontend/src/components/atoms/FormErrorMessage.tsx b/govtool/frontend/src/components/atoms/FormErrorMessage.tsx
@@ -3,13 +3,16 @@ import { Typography } from "@mui/material";
 import { FormErrorMessageProps } from "./types";
 
 export const FormErrorMessage = ({
+  dataTestId,
   errorMessage,
   errorStyles,
 }: FormErrorMessageProps) =>
   errorMessage && (
     <Typography
       color="red"
-      data-testid={`${errorMessage.replace(/\s+/g, "-").toLowerCase()}-error`}
+      data-testid={
+        dataTestId ?? `${errorMessage.replace(/\s+/g, "-").toLowerCase()}-error`
+      }
       fontSize={12}
       fontWeight={400}
       sx={{ mt: 0.25 }}

diff --git a/govtool/frontend/src/components/atoms/FormHelpfulText.tsx b/govtool/frontend/src/components/atoms/FormHelpfulText.tsx
@@ -3,14 +3,17 @@ import { Typography } from "@mui/material";
 import { FormHelpfulTextProps } from "./types";
 
 export const FormHelpfulText = ({
+  dataTestId,
   helpfulText,
   helpfulTextStyle,
   sx,
 }: FormHelpfulTextProps) =>
   helpfulText && (
     <Typography
       color="#9792B5"
-      data-testid={`${helpfulText.replace(/\s+/g, "-").toLowerCase()}-error`}
+      data-testid={
+        dataTestId ?? `${helpfulText.replace(/\s+/g, "-").toLowerCase()}-error`
+      }
       fontSize={12}
       fontWeight={400}
       sx={{ mt: 0.5, ...sx }}

diff --git a/govtool/frontend/src/components/atoms/types.ts b/govtool/frontend/src/components/atoms/types.ts
@@ -57,11 +57,13 @@ export type CheckboxProps = Omit<MUICheckboxProps, "onChange" | "value"> & {
 };
 
 export type FormErrorMessageProps = {
+  dataTestId?: string;
   errorMessage?: string;
   errorStyles?: MUITypographyProps;
 };
 
 export type FormHelpfulTextProps = {
+  dataTestId?: string;
   helpfulText?: string;
   helpfulTextStyle?: MUITypographyProps;
   sx?: SxProps;

diff --git a/govtool/frontend/src/components/molecules/DRepDataForm.tsx b/govtool/frontend/src/components/molecules/DRepDataForm.tsx
@@ -233,6 +233,10 @@ const ReferencesSection = ({
             name={`${fieldName}.${index}.label`}
             helpfulText={t("forms.dRepData.referenceDescriptionHelpfulText")}
             dataTestId={`${type}-reference-description-${index + 1}-input`}
+            errorDataTestId={`${type}-reference-description-${index + 1}-error`}
+            helpfulTextDataTestId={`${type}-reference-description-${
+              index + 1
+            }-hint`}
             rules={Rules.LINK_DESCRIPTION}
           />
           <ControlledField.Input
@@ -252,6 +256,8 @@ const ReferencesSection = ({
             layoutStyles={{ mb: 3 }}
             name={`${fieldName}.${index}.uri`}
             dataTestId={`${type}-reference-url-${index + 1}-input`}
+            errorDataTestId={`${type}-reference-url-${index + 1}-error`}
+            helpfulTextDataTestId={`${type}-reference-url-${index + 1}-hint`}
             rules={Rules.LINK_URL}
           />
         </Fragment>

diff --git a/govtool/frontend/src/components/molecules/Field/Input.tsx b/govtool/frontend/src/components/molecules/Field/Input.tsx
@@ -14,8 +14,10 @@ import { InputFieldProps } from "./types";
 export const Input = forwardRef<HTMLInputElement, InputFieldProps>(
   (
     {
+      errorDataTestId,
       errorMessage,
       errorStyles,
+      helpfulTextDataTestId,
       helpfulText,
       helpfulTextStyle,
       label,
@@ -71,10 +73,12 @@ export const Input = forwardRef<HTMLInputElement, InputFieldProps>(
           ref={inputRef}
         />
         <FormHelpfulText
+          dataTestId={helpfulTextDataTestId}
           helpfulText={helpfulText}
           helpfulTextStyle={helpfulTextStyle}
         />
         <FormErrorMessage
+          dataTestId={errorDataTestId}
           errorMessage={errorMessage}
           errorStyles={errorStyles}
         />

diff --git a/govtool/frontend/src/components/molecules/Field/types.ts b/govtool/frontend/src/components/molecules/Field/types.ts
@@ -8,8 +8,10 @@ import {
 } from "@atoms";
 
 export type InputFieldProps = InputProps & {
+  errorDataTestId?: string;
   errorMessage?: string;
   errorStyles?: MUITypographyProps;
+  helpfulTextDataTestId?: string;
   helpfulText?: string;
   helpfulTextStyle?: MUITypographyProps;
   label?: string;