Add data-testid attributes to Pydantic Forms components

frontend/packages/pydantic-forms/src/components/fields/ArrayField.tsx

@@ -81,6 +81,7 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
 
     return (
         <div
+            data-testid={arrayName}
             style={{
                 border: 'thin solid green',
                 padding: '1rem',

frontend/packages/pydantic-forms/src/components/fields/CheckboxField.tsx

@@ -8,9 +8,11 @@ export const CheckboxField = ({
     value,
     name,
     disabled,
+    pydanticFormField,
 }: PydanticFormControlledElementProps) => {
     return (
         <input
+            data-testid={pydanticFormField.id}
             type="checkbox"
             checked={value}
             onChange={() => onChange(!value)}

frontend/packages/pydantic-forms/src/components/fields/DividerField.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
 
-export const DividerField = () => {
-    return <hr />;
+import type { PydanticFormElementProps } from '@/types';
+
+export const DividerField = ({
+    pydanticFormField,
+}: PydanticFormElementProps) => {
+    return <hr data-testid={pydanticFormField.id} />;
 };

frontend/packages/pydantic-forms/src/components/fields/DropdownField.tsx

@@ -14,6 +14,7 @@ export const DropdownField = ({
 }: PydanticFormControlledElementProps) => {
     return (
         <select
+            data-testid={pydanticFormField.id}
             value={value}
             onChange={(e) => {
                 onChange(e.target.value);

frontend/packages/pydantic-forms/src/components/fields/FieldWrap.tsx

@@ -35,6 +35,7 @@ export const FieldWrap = ({ pydanticFormField, children }: FieldWrapProps) => {
             required={pydanticFormField.required}
             isInvalid={!!isInvalid}
             error={errorMsg as string}
+            data-testid={pydanticFormField.id}
         >
             <div>{children}</div>
         </RowRenderer>

frontend/packages/pydantic-forms/src/components/fields/HiddenField.tsx

@@ -7,5 +7,11 @@ export const HiddenField = ({
     pydanticFormField,
 }: PydanticFormElementProps) => {
     const { rhf } = usePydanticFormContext();
-    return <input type="hidden" {...rhf.register(pydanticFormField.id)} />;
+    return (
+        <input
+            type="hidden"
+            data-testid={pydanticFormField.id}
+            {...rhf.register(pydanticFormField.id)}
+        />
+    );
 };

frontend/packages/pydantic-forms/src/components/fields/IntegerField.tsx

@@ -9,9 +9,11 @@ export const IntegerField = ({
     onChange,
     onBlur,
     disabled,
+    pydanticFormField,
 }: PydanticFormControlledElementProps) => {
     return (
         <input
+            data-testid={pydanticFormField.id}
             onBlur={onBlur}
             onChange={(t) => {
                 const value = parseInt(t.currentTarget.value);

frontend/packages/pydantic-forms/src/components/fields/LabelField.tsx

@@ -4,7 +4,7 @@ import type { PydanticFormElementProps } from '@/types';
 
 export const LabelField = ({ pydanticFormField }: PydanticFormElementProps) => {
     return (
-        <div>
+        <div data-testid={pydanticFormField.id}>
             <label>{pydanticFormField?.default}</label>
         </div>
     );

frontend/packages/pydantic-forms/src/components/fields/MultiCheckboxField.tsx

@@ -35,6 +35,7 @@ export const MultiCheckboxField = ({
                 return (
                     <label key={optionId}>
                         <input
+                            data-testid={id}
                             type="checkbox"
                             id={optionId}
                             name={optionId}

frontend/packages/pydantic-forms/src/components/fields/MultiSelectField.tsx

@@ -24,6 +24,7 @@ export const MultiSelectField = ({
     return (
         <div>
             <select
+                data-testid={pydanticFormField.id}
                 onBlur={onBlur}
                 disabled={disabled}
                 value={multiSelectItems}

frontend/packages/pydantic-forms/src/components/fields/ObjectField.tsx

@@ -17,6 +17,7 @@ export const ObjectField = ({
 
     return (
         <div
+            data-testid={pydanticFormField.id}
             style={{
                 border: 'thin dotted grey',
                 padding: '1rem',

frontend/packages/pydantic-forms/src/components/fields/RadioField.tsx

@@ -19,6 +19,7 @@ export const RadioField = ({
             {options.map((option, key) => (
                 <div key={key}>
                     <input
+                        data-testid={`${id}-${option.value}`}
                         type="radio"
                         id={option.value}
                         name={id}

frontend/packages/pydantic-forms/src/components/fields/TextAreaField.tsx

@@ -7,9 +7,11 @@ export const TextAreaField = ({
     onChange,
     onBlur,
     disabled,
+    pydanticFormField,
 }: PydanticFormControlledElementProps) => {
     return (
         <textarea
+            data-testid={pydanticFormField.id}
             onChange={(e) => onChange(e.target.value)}
             onBlur={onBlur}
             defaultValue={value}

frontend/packages/pydantic-forms/src/components/fields/TextField.tsx

@@ -14,8 +14,10 @@ export const TextField = ({
     onChange,
     onBlur,
     disabled,
+    pydanticFormField,
 }: PydanticFormControlledElementProps) => (
     <input
+        data-testid={pydanticFormField.id}
         onBlur={onBlur}
         onChange={(t) => {
             onChange(t.currentTarget.value);