From 6d65bd731d1b2d3103a2b6824bc15cd9663f039f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Ribeiro?= Date: Sun, 28 Apr 2024 08:52:16 -0300 Subject: [PATCH] fix(ts): fix ts errors --- .../fields/MultiSelectCheckboxesField.tsx | 4 ++-- .../FormBuilder/DatePickerInput.test.tsx | 10 +++++++--- .../FormBuilder/FieldArray.test.tsx | 18 ++++++++++++++---- .../FormBuilder/FileUploadField.test.tsx | 9 +++++++-- .../FormBuilder/HiddenField.test.tsx | 19 ++++++++----------- .../FormBuilder/InputField.test.tsx | 9 +++++++-- .../MultiSelectCheckboxesField.test.tsx | 8 ++++++-- .../FormBuilder/RadioGroupField.test.tsx | 17 ++++++++++++----- .../FormBuilder/RichTextEditorField.test.tsx | 8 ++++++-- .../FormBuilder/SwitchField.test.tsx | 4 ++-- .../FormBuilder/TextAreaField.test.tsx | 8 ++++++-- tests/helpers/renderFormField.tsx | 12 ++++++++---- 12 files changed, 85 insertions(+), 41 deletions(-) diff --git a/src/components/FormBuilder/fields/MultiSelectCheckboxesField.tsx b/src/components/FormBuilder/fields/MultiSelectCheckboxesField.tsx index 6b285ce..9db0de4 100644 --- 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(({ form, field }) => ( + withConditional(({ form, field }) => ( { const mockDate = new Date(2022, 0, 1); - const field = { + const field: DatePickerInputProps = { type: "date", name: "test", defaultValue: "", + value: "", }; it("renders a date picker input", () => { @@ -20,7 +21,10 @@ describe("DatePickerInput", () => { it("displays the selected date in the correct format", () => { vi.setSystemTime(mockDate); - renderFormField(DatePickerInput, { ...field, defaultValue: mockDate }); + renderFormField(DatePickerInput, { + ...field, + defaultValue: mockDate.toDateString(), + }); const buttonElement = screen.getByRole("button"); expect(buttonElement).toHaveTextContent("Jan 1, 2022"); }); diff --git a/tests/components/FormBuilder/FieldArray.test.tsx b/tests/components/FormBuilder/FieldArray.test.tsx index 5c122d5..290d466 100644 --- a/tests/components/FormBuilder/FieldArray.test.tsx +++ b/tests/components/FormBuilder/FieldArray.test.tsx @@ -1,13 +1,15 @@ import { describe, it, expect } from "vitest"; import { screen, fireEvent } from "@testing-library/react"; import { renderFormField } from "tests/helpers/renderFormField"; -import { FieldArray } from "#/components"; +import { FieldArray, FieldArrayFieldProps } from "#/components"; describe("FieldArray", () => { it("renders an 'Add' button", () => { - const field = { + const field: FieldArrayFieldProps = { type: "field_array", name: "test", + value: "", + defaultValues: { name: "" }, fields: [], hasSequence: false, }; @@ -18,12 +20,20 @@ describe("FieldArray", () => { }); it("adds a new field when the 'Add' button is clicked", () => { - const field = { + const field: FieldArrayFieldProps = { type: "field_array", name: "test", + value: "", label: "Test", defaultValues: { name: "" }, - fields: [{ type: "input", name: "name" }], + fields: [ + { + type: "input", + name: "name", + label: "Name", + value: "", + }, + ], hasSequence: false, }; const { form } = renderFormField(FieldArray, field); diff --git a/tests/components/FormBuilder/FileUploadField.test.tsx b/tests/components/FormBuilder/FileUploadField.test.tsx index bad1929..1cf7f44 100644 --- a/tests/components/FormBuilder/FileUploadField.test.tsx +++ b/tests/components/FormBuilder/FileUploadField.test.tsx @@ -1,11 +1,16 @@ import { describe, it, expect } from "vitest"; import { screen } from "@testing-library/react"; import { renderFormField } from "tests/helpers/renderFormField"; -import { FileUploadField } from "#/components"; +import { FileUploadField, FileUploadFieldProps } from "#/components"; describe("FileUploadField", () => { it("renders an upload button", () => { - const field = { type: "file", name: "test", mode: "file" }; + const field: FileUploadFieldProps = { + type: "file", + name: "test", + mode: "file", + value: "", + }; renderFormField(FileUploadField, field); diff --git a/tests/components/FormBuilder/HiddenField.test.tsx b/tests/components/FormBuilder/HiddenField.test.tsx index 6f8884a..380b804 100644 --- a/tests/components/FormBuilder/HiddenField.test.tsx +++ b/tests/components/FormBuilder/HiddenField.test.tsx @@ -1,25 +1,22 @@ import { describe, it, expect } from "vitest"; import { screen } from "@testing-library/react"; -import { HiddenField } from "#/components"; +import { BaseField, HiddenField } from "#/components"; import { renderFormField } from "../../../tests/helpers/renderFormField"; describe("HiddenField", () => { + const field: BaseField = { + type: "hidden", + name: "test", + value: "hiddenValue", + }; it("renders a hidden input field", () => { - const { form } = renderFormField(HiddenField, { - type: "hidden", - name: "test", - value: "hiddenValue", - }); + const { form } = renderFormField(HiddenField, field); const hiddenInput = form.getValues("test"); expect(hiddenInput).toBe("hiddenValue"); }); it("does not render any visible elements", () => { - renderFormField(HiddenField, { - type: "hidden", - name: "test", - value: "hiddenValue", - }); + renderFormField(HiddenField, field); const hiddenInput = screen.queryByRole("textbox"); expect(hiddenInput).not.toBeInTheDocument(); }); diff --git a/tests/components/FormBuilder/InputField.test.tsx b/tests/components/FormBuilder/InputField.test.tsx index 05a5a9e..0d6142f 100644 --- a/tests/components/FormBuilder/InputField.test.tsx +++ b/tests/components/FormBuilder/InputField.test.tsx @@ -1,10 +1,15 @@ import { describe, it, expect } from "vitest"; import { screen, fireEvent } from "@testing-library/react"; import { renderFormField } from "tests/helpers/renderFormField"; -import { InputField } from "#/components"; +import { InputField, InputFieldProps } from "#/components"; describe("InputField", () => { - const field = { type: "input", name: "test", value: "" }; + const field: InputFieldProps = { + type: "input", + name: "test", + value: "", + mode: "text", + }; it("renders an input element", () => { renderFormField(InputField, field); const inputElement = screen.getByRole("textbox"); diff --git a/tests/components/FormBuilder/MultiSelectCheckboxesField.test.tsx b/tests/components/FormBuilder/MultiSelectCheckboxesField.test.tsx index 72bab7c..ac5b9a0 100644 --- a/tests/components/FormBuilder/MultiSelectCheckboxesField.test.tsx +++ b/tests/components/FormBuilder/MultiSelectCheckboxesField.test.tsx @@ -1,12 +1,16 @@ import { describe, it, expect } from "vitest"; import { screen, fireEvent } from "@testing-library/react"; import { renderFormField } from "tests/helpers/renderFormField"; -import { MultiSelectCheckboxes } from "#/components"; +import { + MultiSelectCheckboxes, + MultiSelectCheckboxesFieldProps, +} from "#/components"; describe("MultiSelectCheckboxes", () => { - const field = { + const field: MultiSelectCheckboxesFieldProps = { type: "multi_select_checkbox", name: "test", + value: "", options: [ { value: "option1", label: "Option 1" }, { value: "option2", label: "Option 2" }, diff --git a/tests/components/FormBuilder/RadioGroupField.test.tsx b/tests/components/FormBuilder/RadioGroupField.test.tsx index 280af12..11e4190 100644 --- a/tests/components/FormBuilder/RadioGroupField.test.tsx +++ b/tests/components/FormBuilder/RadioGroupField.test.tsx @@ -1,15 +1,22 @@ import { describe, it, expect } from "vitest"; import { screen, fireEvent } from "@testing-library/react"; import { renderFormField } from "tests/helpers/renderFormField"; -import { RadioGroupField } from "#/components"; +import { RadioGroupField, RadioGroupFieldProps } from "#/components"; describe("RadioGroupField", () => { - const field = { + const field: RadioGroupFieldProps = { type: "radio_group", name: "test", - options: [ - { value: "option1", label: "Option 1" }, - { value: "option2", label: "Option 2" }, + value: "", + sections: [ + { + label: "Test", + description: "Test description", + options: [ + { value: "option1", label: "Option 1" }, + { value: "option2", label: "Option 2" }, + ], + }, ], }; diff --git a/tests/components/FormBuilder/RichTextEditorField.test.tsx b/tests/components/FormBuilder/RichTextEditorField.test.tsx index 8565398..e4561cb 100644 --- a/tests/components/FormBuilder/RichTextEditorField.test.tsx +++ b/tests/components/FormBuilder/RichTextEditorField.test.tsx @@ -1,10 +1,14 @@ import { describe, it, expect, vi } from "vitest"; import { screen, act } from "@testing-library/react"; import { renderFormField } from "tests/helpers/renderFormField"; -import { RichTextEditorField } from "#/components"; +import { RichTextEditorField, RichTextEditorFieldProps } from "#/components"; describe("RichTextEditorField", () => { - const field = { type: "wysiwyg", name: "test" }; + const field: RichTextEditorFieldProps = { + type: "wysiwyg", + name: "test", + value: "", + }; it("renders a rich text editor", async () => { const { container } = renderFormField(RichTextEditorField, field); diff --git a/tests/components/FormBuilder/SwitchField.test.tsx b/tests/components/FormBuilder/SwitchField.test.tsx index 6558944..5de3f95 100644 --- a/tests/components/FormBuilder/SwitchField.test.tsx +++ b/tests/components/FormBuilder/SwitchField.test.tsx @@ -1,10 +1,10 @@ import { describe, it, expect } from "vitest"; import { screen, fireEvent } from "@testing-library/react"; import { renderFormField } from "tests/helpers/renderFormField"; -import { SwitchField } from "#/components"; +import { SwitchField, SwitchFieldProps } from "#/components"; describe("SwitchField", () => { - const field = { type: "switch", name: "test" }; + const field: SwitchFieldProps = { type: "switch", name: "test", value: "" }; it("renders a switch element", () => { renderFormField(SwitchField, field); diff --git a/tests/components/FormBuilder/TextAreaField.test.tsx b/tests/components/FormBuilder/TextAreaField.test.tsx index 5cd3293..bd3683d 100644 --- a/tests/components/FormBuilder/TextAreaField.test.tsx +++ b/tests/components/FormBuilder/TextAreaField.test.tsx @@ -1,10 +1,14 @@ import { describe, it, expect } from "vitest"; import { screen, fireEvent } from "@testing-library/react"; import { renderFormField } from "tests/helpers/renderFormField"; -import { TextAreaField } from "#/components"; +import { TextAreaField, TextAreaFieldProps } from "#/components"; describe("TextAreaField", () => { - const field = { type: "textarea", name: "test" }; + const field: TextAreaFieldProps = { + type: "textarea", + name: "test", + value: "", + }; it("renders a textarea element", () => { renderFormField(TextAreaField, field); diff --git a/tests/helpers/renderFormField.tsx b/tests/helpers/renderFormField.tsx index b84c48d..218d563 100644 --- a/tests/helpers/renderFormField.tsx +++ b/tests/helpers/renderFormField.tsx @@ -4,20 +4,24 @@ import { useForm, FormProvider, UseFormProps } from "react-hook-form"; import { CommonFieldProps, FormFieldProps } from "#/components"; export const renderFormField = ( - FieldComponent: React.ComponentType>, - field: FormFieldProps, - formProps: UseFormProps + FieldComponent: unknown, + field: CommonFieldProps["field"], + formProps?: UseFormProps ): { form: CommonFieldProps["form"]; } & RenderResult => { const { result } = renderHook(() => useForm(formProps)); const form = result.current; + const Component = FieldComponent as React.ElementType< + CommonFieldProps + >; + return { form, ...render( - + ), };