+
+
+ {sourceTitle}
+
+
+ {citation.content?.trim() && (
+
+ {citation.content}
+
+ )}
+
+ {hostname}
+
+
+ ),
+ [citation.content, hostname, handleClick, sourceTitle]
)
return (
-
+ {children}
+
+ )
+}))
+
+const originalWindowOpen = window.open
+
+describe('CitationTooltip', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ Object.defineProperty(window, 'open', {
+ value: mockWindowOpen,
+ writable: true
+ })
+ })
+
+ afterEach(() => {
+ vi.restoreAllMocks()
+ window.open = originalWindowOpen
+ })
+
+ // Test data factory
+ const createCitationData = (overrides = {}) => ({
+ url: 'https://example.com/article',
+ title: 'Example Article',
+ content: 'This is the article content for testing purposes.',
+ ...overrides
+ })
+
+ const renderCitationTooltip = (citation: any, children = Trigger) => {
+ return render({overlay || title}
+
+
+ )
+}))
+
+vi.mock('../ImagePreview', () => ({
+ __esModule: true,
+ default: (props: any) => {children}
+
+ {children}
+}))
+
+// Mock plugins
+vi.mock('remark-gfm', () => ({ __esModule: true, default: vi.fn() }))
+vi.mock('remark-cjk-friendly', () => ({ __esModule: true, default: vi.fn() }))
+vi.mock('remark-math', () => ({ __esModule: true, default: vi.fn() }))
+vi.mock('rehype-katex', () => ({ __esModule: true, default: vi.fn() }))
+vi.mock('rehype-mathjax', () => ({ __esModule: true, default: vi.fn() }))
+vi.mock('rehype-raw', () => ({ __esModule: true, default: vi.fn() }))
+
+// Mock ReactMarkdown with realistic rendering
+vi.mock('react-markdown', () => ({
+ __esModule: true,
+ default: ({ children, components, className }: any) => (
+
+ {children}
+ {/* Simulate component rendering */}
+ {components?.a && link}
+ {components?.code && (
+
+ )
+}))
+
+describe('Markdown', () => {
+ let mockEventEmitter: any
+
+ beforeEach(async () => {
+ vi.clearAllMocks()
+
+ // Default settings
+ mockUseSettings.mockReturnValue({ mathEngine: 'KaTeX' })
+ mockUseTranslation.mockReturnValue({
+ t: (key: string) => (key === 'message.chat.completion.paused' ? 'Paused' : key)
+ })
+
+ // Get mocked EventEmitter
+ const { EventEmitter } = await import('@renderer/services/EventService')
+ mockEventEmitter = EventEmitter
+ })
+
+ afterEach(() => {
+ vi.restoreAllMocks()
+ })
+
+ // Test data helpers
+ const createMainTextBlock = (overrides: Partial
+ {components.code({ children: 'test code', node: { position: { start: { line: 1 } } } })}
+
+ )}
+ {components?.img && img}
+ {components?.style && style}
+ HTML content
\n**Bold text**'
+ })
+
+ expect(() => render(
+
+ Test content
+
+
+`;
diff --git a/src/renderer/src/pages/home/Markdown/__tests__/__snapshots__/Markdown.test.tsx.snap b/src/renderer/src/pages/home/Markdown/__tests__/__snapshots__/Markdown.test.tsx.snap
new file mode 100644
index 0000000000..e055c83f52
--- /dev/null
+++ b/src/renderer/src/pages/home/Markdown/__tests__/__snapshots__/Markdown.test.tsx.snap
@@ -0,0 +1,39 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Markdown > rendering > should match snapshot 1`] = `
+
+
+
+
+
+
+
+
+ Example Article
+
+
+ This is the article content for testing purposes.
+
+
+ example.com
+
+
+ # Test Markdown
+
+This is **bold** text.
+
+ link
+
+
+`;
diff --git a/src/renderer/src/pages/home/Messages/Blocks/MainTextBlock.tsx b/src/renderer/src/pages/home/Messages/Blocks/MainTextBlock.tsx
index 787ffcb08d..14d72dcce8 100644
--- a/src/renderer/src/pages/home/Messages/Blocks/MainTextBlock.tsx
+++ b/src/renderer/src/pages/home/Messages/Blocks/MainTextBlock.tsx
@@ -5,7 +5,7 @@ import type { RootState } from '@renderer/store'
import { selectFormattedCitationsByBlockId } from '@renderer/store/messageBlock'
import { type Model, WebSearchSource } from '@renderer/types'
import type { MainTextMessageBlock, Message } from '@renderer/types/newMessage'
-import { cleanMarkdownContent } from '@renderer/utils/formats'
+import { cleanMarkdownContent, encodeHTML } from '@renderer/utils/formats'
import { Flex } from 'antd'
import React, { useMemo } from 'react'
import { useSelector } from 'react-redux'
@@ -13,18 +13,6 @@ import styled from 'styled-components'
import Markdown from '../../Markdown/Markdown'
-// HTML实体编码辅助函数
-const encodeHTML = (str: string): string => {
- const entities: { [key: string]: string } = {
- '&': '&',
- '<': '<',
- '>': '>',
- '"': '"',
- "'": '''
- }
- return str.replace(/[&<>"']/g, (match) => entities[match])
-}
-
interface Props {
block: MainTextMessageBlock
citationBlockId?: string
diff --git a/src/renderer/src/pages/home/Messages/Blocks/__tests__/MainTextBlock.test.tsx b/src/renderer/src/pages/home/Messages/Blocks/__tests__/MainTextBlock.test.tsx
new file mode 100644
index 0000000000..e2badf156c
--- /dev/null
+++ b/src/renderer/src/pages/home/Messages/Blocks/__tests__/MainTextBlock.test.tsx
@@ -0,0 +1,477 @@
+import { configureStore } from '@reduxjs/toolkit'
+import type { Model } from '@renderer/types'
+import { WebSearchSource } from '@renderer/types'
+import type { MainTextMessageBlock } from '@renderer/types/newMessage'
+import { MessageBlockStatus, MessageBlockType } from '@renderer/types/newMessage'
+import { render, screen } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import MainTextBlock from '../MainTextBlock'
+
+// Mock dependencies
+const mockUseSettings = vi.fn()
+const mockUseSelector = vi.fn()
+
+// Mock hooks
+vi.mock('@renderer/hooks/useSettings', () => ({
+ useSettings: () => mockUseSettings()
+}))
+
+vi.mock('react-redux', async () => {
+ const actual = await import('react-redux')
+ return {
+ ...actual,
+ useSelector: () => mockUseSelector(),
+ useDispatch: () => vi.fn()
+ }
+})
+
+// Mock store to avoid withTypes issues
+vi.mock('@renderer/store', () => ({
+ useAppSelector: vi.fn(),
+ useAppDispatch: vi.fn(() => vi.fn())
+}))
+
+// Mock store selectors
+vi.mock('@renderer/store/messageBlock', async () => {
+ const actual = await import('@renderer/store/messageBlock')
+ return {
+ ...actual,
+ selectFormattedCitationsByBlockId: vi.fn(() => [])
+ }
+})
+
+// Mock utilities
+vi.mock('@renderer/utils/formats', () => ({
+ cleanMarkdownContent: vi.fn((content: string) => content),
+ encodeHTML: vi.fn((content: string) => content.replace(/"/g, '"'))
+}))
+
+// Mock services
+vi.mock('@renderer/services/ModelService', () => ({
+ getModelUniqId: vi.fn()
+}))
+
+// Mock Markdown component
+vi.mock('@renderer/pages/home/Markdown/Markdown', () => ({
+ __esModule: true,
+ default: ({ block }: any) => (
+
+
+
+ img
+
+
+
+
+ test code
+
+
+
+ Markdown: {block.content}
+
+ )
+}))
+
+describe('MainTextBlock', () => {
+ // Get references to mocked modules
+ let mockGetModelUniqId: any
+ let mockCleanMarkdownContent: any
+
+ // Create a mock store for Provider
+ const mockStore = configureStore({
+ reducer: {
+ messageBlocks: (state = {}) => state
+ }
+ })
+
+ beforeEach(async () => {
+ vi.clearAllMocks()
+
+ // Get the mocked functions
+ const { getModelUniqId } = await import('@renderer/services/ModelService')
+ const { cleanMarkdownContent } = await import('@renderer/utils/formats')
+ mockGetModelUniqId = getModelUniqId as any
+ mockCleanMarkdownContent = cleanMarkdownContent as any
+
+ // Default mock implementations
+ mockUseSettings.mockReturnValue({ renderInputMessageAsMarkdown: false })
+ mockUseSelector.mockReturnValue([]) // Empty citations by default
+ mockGetModelUniqId.mockImplementation((model: Model) => `${model.id}-${model.name}`)
+ })
+
+ // Test data factory functions
+ const createMainTextBlock = (overrides: Partial
+ {items.map((item: any) => (
+
+ ),
+ Tooltip: ({ title, children, mouseEnterDelay }: any) => (
+
+
+ ))}
+ onChange()}>
+ {item.label}
+
+ {activeKey === item.key && {item.children}
}
+
+ {children}
+
+ ),
+ message: {
+ success: vi.fn(),
+ error: vi.fn()
+ }
+}))
+
+// Mock icons
+vi.mock('@ant-design/icons', () => ({
+ CheckOutlined: ({ style }: any) => (
+
+ ✓
+
+ )
+}))
+
+vi.mock('lucide-react', () => ({
+ Lightbulb: ({ size }: any) => (
+
+ 💡
+
+ )
+}))
+
+// Mock motion
+vi.mock('motion/react', () => ({
+ motion: {
+ span: ({ children, variants, animate, initial, style }: any) => (
+
+ {children}
+
+ )
+ }
+}))
+
+// Mock motion variants
+vi.mock('@renderer/utils/motionVariants', () => ({
+ lightbulbVariants: {
+ active: { rotate: 10, scale: 1.1 },
+ idle: { rotate: 0, scale: 1 }
+ }
+}))
+
+// Mock Markdown component
+vi.mock('@renderer/pages/home/Markdown/Markdown', () => ({
+ __esModule: true,
+ default: ({ block }: any) => (
+
+ Markdown: {block.content}
+
+ )
+}))
+
+describe('ThinkingBlock', () => {
+ beforeEach(async () => {
+ vi.useFakeTimers()
+
+ // Default mock implementations
+ mockUseSettings.mockReturnValue({
+ messageFont: 'sans-serif',
+ fontSize: 14,
+ thoughtAutoCollapse: false
+ })
+
+ mockUseTranslation.mockReturnValue({
+ t: (key: string, params?: any) => {
+ if (key === 'chat.thinking' && params?.seconds) {
+ return `Thinking... ${params.seconds}s`
+ }
+ if (key === 'chat.deeply_thought' && params?.seconds) {
+ return `Thought for ${params.seconds}s`
+ }
+ if (key === 'message.copied') return 'Copied!'
+ if (key === 'message.copy.failed') return 'Copy failed'
+ if (key === 'common.copy') return 'Copy'
+ return key
+ }
+ })
+ })
+
+ afterEach(() => {
+ vi.restoreAllMocks()
+ vi.clearAllMocks()
+ vi.clearAllTimers()
+ vi.useRealTimers()
+ })
+
+ // Test data factory functions
+ const createThinkingBlock = (overrides: Partial