test: enhance unit tests for dataset components by adding vitest imports and improving type definitions

web/app/components/datasets/documents/create-from-pipeline/steps/preview-panel.spec.tsx

@@ -4,6 +4,7 @@ import type { NotionPage } from '@/models/common'
 import type { CrawlResultItem, CustomFile, FileIndexingEstimateResponse, FileItem } from '@/models/datasets'
 import type { OnlineDriveFile } from '@/models/pipeline'
 import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { DatasourceType } from '@/models/pipeline'
 import { StepOnePreview, StepTwoPreview } from './preview-panel'
 

web/app/components/datasets/documents/create-from-pipeline/steps/step-one-content.spec.tsx

@@ -2,6 +2,7 @@ import type { Datasource } from '@/app/components/rag-pipeline/components/panel/
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import type { Node } from '@/app/components/workflow/types'
 import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { DatasourceType } from '@/models/pipeline'
 import StepOneContent from './step-one-content'
 

web/app/components/datasets/documents/create-from-pipeline/steps/step-three-content.spec.tsx

@@ -1,5 +1,6 @@
 import type { InitialDocumentDetail } from '@/models/pipeline'
 import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import StepThreeContent from './step-three-content'
 
 // Mock context hooks used by Processing component

web/app/components/datasets/documents/create-from-pipeline/steps/step-two-content.spec.tsx

@@ -1,5 +1,6 @@
 import type { RefObject } from 'react'
 import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import StepTwoContent from './step-two-content'
 
 // Mock ProcessDocuments component as it has complex hook dependencies

web/app/components/datasets/documents/detail/batch-modal/csv-downloader.spec.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { LanguagesSupported } from '@/i18n-config/language'
@@ -12,7 +13,7 @@ vi.mock('@/context/i18n', () => ({
 }))
 
 // Mock react-papaparse
-const MockCSVDownloader = ({ children, data, filename, type }: { children: React.ReactNode, data: unknown, filename: string, type: string }) => (
+const MockCSVDownloader = ({ children, data, filename, type }: { children: ReactNode, data: unknown, filename: string, type: string }) => (
   <div
     data-testid="csv-downloader-link"
     data-filename={filename}

web/app/components/datasets/documents/detail/batch-modal/csv-uploader.spec.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import type { CustomFile, FileItem } from '@/models/datasets'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -27,8 +28,8 @@ vi.mock('@/hooks/use-theme', () => ({
 const mockNotify = vi.fn()
 vi.mock('@/app/components/base/toast', () => ({
   ToastContext: {
-    Provider: ({ children }: { children: React.ReactNode }) => children,
-    Consumer: ({ children }: { children: (ctx: { notify: typeof mockNotify }) => React.ReactNode }) => children({ notify: mockNotify }),
+    Provider: ({ children }: { children: ReactNode }) => children,
+    Consumer: ({ children }: { children: (ctx: { notify: typeof mockNotify }) => ReactNode }) => children({ notify: mockNotify }),
   },
 }))
 

web/app/components/datasets/documents/detail/completed/common/chunk-content.spec.tsx

@@ -1,15 +1,23 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ChunkingMode } from '@/models/datasets'
 import ChunkContent from './chunk-content'
 
 // Mock ResizeObserver
+const OriginalResizeObserver = globalThis.ResizeObserver
 class MockResizeObserver {
   observe = vi.fn()
   disconnect = vi.fn()
   unobserve = vi.fn()
 }
-globalThis.ResizeObserver = MockResizeObserver as typeof ResizeObserver
+
+beforeAll(() => {
+  globalThis.ResizeObserver = MockResizeObserver as typeof ResizeObserver
+})
+
+afterAll(() => {
+  globalThis.ResizeObserver = OriginalResizeObserver
+})
 
 describe('ChunkContent', () => {
   beforeEach(() => {

web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.spec.tsx

@@ -1,10 +1,11 @@
+import type { ReactNode } from 'react'
 import { render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import FullScreenDrawer from './full-screen-drawer'
 
 // Mock the Drawer component since it has high complexity
 vi.mock('./drawer', () => ({
-  default: ({ children, open, panelClassName, panelContentClassName, showOverlay, needCheckChunks, modal }: { children: React.ReactNode, open: boolean, panelClassName: string, panelContentClassName: string, showOverlay: boolean, needCheckChunks: boolean, modal: boolean }) => {
+  default: ({ children, open, panelClassName, panelContentClassName, showOverlay, needCheckChunks, modal }: { children: ReactNode, open: boolean, panelClassName: string, panelContentClassName: string, showOverlay: boolean, needCheckChunks: boolean, modal: boolean }) => {
     if (!open)
       return null
     return (

web/app/components/datasets/documents/detail/completed/common/regeneration-modal.spec.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { EventEmitterContextProvider } from '@/context/event-emitter'
@@ -5,7 +6,7 @@ import RegenerationModal from './regeneration-modal'
 
 // Create a wrapper component with event emitter context
 const createWrapper = () => {
-  return ({ children }: { children: React.ReactNode }) => (
+  return ({ children }: { children: ReactNode }) => (
     <EventEmitterContextProvider>
       {children}
     </EventEmitterContextProvider>

web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.spec.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { render, screen } from '@testing-library/react'
 import { noop } from 'es-toolkit/function'
 import { createContext, useContextSelector } from 'use-context-selector'
@@ -31,7 +32,7 @@ vi.mock('..', () => ({
 
 // Helper to create wrapper with context
 const createWrapper = (isCollapsed: boolean = true) => {
-  return ({ children }: { children: React.ReactNode }) => (
+  return ({ children }: { children: ReactNode }) => (
     <MockSegmentListContext.Provider
       value={{
         isCollapsed,

web/app/components/datasets/documents/detail/segment-add/index.spec.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { Plan } from '@/app/components/billing/type'
@@ -31,7 +32,7 @@ vi.mock('@/app/components/billing/plan-upgrade-modal', () => ({
 
 // Mock Popover
 vi.mock('@/app/components/base/popover', () => ({
-  default: ({ htmlContent, btnElement, disabled }: { htmlContent: React.ReactNode, btnElement: React.ReactNode, disabled?: boolean }) => (
+  default: ({ htmlContent, btnElement, disabled }: { htmlContent: ReactNode, btnElement: ReactNode, disabled?: boolean }) => (
     <div data-testid="popover">
       <button data-testid="popover-btn" disabled={disabled}>
         {btnElement}