style:

Author: iRingil

frontend/tests/components/ui/button.test.tsx

@@ -9,8 +9,58 @@
 // region Imports
 import { Button } from "@/components/ui/button"
 import { render, screen } from "@testing-library/react"
-import { type RefObject, createRef } from "react"
-import { describe, expect, it } from "vitest"
+import React, { type RefObject, createRef } from "react" // Оставляем только то, что нужно для тестов
+import { describe, expect, it, vi } from "vitest"
+// endregion
+
+// region Mocks
+/**
+ * Mocks the required components from `@chakra-ui/react` for Button tests.
+ * This approach isolates the test environment, ensuring that only the necessary
+ * components are mocked for this specific test suite.
+ *
+ * NOTE: The mock factory is hoisted by Vitest and runs before other module code.
+ * To avoid issues with undefined variables, all dependencies (like React)
+ * must be imported *inside* the factory.
+ */
+vi.mock("@chakra-ui/react", async () => {
+  const React = await import("react")
+  const actual = await vi.importActual<typeof import("@chakra-ui/react")>("@chakra-ui/react")
+
+  const ThemeContext = React.createContext({ theme: { _config: {} } })
+
+  return {
+    ...actual,
+    ChakraProvider: ({ children }: { children: React.ReactNode }): React.ReactElement => (
+      <ThemeContext.Provider value={{ theme: { _config: {} } }}>{children}</ThemeContext.Provider>
+    ),
+    AbsoluteCenter: (props: React.ComponentPropsWithoutRef<"div">): React.ReactElement => (
+      <div data-testid="absolute-center" {...props} />
+    ),
+    Span: React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+      (
+        {
+          colorPalette,
+          colorScheme,
+          ...props
+        }: React.ComponentPropsWithoutRef<"span"> & {
+          colorPalette?: string
+          colorScheme?: string
+        },
+        ref: React.ForwardedRef<HTMLSpanElement>,
+      ): React.ReactElement => <span data-testid="span" ref={ref} {...props} />,
+    ),
+    Spinner: (props: React.ComponentPropsWithoutRef<"div">): React.ReactElement => (
+      <div role="status" data-testid="spinner" {...props} />
+    ),
+    Button: React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<"button">>(
+      (
+        props: React.ComponentPropsWithoutRef<"button">,
+        ref: React.ForwardedRef<HTMLButtonElement>,
+      ): React.ReactElement => <button ref={ref} {...props} />,
+    ),
+  }
+})
 // endregion
 
 // region Tests

frontend/tests/components/ui/checkbox.test.tsx

@@ -9,10 +9,52 @@
 // region Imports
 import { Checkbox } from "@/components/ui/checkbox"
 import { render, screen } from "@testing-library/react"
-import { type RefObject, createRef } from "react"
+import React, { type RefObject, createRef } from "react"
 import { FaCheck } from "react-icons/fa"
-import { describe, expect, it } from "vitest"
+import { describe, expect, it, vi } from "vitest"
+// endregion
+
+// region Mocks
+/**
+ * Mocks the required components from `@chakra-ui/react` for Checkbox tests.
+ *
+ * NOTE: The mock factory is hoisted by Vitest and runs before other module code.
+ * To avoid issues with undefined variables, all dependencies (like React)
+ * must be imported *inside* the factory.
+ */
+vi.mock("@chakra-ui/react", async () => {
+  const React = await import("react")
+  const actual = await vi.importActual<typeof import("@chakra-ui/react")>("@chakra-ui/react")
+
+  const ThemeContext = React.createContext({ theme: { _config: {} } })
 
+  return {
+    ...actual,
+    ChakraProvider: ({ children }: { children: React.ReactNode }): React.ReactElement => (
+      <ThemeContext.Provider value={{ theme: { _config: {} } }}>{children}</ThemeContext.Provider>
+    ),
+    Checkbox: {
+      Root: (props: React.ComponentPropsWithoutRef<"div">): React.ReactElement => (
+        <div data-testid="checkbox-root" {...props} />
+      ),
+      HiddenInput: React.forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<"input">>(
+        (
+          props: React.ComponentPropsWithoutRef<"input">,
+          ref: React.ForwardedRef<HTMLInputElement>,
+        ): React.ReactElement => <input type="checkbox" data-testid="checkbox-input" ref={ref} {...props} />,
+      ),
+      Control: (props: React.ComponentPropsWithoutRef<"div">): React.ReactElement => (
+        <div data-testid="checkbox-control" {...props} />
+      ),
+      Indicator: (props: React.ComponentPropsWithoutRef<"div">): React.ReactElement => (
+        <div data-testid="checkbox-indicator" {...props} />
+      ),
+      Label: (props: React.ComponentPropsWithoutRef<"span">): React.ReactElement => (
+        <span data-testid="checkbox-label" {...props} />
+      ),
+    },
+  }
+})
 // endregion
 
 // region Tests

