diff --git a/web/app/components/base/chat/embedded-chatbot/hooks.spec.tsx b/web/app/components/base/chat/embedded-chatbot/hooks.spec.tsx
index 4088e709d1..06563832f1 100644
--- a/web/app/components/base/chat/embedded-chatbot/hooks.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.spec.tsx
@@ -162,8 +162,10 @@ describe('useEmbeddedChatbot', () => {
       await waitFor(() => {
         expect(mockFetchChatList).toHaveBeenCalledWith('conversation-1', AppSourceType.webApp, 'app-1')
       })
-      expect(result.current.pinnedConversationList).toEqual(pinnedData.data)
-      expect(result.current.conversationList).toEqual(listData.data)
+      await waitFor(() => {
+        expect(result.current.pinnedConversationList).toEqual(pinnedData.data)
+        expect(result.current.conversationList).toEqual(listData.data)
+      })
     })
   })
 
diff --git a/web/app/components/datasets/chunk.spec.tsx b/web/app/components/datasets/chunk.spec.tsx
index d3dc011aef..7be74ebb7e 100644
--- a/web/app/components/datasets/chunk.spec.tsx
+++ b/web/app/components/datasets/chunk.spec.tsx
@@ -1,111 +1,312 @@
-import { cleanup, render, screen } from '@testing-library/react'
-import { afterEach, describe, expect, it } from 'vitest'
+import type { QA } from '@/models/datasets'
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ChunkContainer, ChunkLabel, QAPreview } from './chunk'
 
-afterEach(() => {
-  cleanup()
-})
+// Mock the SelectionMod icon from base icons
+vi.mock('../base/icons/src/public/knowledge', () => ({
+  SelectionMod: (props: React.ComponentProps<'svg'>) => (
+    <svg data-testid="selection-mod-icon" {...props} />
+  ),
+}))
 
-describe('ChunkLabel', () => {
-  it('should render label text', () => {
-    render(<ChunkLabel label="Chunk 1" characterCount={100} />)
-    expect(screen.getByText('Chunk 1')).toBeInTheDocument()
-  })
-
-  it('should render character count', () => {
-    render(<ChunkLabel label="Chunk 1" characterCount={150} />)
-    expect(screen.getByText('150 characters')).toBeInTheDocument()
-  })
-
-  it('should render separator dot', () => {
-    render(<ChunkLabel label="Chunk 1" characterCount={100} />)
-    expect(screen.getByText('·')).toBeInTheDocument()
-  })
-
-  it('should render with zero character count', () => {
-    render(<ChunkLabel label="Empty Chunk" characterCount={0} />)
-    expect(screen.getByText('0 characters')).toBeInTheDocument()
-  })
-
-  it('should render with large character count', () => {
-    render(<ChunkLabel label="Large Chunk" characterCount={999999} />)
-    expect(screen.getByText('999999 characters')).toBeInTheDocument()
-  })
-})
-
-describe('ChunkContainer', () => {
-  it('should render label and character count', () => {
-    render(<ChunkContainer label="Container 1" characterCount={200}>Content</ChunkContainer>)
-    expect(screen.getByText('Container 1')).toBeInTheDocument()
-    expect(screen.getByText('200 characters')).toBeInTheDocument()
-  })
-
-  it('should render children content', () => {
-    render(<ChunkContainer label="Container 1" characterCount={200}>Test Content</ChunkContainer>)
-    expect(screen.getByText('Test Content')).toBeInTheDocument()
-  })
-
-  it('should render with complex children', () => {
-    render(
-      <ChunkContainer label="Container" characterCount={100}>
-        <div data-testid="child-div">
-          <span>Nested content</span>
-        </div>
-      </ChunkContainer>,
-    )
-    expect(screen.getByTestId('child-div')).toBeInTheDocument()
-    expect(screen.getByText('Nested content')).toBeInTheDocument()
-  })
-
-  it('should render empty children', () => {
-    render(<ChunkContainer label="Empty" characterCount={0}>{null}</ChunkContainer>)
-    expect(screen.getByText('Empty')).toBeInTheDocument()
-  })
-})
-
-describe('QAPreview', () => {
-  const mockQA = {
-    question: 'What is the meaning of life?',
-    answer: 'The meaning of life is 42.',
+// Factory for QA test data
+function createQA(overrides: Partial<QA> = {}): QA {
+  return {
+    question: 'What is Dify?',
+    answer: 'Dify is an open-source LLM app development platform.',
+    ...overrides,
   }
+}
 
-  it('should render question text', () => {
-    render(<QAPreview qa={mockQA} />)
-    expect(screen.getByText('What is the meaning of life?')).toBeInTheDocument()
+// Tests for ChunkLabel - displays an icon, label, and character count
+describe('ChunkLabel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
   })
 
-  it('should render answer text', () => {
-    render(<QAPreview qa={mockQA} />)
-    expect(screen.getByText('The meaning of life is 42.')).toBeInTheDocument()
+  describe('Rendering', () => {
+    it('should render the label text', () => {
+      render(<ChunkLabel label="Chunk #1" characterCount={100} />)
+
+      expect(screen.getByText('Chunk #1')).toBeInTheDocument()
+    })
+
+    it('should render the character count with unit', () => {
+      render(<ChunkLabel label="Chunk #1" characterCount={256} />)
+
+      expect(screen.getByText('256 characters')).toBeInTheDocument()
+    })
+
+    it('should render the SelectionMod icon', () => {
+      render(<ChunkLabel label="Chunk" characterCount={10} />)
+
+      expect(screen.getByTestId('selection-mod-icon')).toBeInTheDocument()
+    })
+
+    it('should render a middle dot separator between label and count', () => {
+      render(<ChunkLabel label="Chunk" characterCount={10} />)
+
+      expect(screen.getByText('·')).toBeInTheDocument()
+    })
   })
 
-  it('should render Q label', () => {
-    render(<QAPreview qa={mockQA} />)
-    expect(screen.getByText('Q')).toBeInTheDocument()
+  describe('Props', () => {
+    it('should display zero character count', () => {
+      render(<ChunkLabel label="Empty Chunk" characterCount={0} />)
+
+      expect(screen.getByText('0 characters')).toBeInTheDocument()
+    })
+
+    it('should display large character counts', () => {
+      render(<ChunkLabel label="Large" characterCount={999999} />)
+
+      expect(screen.getByText('999999 characters')).toBeInTheDocument()
+    })
   })
 
-  it('should render A label', () => {
-    render(<QAPreview qa={mockQA} />)
-    expect(screen.getByText('A')).toBeInTheDocument()
-  })
+  describe('Edge Cases', () => {
+    it('should render with empty label', () => {
+      render(<ChunkLabel label="" characterCount={50} />)
 
-  it('should render with empty strings', () => {
-    render(<QAPreview qa={{ question: '', answer: '' }} />)
-    expect(screen.getByText('Q')).toBeInTheDocument()
-    expect(screen.getByText('A')).toBeInTheDocument()
-  })
+      expect(screen.getByText('50 characters')).toBeInTheDocument()
+    })
 
-  it('should render with long text', () => {
-    const longQuestion = 'Q'.repeat(500)
-    const longAnswer = 'A'.repeat(500)
-    render(<QAPreview qa={{ question: longQuestion, answer: longAnswer }} />)
-    expect(screen.getByText(longQuestion)).toBeInTheDocument()
-    expect(screen.getByText(longAnswer)).toBeInTheDocument()
-  })
+    it('should render with special characters in label', () => {
+      render(<ChunkLabel label="Chunk <#1> & 'test'" characterCount={10} />)
 
-  it('should render with special characters', () => {
-    render(<QAPreview qa={{ question: 'What about <script>?', answer: '& special chars!' }} />)
-    expect(screen.getByText('What about <script>?')).toBeInTheDocument()
-    expect(screen.getByText('& special chars!')).toBeInTheDocument()
+      expect(screen.getByText('Chunk <#1> & \'test\'')).toBeInTheDocument()
+    })
+  })
+})
+
+// Tests for ChunkContainer - wraps ChunkLabel with children content area
+describe('ChunkContainer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render ChunkLabel with correct props', () => {
+      render(
+        <ChunkContainer label="Chunk #1" characterCount={200}>
+          Content here
+        </ChunkContainer>,
+      )
+
+      expect(screen.getByText('Chunk #1')).toBeInTheDocument()
+      expect(screen.getByText('200 characters')).toBeInTheDocument()
+    })
+
+    it('should render children in the content area', () => {
+      render(
+        <ChunkContainer label="Chunk" characterCount={50}>
+          <p>Paragraph content</p>
+        </ChunkContainer>,
+      )
+
+      expect(screen.getByText('Paragraph content')).toBeInTheDocument()
+    })
+
+    it('should render the SelectionMod icon via ChunkLabel', () => {
+      render(
+        <ChunkContainer label="Chunk" characterCount={10}>
+          Content
+        </ChunkContainer>,
+      )
+
+      expect(screen.getByTestId('selection-mod-icon')).toBeInTheDocument()
+    })
+  })
+
+  describe('Structure', () => {
+    it('should have space-y-2 on the outer container', () => {
+      const { container } = render(
+        <ChunkContainer label="Chunk" characterCount={10}>Content</ChunkContainer>,
+      )
+
+      expect(container.firstElementChild).toHaveClass('space-y-2')
+    })
+
+    it('should render children inside a styled content div', () => {
+      render(
+        <ChunkContainer label="Chunk" characterCount={10}>
+          <span>Test child</span>
+        </ChunkContainer>,
+      )
+
+      const contentDiv = screen.getByText('Test child').parentElement
+      expect(contentDiv).toHaveClass('body-md-regular', 'text-text-secondary')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render without children', () => {
+      const { container } = render(
+        <ChunkContainer label="Empty" characterCount={0} />,
+      )
+
+      expect(container.firstElementChild).toBeInTheDocument()
+      expect(screen.getByText('Empty')).toBeInTheDocument()
+    })
+
+    it('should render multiple children', () => {
+      render(
+        <ChunkContainer label="Multi" characterCount={100}>
+          <span>First</span>
+          <span>Second</span>
+        </ChunkContainer>,
+      )
+
+      expect(screen.getByText('First')).toBeInTheDocument()
+      expect(screen.getByText('Second')).toBeInTheDocument()
+    })
+
+    it('should render with string children', () => {
+      render(
+        <ChunkContainer label="Text" characterCount={5}>
+          Plain text content
+        </ChunkContainer>,
+      )
+
+      expect(screen.getByText('Plain text content')).toBeInTheDocument()
+    })
+  })
+})
+
+// Tests for QAPreview - displays question and answer pair
+describe('QAPreview', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render the question text', () => {
+      const qa = createQA()
+      render(<QAPreview qa={qa} />)
+
+      expect(screen.getByText('What is Dify?')).toBeInTheDocument()
+    })
+
+    it('should render the answer text', () => {
+      const qa = createQA()
+      render(<QAPreview qa={qa} />)
+
+      expect(screen.getByText('Dify is an open-source LLM app development platform.')).toBeInTheDocument()
+    })
+
+    it('should render Q and A labels', () => {
+      const qa = createQA()
+      render(<QAPreview qa={qa} />)
+
+      expect(screen.getByText('Q')).toBeInTheDocument()
+      expect(screen.getByText('A')).toBeInTheDocument()
+    })
+  })
+
+  describe('Structure', () => {
+    it('should render Q label as a label element', () => {
+      const qa = createQA()
+      render(<QAPreview qa={qa} />)
+
+      const qLabel = screen.getByText('Q')
+      expect(qLabel.tagName).toBe('LABEL')
+    })
+
+    it('should render A label as a label element', () => {
+      const qa = createQA()
+      render(<QAPreview qa={qa} />)
+
+      const aLabel = screen.getByText('A')
+      expect(aLabel.tagName).toBe('LABEL')
+    })
+
+    it('should render question in a p element', () => {
+      const qa = createQA()
+      render(<QAPreview qa={qa} />)
+
+      const questionEl = screen.getByText(qa.question)
+      expect(questionEl.tagName).toBe('P')
+    })
+
+    it('should render answer in a p element', () => {
+      const qa = createQA()
+      render(<QAPreview qa={qa} />)
+
+      const answerEl = screen.getByText(qa.answer)
+      expect(answerEl.tagName).toBe('P')
+    })
+
+    it('should have the outer container with flex column layout', () => {
+      const qa = createQA()
+      const { container } = render(<QAPreview qa={qa} />)
+
+      expect(container.firstElementChild).toHaveClass('flex', 'flex-col', 'gap-y-2')
+    })
+
+    it('should apply text styling classes to question paragraph', () => {
+      const qa = createQA()
+      render(<QAPreview qa={qa} />)
+
+      const questionEl = screen.getByText(qa.question)
+      expect(questionEl).toHaveClass('body-md-regular', 'text-text-secondary')
+    })
+
+    it('should apply text styling classes to answer paragraph', () => {
+      const qa = createQA()
+      render(<QAPreview qa={qa} />)
+
+      const answerEl = screen.getByText(qa.answer)
+      expect(answerEl).toHaveClass('body-md-regular', 'text-text-secondary')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should render with empty question', () => {
+      const qa = createQA({ question: '' })
+      render(<QAPreview qa={qa} />)
+
+      expect(screen.getByText('Q')).toBeInTheDocument()
+      expect(screen.getByText('A')).toBeInTheDocument()
+    })
+
+    it('should render with empty answer', () => {
+      const qa = createQA({ answer: '' })
+      render(<QAPreview qa={qa} />)
+
+      expect(screen.getByText('Q')).toBeInTheDocument()
+      expect(screen.getByText(qa.question)).toBeInTheDocument()
+    })
+
+    it('should render with long text', () => {
+      const longText = 'x'.repeat(1000)
+      const qa = createQA({ question: longText, answer: longText })
+      render(<QAPreview qa={qa} />)
+
+      const elements = screen.getAllByText(longText)
+      expect(elements).toHaveLength(2)
+    })
+
+    it('should render with special characters in question and answer', () => {
+      const qa = createQA({
+        question: 'What about <html> & "quotes"?',
+        answer: 'It handles \'single\' & "double" quotes.',
+      })
+      render(<QAPreview qa={qa} />)
+
+      expect(screen.getByText('What about <html> & "quotes"?')).toBeInTheDocument()
+      expect(screen.getByText('It handles \'single\' & "double" quotes.')).toBeInTheDocument()
+    })
+
+    it('should render with multiline text', () => {
+      const qa = createQA({
+        question: 'Line1\nLine2',
+        answer: 'Answer1\nAnswer2',
+      })
+      render(<QAPreview qa={qa} />)
+
+      expect(screen.getByText(/Line1/)).toBeInTheDocument()
+      expect(screen.getByText(/Answer1/)).toBeInTheDocument()
+    })
   })
 })
