test: field.test.tsx

iRingil · iRingil · commit 1af65b3faf52 · 2025-07-15T12:57:14.000+03:00
diff --git a/frontend/tests/components/ui/field.test.tsx b/frontend/tests/components/ui/field.test.tsx
@@ -0,0 +1,155 @@
+/** @file Unit tests for src/components/ui/field.tsx.
+ * @description Tests the rendering and behavior of the Field component, ensuring it correctly renders
+ *              Chakra UI Field components with provided props and handles conditional rendering.
+ * @module FieldTests
+ */
+
+import { Field } from "@/components/ui/field"
+import { render, screen } from "@testing-library/react"
+import * as React from "react"
+import { describe, expect, it } from "vitest"
+
+// region Main Code
+
+describe("Field Component", (): void => {
+  /**
+   * Tests rendering of the Field component with only required props (children).
+   * @description Ensures the component renders children inside ChakraField.Root without label, helperText, or errorText.
+   */
+  it("renders with only children", (): void => {
+    const input: React.ReactElement = <input data-testid="input" />
+    render(<Field>{input}</Field>)
+
+    expect(screen.getByTestId("field-root")).toBeInTheDocument()
+    expect(screen.getByTestId("input")).toBeInTheDocument()
+    expect(screen.queryByTestId("field-label")).not.toBeInTheDocument()
+    expect(screen.queryByTestId("field-helper-text")).not.toBeInTheDocument()
+    expect(screen.queryByTestId("field-error-text")).not.toBeInTheDocument()
+    expect(screen.queryByTestId("field-required-indicator")).not.toBeInTheDocument()
+  })
+
+  /**
+   * Tests rendering with label prop.
+   * @description Ensures the label is rendered inside ChakraField.Label with RequiredIndicator.
+   */
+  it("renders with label", (): void => {
+    const labelText = "Test Label"
+    const input: React.ReactElement = <input data-testid="input" />
+    render(<Field label={labelText}>{input}</Field>)
+
+    expect(screen.getByTestId("field-root")).toBeInTheDocument()
+    expect(screen.getByTestId("field-label")).toHaveTextContent(labelText)
+    expect(screen.getByTestId("field-required-indicator")).toBeInTheDocument()
+    expect(screen.getByTestId("input")).toBeInTheDocument()
+    expect(screen.queryByTestId("field-helper-text")).not.toBeInTheDocument()
+    expect(screen.queryByTestId("field-error-text")).not.toBeInTheDocument()
+  })
+
+  /**
+   * Tests rendering with helperText prop.
+   * @description Ensures helperText is rendered inside ChakraField.HelperText.
+   */
+  it("renders with helperText", (): void => {
+    const helperText = "Helper text"
+    const input: React.ReactElement = <input data-testid="input" />
+    render(<Field helperText={helperText}>{input}</Field>)
+
+    expect(screen.getByTestId("field-root")).toBeInTheDocument()
+    expect(screen.getByTestId("field-helper-text")).toHaveTextContent(helperText)
+    expect(screen.getByTestId("input")).toBeInTheDocument()
+    expect(screen.queryByTestId("field-label")).not.toBeInTheDocument()
+    expect(screen.queryByTestId("field-error-text")).not.toBeInTheDocument()
+    expect(screen.queryByTestId("field-required-indicator")).not.toBeInTheDocument()
+  })
+
+  /**
+   * Tests rendering with errorText prop.
+   * @description Ensures errorText is rendered inside ChakraField.ErrorText.
+   */
+  it("renders with errorText", (): void => {
+    const errorText = "Error message"
+    const input: React.ReactElement = <input data-testid="input" />
+    render(<Field errorText={errorText}>{input}</Field>)
+
+    expect(screen.getByTestId("field-root")).toBeInTheDocument()
+    expect(screen.getByTestId("field-error-text")).toHaveTextContent(errorText)
+    expect(screen.getByTestId("input")).toBeInTheDocument()
+    expect(screen.queryByTestId("field-label")).not.toBeInTheDocument()
+    expect(screen.queryByTestId("field-helper-text")).not.toBeInTheDocument()
+    expect(screen.queryByTestId("field-required-indicator")).not.toBeInTheDocument()
+  })
+
+  /**
+   * Tests rendering with optionalText prop when label is present.
+   * @description Ensures optionalText is passed to RequiredIndicator as fallback.
+   */
+  it("renders with optionalText and label", (): void => {
+    const labelText = "Test Label"
+    const optionalText = "Optional"
+    const input: React.ReactElement = <input data-testid="input" />
+    render(
+      <Field label={labelText} optionalText={optionalText}>
+        {input}
+      </Field>,
+    )
+
+    expect(screen.getByTestId("field-root")).toBeInTheDocument()
+    expect(screen.getByTestId("field-label")).toHaveTextContent(labelText)
+    expect(screen.getByTestId("field-required-indicator")).toHaveTextContent(optionalText)
+    expect(screen.getByTestId("input")).toBeInTheDocument()
+    expect(screen.queryByTestId("field-helper-text")).not.toBeInTheDocument()
+    expect(screen.queryByTestId("field-error-text")).not.toBeInTheDocument()
+  })
+
+  /**
+   * Tests forwarding of ref to ChakraField.Root.
+   * @description Ensures the ref is correctly attached to the root div.
+   */
+  it("forwards ref to ChakraField.Root", (): void => {
+    const ref = React.createRef<HTMLDivElement>()
+    const input: React.ReactElement = <input data-testid="input" />
+    render(<Field ref={ref}>{input}</Field>)
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    expect(ref.current).toHaveAttribute("data-testid", "field-root")
+  })
+
+  /**
+   * Tests passing additional props to ChakraField.Root.
+   * @description Ensures custom props like className are passed to the root element.
+   */
+  it("passes additional props to ChakraField.Root", (): void => {
+    const className = "custom-class"
+    const input: React.ReactElement = <input data-testid="input" />
+    render(<Field className={className}>{input}</Field>)
+
+    expect(screen.getByTestId("field-root")).toHaveClass(className)
+    expect(screen.getByTestId("input")).toBeInTheDocument()
+  })
+
+  /**
+   * Tests rendering with all props combined.
+   * @description Ensures the component renders all parts (label, helperText, errorText, optionalText) correctly.
+   */
+  it("renders with all props", (): void => {
+    const labelText = "Test Label"
+    const helperText = "Helper text"
+    const errorText = "Error message"
+    const optionalText = "Optional"
+    const input: React.ReactElement = <input data-testid="input" />
+    render(
+      <Field label={labelText} helperText={helperText} errorText={errorText} optionalText={optionalText}>
+        {input}
+      </Field>,
+    )
+
+    expect(screen.getByTestId("field-root")).toBeInTheDocument()
+    expect(screen.getByTestId("field-label")).toHaveTextContent(labelText)
+    expect(screen.getByTestId("field-helper-text")).toHaveTextContent(helperText)
+    expect(screen.getByTestId("field-error-text")).toHaveTextContent(errorText)
+    expect(screen.getByTestId("field-required-indicator")).toHaveTextContent(optionalText)
+    expect(screen.getByTestId("input")).toBeInTheDocument()
+  })
+})
+
+// endregion
diff --git a/frontend/tests/setupTests.tsx b/frontend/tests/setupTests.tsx
@@ -70,6 +70,29 @@ type CloseButtonProps = {
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
 } & ComponentPropsWithoutRef<"button">
 