frontend/tests/components/ui/close-button.test.tsx

@@ -9,9 +9,40 @@
 // region Imports
 import { CloseButton } from "@/components/ui/close-button"
 import { render, screen } from "@testing-library/react"
-import { type RefObject, createRef } from "react"
-import { describe, expect, it } from "vitest"
+import React, { type RefObject, createRef } from "react"
+import { describe, expect, it, vi } from "vitest"
+// endregion
+
+// region Mocks
+/**
+ * Mocks the required components from `@chakra-ui/react` for CloseButton tests.
+ * The internal dependency `IconButton` is mocked to prevent it from calling
+ * context-dependent hooks. `defineRecipe` is also mocked as it's part of
+ * Chakra's styling system used by real components.
+ *
+ * NOTE: The mock factory is hoisted by Vitest. All dependencies (like React)
+ * must be imported *inside* the factory to avoid hoisting-related errors.
+ */
+vi.mock("@chakra-ui/react", async () => {
+  const React = await import("react")
+  const actual = await vi.importActual<typeof import("@chakra-ui/react")>("@chakra-ui/react")
 
+  const ThemeContext = React.createContext({ theme: { _config: {} } })
+
+  return {
+    ...actual,
+    ChakraProvider: ({ children }: { children: React.ReactNode }): React.ReactElement => (
+      <ThemeContext.Provider value={{ theme: { _config: {} } }}>{children}</ThemeContext.Provider>
+    ),
+    IconButton: React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<"button">>(
+      (
+        { "aria-label": ariaLabel, ...props }: React.ComponentPropsWithoutRef<"button">,
+        ref: React.ForwardedRef<HTMLButtonElement>,
+      ): React.ReactElement => <button ref={ref} aria-label={ariaLabel} {...props} />,
+    ),
+    defineRecipe: vi.fn(() => ({})),
+  }
+})
 // endregion
 
 // region Tests
@@ -85,4 +116,5 @@ describe("CloseButton", (): void => {
     expect(button).toHaveAttribute("data-test", "custom-prop")
   })
 })
+
 // endregion

frontend/tests/components/ui/color-mode.test.tsx

@@ -23,7 +23,6 @@ import type React from "react"
 import { type RefObject, createRef } from "react"
 import type { Dispatch, SetStateAction } from "react"
 import { describe, expect, it, vi } from "vitest"
-
 // endregion
 
 // region Type Aliases
@@ -40,6 +39,38 @@ vi.mock("next-themes", () => ({
   useTheme: vi.fn(),
 }))
 
+/**
+ * Mocks dependencies from `@chakra-ui/react`.
+ * - The IconButton mock is updated to correctly handle the `boxSize` prop, preventing React warnings.
+ */
+vi.mock("@chakra-ui/react", async () => {
+  const React = await import("react")
+  // Correctly define types for use within the mock
+  type ComponentPropsWithoutRef<T extends React.ElementType> = React.ComponentPropsWithoutRef<T>
+  type ForwardedRef<T> = React.ForwardedRef<T>
+  type ReactNode = React.ReactNode
+
+  return {
+    ...(await vi.importActual<typeof import("@chakra-ui/react")>("@chakra-ui/react")),
+    ChakraProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+    // FIX: The IconButton mock now correctly handles the `boxSize` prop to prevent warnings.
+    IconButton: React.forwardRef<HTMLButtonElement, ComponentPropsWithoutRef<"button"> & { boxSize?: string }>(
+      ({ boxSize, ...rest }, ref: ForwardedRef<HTMLButtonElement>): React.ReactElement => (
+        <button ref={ref} {...rest} />
+      ),
+    ),
+    Span: React.forwardRef<
+      HTMLSpanElement,
+      ComponentPropsWithoutRef<"span"> & { colorPalette?: string; colorScheme?: string }
+    >(
+      ({ colorPalette, colorScheme, ...props }, ref: ForwardedRef<HTMLSpanElement>): React.ReactElement => (
+        <span data-testid="span" ref={ref} {...props} />
+      ),
+    ),
+    ClientOnly: ({ children }: { children: ReactNode; fallback?: ReactNode }): React.ReactElement => <>{children}</>,
+    defineRecipe: vi.fn(() => ({})),
+  }
+})
 // endregion
 
 // region Tests