diff --git a/web/app/components/datasets/create/step-one/upgrade-card.spec.tsx b/web/app/components/datasets/create/step-one/upgrade-card.spec.tsx
new file mode 100644
index 0000000000..ae1884f4af
--- /dev/null
+++ b/web/app/components/datasets/create/step-one/upgrade-card.spec.tsx
@@ -0,0 +1,108 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import UpgradeCard from './upgrade-card'
+
+const mockSetShowPricingModal = vi.fn()
+
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowPricingModal: mockSetShowPricingModal,
+  }),
+}))
+
+// Mock UpgradeBtn (external billing module) to render as a plain button
+vi.mock('@/app/components/billing/upgrade-btn', () => ({
+  default: ({ onClick, className }: { onClick?: () => void, className?: string }) => (
+    <button type="button" className={className} onClick={onClick} data-testid="upgrade-btn">
+      upgrade
+    </button>
+  ),
+}))
+
+describe('UpgradeCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange & Act
+      render(<UpgradeCard />)
+
+      // Assert - title and description i18n keys are rendered
+      expect(screen.getByText(/uploadMultipleFiles\.title/i)).toBeInTheDocument()
+    })
+
+    it('should render the upgrade title text', () => {
+      // Arrange & Act
+      render(<UpgradeCard />)
+
+      // Assert
+      expect(screen.getByText(/uploadMultipleFiles\.title/i)).toBeInTheDocument()
+    })
+
+    it('should render the upgrade description text', () => {
+      // Arrange & Act
+      render(<UpgradeCard />)
+
+      // Assert
+      expect(screen.getByText(/uploadMultipleFiles\.description/i)).toBeInTheDocument()
+    })
+
+    it('should render the upgrade button', () => {
+      // Arrange & Act
+      render(<UpgradeCard />)
+
+      // Assert
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('should call setShowPricingModal when upgrade button is clicked', () => {
+      // Arrange
+      render(<UpgradeCard />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button'))
+
+      // Assert
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call setShowPricingModal without user interaction', () => {
+      // Arrange & Act
+      render(<UpgradeCard />)
+
+      // Assert
+      expect(mockSetShowPricingModal).not.toHaveBeenCalled()
+    })
+
+    it('should call setShowPricingModal on each button click', () => {
+      // Arrange
+      render(<UpgradeCard />)
+
+      // Act
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+      fireEvent.click(button)
+
+      // Assert
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('Memoization', () => {
+    it('should maintain rendering after rerender with same props', () => {
+      // Arrange
+      const { rerender } = render(<UpgradeCard />)
+
+      // Act
+      rerender(<UpgradeCard />)
+
+      // Assert
+      expect(screen.getByText(/uploadMultipleFiles\.title/i)).toBeInTheDocument()
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/create/website/base/remaining.spec.tsx b/web/app/components/datasets/create/website/base/remaining.spec.tsx
new file mode 100644
index 0000000000..2ceada3a17
--- /dev/null
+++ b/web/app/components/datasets/create/website/base/remaining.spec.tsx
@@ -0,0 +1,710 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// ============================================================================
+// Component Imports (after mocks)
+// ============================================================================
+
+import CheckboxWithLabel from './checkbox-with-label'
+import Crawling from './crawling'
+import ErrorMessage from './error-message'
+import Field from './field'
+import OptionsWrap from './options-wrap'
+
+// ============================================================================
+// Mock Setup
+// ============================================================================
+
+// Mock ahooks useBoolean for OptionsWrap
+let mockFoldValue = false
+const mockToggle = vi.fn()
+const mockSetTrue = vi.fn()
+
+vi.mock('ahooks', () => ({
+  useBoolean: (initial: boolean) => {
+    mockFoldValue = initial
+    return [
+      mockFoldValue,
+      {
+        toggle: mockToggle,
+        setTrue: mockSetTrue,
+        setFalse: vi.fn(),
+        set: vi.fn(),
+      },
+    ]
+  },
+}))
+
+// ============================================================================
+// CheckboxWithLabel Tests
+// ============================================================================
+
+describe('CheckboxWithLabel', () => {
+  const mockOnChange = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the checkbox with label component
+  describe('Rendering', () => {
+    it('should render label text', () => {
+      // Arrange & Act
+      render(
+        <CheckboxWithLabel
+          isChecked={false}
+          onChange={mockOnChange}
+          label="Include subpages"
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Include subpages')).toBeInTheDocument()
+    })
+
+    it('should render a checkbox element', () => {
+      // Arrange & Act
+      render(
+        <CheckboxWithLabel
+          isChecked={false}
+          onChange={mockOnChange}
+          label="Test label"
+          testId="test-cb"
+        />,
+      )
+
+      // Assert - Checkbox renders as a div with data-testid
+      expect(screen.getByTestId('checkbox-test-cb')).toBeInTheDocument()
+    })
+
+    it('should render check icon when isChecked is true', () => {
+      // Arrange & Act
+      render(
+        <CheckboxWithLabel
+          isChecked={true}
+          onChange={mockOnChange}
+          label="Test label"
+          testId="checked-cb"
+        />,
+      )
+
+      // Assert - When checked, the Checkbox renders a check icon
+      expect(screen.getByTestId('check-icon-checked-cb')).toBeInTheDocument()
+    })
+
+    it('should not render check icon when isChecked is false', () => {
+      // Arrange & Act
+      render(
+        <CheckboxWithLabel
+          isChecked={false}
+          onChange={mockOnChange}
+          label="Test label"
+          testId="unchecked-cb"
+        />,
+      )
+
+      // Assert
+      expect(screen.queryByTestId('check-icon-unchecked-cb')).not.toBeInTheDocument()
+    })
+
+    it('should render tooltip when tooltip prop is provided', () => {
+      // Arrange & Act
+      render(
+        <CheckboxWithLabel
+          isChecked={false}
+          onChange={mockOnChange}
+          label="Test"
+          tooltip="Helpful hint"
+        />,
+      )
+
+      // Assert - Tooltip renders its trigger element
+      const label = screen.getByText('Test').closest('label')
+      expect(label).toBeInTheDocument()
+    })
+
+    it('should not render tooltip when tooltip prop is not provided', () => {
+      // Arrange & Act
+      const { container } = render(
+        <CheckboxWithLabel
+          isChecked={false}
+          onChange={mockOnChange}
+          label="Test"
+        />,
+      )
+
+      // Assert - no tooltip trigger
+      const label = container.querySelector('label')
+      expect(label).toBeInTheDocument()
+      // The tooltip trigger has a specific class; without tooltip, it should not exist
+      expect(container.querySelector('[class*="ml-0.5"]')).toBeNull()
+    })
+
+    it('should apply custom className', () => {
+      // Arrange & Act
+      const { container } = render(
+        <CheckboxWithLabel
+          className="custom-class"
+          isChecked={false}
+          onChange={mockOnChange}
+          label="Test"
+        />,
+      )
+
+      // Assert
+      const label = container.querySelector('label')
+      expect(label?.className).toContain('custom-class')
+    })
+
+    it('should apply custom labelClassName', () => {
+      // Arrange & Act
+      render(
+        <CheckboxWithLabel
+          isChecked={false}
+          onChange={mockOnChange}
+          label="Styled label"
+          labelClassName="font-bold"
+        />,
+      )
+
+      // Assert
+      const labelText = screen.getByText('Styled label')
+      expect(labelText.className).toContain('font-bold')
+    })
+
+    it('should set testId on checkbox', () => {
+      // Arrange & Act
+      render(
+        <CheckboxWithLabel
+          isChecked={false}
+          onChange={mockOnChange}
+          label="Test"
+          testId="my-checkbox"
+        />,
+      )
+
+      // Assert
+      expect(document.getElementById('my-checkbox')).toBeInTheDocument()
+    })
+  })
+
+  // User interaction tests
+  describe('User Interactions', () => {
+    it('should call onChange with true when unchecked checkbox is clicked', () => {
+      // Arrange
+      render(
+        <CheckboxWithLabel
+          isChecked={false}
+          onChange={mockOnChange}
+          label="Toggle me"
+          testId="toggle-cb"
+        />,
+      )
+
+      // Act - Checkbox is a div, click it directly
+      fireEvent.click(screen.getByTestId('checkbox-toggle-cb'))
+
+      // Assert
+      expect(mockOnChange).toHaveBeenCalledWith(true)
+    })
+
+    it('should call onChange with false when checked checkbox is clicked', () => {
+      // Arrange
+      render(
+        <CheckboxWithLabel
+          isChecked={true}
+          onChange={mockOnChange}
+          label="Toggle me"
+          testId="toggle-cb2"
+        />,
+      )
+
+      // Act
+      fireEvent.click(screen.getByTestId('checkbox-toggle-cb2'))
+
+      // Assert
+      expect(mockOnChange).toHaveBeenCalledWith(false)
+    })
+  })
+})
+
+// ============================================================================
+// Crawling Tests
+// ============================================================================
+
+describe('Crawling', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the crawling status component
+  describe('Rendering', () => {
+    it('should render crawled/total count', () => {
+      // Arrange & Act
+      render(<Crawling crawledNum={5} totalNum={10} />)
+
+      // Assert
+      expect(screen.getByText(/5/)).toBeInTheDocument()
+      expect(screen.getByText(/10/)).toBeInTheDocument()
+    })
+
+    it('should render the total pages scraped label', () => {
+      // Arrange & Act
+      render(<Crawling crawledNum={3} totalNum={20} />)
+
+      // Assert
+      expect(screen.getByText(/totalPageScraped/i)).toBeInTheDocument()
+    })
+
+    it('should render skeleton rows', () => {
+      // Arrange & Act
+      const { container } = render(<Crawling crawledNum={0} totalNum={0} />)
+
+      // Assert - 4 skeleton items rendered
+      const skeletonRows = container.querySelectorAll('.py-\\[5px\\]')
+      expect(skeletonRows).toHaveLength(4)
+    })
+
+    it('should apply custom className', () => {
+      // Arrange & Act
+      const { container } = render(
+        <Crawling className="extra-class" crawledNum={1} totalNum={5} />,
+      )
+
+      // Assert
+      expect(container.firstElementChild?.className).toContain('extra-class')
+    })
+  })
+
+  // Edge case tests
+  describe('Edge Cases', () => {
+    it('should render with zero values', () => {
+      // Arrange & Act
+      render(<Crawling crawledNum={0} totalNum={0} />)
+
+      // Assert
+      expect(screen.getByText(/0/)).toBeInTheDocument()
+    })
+
+    it('should render when crawledNum equals totalNum', () => {
+      // Arrange & Act
+      render(<Crawling crawledNum={10} totalNum={10} />)
+
+      // Assert
+      expect(screen.getByText(/10/)).toBeInTheDocument()
+    })
+  })
+})
+
+// ============================================================================
+// ErrorMessage Tests
+// ============================================================================
+
+describe('ErrorMessage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the error message component
+  describe('Rendering', () => {
+    it('should render the title', () => {
+      // Arrange & Act
+      render(<ErrorMessage title="Something went wrong" />)
+
+      // Assert
+      expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+    })
+
+    it('should render the alert triangle icon', () => {
+      // Arrange & Act
+      const { container } = render(<ErrorMessage title="Error" />)
+
+      // Assert - AlertTriangle icon is rendered as svg
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render errorMsg when provided', () => {
+      // Arrange & Act
+      render(<ErrorMessage title="Error" errorMsg="Detailed error info" />)
+
+      // Assert
+      expect(screen.getByText('Detailed error info')).toBeInTheDocument()
+    })
+
+    it('should not render errorMsg when not provided', () => {
+      // Arrange & Act
+      render(<ErrorMessage title="Error" />)
+
+      // Assert - only one text block (the title)
+      expect(screen.queryByText('Detailed error info')).not.toBeInTheDocument()
+    })
+
+    it('should apply custom className', () => {
+      // Arrange & Act
+      const { container } = render(
+        <ErrorMessage className="my-error" title="Error" />,
+      )
+
+      // Assert
+      expect(container.firstElementChild?.className).toContain('my-error')
+    })
+  })
+
+  // Branch coverage for optional errorMsg
+  describe('Branch Coverage', () => {
+    it('should render error detail section when errorMsg is truthy', () => {
+      // Arrange & Act
+      const { container } = render(
+        <ErrorMessage title="Error" errorMsg="Details here" />,
+      )
+
+      // Assert
+      const errorDetail = container.querySelector('.pl-6')
+      expect(errorDetail).toBeInTheDocument()
+      expect(errorDetail?.textContent).toBe('Details here')
+    })
+
+    it('should not render error detail section when errorMsg is empty string', () => {
+      // Arrange & Act
+      const { container } = render(
+        <ErrorMessage title="Error" errorMsg="" />,
+      )
+
+      // Assert
+      const errorDetail = container.querySelector('.pl-6')
+      expect(errorDetail).toBeNull()
+    })
+
+    it('should not render error detail section when errorMsg is undefined', () => {
+      // Arrange & Act
+      const { container } = render(
+        <ErrorMessage title="Error" />,
+      )
+
+      // Assert
+      const errorDetail = container.querySelector('.pl-6')
+      expect(errorDetail).toBeNull()
+    })
+  })
+})
+
+// ============================================================================
+// Field Tests
+// ============================================================================
+
+describe('Field', () => {
+  const mockOnChange = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the field component
+  describe('Rendering', () => {
+    it('should render the label', () => {
+      // Arrange & Act
+      render(<Field label="Max depth" value="" onChange={mockOnChange} />)
+
+      // Assert
+      expect(screen.getByText('Max depth')).toBeInTheDocument()
+    })
+
+    it('should render the input with value', () => {
+      // Arrange & Act
+      render(<Field label="URL" value="https://example.com" onChange={mockOnChange} />)
+
+      // Assert
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveValue('https://example.com')
+    })
+
+    it('should render placeholder text', () => {
+      // Arrange & Act
+      render(
+        <Field
+          label="Field"
+          value=""
+          onChange={mockOnChange}
+          placeholder="Enter value"
+        />,
+      )
+
+      // Assert
+      expect(screen.getByPlaceholderText('Enter value')).toBeInTheDocument()
+    })
+
+    it('should render required marker when isRequired is true', () => {
+      // Arrange & Act
+      render(
+        <Field label="Required field" value="" onChange={mockOnChange} isRequired />,
+      )
+
+      // Assert
+      expect(screen.getByText('*')).toBeInTheDocument()
+    })
+
+    it('should not render required marker when isRequired is false', () => {
+      // Arrange & Act
+      render(
+        <Field label="Optional field" value="" onChange={mockOnChange} />,
+      )
+
+      // Assert
+      expect(screen.queryByText('*')).not.toBeInTheDocument()
+    })
+
+    it('should render tooltip when tooltip prop is provided', () => {
+      // Arrange & Act
+      const { container } = render(
+        <Field
+          label="Field"
+          value=""
+          onChange={mockOnChange}
+          tooltip="Help text"
+        />,
+      )
+
+      // Assert - tooltip trigger is present
+      expect(container.querySelector('[class*="ml-0.5"]')).toBeInTheDocument()
+    })
+
+    it('should not render tooltip when tooltip prop is not provided', () => {
+      // Arrange & Act
+      const { container } = render(
+        <Field label="Field" value="" onChange={mockOnChange} />,
+      )
+
+      // Assert
+      expect(container.querySelector('[class*="ml-0.5"]')).toBeNull()
+    })
+
+    it('should apply custom className', () => {
+      // Arrange & Act
+      const { container } = render(
+        <Field className="custom-field" label="Field" value="" onChange={mockOnChange} />,
+      )
+
+      // Assert
+      expect(container.firstElementChild?.className).toContain('custom-field')
+    })
+
+    it('should apply custom labelClassName', () => {
+      // Arrange & Act
+      render(
+        <Field
+          label="Styled"
+          labelClassName="extra-label-style"
+          value=""
+          onChange={mockOnChange}
+        />,
+      )
+
+      // Assert
+      const labelDiv = screen.getByText('Styled')
+      expect(labelDiv.className).toContain('extra-label-style')
+    })
+  })
+
+  // User interaction tests for the field component
+  describe('User Interactions', () => {
+    it('should call onChange when text input value changes', () => {
+      // Arrange
+      render(<Field label="Text field" value="" onChange={mockOnChange} />)
+
+      // Act
+      const input = screen.getByRole('textbox')
+      fireEvent.change(input, { target: { value: 'new value' } })
+
+      // Assert
+      expect(mockOnChange).toHaveBeenCalledWith('new value')
+    })
+
+    it('should call onChange with number when isNumber is true', () => {
+      // Arrange
+      render(
+        <Field label="Number field" value="" onChange={mockOnChange} isNumber />,
+      )
+
+      // Act
+      const input = screen.getByRole('spinbutton')
+      fireEvent.change(input, { target: { value: '42' } })
+
+      // Assert
+      expect(mockOnChange).toHaveBeenCalledWith(42)
+    })
+
+    it('should call onChange with empty string for NaN input when isNumber is true', () => {
+      // Arrange — start with a numeric value so clearing triggers a real change
+      render(
+        <Field label="Number" value={10} onChange={mockOnChange} isNumber />,
+      )
+
+      // Act — clear the number input
+      const input = screen.getByRole('spinbutton')
+      fireEvent.change(input, { target: { value: '' } })
+
+      // Assert
+      expect(mockOnChange).toHaveBeenCalledWith('')
+    })
+
+    it('should clamp to MIN_VALUE (0) for negative numbers when isNumber is true', () => {
+      // Arrange
+      render(
+        <Field label="Number" value="" onChange={mockOnChange} isNumber />,
+      )
+
+      // Act
+      const input = screen.getByRole('spinbutton')
+      fireEvent.change(input, { target: { value: '-5' } })
+
+      // Assert
+      expect(mockOnChange).toHaveBeenCalledWith(0)
+    })
+  })
+
+  // Edge cases for the field component
+  describe('Edge Cases', () => {
+    it('should render with number type input when isNumber is true', () => {
+      // Arrange & Act
+      render(
+        <Field label="Num" value={5} onChange={mockOnChange} isNumber />,
+      )
+
+      // Assert
+      const input = screen.getByRole('spinbutton')
+      expect(input).toHaveAttribute('type', 'number')
+      expect(input).toHaveAttribute('min', '0')
+    })
+
+    it('should render with text type input when isNumber is false', () => {
+      // Arrange & Act
+      render(
+        <Field label="Text" value="hello" onChange={mockOnChange} />,
+      )
+
+      // Assert
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveAttribute('type', 'text')
+    })
+  })
+})
+
+// ============================================================================
+// OptionsWrap Tests
+// ============================================================================
+
+describe('OptionsWrap', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFoldValue = false
+  })
+
+  // Rendering tests for the options wrap component
+  describe('Rendering', () => {
+    it('should render the options label', () => {
+      // Arrange & Act
+      render(
+        <OptionsWrap>
+          <div>Child content</div>
+        </OptionsWrap>,
+      )
+
+      // Assert
+      expect(screen.getByText(/options/i)).toBeInTheDocument()
+    })
+
+    it('should render children when not folded (default state)', () => {
+      // Arrange & Act
+      render(
+        <OptionsWrap>
+          <div>Visible options</div>
+        </OptionsWrap>,
+      )
+
+      // Assert - fold is false by default, so children are visible
+      expect(screen.getByText('Visible options')).toBeInTheDocument()
+    })
+
+    it('should render the settings icon', () => {
+      // Arrange & Act
+      const { container } = render(
+        <OptionsWrap>
+          <div>Content</div>
+        </OptionsWrap>,
+      )
+
+      // Assert - RiEqualizer2Line renders an svg
+      const svgs = container.querySelectorAll('svg')
+      expect(svgs.length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('should apply custom className', () => {
+      // Arrange & Act
+      const { container } = render(
+        <OptionsWrap className="extra">
+          <div>Content</div>
+        </OptionsWrap>,
+      )
+
+      // Assert
+      expect(container.firstElementChild?.className).toContain('extra')
+    })
+  })
+
+  // User interaction tests for the options wrap component
+  describe('User Interactions', () => {
+    it('should call toggle when header is clicked', () => {
+      // Arrange
+      render(
+        <OptionsWrap>
+          <div>Content</div>
+        </OptionsWrap>,
+      )
+
+      // Act
+      const header = screen.getByText(/options/i).closest('[class*="cursor-pointer"]') as HTMLElement
+      fireEvent.click(header)
+
+      // Assert
+      expect(mockToggle).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // controlFoldOptions prop tests
+  describe('controlFoldOptions', () => {
+    it('should call foldHide when controlFoldOptions changes', () => {
+      // Arrange
+      const { rerender } = render(
+        <OptionsWrap controlFoldOptions={0}>
+          <div>Content</div>
+        </OptionsWrap>,
+      )
+
+      // Act - change controlFoldOptions to trigger the useEffect
+      rerender(
+        <OptionsWrap controlFoldOptions={1}>
+          <div>Content</div>
+        </OptionsWrap>,
+      )
+
+      // Assert
+      expect(mockSetTrue).toHaveBeenCalled()
+    })
+
+    it('should not call foldHide when controlFoldOptions is falsy (0)', () => {
+      // Arrange
+      mockSetTrue.mockClear()
+
+      // Act
+      render(
+        <OptionsWrap controlFoldOptions={0}>
+          <div>Content</div>
+        </OptionsWrap>,
+      )
+
+      // Assert - controlFoldOptions is 0 (falsy), so foldHide is not called
+      expect(mockSetTrue).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/web/app/components/datasets/create/website/no-data.spec.tsx b/web/app/components/datasets/create/website/no-data.spec.tsx
new file mode 100644
index 0000000000..a61290b4f0
--- /dev/null
+++ b/web/app/components/datasets/create/website/no-data.spec.tsx
@@ -0,0 +1,230 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { DataSourceProvider } from '@/models/common'
+import NoData from './no-data'
+
+// ============================================================================
+// Mock Setup
+// ============================================================================
+
+// Mock CSS module
+vi.mock('./index.module.css', () => ({
+  default: {
+    jinaLogo: 'jinaLogo',
+    watercrawlLogo: 'watercrawlLogo',
+  },
+}))
+
+// Feature flags - default all enabled
+let mockEnableFirecrawl = true
+let mockEnableJinaReader = true
+let mockEnableWaterCrawl = true
+
+vi.mock('@/config', () => ({
+  get ENABLE_WEBSITE_FIRECRAWL() { return mockEnableFirecrawl },
+  get ENABLE_WEBSITE_JINAREADER() { return mockEnableJinaReader },
+  get ENABLE_WEBSITE_WATERCRAWL() { return mockEnableWaterCrawl },
+}))
+
+// ============================================================================
+// NoData Component Tests
+// ============================================================================
+
+describe('NoData', () => {
+  const mockOnConfig = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockEnableFirecrawl = true
+    mockEnableJinaReader = true
+    mockEnableWaterCrawl = true
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests - Per Provider
+  // --------------------------------------------------------------------------
+  describe('Rendering per provider', () => {
+    it('should render fireCrawl provider with emoji and not-configured message', () => {
+      // Arrange & Act
+      render(<NoData onConfig={mockOnConfig} provider={DataSourceProvider.fireCrawl} />)
+
+      // Assert
+      expect(screen.getByText('🔥')).toBeInTheDocument()
+      const titleAndDesc = screen.getAllByText(/fireCrawlNotConfigured/i)
+      expect(titleAndDesc).toHaveLength(2)
+    })
+
+    it('should render jinaReader provider with jina logo and not-configured message', () => {
+      // Arrange & Act
+      render(<NoData onConfig={mockOnConfig} provider={DataSourceProvider.jinaReader} />)
+
+      // Assert
+      const titleAndDesc = screen.getAllByText(/jinaReaderNotConfigured/i)
+      expect(titleAndDesc).toHaveLength(2)
+    })
+
+    it('should render waterCrawl provider with emoji and not-configured message', () => {
+      // Arrange & Act
+      render(<NoData onConfig={mockOnConfig} provider={DataSourceProvider.waterCrawl} />)
+
+      // Assert
+      expect(screen.getByText('💧')).toBeInTheDocument()
+      const titleAndDesc = screen.getAllByText(/waterCrawlNotConfigured/i)
+      expect(titleAndDesc).toHaveLength(2)
+    })
+
+    it('should render configure button for each provider', () => {
+      // Arrange & Act
+      render(<NoData onConfig={mockOnConfig} provider={DataSourceProvider.fireCrawl} />)
+
+      // Assert
+      expect(screen.getByRole('button', { name: /configure/i })).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Interactions
+  // --------------------------------------------------------------------------
+  describe('User Interactions', () => {
+    it('should call onConfig when configure button is clicked', () => {
+      // Arrange
+      render(<NoData onConfig={mockOnConfig} provider={DataSourceProvider.fireCrawl} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /configure/i }))
+
+      // Assert
+      expect(mockOnConfig).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onConfig for jinaReader provider', () => {
+      // Arrange
+      render(<NoData onConfig={mockOnConfig} provider={DataSourceProvider.jinaReader} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /configure/i }))
+
+      // Assert
+      expect(mockOnConfig).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onConfig for waterCrawl provider', () => {
+      // Arrange
+      render(<NoData onConfig={mockOnConfig} provider={DataSourceProvider.waterCrawl} />)
+
+      // Act
+      fireEvent.click(screen.getByRole('button', { name: /configure/i }))
+
+      // Assert
+      expect(mockOnConfig).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Feature Flag Disabled - Returns null
+  // --------------------------------------------------------------------------
+  describe('Disabled providers (feature flag off)', () => {
+    it('should fall back to jinaReader when fireCrawl is disabled but jinaReader enabled', () => {
+      // Arrange — fireCrawl config is null, falls back to providerConfig.jinareader
+      mockEnableFirecrawl = false
+
+      // Act
+      const { container } = render(
+        <NoData onConfig={mockOnConfig} provider={DataSourceProvider.fireCrawl} />,
+      )
+
+      // Assert — renders the jinaReader fallback (not null)
+      expect(container.innerHTML).not.toBe('')
+      expect(screen.getAllByText(/jinaReaderNotConfigured/).length).toBeGreaterThan(0)
+    })
+
+    it('should return null when jinaReader is disabled', () => {
+      // Arrange — jinaReader is the only provider without a fallback
+      mockEnableJinaReader = false
+
+      // Act
+      const { container } = render(
+        <NoData onConfig={mockOnConfig} provider={DataSourceProvider.jinaReader} />,
+      )
+
+      // Assert
+      expect(container.innerHTML).toBe('')
+    })
+
+    it('should fall back to jinaReader when waterCrawl is disabled but jinaReader enabled', () => {
+      // Arrange — waterCrawl config is null, falls back to providerConfig.jinareader
+      mockEnableWaterCrawl = false
+
+      // Act
+      const { container } = render(
+        <NoData onConfig={mockOnConfig} provider={DataSourceProvider.waterCrawl} />,
+      )
+
+      // Assert — renders the jinaReader fallback (not null)
+      expect(container.innerHTML).not.toBe('')
+      expect(screen.getAllByText(/jinaReaderNotConfigured/).length).toBeGreaterThan(0)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Fallback behavior
+  // --------------------------------------------------------------------------
+  describe('Fallback behavior', () => {
+    it('should fall back to jinaReader config for unknown provider value', () => {
+      // Arrange - the || fallback goes to providerConfig.jinareader
+      // Since DataSourceProvider only has 3 values, we test the fallback
+      // by checking that jinaReader is the fallback when provider doesn't match
+      mockEnableJinaReader = true
+
+      // Act
+      render(<NoData onConfig={mockOnConfig} provider={DataSourceProvider.jinaReader} />)
+
+      // Assert
+      expect(screen.getAllByText(/jinaReaderNotConfigured/i).length).toBeGreaterThan(0)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should not call onConfig without user interaction', () => {
+      // Arrange & Act
+      render(<NoData onConfig={mockOnConfig} provider={DataSourceProvider.fireCrawl} />)
+
+      // Assert
+      expect(mockOnConfig).not.toHaveBeenCalled()
+    })
+
+    it('should render correctly when all providers are enabled', () => {
+      // Arrange - all flags are true by default
+
+      // Act
+      const { rerender } = render(
+        <NoData onConfig={mockOnConfig} provider={DataSourceProvider.fireCrawl} />,
+      )
+      expect(screen.getByText('🔥')).toBeInTheDocument()
+
+      rerender(<NoData onConfig={mockOnConfig} provider={DataSourceProvider.jinaReader} />)
+      expect(screen.getAllByText(/jinaReaderNotConfigured/i).length).toBeGreaterThan(0)
+
+      rerender(<NoData onConfig={mockOnConfig} provider={DataSourceProvider.waterCrawl} />)
+      expect(screen.getByText('💧')).toBeInTheDocument()
+    })
+
+    it('should return null when all providers are disabled and fireCrawl is selected', () => {
+      // Arrange
+      mockEnableFirecrawl = false
+      mockEnableJinaReader = false
+      mockEnableWaterCrawl = false
+
+      // Act
+      const { container } = render(
+        <NoData onConfig={mockOnConfig} provider={DataSourceProvider.fireCrawl} />,
+      )
+
+      // Assert
+      expect(container.innerHTML).toBe('')
+    })
+  })
+})
diff --git a/web/app/components/datasets/create/website/preview.spec.tsx b/web/app/components/datasets/create/website/preview.spec.tsx
new file mode 100644
index 0000000000..fbc6fb8c25
--- /dev/null
+++ b/web/app/components/datasets/create/website/preview.spec.tsx
@@ -0,0 +1,256 @@
+import type { CrawlResultItem } from '@/models/datasets'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import WebsitePreview from './preview'
+
+// ============================================================================
+// Mock Setup
+// ============================================================================
+
+// Mock the CSS module import - returns class names as-is
+vi.mock('../file-preview/index.module.css', () => ({
+  default: {
+    filePreview: 'filePreview',
+    previewHeader: 'previewHeader',
+    title: 'title',
+    previewContent: 'previewContent',
+    fileContent: 'fileContent',
+  },
+}))
+
+// ============================================================================
+// Test Data Factory
+// ============================================================================
+
+const createPayload = (overrides: Partial<CrawlResultItem> = {}): CrawlResultItem => ({
+  title: 'Test Page Title',
+  markdown: 'This is **markdown** content',
+  description: 'A test description',
+  source_url: 'https://example.com/page',
+  ...overrides,
+})
+
+// ============================================================================
+// WebsitePreview Component Tests
+// ============================================================================
+
+describe('WebsitePreview', () => {
+  const mockHidePreview = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // --------------------------------------------------------------------------
+  // Rendering Tests
+  // --------------------------------------------------------------------------
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      // Arrange
+      const payload = createPayload()
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert
+      expect(screen.getByText('Test Page Title')).toBeInTheDocument()
+    })
+
+    it('should render the page preview header text', () => {
+      // Arrange
+      const payload = createPayload()
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert - i18n returns the key path
+      expect(screen.getByText(/pagePreview/i)).toBeInTheDocument()
+    })
+
+    it('should render the payload title', () => {
+      // Arrange
+      const payload = createPayload({ title: 'My Custom Page' })
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert
+      expect(screen.getByText('My Custom Page')).toBeInTheDocument()
+    })
+
+    it('should render the payload source_url', () => {
+      // Arrange
+      const payload = createPayload({ source_url: 'https://docs.dify.ai/intro' })
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert
+      const urlElement = screen.getByText('https://docs.dify.ai/intro')
+      expect(urlElement).toBeInTheDocument()
+      expect(urlElement).toHaveAttribute('title', 'https://docs.dify.ai/intro')
+    })
+
+    it('should render the payload markdown content', () => {
+      // Arrange
+      const payload = createPayload({ markdown: 'Hello world markdown' })
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert
+      expect(screen.getByText('Hello world markdown')).toBeInTheDocument()
+    })
+
+    it('should render the close button (XMarkIcon)', () => {
+      // Arrange
+      const payload = createPayload()
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert - the close button container is a div with cursor-pointer
+      const closeButton = screen.getByText(/pagePreview/i).parentElement?.querySelector('.cursor-pointer')
+      expect(closeButton).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // User Interactions
+  // --------------------------------------------------------------------------
+  describe('User Interactions', () => {
+    it('should call hidePreview when close button is clicked', () => {
+      // Arrange
+      const payload = createPayload()
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Act - find the close button div with cursor-pointer class
+      const closeButton = screen.getByText(/pagePreview/i)
+        .closest('[class*="title"]')!
+        .querySelector('.cursor-pointer') as HTMLElement
+      fireEvent.click(closeButton)
+
+      // Assert
+      expect(mockHidePreview).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call hidePreview exactly once per click', () => {
+      // Arrange
+      const payload = createPayload()
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Act
+      const closeButton = screen.getByText(/pagePreview/i)
+        .closest('[class*="title"]')!
+        .querySelector('.cursor-pointer') as HTMLElement
+      fireEvent.click(closeButton)
+      fireEvent.click(closeButton)
+
+      // Assert
+      expect(mockHidePreview).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Props Display Tests
+  // --------------------------------------------------------------------------
+  describe('Props Display', () => {
+    it('should display all payload fields simultaneously', () => {
+      // Arrange
+      const payload = createPayload({
+        title: 'Full Title',
+        source_url: 'https://full.example.com',
+        markdown: 'Full markdown text',
+      })
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert
+      expect(screen.getByText('Full Title')).toBeInTheDocument()
+      expect(screen.getByText('https://full.example.com')).toBeInTheDocument()
+      expect(screen.getByText('Full markdown text')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // Edge Cases
+  // --------------------------------------------------------------------------
+  describe('Edge Cases', () => {
+    it('should render with empty title', () => {
+      // Arrange
+      const payload = createPayload({ title: '' })
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert - component still renders, url is visible
+      expect(screen.getByText('https://example.com/page')).toBeInTheDocument()
+    })
+
+    it('should render with empty markdown', () => {
+      // Arrange
+      const payload = createPayload({ markdown: '' })
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert
+      expect(screen.getByText('Test Page Title')).toBeInTheDocument()
+    })
+
+    it('should render with empty source_url', () => {
+      // Arrange
+      const payload = createPayload({ source_url: '' })
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert
+      expect(screen.getByText('Test Page Title')).toBeInTheDocument()
+    })
+
+    it('should render with very long content', () => {
+      // Arrange
+      const longMarkdown = 'A'.repeat(5000)
+      const payload = createPayload({ markdown: longMarkdown })
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert
+      expect(screen.getByText(longMarkdown)).toBeInTheDocument()
+    })
+
+    it('should render with special characters in title', () => {
+      // Arrange
+      const payload = createPayload({ title: '<script>alert("xss")</script>' })
+
+      // Act
+      render(<WebsitePreview payload={payload} hidePreview={mockHidePreview} />)
+
+      // Assert - React escapes HTML by default
+      expect(screen.getByText('<script>alert("xss")</script>')).toBeInTheDocument()
+    })
+  })
+
+  // --------------------------------------------------------------------------
+  // CSS Module Classes
+  // --------------------------------------------------------------------------
+  describe('CSS Module Classes', () => {
+    it('should apply filePreview class to root container', () => {
+      // Arrange
+      const payload = createPayload()
+
+      // Act
+      const { container } = render(
+        <WebsitePreview payload={payload} hidePreview={mockHidePreview} />,
+      )
+
+      // Assert
+      const root = container.firstElementChild
+      expect(root?.className).toContain('filePreview')
+      expect(root?.className).toContain('h-full')
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/detail/completed/common/summary.spec.tsx b/web/app/components/datasets/documents/detail/completed/common/summary.spec.tsx
new file mode 100644
index 0000000000..2158fa39d5
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/common/summary.spec.tsx
@@ -0,0 +1,233 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import SummaryLabel from './summary-label'
+import SummaryStatus from './summary-status'
+import SummaryText from './summary-text'
+
+describe('SummaryLabel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering: verifies the component renders with its heading and summary text
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<SummaryLabel />)
+      expect(screen.getByText(/segment\.summary/)).toBeInTheDocument()
+    })
+
+    it('should render the summary heading with divider', () => {
+      render(<SummaryLabel summary="Test summary" />)
+      expect(screen.getByText(/segment\.summary/)).toBeInTheDocument()
+    })
+
+    it('should render summary text when provided', () => {
+      render(<SummaryLabel summary="My summary content" />)
+      expect(screen.getByText('My summary content')).toBeInTheDocument()
+    })
+  })
+
+  // Props: tests different prop combinations
+  describe('Props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(<SummaryLabel summary="test" className="custom-class" />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('custom-class')
+      expect(wrapper).toHaveClass('space-y-1')
+    })
+
+    it('should render without className prop', () => {
+      const { container } = render(<SummaryLabel summary="test" />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('space-y-1')
+    })
+  })
+
+  // Edge Cases: tests undefined/empty/special values
+  describe('Edge Cases', () => {
+    it('should handle undefined summary', () => {
+      render(<SummaryLabel />)
+      // Heading should still render
+      expect(screen.getByText(/segment\.summary/)).toBeInTheDocument()
+    })
+
+    it('should handle empty string summary', () => {
+      render(<SummaryLabel summary="" />)
+      expect(screen.getByText(/segment\.summary/)).toBeInTheDocument()
+    })
+
+    it('should handle summary with special characters', () => {
+      const summary = '<b>bold</b> & "quotes"'
+      render(<SummaryLabel summary={summary} />)
+      expect(screen.getByText(summary)).toBeInTheDocument()
+    })
+
+    it('should handle very long summary', () => {
+      const longSummary = 'A'.repeat(1000)
+      render(<SummaryLabel summary={longSummary} />)
+      expect(screen.getByText(longSummary)).toBeInTheDocument()
+    })
+
+    it('should handle both className and summary as undefined', () => {
+      const { container } = render(<SummaryLabel />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('space-y-1')
+    })
+  })
+})
+
+describe('SummaryStatus', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering: verifies badge rendering based on status
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<SummaryStatus status="COMPLETED" />)
+      // Should not crash even for non-SUMMARIZING status
+    })
+
+    it('should render badge when status is SUMMARIZING', () => {
+      render(<SummaryStatus status="SUMMARIZING" />)
+      expect(screen.getByText(/list\.summary\.generating/)).toBeInTheDocument()
+    })
+
+    it('should not render badge when status is not SUMMARIZING', () => {
+      render(<SummaryStatus status="COMPLETED" />)
+      expect(screen.queryByText(/list\.summary\.generating/)).not.toBeInTheDocument()
+    })
+  })
+
+  // Props: tests tooltip content based on status
+  describe('Props', () => {
+    it('should show tooltip with generating summary message when SUMMARIZING', () => {
+      render(<SummaryStatus status="SUMMARIZING" />)
+      // The tooltip popupContent is set to the i18n key for generatingSummary
+      expect(screen.getByText(/list\.summary\.generating/)).toBeInTheDocument()
+    })
+  })
+
+  // Edge Cases: tests different status values
+  describe('Edge Cases', () => {
+    it('should not render badge for empty string status', () => {
+      render(<SummaryStatus status="" />)
+      expect(screen.queryByText(/list\.summary\.generating/)).not.toBeInTheDocument()
+    })
+
+    it('should not render badge for lowercase summarizing', () => {
+      render(<SummaryStatus status="summarizing" />)
+      expect(screen.queryByText(/list\.summary\.generating/)).not.toBeInTheDocument()
+    })
+
+    it('should not render badge for DONE status', () => {
+      render(<SummaryStatus status="DONE" />)
+      expect(screen.queryByText(/list\.summary\.generating/)).not.toBeInTheDocument()
+    })
+
+    it('should not render badge for FAILED status', () => {
+      render(<SummaryStatus status="FAILED" />)
+      expect(screen.queryByText(/list\.summary\.generating/)).not.toBeInTheDocument()
+    })
+  })
+})
+
+describe('SummaryText', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering: verifies the label and textarea render correctly
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<SummaryText />)
+      expect(screen.getByText(/segment\.summary/)).toBeInTheDocument()
+    })
+
+    it('should render the summary label', () => {
+      render(<SummaryText value="hello" />)
+      expect(screen.getByText(/segment\.summary/)).toBeInTheDocument()
+    })
+
+    it('should render textarea with placeholder', () => {
+      render(<SummaryText />)
+      const textarea = screen.getByRole('textbox')
+      expect(textarea).toBeInTheDocument()
+      expect(textarea).toHaveAttribute('placeholder', expect.stringContaining('segment.summaryPlaceholder'))
+    })
+  })
+
+  // Props: tests value, onChange, and disabled behavior
+  describe('Props', () => {
+    it('should display the value prop in textarea', () => {
+      render(<SummaryText value="My summary" />)
+      const textarea = screen.getByRole('textbox')
+      expect(textarea).toHaveValue('My summary')
+    })
+
+    it('should display empty string when value is undefined', () => {
+      render(<SummaryText />)
+      const textarea = screen.getByRole('textbox')
+      expect(textarea).toHaveValue('')
+    })
+
+    it('should call onChange when textarea value changes', () => {
+      const onChange = vi.fn()
+      render(<SummaryText value="" onChange={onChange} />)
+      const textarea = screen.getByRole('textbox')
+
+      fireEvent.change(textarea, { target: { value: 'new value' } })
+
+      expect(onChange).toHaveBeenCalledWith('new value')
+    })
+
+    it('should disable textarea when disabled is true', () => {
+      render(<SummaryText value="test" disabled={true} />)
+      const textarea = screen.getByRole('textbox')
+      expect(textarea).toBeDisabled()
+    })
+
+    it('should enable textarea when disabled is false', () => {
+      render(<SummaryText value="test" disabled={false} />)
+      const textarea = screen.getByRole('textbox')
+      expect(textarea).not.toBeDisabled()
+    })
+
+    it('should enable textarea when disabled is undefined', () => {
+      render(<SummaryText value="test" />)
+      const textarea = screen.getByRole('textbox')
+      expect(textarea).not.toBeDisabled()
+    })
+  })
+
+  // Edge Cases: tests missing onChange and edge value scenarios
+  describe('Edge Cases', () => {
+    it('should not throw when onChange is undefined and user types', () => {
+      render(<SummaryText value="" />)
+      const textarea = screen.getByRole('textbox')
+      expect(() => {
+        fireEvent.change(textarea, { target: { value: 'typed' } })
+      }).not.toThrow()
+    })
+
+    it('should handle empty string value', () => {
+      render(<SummaryText value="" />)
+      const textarea = screen.getByRole('textbox')
+      expect(textarea).toHaveValue('')
+    })
+
+    it('should handle very long value', () => {
+      const longValue = 'B'.repeat(5000)
+      render(<SummaryText value={longValue} />)
+      const textarea = screen.getByRole('textbox')
+      expect(textarea).toHaveValue(longValue)
+    })
+
+    it('should handle value with special characters', () => {
+      const special = '<script>alert("x")</script>'
+      render(<SummaryText value={special} />)
+      const textarea = screen.getByRole('textbox')
+      expect(textarea).toHaveValue(special)
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/hooks/use-document-list-query-state.spec.ts b/web/app/components/datasets/documents/hooks/use-document-list-query-state.spec.ts
new file mode 100644
index 0000000000..b8de04387e
--- /dev/null
+++ b/web/app/components/datasets/documents/hooks/use-document-list-query-state.spec.ts
@@ -0,0 +1,439 @@
+import type { DocumentListQuery } from './use-document-list-query-state'
+import { act, renderHook } from '@testing-library/react'
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import useDocumentListQueryState from './use-document-list-query-state'
+
+// Mock external dependencies
+const mockPush = vi.fn()
+const mockSearchParams = new URLSearchParams()
+
+vi.mock('@/models/datasets', () => ({
+  DisplayStatusList: [
+    'queuing',
+    'indexing',
+    'paused',
+    'error',
+    'available',
+    'enabled',
+    'disabled',
+    'archived',
+  ],
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockPush }),
+  usePathname: () => '/datasets/test-id/documents',
+  useSearchParams: () => mockSearchParams,
+}))
+
+describe('useDocumentListQueryState', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset mock search params to empty
+    for (const key of [...mockSearchParams.keys()])
+      mockSearchParams.delete(key)
+  })
+
+  // Tests for parseParams (exposed via the query property)
+  describe('parseParams (via query)', () => {
+    it('should return default query when no search params present', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query).toEqual({
+        page: 1,
+        limit: 10,
+        keyword: '',
+        status: 'all',
+        sort: '-created_at',
+      })
+    })
+
+    it('should parse page from search params', () => {
+      mockSearchParams.set('page', '3')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.page).toBe(3)
+    })
+
+    it('should default page to 1 when page is zero', () => {
+      mockSearchParams.set('page', '0')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.page).toBe(1)
+    })
+
+    it('should default page to 1 when page is negative', () => {
+      mockSearchParams.set('page', '-5')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.page).toBe(1)
+    })
+
+    it('should default page to 1 when page is NaN', () => {
+      mockSearchParams.set('page', 'abc')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.page).toBe(1)
+    })
+
+    it('should parse limit from search params', () => {
+      mockSearchParams.set('limit', '50')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.limit).toBe(50)
+    })
+
+    it('should default limit to 10 when limit is zero', () => {
+      mockSearchParams.set('limit', '0')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.limit).toBe(10)
+    })
+
+    it('should default limit to 10 when limit exceeds 100', () => {
+      mockSearchParams.set('limit', '101')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.limit).toBe(10)
+    })
+
+    it('should default limit to 10 when limit is negative', () => {
+      mockSearchParams.set('limit', '-1')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.limit).toBe(10)
+    })
+
+    it('should accept limit at boundary 100', () => {
+      mockSearchParams.set('limit', '100')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.limit).toBe(100)
+    })
+
+    it('should accept limit at boundary 1', () => {
+      mockSearchParams.set('limit', '1')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.limit).toBe(1)
+    })
+
+    it('should parse and decode keyword from search params', () => {
+      mockSearchParams.set('keyword', encodeURIComponent('hello world'))
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.keyword).toBe('hello world')
+    })
+
+    it('should return empty keyword when not present', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.keyword).toBe('')
+    })
+
+    it('should sanitize status from search params', () => {
+      mockSearchParams.set('status', 'available')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.status).toBe('available')
+    })
+
+    it('should fallback status to all for unknown status', () => {
+      mockSearchParams.set('status', 'badvalue')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.status).toBe('all')
+    })
+
+    it('should resolve active status alias to available', () => {
+      mockSearchParams.set('status', 'active')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.status).toBe('available')
+    })
+
+    it('should parse valid sort value from search params', () => {
+      mockSearchParams.set('sort', 'hit_count')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.sort).toBe('hit_count')
+    })
+
+    it('should default sort to -created_at for invalid sort value', () => {
+      mockSearchParams.set('sort', 'invalid_sort')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.sort).toBe('-created_at')
+    })
+
+    it('should default sort to -created_at when not present', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.sort).toBe('-created_at')
+    })
+
+    it.each([
+      '-created_at',
+      'created_at',
+      '-hit_count',
+      'hit_count',
+    ] as const)('should accept valid sort value %s', (sortValue) => {
+      mockSearchParams.set('sort', sortValue)
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current.query.sort).toBe(sortValue)
+    })
+  })
+
+  // Tests for updateQuery
+  describe('updateQuery', () => {
+    it('should call router.push with updated params when page is changed', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ page: 3 })
+      })
+
+      expect(mockPush).toHaveBeenCalledTimes(1)
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).toContain('page=3')
+    })
+
+    it('should call router.push with scroll false', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ page: 2 })
+      })
+
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.any(String),
+        { scroll: false },
+      )
+    })
+
+    it('should set status in URL when status is not all', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ status: 'error' })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).toContain('status=error')
+    })
+
+    it('should not set status in URL when status is all', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ status: 'all' })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).not.toContain('status=')
+    })
+
+    it('should set sort in URL when sort is not the default -created_at', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ sort: 'hit_count' })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).toContain('sort=hit_count')
+    })
+
+    it('should not set sort in URL when sort is default -created_at', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ sort: '-created_at' })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).not.toContain('sort=')
+    })
+
+    it('should encode keyword in URL when keyword is provided', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ keyword: 'test query' })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      // updateSearchParams calls encodeURIComponent, then URLSearchParams.toString() encodes again
+      expect(pushedUrl).toContain('keyword=')
+      const params = new URLSearchParams(pushedUrl.split('?')[1])
+      expect(decodeURIComponent(params.get('keyword')!)).toBe('test query')
+    })
+
+    it('should remove keyword from URL when keyword is empty', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ keyword: '' })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).not.toContain('keyword=')
+    })
+
+    it('should sanitize invalid status to all and not include in URL', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ status: 'invalidstatus' })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).not.toContain('status=')
+    })
+
+    it('should sanitize invalid sort to -created_at and not include in URL', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ sort: 'invalidsort' as DocumentListQuery['sort'] })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).not.toContain('sort=')
+    })
+
+    it('should omit page and limit when they are default and no keyword', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ page: 1, limit: 10 })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).not.toContain('page=')
+      expect(pushedUrl).not.toContain('limit=')
+    })
+
+    it('should include page and limit when page is greater than 1', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ page: 2 })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).toContain('page=2')
+      expect(pushedUrl).toContain('limit=10')
+    })
+
+    it('should include page and limit when limit is non-default', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ limit: 25 })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).toContain('page=1')
+      expect(pushedUrl).toContain('limit=25')
+    })
+
+    it('should include page and limit when keyword is provided', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ keyword: 'search' })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).toContain('page=1')
+      expect(pushedUrl).toContain('limit=10')
+    })
+
+    it('should use pathname prefix in pushed URL', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({ page: 2 })
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).toMatch(/^\/datasets\/test-id\/documents/)
+    })
+
+    it('should push path without query string when all values are defaults', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.updateQuery({})
+      })
+
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      expect(pushedUrl).toBe('/datasets/test-id/documents')
+    })
+  })
+
+  // Tests for resetQuery
+  describe('resetQuery', () => {
+    it('should push URL with default query params when called', () => {
+      mockSearchParams.set('page', '5')
+      mockSearchParams.set('status', 'error')
+
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.resetQuery()
+      })
+
+      expect(mockPush).toHaveBeenCalledTimes(1)
+      const pushedUrl = mockPush.mock.calls[0][0] as string
+      // Default query has all defaults, so no params should be in the URL
+      expect(pushedUrl).toBe('/datasets/test-id/documents')
+    })
+
+    it('should call router.push with scroll false when resetting', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      act(() => {
+        result.current.resetQuery()
+      })
+
+      expect(mockPush).toHaveBeenCalledWith(
+        expect.any(String),
+        { scroll: false },
+      )
+    })
+  })
+
+  // Tests for return value stability
+  describe('return value', () => {
+    it('should return query, updateQuery, and resetQuery', () => {
+      const { result } = renderHook(() => useDocumentListQueryState())
+
+      expect(result.current).toHaveProperty('query')
+      expect(result.current).toHaveProperty('updateQuery')
+      expect(result.current).toHaveProperty('resetQuery')
+      expect(typeof result.current.updateQuery).toBe('function')
+      expect(typeof result.current.resetQuery).toBe('function')
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/hooks/use-documents-page-state.spec.ts b/web/app/components/datasets/documents/hooks/use-documents-page-state.spec.ts
new file mode 100644
index 0000000000..013b14781c
--- /dev/null
+++ b/web/app/components/datasets/documents/hooks/use-documents-page-state.spec.ts
@@ -0,0 +1,711 @@
+import type { DocumentListQuery } from './use-document-list-query-state'
+import type { DocumentListResponse } from '@/models/datasets'
+
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useDocumentsPageState } from './use-documents-page-state'
+
+// Mock external dependencies
+const mockUpdateQuery = vi.fn()
+const mockResetQuery = vi.fn()
+let mockQuery: DocumentListQuery = { page: 1, limit: 10, keyword: '', status: 'all', sort: '-created_at' }
+
+vi.mock('@/models/datasets', () => ({
+  DisplayStatusList: [
+    'queuing',
+    'indexing',
+    'paused',
+    'error',
+    'available',
+    'enabled',
+    'disabled',
+    'archived',
+  ],
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  usePathname: () => '/datasets/test-id/documents',
+  useSearchParams: () => new URLSearchParams(),
+}))
+
+// Mock ahooks debounce utilities
+let capturedDebounceFnCallback: (() => void) | null = null
+
+vi.mock('ahooks', () => ({
+  useDebounce: (value: unknown, _options?: { wait?: number }) => value,
+  useDebounceFn: (fn: () => void, _options?: { wait?: number }) => {
+    capturedDebounceFnCallback = fn
+    return { run: fn, cancel: vi.fn(), flush: vi.fn() }
+  },
+}))
+
+// Mock the dependent hook
+vi.mock('./use-document-list-query-state', () => ({
+  default: () => ({
+    query: mockQuery,
+    updateQuery: mockUpdateQuery,
+    resetQuery: mockResetQuery,
+  }),
+}))
+
+// Factory for creating DocumentListResponse test data
+function createDocumentListResponse(overrides: Partial<DocumentListResponse> = {}): DocumentListResponse {
+  return {
+    data: [],
+    has_more: false,
+    total: 0,
+    page: 1,
+    limit: 10,
+    ...overrides,
+  }
+}
+
+// Factory for creating a minimal document item
+function createDocumentItem(overrides: Record<string, unknown> = {}) {
+  return {
+    id: `doc-${Math.random().toString(36).slice(2, 8)}`,
+    name: 'test-doc.txt',
+    indexing_status: 'completed' as string,
+    display_status: 'available' as string,
+    enabled: true,
+    archived: false,
+    word_count: 100,
+    created_at: Date.now(),
+    updated_at: Date.now(),
+    created_from: 'web' as const,
+    created_by: 'user-1',
+    dataset_process_rule_id: 'rule-1',
+    doc_form: 'text_model' as const,
+    doc_language: 'en',
+    position: 1,
+    data_source_type: 'upload_file',
+    ...overrides,
+  }
+}
+
+describe('useDocumentsPageState', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    capturedDebounceFnCallback = null
+    mockQuery = { page: 1, limit: 10, keyword: '', status: 'all', sort: '-created_at' }
+  })
+
+  // Initial state verification
+  describe('initial state', () => {
+    it('should return correct initial search state', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      expect(result.current.inputValue).toBe('')
+      expect(result.current.searchValue).toBe('')
+      expect(result.current.debouncedSearchValue).toBe('')
+    })
+
+    it('should return correct initial filter and sort state', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      expect(result.current.statusFilterValue).toBe('all')
+      expect(result.current.sortValue).toBe('-created_at')
+      expect(result.current.normalizedStatusFilterValue).toBe('all')
+    })
+
+    it('should return correct initial pagination state', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      // page is query.page - 1 = 0
+      expect(result.current.currPage).toBe(0)
+      expect(result.current.limit).toBe(10)
+    })
+
+    it('should return correct initial selection state', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      expect(result.current.selectedIds).toEqual([])
+    })
+
+    it('should return correct initial polling state', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      expect(result.current.timerCanRun).toBe(true)
+    })
+
+    it('should initialize from query when query has keyword', () => {
+      mockQuery = { ...mockQuery, keyword: 'initial search' }
+
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      expect(result.current.inputValue).toBe('initial search')
+      expect(result.current.searchValue).toBe('initial search')
+    })
+
+    it('should initialize pagination from query with non-default page', () => {
+      mockQuery = { ...mockQuery, page: 3, limit: 25 }
+
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      expect(result.current.currPage).toBe(2) // page - 1
+      expect(result.current.limit).toBe(25)
+    })
+
+    it('should initialize status filter from query', () => {
+      mockQuery = { ...mockQuery, status: 'error' }
+
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      expect(result.current.statusFilterValue).toBe('error')
+    })
+
+    it('should initialize sort from query', () => {
+      mockQuery = { ...mockQuery, sort: 'hit_count' }
+
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      expect(result.current.sortValue).toBe('hit_count')
+    })
+  })
+
+  // Handler behaviors
+  describe('handleInputChange', () => {
+    it('should update input value when called', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleInputChange('new value')
+      })
+
+      expect(result.current.inputValue).toBe('new value')
+    })
+
+    it('should trigger debounced search callback when called', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      // First call sets inputValue and triggers the debounced fn
+      act(() => {
+        result.current.handleInputChange('search term')
+      })
+
+      // The debounced fn captures inputValue from its render closure.
+      // After re-render with new inputValue, calling the captured callback again
+      // should reflect the updated state.
+      act(() => {
+        if (capturedDebounceFnCallback)
+          capturedDebounceFnCallback()
+      })
+
+      expect(result.current.searchValue).toBe('search term')
+    })
+  })
+
+  describe('handleStatusFilterChange', () => {
+    it('should update status filter value when called with valid status', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleStatusFilterChange('error')
+      })
+
+      expect(result.current.statusFilterValue).toBe('error')
+    })
+
+    it('should reset page to 0 when status filter changes', () => {
+      mockQuery = { ...mockQuery, page: 3 }
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleStatusFilterChange('error')
+      })
+
+      expect(result.current.currPage).toBe(0)
+    })
+
+    it('should call updateQuery with sanitized status and page 1', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleStatusFilterChange('error')
+      })
+
+      expect(mockUpdateQuery).toHaveBeenCalledWith({ status: 'error', page: 1 })
+    })
+
+    it('should sanitize invalid status to all', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleStatusFilterChange('invalid')
+      })
+
+      expect(result.current.statusFilterValue).toBe('all')
+      expect(mockUpdateQuery).toHaveBeenCalledWith({ status: 'all', page: 1 })
+    })
+  })
+
+  describe('handleStatusFilterClear', () => {
+    it('should set status to all and reset page when status is not all', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      // First set a non-all status
+      act(() => {
+        result.current.handleStatusFilterChange('error')
+      })
+      vi.clearAllMocks()
+
+      // Then clear
+      act(() => {
+        result.current.handleStatusFilterClear()
+      })
+
+      expect(result.current.statusFilterValue).toBe('all')
+      expect(mockUpdateQuery).toHaveBeenCalledWith({ status: 'all', page: 1 })
+    })
+
+    it('should not call updateQuery when status is already all', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleStatusFilterClear()
+      })
+
+      expect(mockUpdateQuery).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('handleSortChange', () => {
+    it('should update sort value and call updateQuery when value changes', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleSortChange('hit_count')
+      })
+
+      expect(result.current.sortValue).toBe('hit_count')
+      expect(mockUpdateQuery).toHaveBeenCalledWith({ sort: 'hit_count', page: 1 })
+    })
+
+    it('should reset page to 0 when sort changes', () => {
+      mockQuery = { ...mockQuery, page: 5 }
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleSortChange('hit_count')
+      })
+
+      expect(result.current.currPage).toBe(0)
+    })
+
+    it('should not call updateQuery when sort value is same as current', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleSortChange('-created_at')
+      })
+
+      expect(mockUpdateQuery).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('handlePageChange', () => {
+    it('should update current page and call updateQuery', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handlePageChange(2)
+      })
+
+      expect(result.current.currPage).toBe(2)
+      expect(mockUpdateQuery).toHaveBeenCalledWith({ page: 3 }) // newPage + 1
+    })
+
+    it('should handle page 0 (first page)', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handlePageChange(0)
+      })
+
+      expect(result.current.currPage).toBe(0)
+      expect(mockUpdateQuery).toHaveBeenCalledWith({ page: 1 })
+    })
+  })
+
+  describe('handleLimitChange', () => {
+    it('should update limit, reset page to 0, and call updateQuery', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleLimitChange(25)
+      })
+
+      expect(result.current.limit).toBe(25)
+      expect(result.current.currPage).toBe(0)
+      expect(mockUpdateQuery).toHaveBeenCalledWith({ limit: 25, page: 1 })
+    })
+  })
+
+  // Selection state
+  describe('selection state', () => {
+    it('should update selectedIds via setSelectedIds', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.setSelectedIds(['doc-1', 'doc-2'])
+      })
+
+      expect(result.current.selectedIds).toEqual(['doc-1', 'doc-2'])
+    })
+  })
+
+  // Polling state management
+  describe('updatePollingState', () => {
+    it('should not update timer when documentsRes is undefined', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.updatePollingState(undefined)
+      })
+
+      // timerCanRun remains true (initial value)
+      expect(result.current.timerCanRun).toBe(true)
+    })
+
+    it('should not update timer when documentsRes.data is undefined', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.updatePollingState({ data: undefined } as unknown as DocumentListResponse)
+      })
+
+      expect(result.current.timerCanRun).toBe(true)
+    })
+
+    it('should set timerCanRun to false when all documents are completed and status filter is all', () => {
+      const response = createDocumentListResponse({
+        data: [
+          createDocumentItem({ indexing_status: 'completed' }),
+          createDocumentItem({ indexing_status: 'completed' }),
+        ] as DocumentListResponse['data'],
+        total: 2,
+      })
+
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.updatePollingState(response)
+      })
+
+      expect(result.current.timerCanRun).toBe(false)
+    })
+
+    it('should set timerCanRun to true when some documents are not completed', () => {
+      const response = createDocumentListResponse({
+        data: [
+          createDocumentItem({ indexing_status: 'completed' }),
+          createDocumentItem({ indexing_status: 'indexing' }),
+        ] as DocumentListResponse['data'],
+        total: 2,
+      })
+
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.updatePollingState(response)
+      })
+
+      expect(result.current.timerCanRun).toBe(true)
+    })
+
+    it('should count paused documents as completed for polling purposes', () => {
+      const response = createDocumentListResponse({
+        data: [
+          createDocumentItem({ indexing_status: 'paused' }),
+          createDocumentItem({ indexing_status: 'completed' }),
+        ] as DocumentListResponse['data'],
+        total: 2,
+      })
+
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.updatePollingState(response)
+      })
+
+      // All docs are "embedded" (completed, paused, error), so hasIncomplete = false
+      // statusFilter is 'all', so shouldForcePolling = false
+      expect(result.current.timerCanRun).toBe(false)
+    })
+
+    it('should count error documents as completed for polling purposes', () => {
+      const response = createDocumentListResponse({
+        data: [
+          createDocumentItem({ indexing_status: 'error' }),
+          createDocumentItem({ indexing_status: 'completed' }),
+        ] as DocumentListResponse['data'],
+        total: 2,
+      })
+
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.updatePollingState(response)
+      })
+
+      expect(result.current.timerCanRun).toBe(false)
+    })
+
+    it('should force polling when status filter is a transient status (queuing)', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      // Set status filter to queuing
+      act(() => {
+        result.current.handleStatusFilterChange('queuing')
+      })
+
+      const response = createDocumentListResponse({
+        data: [
+          createDocumentItem({ indexing_status: 'completed' }),
+        ] as DocumentListResponse['data'],
+        total: 1,
+      })
+
+      act(() => {
+        result.current.updatePollingState(response)
+      })
+
+      // shouldForcePolling = true (queuing is transient), hasIncomplete = false
+      // timerCanRun = true || false = true
+      expect(result.current.timerCanRun).toBe(true)
+    })
+
+    it('should force polling when status filter is indexing', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleStatusFilterChange('indexing')
+      })
+
+      const response = createDocumentListResponse({
+        data: [
+          createDocumentItem({ indexing_status: 'completed' }),
+        ] as DocumentListResponse['data'],
+        total: 1,
+      })
+
+      act(() => {
+        result.current.updatePollingState(response)
+      })
+
+      expect(result.current.timerCanRun).toBe(true)
+    })
+
+    it('should force polling when status filter is paused', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleStatusFilterChange('paused')
+      })
+
+      const response = createDocumentListResponse({
+        data: [
+          createDocumentItem({ indexing_status: 'paused' }),
+        ] as DocumentListResponse['data'],
+        total: 1,
+      })
+
+      act(() => {
+        result.current.updatePollingState(response)
+      })
+
+      expect(result.current.timerCanRun).toBe(true)
+    })
+
+    it('should not force polling when status filter is a non-transient status (error)', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleStatusFilterChange('error')
+      })
+
+      const response = createDocumentListResponse({
+        data: [
+          createDocumentItem({ indexing_status: 'error' }),
+        ] as DocumentListResponse['data'],
+        total: 1,
+      })
+
+      act(() => {
+        result.current.updatePollingState(response)
+      })
+
+      // shouldForcePolling = false (error is not transient), hasIncomplete = false (error is embedded)
+      expect(result.current.timerCanRun).toBe(false)
+    })
+
+    it('should set timerCanRun to true when data is empty and filter is transient', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleStatusFilterChange('indexing')
+      })
+
+      const response = createDocumentListResponse({ data: [] as DocumentListResponse['data'], total: 0 })
+
+      act(() => {
+        result.current.updatePollingState(response)
+      })
+
+      // shouldForcePolling = true (indexing is transient), hasIncomplete = false (0 !== 0 is false)
+      expect(result.current.timerCanRun).toBe(true)
+    })
+  })
+
+  // Page adjustment
+  describe('adjustPageForTotal', () => {
+    it('should not adjust page when documentsRes is undefined', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.adjustPageForTotal(undefined)
+      })
+
+      expect(result.current.currPage).toBe(0)
+    })
+
+    it('should not adjust page when currPage is within total pages', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      const response = createDocumentListResponse({ total: 20 })
+
+      act(() => {
+        result.current.adjustPageForTotal(response)
+      })
+
+      // currPage is 0, totalPages is 2, so no adjustment needed
+      expect(result.current.currPage).toBe(0)
+    })
+
+    it('should adjust page to last page when currPage exceeds total pages', () => {
+      mockQuery = { ...mockQuery, page: 6 }
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      // currPage should be 5 (page - 1)
+      expect(result.current.currPage).toBe(5)
+
+      const response = createDocumentListResponse({ total: 30 }) // 30/10 = 3 pages
+
+      act(() => {
+        result.current.adjustPageForTotal(response)
+      })
+
+      // currPage (5) + 1 > totalPages (3), so adjust to totalPages - 1 = 2
+      expect(result.current.currPage).toBe(2)
+      expect(mockUpdateQuery).toHaveBeenCalledWith({ page: 3 }) // handlePageChange passes newPage + 1
+    })
+
+    it('should adjust page to 0 when total is 0 and currPage > 0', () => {
+      mockQuery = { ...mockQuery, page: 3 }
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      const response = createDocumentListResponse({ total: 0 })
+
+      act(() => {
+        result.current.adjustPageForTotal(response)
+      })
+
+      // totalPages = 0, so adjust to max(0 - 1, 0) = 0
+      expect(result.current.currPage).toBe(0)
+      expect(mockUpdateQuery).toHaveBeenCalledWith({ page: 1 })
+    })
+
+    it('should not adjust page when currPage is 0 even if total is 0', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      const response = createDocumentListResponse({ total: 0 })
+
+      act(() => {
+        result.current.adjustPageForTotal(response)
+      })
+
+      // currPage is 0, condition is currPage > 0 so no adjustment
+      expect(mockUpdateQuery).not.toHaveBeenCalled()
+    })
+  })
+
+  // Normalized status filter value
+  describe('normalizedStatusFilterValue', () => {
+    it('should return all for default status', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      expect(result.current.normalizedStatusFilterValue).toBe('all')
+    })
+
+    it('should normalize enabled to available', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleStatusFilterChange('enabled')
+      })
+
+      expect(result.current.normalizedStatusFilterValue).toBe('available')
+    })
+
+    it('should return non-aliased status as-is', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      act(() => {
+        result.current.handleStatusFilterChange('error')
+      })
+
+      expect(result.current.normalizedStatusFilterValue).toBe('error')
+    })
+  })
+
+  // Return value shape
+  describe('return value', () => {
+    it('should return all expected properties', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      // Search state
+      expect(result.current).toHaveProperty('inputValue')
+      expect(result.current).toHaveProperty('searchValue')
+      expect(result.current).toHaveProperty('debouncedSearchValue')
+      expect(result.current).toHaveProperty('handleInputChange')
+
+      // Filter & sort state
+      expect(result.current).toHaveProperty('statusFilterValue')
+      expect(result.current).toHaveProperty('sortValue')
+      expect(result.current).toHaveProperty('normalizedStatusFilterValue')
+      expect(result.current).toHaveProperty('handleStatusFilterChange')
+      expect(result.current).toHaveProperty('handleStatusFilterClear')
+      expect(result.current).toHaveProperty('handleSortChange')
+
+      // Pagination state
+      expect(result.current).toHaveProperty('currPage')
+      expect(result.current).toHaveProperty('limit')
+      expect(result.current).toHaveProperty('handlePageChange')
+      expect(result.current).toHaveProperty('handleLimitChange')
+
+      // Selection state
+      expect(result.current).toHaveProperty('selectedIds')
+      expect(result.current).toHaveProperty('setSelectedIds')
+
+      // Polling state
+      expect(result.current).toHaveProperty('timerCanRun')
+      expect(result.current).toHaveProperty('updatePollingState')
+      expect(result.current).toHaveProperty('adjustPageForTotal')
+    })
+
+    it('should have function types for all handlers', () => {
+      const { result } = renderHook(() => useDocumentsPageState())
+
+      expect(typeof result.current.handleInputChange).toBe('function')
+      expect(typeof result.current.handleStatusFilterChange).toBe('function')
+      expect(typeof result.current.handleStatusFilterClear).toBe('function')
+      expect(typeof result.current.handleSortChange).toBe('function')
+      expect(typeof result.current.handlePageChange).toBe('function')
+      expect(typeof result.current.handleLimitChange).toBe('function')
+      expect(typeof result.current.setSelectedIds).toBe('function')
+      expect(typeof result.current.updatePollingState).toBe('function')
+      expect(typeof result.current.adjustPageForTotal).toBe('function')
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/status-filter.spec.ts b/web/app/components/datasets/documents/status-filter.spec.ts
new file mode 100644
index 0000000000..8310e04878
--- /dev/null
+++ b/web/app/components/datasets/documents/status-filter.spec.ts
@@ -0,0 +1,156 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { normalizeStatusForQuery, sanitizeStatusValue } from './status-filter'
+
+vi.mock('@/models/datasets', () => ({
+  DisplayStatusList: [
+    'queuing',
+    'indexing',
+    'paused',
+    'error',
+    'available',
+    'enabled',
+    'disabled',
+    'archived',
+  ],
+}))
+
+describe('status-filter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Tests for sanitizeStatusValue
+  describe('sanitizeStatusValue', () => {
+    // Falsy inputs should return 'all'
+    describe('falsy inputs', () => {
+      it('should return all when value is undefined', () => {
+        expect(sanitizeStatusValue(undefined)).toBe('all')
+      })
+
+      it('should return all when value is null', () => {
+        expect(sanitizeStatusValue(null)).toBe('all')
+      })
+
+      it('should return all when value is empty string', () => {
+        expect(sanitizeStatusValue('')).toBe('all')
+      })
+    })
+
+    // Known status values should be returned as-is (lowercased)
+    describe('known status values', () => {
+      it('should return all when value is all', () => {
+        expect(sanitizeStatusValue('all')).toBe('all')
+      })
+
+      it.each([
+        'queuing',
+        'indexing',
+        'paused',
+        'error',
+        'available',
+        'enabled',
+        'disabled',
+        'archived',
+      ])('should return %s when value is %s', (status) => {
+        expect(sanitizeStatusValue(status)).toBe(status)
+      })
+
+      it('should handle uppercase known values by normalizing to lowercase', () => {
+        expect(sanitizeStatusValue('QUEUING')).toBe('queuing')
+        expect(sanitizeStatusValue('Available')).toBe('available')
+        expect(sanitizeStatusValue('ALL')).toBe('all')
+      })
+    })
+
+    // URL alias resolution
+    describe('URL aliases', () => {
+      it('should resolve active to available', () => {
+        expect(sanitizeStatusValue('active')).toBe('available')
+      })
+
+      it('should resolve Active (uppercase) to available', () => {
+        expect(sanitizeStatusValue('Active')).toBe('available')
+      })
+
+      it('should resolve ACTIVE to available', () => {
+        expect(sanitizeStatusValue('ACTIVE')).toBe('available')
+      })
+    })
+
+    // Unknown values should fall back to 'all'
+    describe('unknown values', () => {
+      it('should return all when value is unknown', () => {
+        expect(sanitizeStatusValue('unknown')).toBe('all')
+      })
+
+      it('should return all when value is an arbitrary string', () => {
+        expect(sanitizeStatusValue('foobar')).toBe('all')
+      })
+
+      it('should return all when value is a numeric string', () => {
+        expect(sanitizeStatusValue('123')).toBe('all')
+      })
+    })
+  })
+
+  // Tests for normalizeStatusForQuery
+  describe('normalizeStatusForQuery', () => {
+    // When sanitized value is 'all', should return 'all'
+    describe('all status', () => {
+      it('should return all when value is undefined', () => {
+        expect(normalizeStatusForQuery(undefined)).toBe('all')
+      })
+
+      it('should return all when value is null', () => {
+        expect(normalizeStatusForQuery(null)).toBe('all')
+      })
+
+      it('should return all when value is empty string', () => {
+        expect(normalizeStatusForQuery('')).toBe('all')
+      })
+
+      it('should return all when value is all', () => {
+        expect(normalizeStatusForQuery('all')).toBe('all')
+      })
+
+      it('should return all when value is unknown (sanitized to all)', () => {
+        expect(normalizeStatusForQuery('unknown')).toBe('all')
+      })
+    })
+
+    // Query alias resolution: enabled -> available
+    describe('query aliases', () => {
+      it('should resolve enabled to available', () => {
+        expect(normalizeStatusForQuery('enabled')).toBe('available')
+      })
+
+      it('should resolve Enabled (mixed case) to available', () => {
+        expect(normalizeStatusForQuery('Enabled')).toBe('available')
+      })
+    })
+
+    // Non-aliased known values should pass through
+    describe('non-aliased known values', () => {
+      it.each([
+        'queuing',
+        'indexing',
+        'paused',
+        'error',
+        'available',
+        'disabled',
+        'archived',
+      ])('should return %s as-is when not aliased', (status) => {
+        expect(normalizeStatusForQuery(status)).toBe(status)
+      })
+    })
+
+    // URL alias flows through sanitize first, then query alias
+    describe('combined alias resolution', () => {
+      it('should resolve active through URL alias to available', () => {
+        // active -> sanitizeStatusValue -> available -> no query alias for available -> available
+        expect(normalizeStatusForQuery('active')).toBe('available')
+      })
+    })
+  })
+})
diff --git a/web/app/components/datasets/documents/status-item/hooks.spec.ts b/web/app/components/datasets/documents/status-item/hooks.spec.ts
new file mode 100644
index 0000000000..2cc20bbf86
--- /dev/null
+++ b/web/app/components/datasets/documents/status-item/hooks.spec.ts
@@ -0,0 +1,115 @@
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useIndexStatus } from './hooks'
+
+describe('useIndexStatus', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Verify the hook returns all expected status keys
+  it('should return all expected status keys', () => {
+    const { result } = renderHook(() => useIndexStatus())
+
+    const expectedKeys = ['queuing', 'indexing', 'paused', 'error', 'available', 'enabled', 'disabled', 'archived']
+    expect(Object.keys(result.current)).toEqual(expectedKeys)
+  })
+
+  // Verify each status entry has the correct color
+  describe('colors', () => {
+    it('should return orange color for queuing', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.queuing.color).toBe('orange')
+    })
+
+    it('should return blue color for indexing', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.indexing.color).toBe('blue')
+    })
+
+    it('should return orange color for paused', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.paused.color).toBe('orange')
+    })
+
+    it('should return red color for error', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.error.color).toBe('red')
+    })
+
+    it('should return green color for available', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.available.color).toBe('green')
+    })
+
+    it('should return green color for enabled', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.enabled.color).toBe('green')
+    })
+
+    it('should return gray color for disabled', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.disabled.color).toBe('gray')
+    })
+
+    it('should return gray color for archived', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.archived.color).toBe('gray')
+    })
+  })
+
+  // Verify each status entry has translated text (global mock returns ns.key format)
+  describe('translated text', () => {
+    it('should return translated text for queuing', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.queuing.text).toBe('datasetDocuments.list.status.queuing')
+    })
+
+    it('should return translated text for indexing', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.indexing.text).toBe('datasetDocuments.list.status.indexing')
+    })
+
+    it('should return translated text for paused', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.paused.text).toBe('datasetDocuments.list.status.paused')
+    })
+
+    it('should return translated text for error', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.error.text).toBe('datasetDocuments.list.status.error')
+    })
+
+    it('should return translated text for available', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.available.text).toBe('datasetDocuments.list.status.available')
+    })
+
+    it('should return translated text for enabled', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.enabled.text).toBe('datasetDocuments.list.status.enabled')
+    })
+
+    it('should return translated text for disabled', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.disabled.text).toBe('datasetDocuments.list.status.disabled')
+    })
+
+    it('should return translated text for archived', () => {
+      const { result } = renderHook(() => useIndexStatus())
+      expect(result.current.archived.text).toBe('datasetDocuments.list.status.archived')
+    })
+  })
+
+  // Verify each entry has both color and text properties
+  it('should return objects with color and text properties for every status', () => {
+    const { result } = renderHook(() => useIndexStatus())
+
+    for (const key of Object.keys(result.current) as Array<keyof typeof result.current>) {
+      expect(result.current[key]).toHaveProperty('color')
+      expect(result.current[key]).toHaveProperty('text')
+      expect(typeof result.current[key].color).toBe('string')
+      expect(typeof result.current[key].text).toBe('string')
+    }
+  })
+})
diff --git a/web/app/components/datasets/external-knowledge-base/create/InfoPanel.spec.tsx b/web/app/components/datasets/external-knowledge-base/create/InfoPanel.spec.tsx
new file mode 100644
index 0000000000..07ac518fd0
--- /dev/null
+++ b/web/app/components/datasets/external-knowledge-base/create/InfoPanel.spec.tsx
@@ -0,0 +1,94 @@
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import InfoPanel from './InfoPanel'
+
+// Mock useDocLink from @/context/i18n
+vi.mock('@/context/i18n', () => ({
+  useDocLink: () => (path: string) => `https://docs.dify.ai${path}`,
+}))
+
+describe('InfoPanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering: verifies the panel renders all expected content
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<InfoPanel />)
+      expect(screen.getByText(/connectDatasetIntro\.title/)).toBeInTheDocument()
+    })
+
+    it('should render the title text', () => {
+      render(<InfoPanel />)
+      expect(screen.getByText(/connectDatasetIntro\.title/)).toBeInTheDocument()
+    })
+
+    it('should render the front content text', () => {
+      render(<InfoPanel />)
+      expect(screen.getByText(/connectDatasetIntro\.content\.front/)).toBeInTheDocument()
+    })
+
+    it('should render the content link', () => {
+      render(<InfoPanel />)
+      expect(screen.getByText(/connectDatasetIntro\.content\.link/)).toBeInTheDocument()
+    })
+
+    it('should render the end content text', () => {
+      render(<InfoPanel />)
+      expect(screen.getByText(/connectDatasetIntro\.content\.end/)).toBeInTheDocument()
+    })
+
+    it('should render the learn more link', () => {
+      render(<InfoPanel />)
+      expect(screen.getByText(/connectDatasetIntro\.learnMore/)).toBeInTheDocument()
+    })
+
+    it('should render the book icon', () => {
+      const { container } = render(<InfoPanel />)
+      const svgIcons = container.querySelectorAll('svg')
+      expect(svgIcons.length).toBeGreaterThanOrEqual(1)
+    })
+  })
+
+  // Props: tests links and their attributes
+  describe('Links', () => {
+    it('should have correct href for external knowledge API doc link', () => {
+      render(<InfoPanel />)
+      const docLink = screen.getByText(/connectDatasetIntro\.content\.link/)
+      expect(docLink).toHaveAttribute('href', 'https://docs.dify.ai/use-dify/knowledge/external-knowledge-api')
+    })
+
+    it('should have correct href for learn more link', () => {
+      render(<InfoPanel />)
+      const learnMoreLink = screen.getByText(/connectDatasetIntro\.learnMore/)
+      expect(learnMoreLink).toHaveAttribute('href', 'https://docs.dify.ai/use-dify/knowledge/connect-external-knowledge-base')
+    })
+
+    it('should open links in new tab', () => {
+      render(<InfoPanel />)
+      const docLink = screen.getByText(/connectDatasetIntro\.content\.link/)
+      expect(docLink).toHaveAttribute('target', '_blank')
+      expect(docLink).toHaveAttribute('rel', 'noopener noreferrer')
+
+      const learnMoreLink = screen.getByText(/connectDatasetIntro\.learnMore/)
+      expect(learnMoreLink).toHaveAttribute('target', '_blank')
+      expect(learnMoreLink).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+  })
+
+  // Styles: checks structural class names
+  describe('Styles', () => {
+    it('should have correct container width', () => {
+      const { container } = render(<InfoPanel />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('w-[360px]')
+    })
+
+    it('should have correct panel background', () => {
+      const { container } = render(<InfoPanel />)
+      const panel = container.querySelector('.bg-background-section')
+      expect(panel).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.spec.tsx b/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.spec.tsx
new file mode 100644
index 0000000000..eef044b72b
--- /dev/null
+++ b/web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.spec.tsx
@@ -0,0 +1,153 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import KnowledgeBaseInfo from './KnowledgeBaseInfo'
+
+describe('KnowledgeBaseInfo', () => {
+  const defaultProps = {
+    name: '',
+    description: '',
+    onChange: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering: verifies all form fields render
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      render(<KnowledgeBaseInfo {...defaultProps} />)
+      expect(screen.getByText(/externalKnowledgeName/)).toBeInTheDocument()
+    })
+
+    it('should render the name label', () => {
+      render(<KnowledgeBaseInfo {...defaultProps} />)
+      expect(screen.getByText(/externalKnowledgeName(?!Placeholder)/)).toBeInTheDocument()
+    })
+
+    it('should render the description label', () => {
+      render(<KnowledgeBaseInfo {...defaultProps} />)
+      expect(screen.getByText(/externalKnowledgeDescription(?!Placeholder)/)).toBeInTheDocument()
+    })
+
+    it('should render name input with placeholder', () => {
+      render(<KnowledgeBaseInfo {...defaultProps} />)
+      const input = screen.getByPlaceholderText(/externalKnowledgeNamePlaceholder/)
+      expect(input).toBeInTheDocument()
+    })
+
+    it('should render description textarea with placeholder', () => {
+      render(<KnowledgeBaseInfo {...defaultProps} />)
+      const textarea = screen.getByPlaceholderText(/externalKnowledgeDescriptionPlaceholder/)
+      expect(textarea).toBeInTheDocument()
+    })
+  })
+
+  // Props: tests value display and onChange callbacks
+  describe('Props', () => {
+    it('should display name in the input', () => {
+      render(<KnowledgeBaseInfo {...defaultProps} name="My Knowledge Base" />)
+      const input = screen.getByDisplayValue('My Knowledge Base')
+      expect(input).toBeInTheDocument()
+    })
+
+    it('should display description in the textarea', () => {
+      render(<KnowledgeBaseInfo {...defaultProps} description="A description" />)
+      const textarea = screen.getByDisplayValue('A description')
+      expect(textarea).toBeInTheDocument()
+    })
+
+    it('should call onChange with name when name input changes', () => {
+      const onChange = vi.fn()
+      render(<KnowledgeBaseInfo {...defaultProps} onChange={onChange} />)
+      const input = screen.getByPlaceholderText(/externalKnowledgeNamePlaceholder/)
+
+      fireEvent.change(input, { target: { value: 'New Name' } })
+
+      expect(onChange).toHaveBeenCalledWith({ name: 'New Name' })
+    })
+
+    it('should call onChange with description when textarea changes', () => {
+      const onChange = vi.fn()
+      render(<KnowledgeBaseInfo {...defaultProps} onChange={onChange} />)
+      const textarea = screen.getByPlaceholderText(/externalKnowledgeDescriptionPlaceholder/)
+
+      fireEvent.change(textarea, { target: { value: 'New Description' } })
+
+      expect(onChange).toHaveBeenCalledWith({ description: 'New Description' })
+    })
+  })
+
+  // User Interactions: tests form interactions
+  describe('User Interactions', () => {
+    it('should allow typing in name input', () => {
+      const onChange = vi.fn()
+      render(<KnowledgeBaseInfo {...defaultProps} onChange={onChange} />)
+      const input = screen.getByPlaceholderText(/externalKnowledgeNamePlaceholder/)
+
+      fireEvent.change(input, { target: { value: 'Typed Name' } })
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith({ name: 'Typed Name' })
+    })
+
+    it('should allow typing in description textarea', () => {
+      const onChange = vi.fn()
+      render(<KnowledgeBaseInfo {...defaultProps} onChange={onChange} />)
+      const textarea = screen.getByPlaceholderText(/externalKnowledgeDescriptionPlaceholder/)
+
+      fireEvent.change(textarea, { target: { value: 'Typed Desc' } })
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith({ description: 'Typed Desc' })
+    })
+  })
+
+  // Edge Cases: tests boundary values
+  describe('Edge Cases', () => {
+    it('should handle empty name', () => {
+      render(<KnowledgeBaseInfo {...defaultProps} name="" />)
+      const input = screen.getByPlaceholderText(/externalKnowledgeNamePlaceholder/)
+      expect(input).toHaveValue('')
+    })
+
+    it('should handle undefined description', () => {
+      render(<KnowledgeBaseInfo {...defaultProps} description={undefined} />)
+      const textarea = screen.getByPlaceholderText(/externalKnowledgeDescriptionPlaceholder/)
+      expect(textarea).toBeInTheDocument()
+    })
+
+    it('should handle very long name', () => {
+      const longName = 'K'.repeat(500)
+      render(<KnowledgeBaseInfo {...defaultProps} name={longName} />)
+      const input = screen.getByDisplayValue(longName)
+      expect(input).toBeInTheDocument()
+    })
+
+    it('should handle very long description', () => {
+      const longDesc = 'D'.repeat(2000)
+      render(<KnowledgeBaseInfo {...defaultProps} description={longDesc} />)
+      const textarea = screen.getByDisplayValue(longDesc)
+      expect(textarea).toBeInTheDocument()
+    })
+
+    it('should handle special characters in name', () => {
+      const specialName = 'Test & "quotes" <angle>'
+      render(<KnowledgeBaseInfo {...defaultProps} name={specialName} />)
+      const input = screen.getByDisplayValue(specialName)
+      expect(input).toBeInTheDocument()
+    })
+
+    it('should apply filled text color class when description has content', () => {
+      const { container } = render(<KnowledgeBaseInfo {...defaultProps} description="has content" />)
+      const textarea = container.querySelector('textarea')
+      expect(textarea).toHaveClass('text-components-input-text-filled')
+    })
+
+    it('should apply placeholder text color class when description is empty', () => {
+      const { container } = render(<KnowledgeBaseInfo {...defaultProps} description="" />)
+      const textarea = container.querySelector('textarea')
+      expect(textarea).toHaveClass('text-components-input-text-placeholder')
+    })
+  })
+})
diff --git a/web/app/components/datasets/extra-info/api-access/card.spec.tsx b/web/app/components/datasets/extra-info/api-access/card.spec.tsx
new file mode 100644
index 0000000000..e21cf8e2a0
--- /dev/null
+++ b/web/app/components/datasets/extra-info/api-access/card.spec.tsx
@@ -0,0 +1,186 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import Card from './card'
+
+// Shared mock state for context selectors
+let mockDatasetId: string | undefined = 'dataset-123'
+let mockMutateDatasetRes: ReturnType<typeof vi.fn> = vi.fn()
+let mockIsCurrentWorkspaceManager = true
+
+vi.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (state: Record<string, unknown>) => unknown) =>
+    selector({
+      dataset: { id: mockDatasetId },
+      mutateDatasetRes: mockMutateDatasetRes,
+    }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useSelector: (selector: (state: Record<string, unknown>) => unknown) =>
+    selector({ isCurrentWorkspaceManager: mockIsCurrentWorkspaceManager }),
+}))
+
+const mockEnableApi = vi.fn()
+const mockDisableApi = vi.fn()
+
+vi.mock('@/service/knowledge/use-dataset', () => ({
+  useEnableDatasetServiceApi: () => ({
+    mutateAsync: mockEnableApi,
+  }),
+  useDisableDatasetServiceApi: () => ({
+    mutateAsync: mockDisableApi,
+  }),
+}))
+
+vi.mock('@/hooks/use-api-access-url', () => ({
+  useDatasetApiAccessUrl: () => 'https://docs.dify.ai/api-reference/datasets',
+}))
+
+describe('Card (API Access)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockDatasetId = 'dataset-123'
+    mockMutateDatasetRes = vi.fn()
+    mockIsCurrentWorkspaceManager = true
+  })
+
+  // Rendering: verifies enabled/disabled states render correctly
+  describe('Rendering', () => {
+    it('should render without crashing when api is enabled', () => {
+      render(<Card apiEnabled={true} />)
+      expect(screen.getByText(/serviceApi\.enabled/)).toBeInTheDocument()
+    })
+
+    it('should render without crashing when api is disabled', () => {
+      render(<Card apiEnabled={false} />)
+      expect(screen.getByText(/serviceApi\.disabled/)).toBeInTheDocument()
+    })
+
+    it('should render API access tip text', () => {
+      render(<Card apiEnabled={true} />)
+      expect(screen.getByText(/appMenus\.apiAccessTip/)).toBeInTheDocument()
+    })
+
+    it('should render API reference link', () => {
+      render(<Card apiEnabled={true} />)
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('href', 'https://docs.dify.ai/api-reference/datasets')
+    })
+
+    it('should render API doc text in link', () => {
+      render(<Card apiEnabled={true} />)
+      expect(screen.getByText(/apiInfo\.doc/)).toBeInTheDocument()
+    })
+
+    it('should open API reference link in new tab', () => {
+      render(<Card apiEnabled={true} />)
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+  })
+
+  // Props: tests enabled/disabled visual states
+  describe('Props', () => {
+    it('should show green indicator text when enabled', () => {
+      render(<Card apiEnabled={true} />)
+      const enabledText = screen.getByText(/serviceApi\.enabled/)
+      expect(enabledText).toHaveClass('text-text-success')
+    })
+
+    it('should show warning text when disabled', () => {
+      render(<Card apiEnabled={false} />)
+      const disabledText = screen.getByText(/serviceApi\.disabled/)
+      expect(disabledText).toHaveClass('text-text-warning')
+    })
+  })
+
+  // User Interactions: tests toggle behavior
+  describe('User Interactions', () => {
+    it('should call enableDatasetServiceApi when toggling on', async () => {
+      mockEnableApi.mockResolvedValue({ result: 'success' })
+      render(<Card apiEnabled={false} />)
+
+      const switchButton = screen.getByRole('switch')
+      fireEvent.click(switchButton)
+
+      await waitFor(() => {
+        expect(mockEnableApi).toHaveBeenCalledWith('dataset-123')
+      })
+    })
+
+    it('should call disableDatasetServiceApi when toggling off', async () => {
+      mockDisableApi.mockResolvedValue({ result: 'success' })
+      render(<Card apiEnabled={true} />)
+
+      const switchButton = screen.getByRole('switch')
+      fireEvent.click(switchButton)
+
+      await waitFor(() => {
+        expect(mockDisableApi).toHaveBeenCalledWith('dataset-123')
+      })
+    })
+
+    it('should call mutateDatasetRes on successful toggle', async () => {
+      mockEnableApi.mockResolvedValue({ result: 'success' })
+      render(<Card apiEnabled={false} />)
+
+      const switchButton = screen.getByRole('switch')
+      fireEvent.click(switchButton)
+
+      await waitFor(() => {
+        expect(mockMutateDatasetRes).toHaveBeenCalled()
+      })
+    })
+
+    it('should not call mutateDatasetRes when result is not success', async () => {
+      mockEnableApi.mockResolvedValue({ result: 'fail' })
+      render(<Card apiEnabled={false} />)
+
+      const switchButton = screen.getByRole('switch')
+      fireEvent.click(switchButton)
+
+      await waitFor(() => {
+        expect(mockEnableApi).toHaveBeenCalled()
+      })
+      expect(mockMutateDatasetRes).not.toHaveBeenCalled()
+    })
+  })
+
+  // Switch disabled state
+  describe('Switch State', () => {
+    it('should disable switch when user is not workspace manager', () => {
+      mockIsCurrentWorkspaceManager = false
+      render(<Card apiEnabled={true} />)
+
+      const switchButton = screen.getByRole('switch')
+      expect(switchButton).toHaveAttribute('aria-checked', 'true')
+      // Headless UI Switch uses CSS classes for disabled state, not the disabled attribute
+      expect(switchButton).toHaveClass('!cursor-not-allowed', '!opacity-50')
+    })
+
+    it('should enable switch when user is workspace manager', () => {
+      mockIsCurrentWorkspaceManager = true
+      render(<Card apiEnabled={true} />)
+
+      const switchButton = screen.getByRole('switch')
+      expect(switchButton).not.toBeDisabled()
+    })
+  })
+
+  // Edge Cases: tests boundary scenarios
+  describe('Edge Cases', () => {
+    it('should handle undefined dataset id', async () => {
+      mockDatasetId = undefined
+      mockEnableApi.mockResolvedValue({ result: 'success' })
+      render(<Card apiEnabled={false} />)
+
+      const switchButton = screen.getByRole('switch')
+      fireEvent.click(switchButton)
+
+      await waitFor(() => {
+        expect(mockEnableApi).toHaveBeenCalledWith('')
+      })
+    })
+  })
+})
diff --git a/web/app/components/datasets/extra-info/service-api/card.spec.tsx b/web/app/components/datasets/extra-info/service-api/card.spec.tsx
new file mode 100644
index 0000000000..5db0f12442
--- /dev/null
+++ b/web/app/components/datasets/extra-info/service-api/card.spec.tsx
@@ -0,0 +1,151 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import Card from './card'
+
+vi.mock('@/hooks/use-api-access-url', () => ({
+  useDatasetApiAccessUrl: () => 'https://docs.dify.ai/api-reference/datasets',
+}))
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  )
+}
+
+const renderWithProviders = (ui: React.ReactElement) => {
+  return render(ui, { wrapper: createWrapper() })
+}
+
+describe('Card (Service API)', () => {
+  const defaultProps = {
+    apiBaseUrl: 'https://api.dify.ai/v1',
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering: verifies all key elements render
+  describe('Rendering', () => {
+    it('should render without crashing', () => {
+      renderWithProviders(<Card {...defaultProps} />)
+      expect(screen.getByText(/serviceApi\.card\.title/)).toBeInTheDocument()
+    })
+
+    it('should render card title', () => {
+      renderWithProviders(<Card {...defaultProps} />)
+      expect(screen.getByText(/serviceApi\.card\.title/)).toBeInTheDocument()
+    })
+
+    it('should render enabled status', () => {
+      renderWithProviders(<Card {...defaultProps} />)
+      expect(screen.getByText(/serviceApi\.enabled/)).toBeInTheDocument()
+    })
+
+    it('should render endpoint label', () => {
+      renderWithProviders(<Card {...defaultProps} />)
+      expect(screen.getByText(/serviceApi\.card\.endpoint/)).toBeInTheDocument()
+    })
+
+    it('should render the API base URL', () => {
+      renderWithProviders(<Card {...defaultProps} />)
+      expect(screen.getByText('https://api.dify.ai/v1')).toBeInTheDocument()
+    })
+
+    it('should render API key button', () => {
+      renderWithProviders(<Card {...defaultProps} />)
+      expect(screen.getByText(/serviceApi\.card\.apiKey/)).toBeInTheDocument()
+    })
+
+    it('should render API reference button', () => {
+      renderWithProviders(<Card {...defaultProps} />)
+      expect(screen.getByText(/serviceApi\.card\.apiReference/)).toBeInTheDocument()
+    })
+  })
+
+  // Props: tests different apiBaseUrl values
+  describe('Props', () => {
+    it('should display provided apiBaseUrl', () => {
+      renderWithProviders(<Card apiBaseUrl="https://custom-api.example.com" />)
+      expect(screen.getByText('https://custom-api.example.com')).toBeInTheDocument()
+    })
+
+    it('should show green indicator when apiBaseUrl is provided', () => {
+      renderWithProviders(<Card apiBaseUrl="https://api.dify.ai" />)
+      // The Indicator component receives color="green" when apiBaseUrl is truthy
+      const statusText = screen.getByText(/serviceApi\.enabled/)
+      expect(statusText).toHaveClass('text-text-success')
+    })
+
+    it('should show yellow indicator when apiBaseUrl is empty', () => {
+      renderWithProviders(<Card apiBaseUrl="" />)
+      // Still shows "enabled" text but indicator color differs
+      expect(screen.getByText(/serviceApi\.enabled/)).toBeInTheDocument()
+    })
+  })
+
+  // User Interactions: tests button clicks and modal
+  describe('User Interactions', () => {
+    it('should open secret key modal when API key button is clicked', () => {
+      renderWithProviders(<Card {...defaultProps} />)
+
+      const apiKeyButton = screen.getByText(/serviceApi\.card\.apiKey/).closest('button')
+      fireEvent.click(apiKeyButton!)
+
+      // SecretKeyModal should appear with isShow=true
+      // The modal renders when isSecretKeyModalVisible becomes true
+      // We verify the modal is rendered in the DOM
+      expect(screen.getByText(/serviceApi\.card\.apiKey/)).toBeInTheDocument()
+    })
+
+    it('should render API reference as a link', () => {
+      renderWithProviders(<Card {...defaultProps} />)
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('href', 'https://docs.dify.ai/api-reference/datasets')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+  })
+
+  // Styles: verifies container structure
+  describe('Styles', () => {
+    it('should have correct container width', () => {
+      const { container } = renderWithProviders(<Card {...defaultProps} />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('w-[360px]')
+    })
+
+    it('should have rounded corners', () => {
+      const { container } = renderWithProviders(<Card {...defaultProps} />)
+      const wrapper = container.firstChild as HTMLElement
+      expect(wrapper).toHaveClass('rounded-xl')
+    })
+  })
+
+  // Edge Cases: tests empty/long URLs
+  describe('Edge Cases', () => {
+    it('should handle empty apiBaseUrl', () => {
+      renderWithProviders(<Card apiBaseUrl="" />)
+      // Should still render the structure
+      expect(screen.getByText(/serviceApi\.card\.endpoint/)).toBeInTheDocument()
+    })
+
+    it('should handle very long apiBaseUrl', () => {
+      const longUrl = `https://api.dify.ai/${'path/'.repeat(50)}`
+      renderWithProviders(<Card apiBaseUrl={longUrl} />)
+      expect(screen.getByText(longUrl)).toBeInTheDocument()
+    })
+
+    it('should handle apiBaseUrl with special characters', () => {
+      const specialUrl = 'https://api.dify.ai/v1?key=value&foo=bar'
+      renderWithProviders(<Card apiBaseUrl={specialUrl} />)
+      expect(screen.getByText(specialUrl)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/formatted-text/index.spec.tsx b/web/app/components/datasets/formatted-text/index.spec.tsx
new file mode 100644
index 0000000000..ea46d58b9a
--- /dev/null
+++ b/web/app/components/datasets/formatted-text/index.spec.tsx
@@ -0,0 +1,552 @@
+import type { ReactNode } from 'react'
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { SliceContainer, SliceContent, SliceDivider, SliceLabel } from './flavours/shared'
+import { FormattedText } from './formatted'
+
+// Capture onOpenChange so tests can trigger open/close via React state
+let capturedOnOpenChange: ((open: boolean) => void) | null = null
+
+vi.mock('@floating-ui/react', () => {
+  return {
+    autoUpdate: vi.fn(),
+    flip: vi.fn(() => 'flip-middleware'),
+    shift: vi.fn(() => 'shift-middleware'),
+    offset: vi.fn(() => 'offset-middleware'),
+    inline: vi.fn(() => 'inline-middleware'),
+    useFloating: vi.fn(({ open, onOpenChange }: { open: boolean, onOpenChange: (v: boolean) => void }) => {
+      capturedOnOpenChange = onOpenChange
+      return {
+        refs: {
+          setReference: vi.fn(),
+          setFloating: vi.fn(),
+        },
+        floatingStyles: { position: 'absolute' as const, top: 0, left: 0 },
+        context: { open, onOpenChange },
+      }
+    }),
+    useHover: vi.fn(() => ({})),
+    useDismiss: vi.fn(() => ({})),
+    useRole: vi.fn(() => ({})),
+    useInteractions: vi.fn(() => ({
+      getReferenceProps: vi.fn(() => ({})),
+      getFloatingProps: vi.fn(() => ({})),
+    })),
+    FloatingFocusManager: ({ children }: { children: ReactNode }) => (
+      <div data-testid="floating-focus-manager">{children}</div>
+    ),
+  }
+})
+
+// Lazy import after mocks are set up
+const { EditSlice } = await import('./flavours/edit-slice')
+const { PreviewSlice } = await import('./flavours/preview-slice')
+
+/** Helper: find the leaf span that contains the zero-width space (SliceDivider) */
+const findDividerSpan = (container: HTMLElement): HTMLSpanElement | undefined => {
+  const spans = container.querySelectorAll('span')
+  return Array.from(spans).find(
+    s => s.children.length === 0 && s.textContent?.includes('\u200B'),
+  )
+}
+
+afterEach(() => {
+  cleanup()
+})
+
+// Tests for FormattedText - a paragraph wrapper with default leading-7 class
+describe('FormattedText', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render children when provided', () => {
+    render(<FormattedText>Hello World</FormattedText>)
+
+    expect(screen.getByText('Hello World')).toBeInTheDocument()
+  })
+
+  it('should render as a p element', () => {
+    render(<FormattedText>content</FormattedText>)
+
+    expect(screen.getByText('content').tagName).toBe('P')
+  })
+
+  it('should apply default leading-7 class', () => {
+    render(<FormattedText>text</FormattedText>)
+
+    expect(screen.getByText('text')).toHaveClass('leading-7')
+  })
+
+  it('should merge custom className with default class', () => {
+    render(<FormattedText className="custom-class">text</FormattedText>)
+
+    const el = screen.getByText('text')
+    expect(el).toHaveClass('leading-7')
+    expect(el).toHaveClass('custom-class')
+  })
+
+  it('should pass rest props to the p element', () => {
+    render(<FormattedText data-testid="formatted" id="my-id">text</FormattedText>)
+
+    const el = screen.getByTestId('formatted')
+    expect(el).toHaveAttribute('id', 'my-id')
+  })
+
+  it('should render nested elements as children', () => {
+    render(
+      <FormattedText>
+        <span>nested</span>
+      </FormattedText>,
+    )
+
+    expect(screen.getByText('nested')).toBeInTheDocument()
+  })
+
+  it('should render with empty children without crashing', () => {
+    const { container } = render(<FormattedText />)
+
+    expect(container.querySelector('p')).toBeInTheDocument()
+  })
+})
+
+// Tests for shared slice wrapper components
+describe('SliceContainer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render as a span element', () => {
+    render(<SliceContainer data-testid="container" />)
+
+    expect(screen.getByTestId('container').tagName).toBe('SPAN')
+  })
+
+  it('should apply default className', () => {
+    render(<SliceContainer data-testid="container" />)
+
+    expect(screen.getByTestId('container')).toHaveClass('group', 'mr-1', 'select-none', 'align-bottom', 'text-sm')
+  })
+
+  it('should merge custom className', () => {
+    render(<SliceContainer data-testid="container" className="extra" />)
+
+    const el = screen.getByTestId('container')
+    expect(el).toHaveClass('group')
+    expect(el).toHaveClass('extra')
+  })
+
+  it('should pass rest props to span', () => {
+    render(<SliceContainer data-testid="container" id="slice-1" />)
+
+    expect(screen.getByTestId('container')).toHaveAttribute('id', 'slice-1')
+  })
+
+  it('should have correct displayName', () => {
+    expect(SliceContainer.displayName).toBe('SliceContainer')
+  })
+})
+
+describe('SliceLabel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render children', () => {
+    render(<SliceLabel>Label Text</SliceLabel>)
+
+    expect(screen.getByText('Label Text')).toBeInTheDocument()
+  })
+
+  it('should apply default classes including uppercase and bg classes', () => {
+    render(<SliceLabel data-testid="label">L</SliceLabel>)
+
+    const outer = screen.getByTestId('label')
+    expect(outer).toHaveClass('uppercase')
+    expect(outer).toHaveClass('px-1')
+  })
+
+  it('should merge custom className', () => {
+    render(<SliceLabel data-testid="label" className="custom">L</SliceLabel>)
+
+    expect(screen.getByTestId('label')).toHaveClass('custom')
+  })
+
+  it('should apply labelInnerClassName to inner span', () => {
+    render(<SliceLabel labelInnerClassName="inner-custom">L</SliceLabel>)
+
+    const inner = screen.getByText('L')
+    expect(inner).toHaveClass('text-nowrap')
+    expect(inner).toHaveClass('inner-custom')
+  })
+
+  it('should have correct displayName', () => {
+    expect(SliceLabel.displayName).toBe('SliceLabel')
+  })
+
+  it('should pass rest props', () => {
+    render(<SliceLabel data-testid="label" aria-label="chunk label">L</SliceLabel>)
+
+    expect(screen.getByTestId('label')).toHaveAttribute('aria-label', 'chunk label')
+  })
+})
+
+describe('SliceContent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render children', () => {
+    render(<SliceContent>Some content</SliceContent>)
+
+    expect(screen.getByText('Some content')).toBeInTheDocument()
+  })
+
+  it('should apply default classes', () => {
+    render(<SliceContent data-testid="content">text</SliceContent>)
+
+    const el = screen.getByTestId('content')
+    expect(el).toHaveClass('whitespace-pre-line', 'break-all', 'px-1', 'leading-7')
+  })
+
+  it('should merge custom className', () => {
+    render(<SliceContent data-testid="content" className="my-class">text</SliceContent>)
+
+    expect(screen.getByTestId('content')).toHaveClass('my-class')
+  })
+
+  it('should have correct displayName', () => {
+    expect(SliceContent.displayName).toBe('SliceContent')
+  })
+
+  it('should pass rest props', () => {
+    render(<SliceContent data-testid="content" title="hover">text</SliceContent>)
+
+    expect(screen.getByTestId('content')).toHaveAttribute('title', 'hover')
+  })
+})
+
+describe('SliceDivider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render a span element', () => {
+    render(<SliceDivider data-testid="divider" />)
+
+    expect(screen.getByTestId('divider').tagName).toBe('SPAN')
+  })
+
+  it('should contain a zero-width space character', () => {
+    render(<SliceDivider data-testid="divider" />)
+
+    expect(screen.getByTestId('divider').textContent).toContain('\u200B')
+  })
+
+  it('should apply default classes', () => {
+    render(<SliceDivider data-testid="divider" />)
+
+    expect(screen.getByTestId('divider')).toHaveClass('px-[1px]', 'text-sm')
+  })
+
+  it('should merge custom className', () => {
+    render(<SliceDivider data-testid="divider" className="extra" />)
+
+    expect(screen.getByTestId('divider')).toHaveClass('extra')
+  })
+
+  it('should have correct displayName', () => {
+    expect(SliceDivider.displayName).toBe('SliceDivider')
+  })
+
+  it('should pass rest props', () => {
+    render(<SliceDivider data-testid="divider" id="d1" />)
+
+    expect(screen.getByTestId('divider')).toHaveAttribute('id', 'd1')
+  })
+})
+
+// Tests for EditSlice - floating delete button on hover
+describe('EditSlice', () => {
+  const defaultProps = {
+    label: 'S1',
+    text: 'Sample text content',
+    onDelete: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    capturedOnOpenChange = null
+  })
+
+  it('should render label and text', () => {
+    render(<EditSlice {...defaultProps} />)
+
+    expect(screen.getByText('S1')).toBeInTheDocument()
+    expect(screen.getByText('Sample text content')).toBeInTheDocument()
+  })
+
+  it('should render divider by default when showDivider is true', () => {
+    const { container } = render(<EditSlice {...defaultProps} />)
+
+    expect(findDividerSpan(container)).toBeTruthy()
+  })
+
+  it('should hide divider when showDivider is false', () => {
+    const { container } = render(<EditSlice {...defaultProps} showDivider={false} />)
+
+    expect(findDividerSpan(container)).toBeUndefined()
+  })
+
+  it('should not show delete button when floating is closed', () => {
+    render(<EditSlice {...defaultProps} />)
+
+    expect(screen.queryByTestId('floating-focus-manager')).not.toBeInTheDocument()
+  })
+
+  it('should show delete button when onOpenChange triggers open', () => {
+    render(<EditSlice {...defaultProps} />)
+
+    // Simulate floating-ui hover triggering open via the captured state setter
+    act(() => {
+      capturedOnOpenChange?.(true)
+    })
+
+    expect(screen.getByTestId('floating-focus-manager')).toBeInTheDocument()
+  })
+
+  it('should call onDelete when delete button is clicked', () => {
+    const onDelete = vi.fn()
+    render(<EditSlice {...defaultProps} onDelete={onDelete} />)
+
+    // Open the floating UI
+    act(() => {
+      capturedOnOpenChange?.(true)
+    })
+
+    const deleteBtn = screen.getByRole('button')
+    fireEvent.click(deleteBtn)
+
+    expect(onDelete).toHaveBeenCalledTimes(1)
+  })
+
+  it('should close floating after delete button is clicked', () => {
+    render(<EditSlice {...defaultProps} />)
+
+    act(() => {
+      capturedOnOpenChange?.(true)
+    })
+    expect(screen.getByTestId('floating-focus-manager')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button'))
+
+    // setDelBtnShow(false) is called after onDelete
+    expect(screen.queryByTestId('floating-focus-manager')).not.toBeInTheDocument()
+  })
+
+  it('should apply custom className to SliceContainer', () => {
+    render(<EditSlice {...defaultProps} data-testid="edit-slice" className="custom-slice" />)
+
+    expect(screen.getByTestId('edit-slice')).toHaveClass('custom-slice')
+  })
+
+  it('should apply labelClassName to SliceLabel', () => {
+    render(<EditSlice {...defaultProps} labelClassName="label-extra" />)
+
+    const labelEl = screen.getByText('S1').parentElement
+    expect(labelEl).toHaveClass('label-extra')
+  })
+
+  it('should apply contentClassName to SliceContent', () => {
+    render(<EditSlice {...defaultProps} contentClassName="content-extra" />)
+
+    expect(screen.getByText('Sample text content')).toHaveClass('content-extra')
+  })
+
+  it('should apply labelInnerClassName to SliceLabel inner span', () => {
+    render(<EditSlice {...defaultProps} labelInnerClassName="inner-label" />)
+
+    expect(screen.getByText('S1')).toHaveClass('inner-label')
+  })
+
+  it('should apply destructive styles when hovering on delete button container', async () => {
+    render(<EditSlice {...defaultProps} />)
+
+    // Open floating
+    act(() => {
+      capturedOnOpenChange?.(true)
+    })
+
+    // Hover on the floating span to trigger destructive style
+    const floatingSpan = screen.getByTestId('floating-focus-manager').firstElementChild as HTMLElement
+    fireEvent.mouseEnter(floatingSpan)
+
+    await waitFor(() => {
+      const labelEl = screen.getByText('S1').parentElement
+      expect(labelEl).toHaveClass('!bg-state-destructive-solid')
+      expect(labelEl).toHaveClass('!text-text-primary-on-surface')
+    })
+
+    // Content should also get destructive style
+    expect(screen.getByText('Sample text content')).toHaveClass('!bg-state-destructive-hover-alt')
+  })
+
+  it('should remove destructive styles when mouse leaves delete button container', async () => {
+    render(<EditSlice {...defaultProps} />)
+
+    act(() => {
+      capturedOnOpenChange?.(true)
+    })
+
+    const floatingSpan = screen.getByTestId('floating-focus-manager').firstElementChild as HTMLElement
+    fireEvent.mouseEnter(floatingSpan)
+
+    await waitFor(() => {
+      expect(screen.getByText('S1').parentElement).toHaveClass('!bg-state-destructive-solid')
+    })
+
+    fireEvent.mouseLeave(floatingSpan)
+
+    await waitFor(() => {
+      expect(screen.getByText('S1').parentElement).not.toHaveClass('!bg-state-destructive-solid')
+      expect(screen.getByText('Sample text content')).not.toHaveClass('!bg-state-destructive-hover-alt')
+    })
+  })
+
+  it('should apply destructive style to divider when hovering delete button', async () => {
+    const { container } = render(<EditSlice {...defaultProps} />)
+
+    act(() => {
+      capturedOnOpenChange?.(true)
+    })
+
+    const floatingSpan = screen.getByTestId('floating-focus-manager').firstElementChild as HTMLElement
+    fireEvent.mouseEnter(floatingSpan)
+
+    await waitFor(() => {
+      const divider = findDividerSpan(container)
+      expect(divider).toHaveClass('!bg-state-destructive-hover-alt')
+    })
+  })
+
+  it('should pass rest props to SliceContainer', () => {
+    render(<EditSlice {...defaultProps} data-testid="edit-slice" />)
+
+    expect(screen.getByTestId('edit-slice')).toBeInTheDocument()
+  })
+
+  it('should stop event propagation on delete click', () => {
+    const parentClick = vi.fn()
+    render(
+      <div onClick={parentClick}>
+        <EditSlice {...defaultProps} />
+      </div>,
+    )
+
+    act(() => {
+      capturedOnOpenChange?.(true)
+    })
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(parentClick).not.toHaveBeenCalled()
+  })
+})
+
+// Tests for PreviewSlice - tooltip on hover
+describe('PreviewSlice', () => {
+  const defaultProps = {
+    label: 'P1',
+    text: 'Preview text',
+    tooltip: 'Tooltip content',
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    capturedOnOpenChange = null
+  })
+
+  it('should render label and text', () => {
+    render(<PreviewSlice {...defaultProps} />)
+
+    expect(screen.getByText('P1')).toBeInTheDocument()
+    expect(screen.getByText('Preview text')).toBeInTheDocument()
+  })
+
+  it('should not show tooltip by default', () => {
+    render(<PreviewSlice {...defaultProps} />)
+
+    expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+  })
+
+  it('should show tooltip when onOpenChange triggers open', () => {
+    render(<PreviewSlice {...defaultProps} />)
+
+    act(() => {
+      capturedOnOpenChange?.(true)
+    })
+
+    expect(screen.getByText('Tooltip content')).toBeInTheDocument()
+  })
+
+  it('should hide tooltip when onOpenChange triggers close', () => {
+    render(<PreviewSlice {...defaultProps} />)
+
+    act(() => {
+      capturedOnOpenChange?.(true)
+    })
+    expect(screen.getByText('Tooltip content')).toBeInTheDocument()
+
+    act(() => {
+      capturedOnOpenChange?.(false)
+    })
+    expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+  })
+
+  it('should always render a divider', () => {
+    const { container } = render(<PreviewSlice {...defaultProps} />)
+
+    expect(findDividerSpan(container)).toBeTruthy()
+  })
+
+  it('should apply custom className to SliceContainer', () => {
+    render(<PreviewSlice {...defaultProps} data-testid="preview-slice" className="preview-custom" />)
+
+    expect(screen.getByTestId('preview-slice')).toHaveClass('preview-custom')
+  })
+
+  it('should apply labelInnerClassName to the label inner span', () => {
+    render(<PreviewSlice {...defaultProps} labelInnerClassName="label-inner" />)
+
+    expect(screen.getByText('P1')).toHaveClass('label-inner')
+  })
+
+  it('should apply dividerClassName to SliceDivider', () => {
+    const { container } = render(<PreviewSlice {...defaultProps} dividerClassName="divider-custom" />)
+
+    const divider = findDividerSpan(container)
+    expect(divider).toHaveClass('divider-custom')
+  })
+
+  it('should pass rest props to SliceContainer', () => {
+    render(<PreviewSlice {...defaultProps} data-testid="preview-slice" />)
+
+    expect(screen.getByTestId('preview-slice')).toBeInTheDocument()
+  })
+
+  it('should render ReactNode tooltip content when open', () => {
+    render(<PreviewSlice {...defaultProps} tooltip={<strong>Rich tooltip</strong>} />)
+
+    act(() => {
+      capturedOnOpenChange?.(true)
+    })
+
+    expect(screen.getByText('Rich tooltip')).toBeInTheDocument()
+  })
+
+  it('should render ReactNode label', () => {
+    render(<PreviewSlice {...defaultProps} label={<em>Emphasis</em>} />)
+
+    expect(screen.getByText('Emphasis')).toBeInTheDocument()
+  })
+})
diff --git a/web/app/components/datasets/hit-testing/components/presentational.spec.tsx b/web/app/components/datasets/hit-testing/components/presentational.spec.tsx
new file mode 100644
index 0000000000..4a203d5aa8
--- /dev/null
+++ b/web/app/components/datasets/hit-testing/components/presentational.spec.tsx
@@ -0,0 +1,836 @@
+import type { ExternalKnowledgeBaseHitTesting, HitTestingChildChunk } from '@/models/datasets'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
+import ChildChunksItem from './child-chunks-item'
+import EmptyRecords from './empty-records'
+import Mask from './mask'
+import Textarea from './query-input/textarea'
+import ResultItemExternal from './result-item-external'
+import ResultItemFooter from './result-item-footer'
+import ResultItemMeta from './result-item-meta'
+import Score from './score'
+
+let mockIsShowDetailModal = false
+const mockShowDetailModal = vi.fn(() => {
+  mockIsShowDetailModal = true
+})
+const mockHideDetailModal = vi.fn(() => {
+  mockIsShowDetailModal = false
+})
+
+vi.mock('ahooks', () => ({
+  useBoolean: (_initial: boolean) => {
+    return [
+      mockIsShowDetailModal,
+      {
+        setTrue: mockShowDetailModal,
+        setFalse: mockHideDetailModal,
+        toggle: vi.fn(),
+        set: vi.fn(),
+      },
+    ]
+  },
+}))
+
+const createExternalPayload = (
+  overrides: Partial<ExternalKnowledgeBaseHitTesting> = {},
+): ExternalKnowledgeBaseHitTesting => ({
+  content: 'This is the chunk content for testing.',
+  title: 'Test Document Title',
+  score: 0.85,
+  metadata: {
+    'x-amz-bedrock-kb-source-uri': 's3://bucket/key',
+    'x-amz-bedrock-kb-data-source-id': 'ds-123',
+  },
+  ...overrides,
+})
+
+const createChildChunkPayload = (
+  overrides: Partial<HitTestingChildChunk> = {},
+): HitTestingChildChunk => ({
+  id: 'chunk-1',
+  content: 'Child chunk content here',
+  position: 1,
+  score: 0.75,
+  ...overrides,
+})
+
+describe('Score', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the score display component
+  describe('Rendering', () => {
+    it('should render score value with toFixed(2)', () => {
+      // Arrange & Act
+      render(<Score value={0.85} />)
+
+      // Assert
+      expect(screen.getByText('0.85')).toBeInTheDocument()
+      expect(screen.getByText('score')).toBeInTheDocument()
+    })
+
+    it('should render score progress bar with correct width', () => {
+      // Arrange & Act
+      const { container } = render(<Score value={0.75} />)
+
+      // Assert
+      const progressBar = container.querySelector('[style]')
+      expect(progressBar).toHaveStyle({ width: '75%' })
+    })
+
+    it('should render with besideChunkName styling', () => {
+      // Arrange & Act
+      const { container } = render(<Score value={0.5} besideChunkName />)
+
+      // Assert
+      const root = container.firstElementChild
+      expect(root?.className).toContain('h-[20.5px]')
+      expect(root?.className).toContain('border-l-0')
+    })
+
+    it('should render with default styling when besideChunkName is false', () => {
+      // Arrange & Act
+      const { container } = render(<Score value={0.5} />)
+
+      // Assert
+      const root = container.firstElementChild
+      expect(root?.className).toContain('h-[20px]')
+      expect(root?.className).toContain('rounded-md')
+    })
+
+    it('should remove right border when value is exactly 1', () => {
+      // Arrange & Act
+      const { container } = render(<Score value={1} />)
+
+      // Assert
+      const progressBar = container.querySelector('[style]')
+      expect(progressBar?.className).toContain('border-r-0')
+      expect(progressBar).toHaveStyle({ width: '100%' })
+    })
+
+    it('should show right border when value is less than 1', () => {
+      // Arrange & Act
+      const { container } = render(<Score value={0.5} />)
+
+      // Assert
+      const progressBar = container.querySelector('[style]')
+      expect(progressBar?.className).not.toContain('border-r-0')
+    })
+  })
+
+  // Null return tests for edge cases
+  describe('Returns null', () => {
+    it('should return null when value is null', () => {
+      // Arrange & Act
+      const { container } = render(<Score value={null} />)
+
+      // Assert
+      expect(container.innerHTML).toBe('')
+    })
+
+    it('should return null when value is 0', () => {
+      // Arrange & Act
+      const { container } = render(<Score value={0} />)
+
+      // Assert
+      expect(container.innerHTML).toBe('')
+    })
+
+    it('should return null when value is NaN', () => {
+      // Arrange & Act
+      const { container } = render(<Score value={Number.NaN} />)
+
+      // Assert
+      expect(container.innerHTML).toBe('')
+    })
+  })
+
+  // Edge case tests
+  describe('Edge Cases', () => {
+    it('should render very small score values', () => {
+      // Arrange & Act
+      render(<Score value={0.01} />)
+
+      // Assert
+      expect(screen.getByText('0.01')).toBeInTheDocument()
+    })
+
+    it('should render score with many decimals truncated to 2', () => {
+      // Arrange & Act
+      render(<Score value={0.123456} />)
+
+      // Assert
+      expect(screen.getByText('0.12')).toBeInTheDocument()
+    })
+  })
+})
+
+// ============================================================================
+// Mask Component Tests
+// ============================================================================
+
+describe('Mask', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the gradient overlay component
+  describe('Rendering', () => {
+    it('should render a gradient overlay div', () => {
+      // Arrange & Act
+      const { container } = render(<Mask />)
+
+      // Assert
+      const div = container.firstElementChild
+      expect(div).toBeInTheDocument()
+      expect(div?.className).toContain('h-12')
+      expect(div?.className).toContain('bg-gradient-to-b')
+    })
+
+    it('should apply custom className', () => {
+      // Arrange & Act
+      const { container } = render(<Mask className="custom-mask" />)
+
+      // Assert
+      expect(container.firstElementChild?.className).toContain('custom-mask')
+    })
+
+    it('should render without custom className', () => {
+      // Arrange & Act
+      const { container } = render(<Mask />)
+
+      // Assert
+      expect(container.firstElementChild).toBeInTheDocument()
+    })
+  })
+})
+
+describe('EmptyRecords', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the empty state component
+  describe('Rendering', () => {
+    it('should render the "no recent" tip text', () => {
+      // Arrange & Act
+      render(<EmptyRecords />)
+
+      // Assert
+      expect(screen.getByText(/noRecentTip/i)).toBeInTheDocument()
+    })
+
+    it('should render the history icon', () => {
+      // Arrange & Act
+      const { container } = render(<EmptyRecords />)
+
+      // Assert
+      const svg = container.querySelector('svg')
+      expect(svg).toBeInTheDocument()
+    })
+
+    it('should render inside a styled container', () => {
+      // Arrange & Act
+      const { container } = render(<EmptyRecords />)
+
+      // Assert
+      const wrapper = container.firstElementChild
+      expect(wrapper?.className).toContain('rounded-2xl')
+      expect(wrapper?.className).toContain('bg-workflow-process-bg')
+    })
+  })
+})
+
+// ============================================================================
+// Textarea Component Tests
+// ============================================================================
+
+describe('Textarea', () => {
+  const mockHandleTextChange = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the textarea with character count
+  describe('Rendering', () => {
+    it('should render a textarea element', () => {
+      // Arrange & Act
+      render(<Textarea text="" handleTextChange={mockHandleTextChange} />)
+
+      // Assert
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+
+    it('should display the current text', () => {
+      // Arrange & Act
+      render(<Textarea text="Hello world" handleTextChange={mockHandleTextChange} />)
+
+      // Assert
+      expect(screen.getByRole('textbox')).toHaveValue('Hello world')
+    })
+
+    it('should show character count', () => {
+      // Arrange & Act
+      render(<Textarea text="Hello" handleTextChange={mockHandleTextChange} />)
+
+      // Assert
+      expect(screen.getByText('5/200')).toBeInTheDocument()
+    })
+
+    it('should show 0/200 for empty text', () => {
+      // Arrange & Act
+      render(<Textarea text="" handleTextChange={mockHandleTextChange} />)
+
+      // Assert
+      expect(screen.getByText('0/200')).toBeInTheDocument()
+    })
+
+    it('should render placeholder text', () => {
+      // Arrange & Act
+      render(<Textarea text="" handleTextChange={mockHandleTextChange} />)
+
+      // Assert
+      expect(screen.getByRole('textbox')).toHaveAttribute('placeholder')
+    })
+  })
+
+  // Warning state tests for exceeding character limit
+  describe('Warning state (>200 chars)', () => {
+    it('should apply warning border when text exceeds 200 characters', () => {
+      // Arrange
+      const longText = 'A'.repeat(201)
+
+      // Act
+      const { container } = render(
+        <Textarea text={longText} handleTextChange={mockHandleTextChange} />,
+      )
+
+      // Assert
+      const wrapper = container.firstElementChild
+      expect(wrapper?.className).toContain('border-state-destructive-active')
+    })
+
+    it('should not apply warning border when text is at 200 characters', () => {
+      // Arrange
+      const text200 = 'A'.repeat(200)
+
+      // Act
+      const { container } = render(
+        <Textarea text={text200} handleTextChange={mockHandleTextChange} />,
+      )
+
+      // Assert
+      const wrapper = container.firstElementChild
+      expect(wrapper?.className).not.toContain('border-state-destructive-active')
+    })
+
+    it('should not apply warning border when text is under 200 characters', () => {
+      // Arrange & Act
+      const { container } = render(
+        <Textarea text="Short text" handleTextChange={mockHandleTextChange} />,
+      )
+
+      // Assert
+      const wrapper = container.firstElementChild
+      expect(wrapper?.className).not.toContain('border-state-destructive-active')
+    })
+
+    it('should show warning count with red styling when over 200 chars', () => {
+      // Arrange
+      const longText = 'B'.repeat(250)
+
+      // Act
+      render(<Textarea text={longText} handleTextChange={mockHandleTextChange} />)
+
+      // Assert
+      const countElement = screen.getByText('250/200')
+      expect(countElement.className).toContain('text-util-colors-red-red-600')
+    })
+
+    it('should show normal count styling when at or under 200 chars', () => {
+      // Arrange & Act
+      render(<Textarea text="Short" handleTextChange={mockHandleTextChange} />)
+
+      // Assert
+      const countElement = screen.getByText('5/200')
+      expect(countElement.className).toContain('text-text-tertiary')
+    })
+
+    it('should show red corner icon when over 200 chars', () => {
+      // Arrange
+      const longText = 'C'.repeat(201)
+
+      // Act
+      const { container } = render(
+        <Textarea text={longText} handleTextChange={mockHandleTextChange} />,
+      )
+
+      // Assert - Corner icon should have red class
+      const cornerWrapper = container.querySelector('.right-0.top-0')
+      const cornerSvg = cornerWrapper?.querySelector('svg')
+      expect(cornerSvg?.className.baseVal || cornerSvg?.getAttribute('class')).toContain('text-util-colors-red-red-100')
+    })
+  })
+
+  // User interaction tests
+  describe('User Interactions', () => {
+    it('should call handleTextChange when text is entered', () => {
+      // Arrange
+      render(<Textarea text="" handleTextChange={mockHandleTextChange} />)
+
+      // Act
+      fireEvent.change(screen.getByRole('textbox'), {
+        target: { value: 'New text' },
+      })
+
+      // Assert
+      expect(mockHandleTextChange).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+// ============================================================================
+// ResultItemFooter Component Tests
+// ============================================================================
+
+describe('ResultItemFooter', () => {
+  const mockShowDetailModal = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the result item footer
+  describe('Rendering', () => {
+    it('should render the document title', () => {
+      // Arrange & Act
+      render(
+        <ResultItemFooter
+          docType={FileAppearanceTypeEnum.document}
+          docTitle="My Document.pdf"
+          showDetailModal={mockShowDetailModal}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('My Document.pdf')).toBeInTheDocument()
+    })
+
+    it('should render the "open" button text', () => {
+      // Arrange & Act
+      render(
+        <ResultItemFooter
+          docType={FileAppearanceTypeEnum.pdf}
+          docTitle="File.pdf"
+          showDetailModal={mockShowDetailModal}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText(/open/i)).toBeInTheDocument()
+    })
+
+    it('should render the file icon', () => {
+      // Arrange & Act
+      const { container } = render(
+        <ResultItemFooter
+          docType={FileAppearanceTypeEnum.document}
+          docTitle="File.txt"
+          showDetailModal={mockShowDetailModal}
+        />,
+      )
+
+      // Assert
+      const icon = container.querySelector('svg')
+      expect(icon).toBeInTheDocument()
+    })
+  })
+
+  // User interaction tests
+  describe('User Interactions', () => {
+    it('should call showDetailModal when open button is clicked', () => {
+      // Arrange
+      render(
+        <ResultItemFooter
+          docType={FileAppearanceTypeEnum.document}
+          docTitle="Doc"
+          showDetailModal={mockShowDetailModal}
+        />,
+      )
+
+      // Act
+      const openButton = screen.getByText(/open/i).closest('.cursor-pointer') as HTMLElement
+      fireEvent.click(openButton)
+
+      // Assert
+      expect(mockShowDetailModal).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+// ============================================================================
+// ResultItemMeta Component Tests
+// ============================================================================
+
+describe('ResultItemMeta', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for the result item meta component
+  describe('Rendering', () => {
+    it('should render the segment index tag with prefix and position', () => {
+      // Arrange & Act
+      render(
+        <ResultItemMeta
+          labelPrefix="Chunk"
+          positionId={3}
+          wordCount={150}
+          score={0.9}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('Chunk-03')).toBeInTheDocument()
+    })
+
+    it('should render the word count', () => {
+      // Arrange & Act
+      render(
+        <ResultItemMeta
+          labelPrefix="Chunk"
+          positionId={1}
+          wordCount={250}
+          score={0.8}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText(/250/)).toBeInTheDocument()
+      expect(screen.getByText(/characters/i)).toBeInTheDocument()
+    })
+
+    it('should render the score component', () => {
+      // Arrange & Act
+      render(
+        <ResultItemMeta
+          labelPrefix="Chunk"
+          positionId={1}
+          wordCount={100}
+          score={0.75}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('0.75')).toBeInTheDocument()
+      expect(screen.getByText('score')).toBeInTheDocument()
+    })
+
+    it('should apply custom className', () => {
+      // Arrange & Act
+      const { container } = render(
+        <ResultItemMeta
+          className="custom-meta"
+          labelPrefix="Chunk"
+          positionId={1}
+          wordCount={100}
+          score={0.5}
+        />,
+      )
+
+      // Assert
+      expect(container.firstElementChild?.className).toContain('custom-meta')
+    })
+
+    it('should render dot separator', () => {
+      // Arrange & Act
+      render(
+        <ResultItemMeta
+          labelPrefix="Chunk"
+          positionId={1}
+          wordCount={100}
+          score={0.5}
+        />,
+      )
+
+      // Assert
+      expect(screen.getByText('·')).toBeInTheDocument()
+    })
+  })
+})
+
+// ============================================================================
+// ChildChunksItem Component Tests
+// ============================================================================
+
+describe('ChildChunksItem', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests for child chunk items
+  describe('Rendering', () => {
+    it('should render the position label', () => {
+      // Arrange
+      const payload = createChildChunkPayload({ position: 3 })
+
+      // Act
+      render(<ChildChunksItem payload={payload} isShowAll={false} />)
+
+      // Assert
+      expect(screen.getByText(/C-/)).toBeInTheDocument()
+      expect(screen.getByText(/3/)).toBeInTheDocument()
+    })
+
+    it('should render the score component', () => {
+      // Arrange
+      const payload = createChildChunkPayload({ score: 0.88 })
+
+      // Act
+      render(<ChildChunksItem payload={payload} isShowAll={false} />)
+
+      // Assert
+      expect(screen.getByText('0.88')).toBeInTheDocument()
+    })
+
+    it('should render the content text', () => {
+      // Arrange
+      const payload = createChildChunkPayload({ content: 'Sample chunk text' })
+
+      // Act
+      render(<ChildChunksItem payload={payload} isShowAll={false} />)
+
+      // Assert
+      expect(screen.getByText('Sample chunk text')).toBeInTheDocument()
+    })
+
+    it('should render with besideChunkName styling on Score', () => {
+      // Arrange
+      const payload = createChildChunkPayload({ score: 0.6 })
+
+      // Act
+      const { container } = render(
+        <ChildChunksItem payload={payload} isShowAll={false} />,
+      )
+
+      // Assert - Score with besideChunkName has h-[20.5px] and border-l-0
+      const scoreEl = container.querySelector('[class*="h-\\[20\\.5px\\]"]')
+      expect(scoreEl).toBeInTheDocument()
+    })
+  })
+
+  // Line clamping behavior tests
+  describe('Line Clamping', () => {
+    it('should apply line-clamp-2 when isShowAll is false', () => {
+      // Arrange
+      const payload = createChildChunkPayload()
+
+      // Act
+      const { container } = render(
+        <ChildChunksItem payload={payload} isShowAll={false} />,
+      )
+
+      // Assert
+      const root = container.firstElementChild
+      expect(root?.className).toContain('line-clamp-2')
+    })
+
+    it('should not apply line-clamp-2 when isShowAll is true', () => {
+      // Arrange
+      const payload = createChildChunkPayload()
+
+      // Act
+      const { container } = render(
+        <ChildChunksItem payload={payload} isShowAll={true} />,
+      )
+
+      // Assert
+      const root = container.firstElementChild
+      expect(root?.className).not.toContain('line-clamp-2')
+    })
+  })
+
+  // Edge case tests
+  describe('Edge Cases', () => {
+    it('should render with score 0 (Score returns null)', () => {
+      // Arrange
+      const payload = createChildChunkPayload({ score: 0 })
+
+      // Act
+      render(<ChildChunksItem payload={payload} isShowAll={false} />)
+
+      // Assert - content still renders, score returns null
+      expect(screen.getByText('Child chunk content here')).toBeInTheDocument()
+      expect(screen.queryByText('score')).not.toBeInTheDocument()
+    })
+  })
+})
+
+// ============================================================================
+// ResultItemExternal Component Tests
+// ============================================================================
+
+describe('ResultItemExternal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsShowDetailModal = false
+  })
+
+  // Rendering tests for the external result item card
+  describe('Rendering', () => {
+    it('should render the content text', () => {
+      // Arrange
+      const payload = createExternalPayload({ content: 'External result content' })
+
+      // Act
+      render(<ResultItemExternal payload={payload} positionId={1} />)
+
+      // Assert
+      expect(screen.getByText('External result content')).toBeInTheDocument()
+    })
+
+    it('should render the meta info with position and score', () => {
+      // Arrange
+      const payload = createExternalPayload({ score: 0.92 })
+
+      // Act
+      render(<ResultItemExternal payload={payload} positionId={5} />)
+
+      // Assert
+      expect(screen.getByText('Chunk-05')).toBeInTheDocument()
+      expect(screen.getByText('0.92')).toBeInTheDocument()
+    })
+
+    it('should render the footer with document title', () => {
+      // Arrange
+      const payload = createExternalPayload({ title: 'Knowledge Base Doc' })
+
+      // Act
+      render(<ResultItemExternal payload={payload} positionId={1} />)
+
+      // Assert
+      expect(screen.getByText('Knowledge Base Doc')).toBeInTheDocument()
+    })
+
+    it('should render the word count from content length', () => {
+      // Arrange
+      const content = 'Hello World' // 11 chars
+      const payload = createExternalPayload({ content })
+
+      // Act
+      render(<ResultItemExternal payload={payload} positionId={1} />)
+
+      // Assert
+      expect(screen.getByText(/11/)).toBeInTheDocument()
+    })
+  })
+
+  // Detail modal tests
+  describe('Detail Modal', () => {
+    it('should not render modal by default', () => {
+      // Arrange
+      const payload = createExternalPayload()
+
+      // Act
+      render(<ResultItemExternal payload={payload} positionId={1} />)
+
+      // Assert
+      expect(screen.queryByText(/chunkDetail/i)).not.toBeInTheDocument()
+    })
+
+    it('should call showDetailModal when card is clicked', () => {
+      // Arrange
+      const payload = createExternalPayload()
+      mockIsShowDetailModal = false
+
+      render(<ResultItemExternal payload={payload} positionId={1} />)
+
+      // Act - click the card to open modal
+      const card = screen.getByText(payload.content).closest('.cursor-pointer') as HTMLElement
+      fireEvent.click(card)
+
+      // Assert - showDetailModal (setTrue) was invoked
+      expect(mockShowDetailModal).toHaveBeenCalled()
+    })
+
+    it('should render modal content when isShowDetailModal is true', () => {
+      // Arrange - modal is already open
+      const payload = createExternalPayload()
+      mockIsShowDetailModal = true
+
+      // Act
+      render(<ResultItemExternal payload={payload} positionId={1} />)
+
+      // Assert - modal title should appear
+      expect(screen.getByText(/chunkDetail/i)).toBeInTheDocument()
+    })
+
+    it('should render full content in the modal', () => {
+      // Arrange
+      const payload = createExternalPayload({ content: 'Full modal content text' })
+      mockIsShowDetailModal = true
+
+      // Act
+      render(<ResultItemExternal payload={payload} positionId={1} />)
+
+      // Assert - content appears both in card and modal
+      const contentElements = screen.getAllByText('Full modal content text')
+      expect(contentElements.length).toBeGreaterThanOrEqual(2)
+    })
+
+    it('should render meta info in the modal', () => {
+      // Arrange
+      const payload = createExternalPayload({ score: 0.77 })
+      mockIsShowDetailModal = true
+
+      // Act
+      render(<ResultItemExternal payload={payload} positionId={3} />)
+
+      // Assert - meta appears in both card and modal
+      const chunkTags = screen.getAllByText('Chunk-03')
+      expect(chunkTags.length).toBe(2)
+      const scores = screen.getAllByText('0.77')
+      expect(scores.length).toBe(2)
+    })
+  })
+
+  // Edge case tests
+  describe('Edge Cases', () => {
+    it('should render with empty content', () => {
+      // Arrange
+      const payload = createExternalPayload({ content: '' })
+
+      // Act
+      render(<ResultItemExternal payload={payload} positionId={1} />)
+
+      // Assert - component still renders
+      expect(screen.getByText('Test Document Title')).toBeInTheDocument()
+    })
+
+    it('should render with score of 0 (Score returns null)', () => {
+      // Arrange
+      const payload = createExternalPayload({ score: 0 })
+
+      // Act
+      render(<ResultItemExternal payload={payload} positionId={1} />)
+
+      // Assert - no score displayed
+      expect(screen.queryByText('score')).not.toBeInTheDocument()
+    })
+
+    it('should handle large positionId values', () => {
+      // Arrange
+      const payload = createExternalPayload()
+
+      // Act
+      render(<ResultItemExternal payload={payload} positionId={999} />)
+
+      // Assert
+      expect(screen.getByText('Chunk-999')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/hit-testing/utils/extension-to-file-type.spec.ts b/web/app/components/datasets/hit-testing/utils/extension-to-file-type.spec.ts
new file mode 100644
index 0000000000..a9b137d85e
--- /dev/null
+++ b/web/app/components/datasets/hit-testing/utils/extension-to-file-type.spec.ts
@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest'
+import { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
+import { extensionToFileType } from './extension-to-file-type'
+
+describe('extensionToFileType', () => {
+  // PDF extension
+  describe('pdf', () => {
+    it('should return pdf type when extension is pdf', () => {
+      expect(extensionToFileType('pdf')).toBe(FileAppearanceTypeEnum.pdf)
+    })
+  })
+
+  // Word extensions
+  describe('word', () => {
+    it('should return word type when extension is doc', () => {
+      expect(extensionToFileType('doc')).toBe(FileAppearanceTypeEnum.word)
+    })
+
+    it('should return word type when extension is docx', () => {
+      expect(extensionToFileType('docx')).toBe(FileAppearanceTypeEnum.word)
+    })
+  })
+
+  // Markdown extensions
+  describe('markdown', () => {
+    it('should return markdown type when extension is md', () => {
+      expect(extensionToFileType('md')).toBe(FileAppearanceTypeEnum.markdown)
+    })
+
+    it('should return markdown type when extension is mdx', () => {
+      expect(extensionToFileType('mdx')).toBe(FileAppearanceTypeEnum.markdown)
+    })
+
+    it('should return markdown type when extension is markdown', () => {
+      expect(extensionToFileType('markdown')).toBe(FileAppearanceTypeEnum.markdown)
+    })
+  })
+
+  // Excel / CSV extensions
+  describe('excel', () => {
+    it('should return excel type when extension is csv', () => {
+      expect(extensionToFileType('csv')).toBe(FileAppearanceTypeEnum.excel)
+    })
+
+    it('should return excel type when extension is xls', () => {
+      expect(extensionToFileType('xls')).toBe(FileAppearanceTypeEnum.excel)
+    })
+
+    it('should return excel type when extension is xlsx', () => {
+      expect(extensionToFileType('xlsx')).toBe(FileAppearanceTypeEnum.excel)
+    })
+  })
+
+  // Document extensions
+  describe('document', () => {
+    it('should return document type when extension is txt', () => {
+      expect(extensionToFileType('txt')).toBe(FileAppearanceTypeEnum.document)
+    })
+
+    it('should return document type when extension is epub', () => {
+      expect(extensionToFileType('epub')).toBe(FileAppearanceTypeEnum.document)
+    })
+
+    it('should return document type when extension is html', () => {
+      expect(extensionToFileType('html')).toBe(FileAppearanceTypeEnum.document)
+    })
+
+    it('should return document type when extension is htm', () => {
+      expect(extensionToFileType('htm')).toBe(FileAppearanceTypeEnum.document)
+    })
+
+    it('should return document type when extension is xml', () => {
+      expect(extensionToFileType('xml')).toBe(FileAppearanceTypeEnum.document)
+    })
+  })
+
+  // PPT extensions
+  describe('ppt', () => {
+    it('should return ppt type when extension is ppt', () => {
+      expect(extensionToFileType('ppt')).toBe(FileAppearanceTypeEnum.ppt)
+    })
+
+    it('should return ppt type when extension is pptx', () => {
+      expect(extensionToFileType('pptx')).toBe(FileAppearanceTypeEnum.ppt)
+    })
+  })
+
+  // Default / unknown extensions
+  describe('custom (default)', () => {
+    it('should return custom type when extension is empty string', () => {
+      expect(extensionToFileType('')).toBe(FileAppearanceTypeEnum.custom)
+    })
+
+    it('should return custom type when extension is unknown', () => {
+      expect(extensionToFileType('zip')).toBe(FileAppearanceTypeEnum.custom)
+    })
+
+    it('should return custom type when extension is uppercase (case-sensitive match)', () => {
+      expect(extensionToFileType('PDF')).toBe(FileAppearanceTypeEnum.custom)
+    })
+
+    it('should return custom type when extension is mixed case', () => {
+      expect(extensionToFileType('Docx')).toBe(FileAppearanceTypeEnum.custom)
+    })
+
+    it('should return custom type when extension has leading dot', () => {
+      expect(extensionToFileType('.pdf')).toBe(FileAppearanceTypeEnum.custom)
+    })
+
+    it('should return custom type when extension has whitespace', () => {
+      expect(extensionToFileType(' pdf ')).toBe(FileAppearanceTypeEnum.custom)
+    })
+
+    it('should return custom type for image-like extensions', () => {
+      expect(extensionToFileType('png')).toBe(FileAppearanceTypeEnum.custom)
+      expect(extensionToFileType('jpg')).toBe(FileAppearanceTypeEnum.custom)
+    })
+  })
+})
diff --git a/web/app/components/datasets/list/dataset-card/index.spec.tsx b/web/app/components/datasets/list/dataset-card/index.spec.tsx
index dd27eaa262..be97bea649 100644
--- a/web/app/components/datasets/list/dataset-card/index.spec.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.spec.tsx
@@ -3,254 +3,332 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
 import { ChunkingMode, DatasetPermission, DataSourceType } from '@/models/datasets'
-import { RETRIEVE_METHOD } from '@/types/app'
-import DatasetCard from './index'
+import DatasetCardFooter from './components/dataset-card-footer'
+import Description from './components/description'
+import OperationItem from './operation-item'
+import Operations from './operations'
 
-// Mock next/navigation
-const mockPush = vi.fn()
-vi.mock('next/navigation', () => ({
-  useRouter: () => ({ push: mockPush }),
-}))
-
-// Mock ahooks useHover
-vi.mock('ahooks', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('ahooks')>()
-  return {
-    ...actual,
-    useHover: () => false,
-  }
-})
-
-// Mock app context
-vi.mock('@/context/app-context', () => ({
-  useSelector: () => false,
-}))
-
-// Mock the useDatasetCardState hook
-vi.mock('./hooks/use-dataset-card-state', () => ({
-  useDatasetCardState: () => ({
-    tags: [],
-    setTags: vi.fn(),
-    modalState: {
-      showRenameModal: false,
-      showConfirmDelete: false,
-      confirmMessage: '',
-    },
-    openRenameModal: vi.fn(),
-    closeRenameModal: vi.fn(),
-    closeConfirmDelete: vi.fn(),
-    handleExportPipeline: vi.fn(),
-    detectIsUsedByApp: vi.fn(),
-    onConfirmDelete: vi.fn(),
-  }),
-}))
-
-// Mock the RenameDatasetModal
-vi.mock('../../rename-modal', () => ({
-  default: () => null,
-}))
-
-// Mock useFormatTimeFromNow hook
+// Mock external hooks only
 vi.mock('@/hooks/use-format-time-from-now', () => ({
   useFormatTimeFromNow: () => ({
     formatTimeFromNow: (timestamp: number) => {
       const date = new Date(timestamp)
-      return date.toLocaleDateString()
+      return `${date.toLocaleDateString()}`
     },
   }),
 }))
 
-// Mock useKnowledge hook
-vi.mock('@/hooks/use-knowledge', () => ({
-  useKnowledge: () => ({
-    formatIndexingTechniqueAndMethod: () => 'High Quality',
-  }),
-}))
-
-describe('DatasetCard', () => {
-  const createMockDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
-    id: 'dataset-1',
-    name: 'Test Dataset',
-    description: 'Test description',
-    provider: 'vendor',
-    permission: DatasetPermission.allTeamMembers,
-    data_source_type: DataSourceType.FILE,
-    indexing_technique: IndexingType.QUALIFIED,
-    embedding_available: true,
-    app_count: 5,
-    document_count: 10,
-    word_count: 1000,
-    created_at: 1609459200,
-    updated_at: 1609545600,
-    tags: [],
-    embedding_model: 'text-embedding-ada-002',
-    embedding_model_provider: 'openai',
-    created_by: 'user-1',
-    doc_form: ChunkingMode.text,
-    runtime_mode: 'general',
-    is_published: true,
-    total_available_documents: 10,
-    icon_info: {
-      icon: '📙',
-      icon_type: 'emoji' as const,
-      icon_background: '#FFF4ED',
-      icon_url: '',
-    },
-    retrieval_model_dict: {
-      search_method: RETRIEVE_METHOD.semantic,
-    },
-    author_name: 'Test User',
-    ...overrides,
-  } as DataSet)
-
-  const defaultProps = {
-    dataset: createMockDataset(),
-    onSuccess: vi.fn(),
-  }
+// Factory function for DataSet mock data
+const createMockDataset = (overrides: Partial<DataSet> = {}): DataSet => ({
+  id: 'dataset-1',
+  name: 'Test Dataset',
+  description: 'Test description',
+  provider: 'vendor',
+  permission: DatasetPermission.allTeamMembers,
+  data_source_type: DataSourceType.FILE,
+  indexing_technique: IndexingType.QUALIFIED,
+  embedding_available: true,
+  app_count: 5,
+  document_count: 10,
+  word_count: 1000,
+  created_at: 1609459200,
+  updated_at: 1609545600,
+  tags: [],
+  embedding_model: 'text-embedding-ada-002',
+  embedding_model_provider: 'openai',
+  created_by: 'user-1',
+  doc_form: ChunkingMode.text,
+  total_available_documents: 10,
+  runtime_mode: 'general',
+  ...overrides,
+} as DataSet)
 
+describe('DatasetCard Integration', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<DatasetCard {...defaultProps} />)
-      expect(screen.getByText('Test Dataset')).toBeInTheDocument()
+  // Integration tests for Description component
+  describe('Description', () => {
+    describe('Rendering', () => {
+      it('should render description text from dataset', () => {
+        const dataset = createMockDataset({ description: 'My knowledge base' })
+        render(<Description dataset={dataset} />)
+        expect(screen.getByText('My knowledge base')).toBeInTheDocument()
+      })
+
+      it('should set title attribute to description', () => {
+        const dataset = createMockDataset({ description: 'Hover text' })
+        render(<Description dataset={dataset} />)
+        expect(screen.getByTitle('Hover text')).toBeInTheDocument()
+      })
     })
 
-    it('should render dataset name', () => {
-      const dataset = createMockDataset({ name: 'Custom Dataset Name' })
-      render(<DatasetCard {...defaultProps} dataset={dataset} />)
-      expect(screen.getByText('Custom Dataset Name')).toBeInTheDocument()
+    describe('Props', () => {
+      it('should apply opacity-30 when embedding_available is false', () => {
+        const dataset = createMockDataset({ embedding_available: false })
+        render(<Description dataset={dataset} />)
+        const descDiv = screen.getByTitle(dataset.description)
+        expect(descDiv).toHaveClass('opacity-30')
+      })
+
+      it('should not apply opacity-30 when embedding_available is true', () => {
+        const dataset = createMockDataset({ embedding_available: true })
+        render(<Description dataset={dataset} />)
+        const descDiv = screen.getByTitle(dataset.description)
+        expect(descDiv).not.toHaveClass('opacity-30')
+      })
     })
 
-    it('should render dataset description', () => {
-      const dataset = createMockDataset({ description: 'Custom Description' })
-      render(<DatasetCard {...defaultProps} dataset={dataset} />)
-      expect(screen.getByText('Custom Description')).toBeInTheDocument()
-    })
+    describe('Edge Cases', () => {
+      it('should handle empty description', () => {
+        const dataset = createMockDataset({ description: '' })
+        render(<Description dataset={dataset} />)
+        const descDiv = screen.getByTitle('')
+        expect(descDiv).toBeInTheDocument()
+        expect(descDiv).toHaveTextContent('')
+      })
 
-    it('should render document count', () => {
-      render(<DatasetCard {...defaultProps} />)
-      expect(screen.getByText('10')).toBeInTheDocument()
-    })
-
-    it('should render app count', () => {
-      render(<DatasetCard {...defaultProps} />)
-      expect(screen.getByText('5')).toBeInTheDocument()
+      it('should handle long description', () => {
+        const longDesc = 'X'.repeat(500)
+        const dataset = createMockDataset({ description: longDesc })
+        render(<Description dataset={dataset} />)
+        expect(screen.getByText(longDesc)).toBeInTheDocument()
+      })
     })
   })
 
-  describe('Props', () => {
-    it('should handle external provider', () => {
-      const dataset = createMockDataset({ provider: 'external' })
-      render(<DatasetCard {...defaultProps} dataset={dataset} />)
-      expect(screen.getByText('Test Dataset')).toBeInTheDocument()
+  // Integration tests for DatasetCardFooter component
+  describe('DatasetCardFooter', () => {
+    describe('Rendering', () => {
+      it('should render document count', () => {
+        const dataset = createMockDataset({ document_count: 15, total_available_documents: 15 })
+        render(<DatasetCardFooter dataset={dataset} />)
+        expect(screen.getByText('15')).toBeInTheDocument()
+      })
+
+      it('should render app count for non-external provider', () => {
+        const dataset = createMockDataset({ app_count: 7, provider: 'vendor' })
+        render(<DatasetCardFooter dataset={dataset} />)
+        expect(screen.getByText('7')).toBeInTheDocument()
+      })
+
+      it('should render update time', () => {
+        const dataset = createMockDataset()
+        render(<DatasetCardFooter dataset={dataset} />)
+        expect(screen.getByText(/updated/i)).toBeInTheDocument()
+      })
     })
 
-    it('should handle rag_pipeline runtime mode', () => {
-      const dataset = createMockDataset({ runtime_mode: 'rag_pipeline', is_published: true })
-      render(<DatasetCard {...defaultProps} dataset={dataset} />)
-      expect(screen.getByText('Test Dataset')).toBeInTheDocument()
+    describe('Props', () => {
+      it('should show partial count when total_available_documents < document_count', () => {
+        const dataset = createMockDataset({
+          document_count: 20,
+          total_available_documents: 12,
+        })
+        render(<DatasetCardFooter dataset={dataset} />)
+        expect(screen.getByText('12 / 20')).toBeInTheDocument()
+      })
+
+      it('should show single count when all documents are available', () => {
+        const dataset = createMockDataset({
+          document_count: 20,
+          total_available_documents: 20,
+        })
+        render(<DatasetCardFooter dataset={dataset} />)
+        expect(screen.getByText('20')).toBeInTheDocument()
+      })
+
+      it('should not show app count when provider is external', () => {
+        const dataset = createMockDataset({ provider: 'external', app_count: 99 })
+        render(<DatasetCardFooter dataset={dataset} />)
+        expect(screen.queryByText('99')).not.toBeInTheDocument()
+      })
+
+      it('should have opacity when embedding_available is false', () => {
+        const dataset = createMockDataset({ embedding_available: false })
+        const { container } = render(<DatasetCardFooter dataset={dataset} />)
+        const footer = container.firstChild as HTMLElement
+        expect(footer).toHaveClass('opacity-30')
+      })
+    })
+
+    describe('Edge Cases', () => {
+      it('should handle undefined total_available_documents', () => {
+        const dataset = createMockDataset({
+          document_count: 10,
+          total_available_documents: undefined,
+        })
+        render(<DatasetCardFooter dataset={dataset} />)
+        // total_available_documents defaults to 0, which is < 10
+        expect(screen.getByText('0 / 10')).toBeInTheDocument()
+      })
+
+      it('should handle zero document count', () => {
+        const dataset = createMockDataset({
+          document_count: 0,
+          total_available_documents: 0,
+        })
+        render(<DatasetCardFooter dataset={dataset} />)
+        expect(screen.getByText('0')).toBeInTheDocument()
+      })
+
+      it('should handle large numbers', () => {
+        const dataset = createMockDataset({
+          document_count: 100000,
+          total_available_documents: 100000,
+          app_count: 50000,
+        })
+        render(<DatasetCardFooter dataset={dataset} />)
+        expect(screen.getByText('100000')).toBeInTheDocument()
+        expect(screen.getByText('50000')).toBeInTheDocument()
+      })
     })
   })
 
-  describe('User Interactions', () => {
-    it('should navigate to documents page on click for regular dataset', () => {
-      const dataset = createMockDataset({ provider: 'vendor' })
-      render(<DatasetCard {...defaultProps} dataset={dataset} />)
+  // Integration tests for OperationItem component
+  describe('OperationItem', () => {
+    const MockIcon = ({ className }: { className?: string }) => (
+      <svg data-testid="mock-icon" className={className} />
+    )
 
-      const card = screen.getByText('Test Dataset').closest('[data-disable-nprogress]')
-      fireEvent.click(card!)
-
-      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-1/documents')
+    describe('Rendering', () => {
+      it('should render icon and name', () => {
+        render(<OperationItem Icon={MockIcon as never} name="Edit" />)
+        expect(screen.getByText('Edit')).toBeInTheDocument()
+        expect(screen.getByTestId('mock-icon')).toBeInTheDocument()
+      })
     })
 
-    it('should navigate to hitTesting page on click for external provider', () => {
-      const dataset = createMockDataset({ provider: 'external' })
-      render(<DatasetCard {...defaultProps} dataset={dataset} />)
+    describe('User Interactions', () => {
+      it('should call handleClick when clicked', () => {
+        const handleClick = vi.fn()
+        render(<OperationItem Icon={MockIcon as never} name="Delete" handleClick={handleClick} />)
 
-      const card = screen.getByText('Test Dataset').closest('[data-disable-nprogress]')
-      fireEvent.click(card!)
+        const item = screen.getByText('Delete').closest('div')
+        fireEvent.click(item!)
 
-      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-1/hitTesting')
-    })
+        expect(handleClick).toHaveBeenCalledTimes(1)
+      })
 
-    it('should navigate to pipeline page when pipeline is unpublished', () => {
-      const dataset = createMockDataset({ runtime_mode: 'rag_pipeline', is_published: false })
-      render(<DatasetCard {...defaultProps} dataset={dataset} />)
+      it('should prevent default and stop propagation on click', () => {
+        const handleClick = vi.fn()
+        render(<OperationItem Icon={MockIcon as never} name="Action" handleClick={handleClick} />)
 
-      const card = screen.getByText('Test Dataset').closest('[data-disable-nprogress]')
-      fireEvent.click(card!)
+        const item = screen.getByText('Action').closest('div')
+        const event = new MouseEvent('click', { bubbles: true, cancelable: true })
+        const preventDefaultSpy = vi.spyOn(event, 'preventDefault')
+        const stopPropagationSpy = vi.spyOn(event, 'stopPropagation')
 
-      expect(mockPush).toHaveBeenCalledWith('/datasets/dataset-1/pipeline')
-    })
-  })
+        item!.dispatchEvent(event)
 
-  describe('Styles', () => {
-    it('should have correct card styling', () => {
-      render(<DatasetCard {...defaultProps} />)
-      const card = screen.getByText('Test Dataset').closest('.group')
-      expect(card).toHaveClass('h-[190px]', 'cursor-pointer', 'flex-col', 'rounded-xl')
-    })
-
-    it('should have data-disable-nprogress attribute', () => {
-      render(<DatasetCard {...defaultProps} />)
-      const card = screen.getByText('Test Dataset').closest('[data-disable-nprogress]')
-      expect(card).toHaveAttribute('data-disable-nprogress', 'true')
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle dataset without description', () => {
-      const dataset = createMockDataset({ description: '' })
-      render(<DatasetCard {...defaultProps} dataset={dataset} />)
-      expect(screen.getByText('Test Dataset')).toBeInTheDocument()
-    })
-
-    it('should handle embedding not available', () => {
-      const dataset = createMockDataset({ embedding_available: false })
-      render(<DatasetCard {...defaultProps} dataset={dataset} />)
-      expect(screen.getByText('Test Dataset')).toBeInTheDocument()
-    })
-
-    it('should handle undefined onSuccess', () => {
-      render(<DatasetCard dataset={createMockDataset()} />)
-      expect(screen.getByText('Test Dataset')).toBeInTheDocument()
-    })
-  })
-
-  describe('Tag Area Click', () => {
-    it('should stop propagation and prevent default when tag area is clicked', () => {
-      render(<DatasetCard {...defaultProps} />)
-
-      // Find tag area element (it's inside the card)
-      const tagAreaWrapper = document.querySelector('[class*="px-3"]')
-      if (tagAreaWrapper) {
-        const stopPropagationSpy = vi.fn()
-        const preventDefaultSpy = vi.fn()
-
-        const clickEvent = new MouseEvent('click', { bubbles: true })
-        Object.defineProperty(clickEvent, 'stopPropagation', { value: stopPropagationSpy })
-        Object.defineProperty(clickEvent, 'preventDefault', { value: preventDefaultSpy })
-
-        tagAreaWrapper.dispatchEvent(clickEvent)
-
-        expect(stopPropagationSpy).toHaveBeenCalled()
         expect(preventDefaultSpy).toHaveBeenCalled()
-      }
+        expect(stopPropagationSpy).toHaveBeenCalled()
+      })
     })
 
-    it('should not navigate when clicking on tag area', () => {
-      render(<DatasetCard {...defaultProps} />)
+    describe('Edge Cases', () => {
+      it('should not throw when handleClick is undefined', () => {
+        render(<OperationItem Icon={MockIcon as never} name="No handler" />)
+        const item = screen.getByText('No handler').closest('div')
+        expect(() => {
+          fireEvent.click(item!)
+        }).not.toThrow()
+      })
 
-      // Click on tag area should not trigger card navigation
-      const tagArea = document.querySelector('[class*="px-3"]')
-      if (tagArea) {
-        fireEvent.click(tagArea)
-        // mockPush should NOT be called when clicking tag area
-        // (stopPropagation prevents it from reaching the card click handler)
-      }
+      it('should handle empty name', () => {
+        render(<OperationItem Icon={MockIcon as never} name="" />)
+        expect(screen.getByTestId('mock-icon')).toBeInTheDocument()
+      })
+    })
+  })
+
+  // Integration tests for Operations component
+  describe('Operations', () => {
+    const defaultProps = {
+      showDelete: true,
+      showExportPipeline: true,
+      openRenameModal: vi.fn(),
+      handleExportPipeline: vi.fn(),
+      detectIsUsedByApp: vi.fn(),
+    }
+
+    describe('Rendering', () => {
+      it('should always render edit operation', () => {
+        render(<Operations {...defaultProps} />)
+        expect(screen.getByText(/operation\.edit/)).toBeInTheDocument()
+      })
+
+      it('should render export pipeline when showExportPipeline is true', () => {
+        render(<Operations {...defaultProps} showExportPipeline={true} />)
+        expect(screen.getByText(/exportPipeline/)).toBeInTheDocument()
+      })
+
+      it('should not render export pipeline when showExportPipeline is false', () => {
+        render(<Operations {...defaultProps} showExportPipeline={false} />)
+        expect(screen.queryByText(/exportPipeline/)).not.toBeInTheDocument()
+      })
+
+      it('should render delete when showDelete is true', () => {
+        render(<Operations {...defaultProps} showDelete={true} />)
+        expect(screen.getByText(/operation\.delete/)).toBeInTheDocument()
+      })
+
+      it('should not render delete when showDelete is false', () => {
+        render(<Operations {...defaultProps} showDelete={false} />)
+        expect(screen.queryByText(/operation\.delete/)).not.toBeInTheDocument()
+      })
+    })
+
+    describe('User Interactions', () => {
+      it('should call openRenameModal when edit is clicked', () => {
+        const openRenameModal = vi.fn()
+        render(<Operations {...defaultProps} openRenameModal={openRenameModal} />)
+
+        const editItem = screen.getByText(/operation\.edit/).closest('div')
+        fireEvent.click(editItem!)
+
+        expect(openRenameModal).toHaveBeenCalledTimes(1)
+      })
+
+      it('should call handleExportPipeline when export is clicked', () => {
+        const handleExportPipeline = vi.fn()
+        render(<Operations {...defaultProps} handleExportPipeline={handleExportPipeline} />)
+
+        const exportItem = screen.getByText(/exportPipeline/).closest('div')
+        fireEvent.click(exportItem!)
+
+        expect(handleExportPipeline).toHaveBeenCalledTimes(1)
+      })
+
+      it('should call detectIsUsedByApp when delete is clicked', () => {
+        const detectIsUsedByApp = vi.fn()
+        render(<Operations {...defaultProps} detectIsUsedByApp={detectIsUsedByApp} />)
+
+        const deleteItem = screen.getByText(/operation\.delete/).closest('div')
+        fireEvent.click(deleteItem!)
+
+        expect(detectIsUsedByApp).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    describe('Edge Cases', () => {
+      it('should render only edit when both showDelete and showExportPipeline are false', () => {
+        render(<Operations {...defaultProps} showDelete={false} showExportPipeline={false} />)
+        expect(screen.getByText(/operation\.edit/)).toBeInTheDocument()
+        expect(screen.queryByText(/exportPipeline/)).not.toBeInTheDocument()
+        expect(screen.queryByText(/operation\.delete/)).not.toBeInTheDocument()
+      })
+
+      it('should render divider before delete section when showDelete is true', () => {
+        const { container } = render(<Operations {...defaultProps} showDelete={true} />)
+        expect(container.querySelector('.bg-divider-subtle')).toBeInTheDocument()
+      })
+
+      it('should not render divider when showDelete is false', () => {
+        const { container } = render(<Operations {...defaultProps} showDelete={false} />)
+        expect(container.querySelector('.bg-divider-subtle')).toBeNull()
+      })
     })
   })
 })
diff --git a/web/app/components/datasets/list/new-dataset-card/index.spec.tsx b/web/app/components/datasets/list/new-dataset-card/index.spec.tsx
index 2ce66e134b..ff70e8f72f 100644
--- a/web/app/components/datasets/list/new-dataset-card/index.spec.tsx
+++ b/web/app/components/datasets/list/new-dataset-card/index.spec.tsx
@@ -1,76 +1,134 @@
+import { RiAddLine } from '@remixicon/react'
 import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import CreateAppCard from './index'
+import Option from './option'
 
-describe('CreateAppCard', () => {
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<CreateAppCard />)
-      expect(screen.getAllByRole('link')).toHaveLength(3)
+describe('New Dataset Card Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Integration tests for Option component
+  describe('Option', () => {
+    describe('Rendering', () => {
+      it('should render a link with text and icon', () => {
+        render(<Option Icon={RiAddLine} text="Create" href="/create" />)
+        const link = screen.getByRole('link')
+        expect(link).toBeInTheDocument()
+        expect(screen.getByText('Create')).toBeInTheDocument()
+      })
+
+      it('should render icon with correct sizing class', () => {
+        const { container } = render(<Option Icon={RiAddLine} text="Test" href="/test" />)
+        const icon = container.querySelector('.h-4.w-4')
+        expect(icon).toBeInTheDocument()
+      })
     })
 
-    it('should render create dataset option', () => {
-      render(<CreateAppCard />)
-      expect(screen.getByText(/createDataset/)).toBeInTheDocument()
+    describe('Props', () => {
+      it('should set correct href on the link', () => {
+        render(<Option Icon={RiAddLine} text="Go" href="/datasets/create" />)
+        const link = screen.getByRole('link')
+        expect(link).toHaveAttribute('href', '/datasets/create')
+      })
+
+      it('should render different text based on props', () => {
+        render(<Option Icon={RiAddLine} text="Custom Text" href="/path" />)
+        expect(screen.getByText('Custom Text')).toBeInTheDocument()
+      })
+
+      it('should render different href based on props', () => {
+        render(<Option Icon={RiAddLine} text="Link" href="/custom-path" />)
+        const link = screen.getByRole('link')
+        expect(link).toHaveAttribute('href', '/custom-path')
+      })
     })
 
-    it('should render create from pipeline option', () => {
-      render(<CreateAppCard />)
-      expect(screen.getByText(/createFromPipeline/)).toBeInTheDocument()
+    describe('Styles', () => {
+      it('should have correct link styling', () => {
+        render(<Option Icon={RiAddLine} text="Styled" href="/style" />)
+        const link = screen.getByRole('link')
+        expect(link).toHaveClass('flex', 'w-full', 'items-center', 'gap-x-2', 'rounded-lg')
+      })
+
+      it('should have text span with correct styling', () => {
+        render(<Option Icon={RiAddLine} text="Text Style" href="/s" />)
+        const textSpan = screen.getByText('Text Style')
+        expect(textSpan).toHaveClass('system-sm-medium', 'grow', 'text-left')
+      })
     })
 
-    it('should render connect dataset option', () => {
-      render(<CreateAppCard />)
-      expect(screen.getByText(/connectDataset/)).toBeInTheDocument()
+    describe('Edge Cases', () => {
+      it('should handle empty text', () => {
+        render(<Option Icon={RiAddLine} text="" href="/empty" />)
+        const link = screen.getByRole('link')
+        expect(link).toBeInTheDocument()
+      })
+
+      it('should handle long text', () => {
+        const longText = 'Z'.repeat(200)
+        render(<Option Icon={RiAddLine} text={longText} href="/long" />)
+        expect(screen.getByText(longText)).toBeInTheDocument()
+      })
     })
   })
 
-  describe('Props', () => {
-    it('should have correct displayName', () => {
-      expect(CreateAppCard.displayName).toBe('CreateAppCard')
-    })
-  })
+  // Integration tests for CreateAppCard component
+  describe('CreateAppCard', () => {
+    describe('Rendering', () => {
+      it('should render without crashing', () => {
+        render(<CreateAppCard />)
+        // All 3 options should be visible
+        const links = screen.getAllByRole('link')
+        expect(links).toHaveLength(3)
+      })
 
-  describe('Links', () => {
-    it('should have correct href for create dataset', () => {
-      render(<CreateAppCard />)
-      const links = screen.getAllByRole('link')
-      expect(links[0]).toHaveAttribute('href', '/datasets/create')
+      it('should render the create dataset option', () => {
+        render(<CreateAppCard />)
+        expect(screen.getByText(/createDataset/)).toBeInTheDocument()
+      })
+
+      it('should render the create from pipeline option', () => {
+        render(<CreateAppCard />)
+        expect(screen.getByText(/createFromPipeline/)).toBeInTheDocument()
+      })
+
+      it('should render the connect dataset option', () => {
+        render(<CreateAppCard />)
+        expect(screen.getByText(/connectDataset/)).toBeInTheDocument()
+      })
     })
 
-    it('should have correct href for create from pipeline', () => {
-      render(<CreateAppCard />)
-      const links = screen.getAllByRole('link')
-      expect(links[1]).toHaveAttribute('href', '/datasets/create-from-pipeline')
+    describe('Props', () => {
+      it('should have correct href for create dataset', () => {
+        render(<CreateAppCard />)
+        const links = screen.getAllByRole('link')
+        const createLink = links.find(link => link.getAttribute('href') === '/datasets/create')
+        expect(createLink).toBeDefined()
+      })
+
+      it('should have correct href for create from pipeline', () => {
+        render(<CreateAppCard />)
+        const links = screen.getAllByRole('link')
+        const pipelineLink = links.find(link => link.getAttribute('href') === '/datasets/create-from-pipeline')
+        expect(pipelineLink).toBeDefined()
+      })
+
+      it('should have correct href for connect dataset', () => {
+        render(<CreateAppCard />)
+        const links = screen.getAllByRole('link')
+        const connectLink = links.find(link => link.getAttribute('href') === '/datasets/connect')
+        expect(connectLink).toBeDefined()
+      })
     })
 
-    it('should have correct href for connect dataset', () => {
-      render(<CreateAppCard />)
-      const links = screen.getAllByRole('link')
-      expect(links[2]).toHaveAttribute('href', '/datasets/connect')
-    })
-  })
-
-  describe('Styles', () => {
-    it('should have correct card styling', () => {
-      const { container } = render(<CreateAppCard />)
-      const card = container.firstChild as HTMLElement
-      expect(card).toHaveClass('h-[190px]', 'flex', 'flex-col', 'rounded-xl')
-    })
-
-    it('should have border separator for connect option', () => {
-      const { container } = render(<CreateAppCard />)
-      const borderDiv = container.querySelector('.border-t-\\[0\\.5px\\]')
-      expect(borderDiv).toBeInTheDocument()
-    })
-  })
-
-  describe('Icons', () => {
-    it('should render three icons for three options', () => {
-      const { container } = render(<CreateAppCard />)
-      // Each option has an icon
-      const icons = container.querySelectorAll('svg')
-      expect(icons.length).toBeGreaterThanOrEqual(3)
+    describe('Styles', () => {
+      it('should have correct container styling', () => {
+        const { container } = render(<CreateAppCard />)
+        const wrapper = container.firstChild as HTMLElement
+        expect(wrapper).toHaveClass('flex', 'flex-col', 'rounded-xl')
+      })
     })
   })
 })
diff --git a/web/app/components/datasets/preview/container.spec.tsx b/web/app/components/datasets/preview/container.spec.tsx
new file mode 100644
index 0000000000..c721b1608a
--- /dev/null
+++ b/web/app/components/datasets/preview/container.spec.tsx
@@ -0,0 +1,176 @@
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import PreviewContainer from './container'
+
+// Tests for PreviewContainer - a layout wrapper with header and scrollable main area
+describe('PreviewContainer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests
+  describe('Rendering', () => {
+    it('should render header content in a header element', () => {
+      render(<PreviewContainer header={<span>Header Title</span>}>Body</PreviewContainer>)
+
+      expect(screen.getByText('Header Title')).toBeInTheDocument()
+      const headerEl = screen.getByText('Header Title').closest('header')
+      expect(headerEl).toBeInTheDocument()
+    })
+
+    it('should render children in a main element', () => {
+      render(<PreviewContainer header="Header">Main content</PreviewContainer>)
+
+      const mainEl = screen.getByRole('main')
+      expect(mainEl).toHaveTextContent('Main content')
+    })
+
+    it('should render both header and children simultaneously', () => {
+      render(
+        <PreviewContainer header={<h2>My Header</h2>}>
+          <p>Body paragraph</p>
+        </PreviewContainer>,
+      )
+
+      expect(screen.getByText('My Header')).toBeInTheDocument()
+      expect(screen.getByText('Body paragraph')).toBeInTheDocument()
+    })
+
+    it('should render without children', () => {
+      render(<PreviewContainer header="Header" />)
+
+      expect(screen.getByRole('main')).toBeInTheDocument()
+      expect(screen.getByRole('main').childElementCount).toBe(0)
+    })
+  })
+
+  // Props tests
+  describe('Props', () => {
+    it('should apply className to the outer wrapper div', () => {
+      const { container } = render(
+        <PreviewContainer header="Header" className="outer-class">Content</PreviewContainer>,
+      )
+
+      expect(container.firstElementChild).toHaveClass('outer-class')
+    })
+
+    it('should apply mainClassName to the main element', () => {
+      render(
+        <PreviewContainer header="Header" mainClassName="custom-main">Content</PreviewContainer>,
+      )
+
+      const mainEl = screen.getByRole('main')
+      expect(mainEl).toHaveClass('custom-main')
+      // Default classes should still be present
+      expect(mainEl).toHaveClass('w-full', 'grow', 'overflow-y-auto', 'px-6', 'py-5')
+    })
+
+    it('should forward ref to the inner container div', () => {
+      const ref = vi.fn()
+      render(
+        <PreviewContainer header="Header" ref={ref}>Content</PreviewContainer>,
+      )
+
+      expect(ref).toHaveBeenCalled()
+      const refArg = ref.mock.calls[0][0]
+      expect(refArg).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('should pass rest props to the inner container div', () => {
+      render(
+        <PreviewContainer header="Header" data-testid="inner-container" id="container-1">
+          Content
+        </PreviewContainer>,
+      )
+
+      const inner = screen.getByTestId('inner-container')
+      expect(inner).toHaveAttribute('id', 'container-1')
+    })
+
+    it('should render ReactNode as header', () => {
+      render(
+        <PreviewContainer header={<div data-testid="complex-header"><span>Complex</span></div>}>
+          Content
+        </PreviewContainer>,
+      )
+
+      expect(screen.getByTestId('complex-header')).toBeInTheDocument()
+      expect(screen.getByText('Complex')).toBeInTheDocument()
+    })
+  })
+
+  // Layout structure tests
+  describe('Layout Structure', () => {
+    it('should have header with border-b styling', () => {
+      render(<PreviewContainer header="Header">Content</PreviewContainer>)
+
+      const headerEl = screen.getByText('Header').closest('header')
+      expect(headerEl).toHaveClass('border-b', 'border-divider-subtle')
+    })
+
+    it('should have inner div with flex column layout', () => {
+      render(
+        <PreviewContainer header="Header" data-testid="inner">Content</PreviewContainer>,
+      )
+
+      const inner = screen.getByTestId('inner')
+      expect(inner).toHaveClass('flex', 'h-full', 'w-full', 'flex-col')
+    })
+
+    it('should have main with overflow-y-auto for scrolling', () => {
+      render(<PreviewContainer header="Header">Content</PreviewContainer>)
+
+      expect(screen.getByRole('main')).toHaveClass('overflow-y-auto')
+    })
+  })
+
+  // DisplayName test
+  describe('DisplayName', () => {
+    it('should have correct displayName', () => {
+      expect(PreviewContainer.displayName).toBe('PreviewContainer')
+    })
+  })
+
+  // Edge cases
+  describe('Edge Cases', () => {
+    it('should render with empty string header', () => {
+      render(<PreviewContainer header="">Content</PreviewContainer>)
+
+      const headerEl = screen.getByRole('banner')
+      expect(headerEl).toBeInTheDocument()
+    })
+
+    it('should render with null children', () => {
+      render(<PreviewContainer header="Header">{null}</PreviewContainer>)
+
+      expect(screen.getByRole('main')).toBeInTheDocument()
+    })
+
+    it('should render with multiple children', () => {
+      render(
+        <PreviewContainer header="Header">
+          <div>Child 1</div>
+          <div>Child 2</div>
+          <div>Child 3</div>
+        </PreviewContainer>,
+      )
+
+      expect(screen.getByText('Child 1')).toBeInTheDocument()
+      expect(screen.getByText('Child 2')).toBeInTheDocument()
+      expect(screen.getByText('Child 3')).toBeInTheDocument()
+    })
+
+    it('should not crash on re-render with different props', () => {
+      const { rerender } = render(
+        <PreviewContainer header="First" className="a">Content A</PreviewContainer>,
+      )
+
+      rerender(
+        <PreviewContainer header="Second" className="b" mainClassName="new-main">Content B</PreviewContainer>,
+      )
+
+      expect(screen.getByText('Second')).toBeInTheDocument()
+      expect(screen.getByText('Content B')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/web/app/components/datasets/preview/header.spec.tsx b/web/app/components/datasets/preview/header.spec.tsx
new file mode 100644
index 0000000000..3c3a62ed0b
--- /dev/null
+++ b/web/app/components/datasets/preview/header.spec.tsx
@@ -0,0 +1,145 @@
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { PreviewHeader } from './header'
+
+// Tests for PreviewHeader - displays a title and optional children
+describe('PreviewHeader', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Rendering tests
+  describe('Rendering', () => {
+    it('should render the title text', () => {
+      render(<PreviewHeader title="Preview Title" />)
+
+      expect(screen.getByText('Preview Title')).toBeInTheDocument()
+    })
+
+    it('should render children below the title', () => {
+      render(
+        <PreviewHeader title="Title">
+          <span>Child content</span>
+        </PreviewHeader>,
+      )
+
+      expect(screen.getByText('Title')).toBeInTheDocument()
+      expect(screen.getByText('Child content')).toBeInTheDocument()
+    })
+
+    it('should render without children', () => {
+      const { container } = render(<PreviewHeader title="Solo Title" />)
+
+      expect(container.firstElementChild).toBeInTheDocument()
+      expect(screen.getByText('Solo Title')).toBeInTheDocument()
+    })
+
+    it('should render title in an inner div with uppercase styling', () => {
+      render(<PreviewHeader title="Styled Title" />)
+
+      const titleEl = screen.getByText('Styled Title')
+      expect(titleEl).toHaveClass('uppercase', 'mb-1', 'px-1', 'text-text-accent')
+    })
+  })
+
+  // Props tests
+  describe('Props', () => {
+    it('should apply custom className to outer div', () => {
+      render(<PreviewHeader title="Title" className="custom-header" data-testid="header" />)
+
+      expect(screen.getByTestId('header')).toHaveClass('custom-header')
+    })
+
+    it('should pass rest props to the outer div', () => {
+      render(<PreviewHeader title="Title" data-testid="header" id="header-1" aria-label="preview header" />)
+
+      const el = screen.getByTestId('header')
+      expect(el).toHaveAttribute('id', 'header-1')
+      expect(el).toHaveAttribute('aria-label', 'preview header')
+    })
+
+    it('should render with empty string title', () => {
+      render(<PreviewHeader title="" data-testid="header" />)
+
+      const header = screen.getByTestId('header')
+      // Title div exists but is empty
+      const titleDiv = header.querySelector('.uppercase')
+      expect(titleDiv).toBeInTheDocument()
+      expect(titleDiv?.textContent).toBe('')
+    })
+  })
+
+  // Structure tests
+  describe('Structure', () => {
+    it('should render as a div element', () => {
+      render(<PreviewHeader title="Title" data-testid="header" />)
+
+      expect(screen.getByTestId('header').tagName).toBe('DIV')
+    })
+
+    it('should have title div as the first child', () => {
+      render(<PreviewHeader title="Title" data-testid="header" />)
+
+      const header = screen.getByTestId('header')
+      const firstChild = header.firstElementChild
+      expect(firstChild).toHaveTextContent('Title')
+    })
+
+    it('should place children after the title div', () => {
+      render(
+        <PreviewHeader title="Title" data-testid="header">
+          <button>Action</button>
+        </PreviewHeader>,
+      )
+
+      const header = screen.getByTestId('header')
+      const children = Array.from(header.children)
+      expect(children).toHaveLength(2)
+      expect(children[0]).toHaveTextContent('Title')
+      expect(children[1]).toHaveTextContent('Action')
+    })
+  })
+
+  // Edge cases
+  describe('Edge Cases', () => {
+    it('should handle special characters in title', () => {
+      render(<PreviewHeader title="Test & <Special> 'Characters'" />)
+
+      expect(screen.getByText('Test & <Special> \'Characters\'')).toBeInTheDocument()
+    })
+
+    it('should handle long titles', () => {
+      const longTitle = 'A'.repeat(500)
+      render(<PreviewHeader title={longTitle} />)
+
+      expect(screen.getByText(longTitle)).toBeInTheDocument()
+    })
+
+    it('should render multiple children', () => {
+      render(
+        <PreviewHeader title="Title">
+          <span>First</span>
+          <span>Second</span>
+        </PreviewHeader>,
+      )
+
+      expect(screen.getByText('First')).toBeInTheDocument()
+      expect(screen.getByText('Second')).toBeInTheDocument()
+    })
+
+    it('should render with null children', () => {
+      render(<PreviewHeader title="Title">{null}</PreviewHeader>)
+
+      expect(screen.getByText('Title')).toBeInTheDocument()
+    })
+
+    it('should not crash on re-render with different title', () => {
+      const { rerender } = render(<PreviewHeader title="First Title" />)
+
+      rerender(<PreviewHeader title="Second Title" />)
+
+      expect(screen.queryByText('First Title')).not.toBeInTheDocument()
+      expect(screen.getByText('Second Title')).toBeInTheDocument()
+    })
+  })
+})