Merge pull request #69 from bleu-fi/add-tests-to-form

add tests to FormBuilder components
bleu · Apr 29, 2024 · a4fa758 · a4fa758
2 parents 30fe382 + 6d65bd7
commit a4fa758
Show file tree

Hide file tree

Showing 33 changed files with 1,039 additions and 101 deletions.
diff --git a/src/components/FormBuilder/fields/CheckboxField.tsx b/src/components/FormBuilder/fields/CheckboxField.tsx
@@ -9,6 +9,7 @@ import {
 } from "#/components/ui/Form";
 
 import { BaseField, withConditional } from "../fields";
+import isFieldDisabled from "../isFieldDisabled";
 
 export interface CheckboxFieldProps extends BaseField {
   type: "checkbox";
@@ -31,6 +32,7 @@ export const CheckboxField = withConditional<CheckboxFieldProps>(
             <Checkbox
               checked={formField.value}
               onCheckedChange={formField.onChange}
+              disabled={isFieldDisabled(form, field)}
             />
           </FormControl>
           <div className="space-y-1 leading-none">

diff --git a/src/components/FormBuilder/fields/DatePickerInput.tsx b/src/components/FormBuilder/fields/DatePickerInput.tsx
@@ -34,6 +34,7 @@ export const DatePickerInput = withConditional<DatePickerInputProps>(
         control={form.control}
         name={field.name}
         rules={field.required ? { required: true } : undefined}
+        defaultValue={field.defaultValue}
         render={({ field: formField }) => (
           <FormItem className="flex flex-col">
             <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>

diff --git a/src/components/FormBuilder/fields/FieldArray.tsx b/src/components/FormBuilder/fields/FieldArray.tsx
@@ -125,8 +125,7 @@ export const FieldArray = withConditional<FieldArrayFieldProps>(
           <DragDropContext onDragEnd={handleDrag}>
             <ul>
               <StrictModeDroppable droppableId={`${field.name}-items`}>
-                {/* eslint-disable-next-line no-shadow, @typescript-eslint/no-unused-vars */}
-                {(provided, snapshot) => (
+                {(provided) => (
                   <div {...provided.droppableProps} ref={provided.innerRef}>
                     {fields.map((rhfField, index) => {
                       // @ts-expect-error
@@ -139,11 +138,10 @@ export const FieldArray = withConditional<FieldArrayFieldProps>(
                           draggableId={`item-${index}`}
                           index={index}
                         >
-                          {/* eslint-disable-next-line no-shadow, @typescript-eslint/no-unused-vars */}
-                          {(provided, snapshot) => (
+                          {(innerProvided) => (
                             <li
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
+                              ref={innerProvided.innerRef}
+                              {...innerProvided.draggableProps}
                               className="mb-3"
                             >
                               <div
@@ -152,7 +150,7 @@ export const FieldArray = withConditional<FieldArrayFieldProps>(
                                 {field.hasSequence && (
                                   <div
                                     className="flex h-full w-6 flex-col justify-center"
-                                    {...provided.dragHandleProps}
+                                    {...innerProvided.dragHandleProps}
                                   >
                                     <MoveIcon className="size-6 self-center" />
                                   </div>
@@ -167,6 +165,7 @@ export const FieldArray = withConditional<FieldArrayFieldProps>(
                                   // eslint-disable-next-line jsx-a11y/control-has-associated-label
                                   <button
                                     type="button"
+                                    data-testid="remove-button"
                                     onClick={() => handleRemove(Number(index))}
                                     className="mt-4"
                                   >

diff --git a/src/components/FormBuilder/fields/HiddenField.tsx b/src/components/FormBuilder/fields/HiddenField.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { FormControl, FormField } from "#/components/ui/Form";
+import { FormField, FormItem } from "#/components/ui/Form";
 
 import { withConditional } from "../fields";
 
@@ -9,9 +9,9 @@ export const HiddenField = withConditional(({ form, field }) => (
     name={field.name}
     defaultValue={field.value}
     render={({ field: formField }) => (
-      <FormControl>
+      <FormItem>
         <input type="hidden" {...formField} />
-      </FormControl>
+      </FormItem>
     )}
   />
 ));
diff --git a/src/components/FormBuilder/fields/InputField.tsx b/src/components/FormBuilder/fields/InputField.tsx
@@ -53,6 +53,7 @@ export const InputField = withConditional<InputFieldProps>(
               }
             : undefined
         }
+        defaultValue={field.defaultValue}
         render={({ field: formField }) => (
           <FormItem className="w-full">
             <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>

diff --git a/src/components/FormBuilder/fields/MultiSelectCheckboxesField.tsx b/src/components/FormBuilder/fields/MultiSelectCheckboxesField.tsx
@@ -12,12 +12,12 @@ import {
 import { withConditional } from "../fields";
 import { SelectFieldProps } from "./selects/SelectField";
 
-export interface MultiSelectCheckboxesField extends SelectFieldProps {
+export interface MultiSelectCheckboxesFieldProps extends SelectFieldProps {
   type: "multi_select_checkbox";
 }
 
 export const MultiSelectCheckboxes =
-  withConditional<MultiSelectCheckboxesField>(({ form, field }) => (
+  withConditional<MultiSelectCheckboxesFieldProps>(({ form, field }) => (
     <FormField
       control={form.control}
       name={field.name}

diff --git a/src/components/FormBuilder/fields/TextAreaField.tsx b/src/components/FormBuilder/fields/TextAreaField.tsx
@@ -11,6 +11,7 @@ import {
 import { Textarea } from "#/components/ui/Textarea";
 
 import { BaseField, withConditional } from "../fields";
+import isFieldDisabled from "../isFieldDisabled";
 
 export interface TextAreaFieldProps extends BaseField {
   length?: {
@@ -47,6 +48,7 @@ export const TextAreaField = withConditional<TextAreaFieldProps>(
             <FormDescription>{field.description}</FormDescription>
             <FormControl>
               <Textarea
+                disabled={isFieldDisabled(form, field)}
                 placeholder={field.placeholder}
                 className="resize-none"
                 {...formField}

diff --git a/src/components/FormBuilder/fields/selects/SelectField.tsx b/src/components/FormBuilder/fields/selects/SelectField.tsx
@@ -10,6 +10,7 @@ import {
 import * as Select from "#/components/ui/Select";
 
 import { BaseField, withConditional } from "../../fields";
+import isFieldDisabled from "../../isFieldDisabled";
 
 export interface SelectFieldProps extends BaseField {
   options?: Array<{
@@ -20,48 +21,41 @@ export interface SelectFieldProps extends BaseField {
 }
 
 export const SelectField = withConditional<SelectFieldProps>(
-  ({ form, field }) => {
-    const disabled =
-      typeof field.disabled === "function"
-        ? field.disabled(form.getValues())
-        : field.disabled;
+  ({ form, field }) => (
+    <FormField
+      control={form.control}
+      name={field.name}
+      rules={field.required ? { required: true } : undefined}
+      render={({ field: formField }) => (
+        <FormItem className="w-full">
+          <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
+          <FormDescription>{field.description}</FormDescription>
+          <Select.SelectRoot
+            onValueChange={formField.onChange}
+            defaultValue={String(formField.value)}
+            name={field.name}
+            disabled={isFieldDisabled(form, field)}
+          >
+            <FormControl>
+              <Select.SelectTrigger className="h-10 w-full rounded-md border dark:border-2 shadow-none">
+                <Select.SelectValue placeholder={field.placeholder} />
+              </Select.SelectTrigger>
+            </FormControl>
+            <Select.SelectContent className="z-[10000]">
+              {field.options?.map((option) => (
+                <Select.SelectItem
+                  key={String(option.value)}
+                  value={String(option.value)}
+                >
+                  {option.label}
+                </Select.SelectItem>
+              ))}
+            </Select.SelectContent>
+          </Select.SelectRoot>
 
-    return (
-      <FormField
-        control={form.control}
-        name={field.name}
-        rules={field.required ? { required: true } : undefined}
-        render={({ field: formField }) => (
-          <FormItem className="w-full">
-            <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
-            <FormDescription>{field.description}</FormDescription>
-            <Select.SelectRoot
-              onValueChange={formField.onChange}
-              defaultValue={String(formField.value)}
-              name={field.name}
-              disabled={disabled}
-            >
-              <FormControl>
-                <Select.SelectTrigger className="h-10 w-full rounded-md border dark:border-2 shadow-none">
-                  <Select.SelectValue placeholder={field.placeholder} />
-                </Select.SelectTrigger>
-              </FormControl>
-              <Select.SelectContent className="z-[10000]">
-                {field.options?.map((option) => (
-                  <Select.SelectItem
-                    key={String(option.value)}
-                    value={String(option.value)}
-                  >
-                    {option.label}
-                  </Select.SelectItem>
-                ))}
-              </Select.SelectContent>
-            </Select.SelectRoot>
-
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    );
-  }
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  )
 );
diff --git a/src/components/FormBuilder/isFieldDisabled.ts b/src/components/FormBuilder/isFieldDisabled.ts
@@ -0,0 +1,12 @@
+import { CommonFieldProps, FormFieldProps } from "./fields";
+
+type FieldProps = CommonFieldProps<FormFieldProps>;
+
+export default function isFieldDisabled(
+  form: FieldProps["form"],
+  field: FieldProps["field"]
+) {
+  return typeof field.disabled === "function"
+    ? field.disabled(form.getValues())
+    : field.disabled;
+}
diff --git a/src/components/RichTextEditor/index.tsx b/src/components/RichTextEditor/index.tsx
@@ -4,7 +4,10 @@ import React, { Suspense, lazy } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useTheme } from "#/components/ThemeToggle/context";
 
-const JoditEditor = lazy(() => import("jodit-react"));
+const JoditEditor = lazy(async () => {
+  const module = await import("jodit-react");
+  return { default: module.default };
+});
 
 const EDITOR_BUTTONS = [
   "undo",