frontend/tests/components/ui/dialog.test.tsx

@@ -25,8 +25,155 @@ import { act, render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import type React from "react"
 import { type ForwardedRef, type ReactNode, type RefObject, createRef, useState } from "react"
-import { describe, expect, it } from "vitest"
+import { describe, expect, it, vi } from "vitest"
+// endregion
+
+// region Mocks
+vi.mock("@chakra-ui/react", async () => {
+  const React = await import("react")
+  const { useState, createContext, useContext } = React
+
+  // region Type Aliases (Copied EXACTLY from original TestSetup)
+  type ComponentPropsWithoutRef<T extends React.ElementType> = React.ComponentPropsWithoutRef<T>
+  type DialogRootProps = {
+    children: ReactNode
+    open?: boolean
+    onOpenChange?: (details: { open: boolean }) => void
+  } & ComponentPropsWithoutRef<"div">
+  type DialogTriggerProps = {
+    children: ReactNode
+    isOpen?: boolean
+    onOpen?: () => void
+  } & ComponentPropsWithoutRef<"button">
+  type DialogContentProps = {
+    children: ReactNode
+    portalled?: boolean
+    backdrop?: boolean
+    ref?: ForwardedRef<HTMLDivElement>
+  } & ComponentPropsWithoutRef<"div">
+  type CloseButtonProps = { children?: ReactNode } & ComponentPropsWithoutRef<"button">
+  type DialogCloseTriggerProps = {
+    children?: ReactNode
+    asChild?: boolean
+    insetEnd?: string
+    top?: string
+    position?: string
+    ref?: ForwardedRef<HTMLButtonElement>
+  } & ComponentPropsWithoutRef<"button">
+  type DialogContextType = { onClose: () => void; isOpen: boolean }
+  interface RefElement extends React.ReactElement {
+    ref?: ForwardedRef<HTMLButtonElement>
+  }
+  // endregion
+
+  const DialogContext = createContext<DialogContextType | undefined>(undefined)
+  const ThemeContext = createContext({ theme: { _config: {} } })
+
+  // region Mock Components (Copied EXACTLY from original TestSetup)
+  const MockCloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(({ children, ...props }, ref) => (
+    <button ref={ref} data-testid="close-button" {...props}>
+      {children}
+    </button>
+  ))
+
+  const MockDialogCloseTrigger = React.forwardRef<HTMLButtonElement, DialogCloseTriggerProps>(
+    ({ children, asChild, insetEnd, top, position, ...props }, ref) => {
+      const context = useContext(DialogContext)
+      const buttonProps = { ...props, position, top, insetend: insetEnd, "data-testid": "close-button" }
+
+      if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+          ...buttonProps,
+          // @ts-ignore
+          ref,
+          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+            if (children.props.onClick) children.props.onClick(e)
+            if (!e.defaultPrevented) context?.onClose?.()
+          },
+        })
+      }
+      return (
+        <MockCloseButton
+          ref={ref}
+          onClick={(e) => {
+            if (!e.defaultPrevented) context?.onClose?.()
+          }}
+          {...buttonProps}
+        >
+          {children}
+        </MockCloseButton>
+      )
+    },
+  )
+  // endregion
 
