Merge pull request #140 from workfloworchestrator/2061-add-test-id-attributes

Add data-testid attributes to Pydantic Forms components

Author: DutchBen

frontend/package-lock.json

@@ -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/ArrayField.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/CheckboxField.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/DividerField.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/DropdownField.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/FieldWrap.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/HiddenField.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/IntegerField.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/LabelField.tsx

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