+/** Props for ChakraField components */
+type ChakraFieldRootProps = {
+  children: ReactNode
+  ref?: ForwardedRef<HTMLDivElement>
+} & ComponentPropsWithoutRef<"div">
+
+type ChakraFieldLabelProps = {
+  children: ReactNode
+  htmlFor?: string
+} & ComponentPropsWithoutRef<"label">
+
+type ChakraFieldHelperTextProps = {
+  children: ReactNode
+} & ComponentPropsWithoutRef<"div">
+
+type ChakraFieldErrorTextProps = {
+  children: ReactNode
+} & ComponentPropsWithoutRef<"div">
+
+type ChakraFieldRequiredIndicatorProps = {
+  fallback?: ReactNode
+} & ComponentPropsWithoutRef<"span">
+
 /** Dialog context type */
 type DialogContextType = {
   onClose: () => void
@@ -118,6 +141,7 @@ const mockChakraUI = (): void => {
     const ThemeContext = createContext({ theme: { _config: {} } })
 
     // region Mock Components
+
     const CloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(
       (
         { children, size, onClick, ...props }: CloseButtonProps,
@@ -266,6 +290,38 @@ const mockChakraUI = (): void => {
       },
     )
 
+    const FieldRoot = React.forwardRef<HTMLDivElement, ChakraFieldRootProps>(
+      ({ children, ...props }: ChakraFieldRootProps, ref: ForwardedRef<HTMLDivElement>): React.ReactElement => (
+        <div data-testid="field-root" ref={ref} {...props}>
+          {children}
+        </div>
+      ),
+    )
+
+    const FieldLabel = ({ children, htmlFor, ...props }: ChakraFieldLabelProps): React.ReactElement => (
+      <label data-testid="field-label" htmlFor={htmlFor} {...props}>
+        {children}
+      </label>
+    )
+
+    const FieldHelperText = ({ children, ...props }: ChakraFieldHelperTextProps): React.ReactElement => (
+      <div data-testid="field-helper-text" {...props}>
+        {children}
+      </div>
+    )
+
+    const FieldErrorText = ({ children, ...props }: ChakraFieldErrorTextProps): React.ReactElement => (
+      <div data-testid="field-error-text" {...props}>
+        {children}
+      </div>
+    )
+
+    const FieldRequiredIndicator = ({ fallback, ...props }: ChakraFieldRequiredIndicatorProps): React.ReactElement => (
+      <span data-testid="field-required-indicator" {...props}>
+        {fallback || "*"}
+      </span>
+    )
+
     // endregion
 
     return {
@@ -290,6 +346,13 @@ const mockChakraUI = (): void => {
           </div>
         ),
       CloseButton,
+      Field: {
+        Root: FieldRoot,
+        Label: FieldLabel,
+        HelperText: FieldHelperText,
+        ErrorText: FieldErrorText,
+        RequiredIndicator: FieldRequiredIndicator,
+      },
       Dialog: {
         Root: ({ children, defaultOpen, open, onOpenChange, ...props }: DialogRootProps): React.ReactElement => {
           const [isOpen, setIsOpen] = useState(defaultOpen ?? open ?? false)
@@ -429,7 +492,7 @@ const mockChakraUI = (): void => {
           const [isOpen, setIsOpen] = useState(defaultOpen ?? open ?? false)
           const isControlled = open !== undefined
           const effectiveOpen = isControlled ? open : isOpen
-          const handleOpenChange = (newOpen: boolean) => {
+          const handleOpenChange = (newOpen: boolean): void => {
             if (!isControlled) setIsOpen(newOpen)
             onOpenChange?.({ open: newOpen })
           }
@@ -438,9 +501,7 @@ const mockChakraUI = (): void => {
             <div data-testid="drawer-root" {...props}>
               <DialogContext.Provider value={{ onClose: () => handleOpenChange(false), isOpen: effectiveOpen }}>
                 {React.Children.map(children, (child) => {
-                  if (!React.isValidElement(child)) {
-                    return child
-                  }
+                  if (!React.isValidElement(child)) return child
                   const childType =
                     typeof child.type !== "string" && "displayName" in child.type ? child.type.displayName : undefined
                   if (childType === "DrawerTrigger") {
@@ -478,9 +539,7 @@ const mockChakraUI = (): void => {
                       </DialogCloseTrigger>
                     )
                   }
-                  if (childType === "DrawerContent" && !effectiveOpen) {
-                    return null
-                  }
+                  if (childType === "DrawerContent" && !effectiveOpen) return null
                   return child
                 })}
               </DialogContext.Provider>