+  return {
+    ...(await vi.importActual<typeof import("@chakra-ui/react")>("@chakra-ui/react")),
+    ChakraProvider: ({ children }: { children: ReactNode }): React.ReactElement => (
+      <ThemeContext.Provider value={{ theme: { _config: {} } }}>{children}</ThemeContext.Provider>
+    ),
+    Portal: ({ children, disabled }: { children: ReactNode; disabled?: boolean }): React.ReactElement =>
+      disabled ? <>{children}</> : <div data-testid="portal">{children}</div>,
+    CloseButton: MockCloseButton,
+    IconButton: React.forwardRef<HTMLButtonElement, ComponentPropsWithoutRef<"button">>(
+      (props, ref): React.ReactElement => <button data-testid="icon-button" ref={ref} {...props} />,
+    ),
+    defineRecipe: vi.fn(() => ({})),
+    Dialog: {
+      Root: ({ children, open, onOpenChange, ...props }: DialogRootProps) => {
+        const [isOpen, setIsOpen] = useState(open ?? false)
+        const isControlled = open !== undefined
+        const effectiveOpen = isControlled ? open : isOpen
+        const handleOpenChange = (newOpen: boolean) => {
+          if (!isControlled) setIsOpen(newOpen)
+          onOpenChange?.({ open: newOpen })
+        }
+        return (
+          <div data-testid="dialog-root" {...props}>
+            <DialogContext.Provider value={{ onClose: () => handleOpenChange(false), isOpen: effectiveOpen }}>
+              {React.Children.map(children, (child) => {
+                if (!React.isValidElement(child)) return child
+                const childType =
+                  typeof child.type !== "string" && "displayName" in child.type ? child.type.displayName : undefined
+                if (childType === "DialogTrigger") {
+                  return React.cloneElement(child as React.ReactElement<DialogTriggerProps>, {
+                    isOpen: effectiveOpen,
+                    onOpen: () => handleOpenChange(true),
+                  })
+                }
+                if (childType === "DialogCloseTrigger") {
+                  const closeTriggerChild = child as RefElement
+                  return <MockDialogCloseTrigger ref={closeTriggerChild.ref} asChild {...closeTriggerChild.props} />
+                }
+                if (childType === "DialogContent" && !effectiveOpen) return null
+                return child
+              })}
+            </DialogContext.Provider>
+          </div>
+        )
+      },
+      Trigger: ({ children, isOpen, onOpen, ...props }: DialogTriggerProps) => (
+        <button data-testid="dialog-trigger" onClick={() => !isOpen && onOpen?.()} {...props}>
+          {children}
+        </button>
+      ),
+      Positioner: ({ children }: { children: ReactNode }) => <div data-testid="dialog-positioner">{children}</div>,
+      Backdrop: (props: ComponentPropsWithoutRef<"div">) => <div data-testid="dialog-backdrop" {...props} />,
+      Content: React.forwardRef<HTMLDivElement, DialogContentProps>(({ portalled, backdrop, ...props }, ref) => (
+        <div data-testid="dialog-content" ref={ref} {...props} />
+      )),
+      CloseTrigger: MockDialogCloseTrigger,
+      Footer: (props: ComponentPropsWithoutRef<"div">) => <div data-testid="dialog-footer" {...props} />,
+      Header: (props: ComponentPropsWithoutRef<"div">) => <div data-testid="dialog-header" {...props} />,
+      Body: (props: ComponentPropsWithoutRef<"div">) => <div data-testid="dialog-body" {...props} />,
+      Title: (props: ComponentPropsWithoutRef<"h2">) => <h2 data-testid="dialog-title" {...props} />,
+      Description: (props: ComponentPropsWithoutRef<"p">) => <p data-testid="dialog-description" {...props} />,
+      ActionTrigger: (props: ComponentPropsWithoutRef<"button">) => (
+        <button data-testid="dialog-action-trigger" {...props} />
+      ),
+    },
+  }
+})
 // endregion
 
 // region Type Aliases
@@ -188,7 +335,9 @@ describe("Dialog", (): void => {
     render(
       <Wrapper>
         <DialogRoot open>
-          <DialogCloseTrigger data-testid="close-trigger">Close</DialogCloseTrigger>
+          <DialogContent>
+            <DialogCloseTrigger data-testid="close-trigger">Close</DialogCloseTrigger>
+          </DialogContent>
         </DialogRoot>
       </Wrapper>,
     )
@@ -358,4 +507,5 @@ describe("Dialog", (): void => {
     expect(actionTrigger).toHaveTextContent("Action")
   })
 })
+
 // endregion