{error ? {String(error)} : null}
+ ),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/editor/code-editor', () => ({
+ default: ({ title, value }: { title: React.ReactNode, value: string | object }) => (
+
+ {title}
+ {typeof value === 'string' ? value : JSON.stringify(value)}
+
+ ),
+}))
+
+vi.mock('@/hooks/use-timestamp', () => ({
+ default: () => ({ formatTime: (ts: number, fmt: string) => `${ts}-${fmt}` }),
+}))
+
+vi.mock('@/app/components/workflow/block-icon', () => ({
+ default: () => ,
+}))
+
+vi.mock('@/app/components/base/icons/src/vender/line/arrows', () => ({
+ ChevronRight: (props: { className?: string }) => ,
+}))
+
+vi.mock('ahooks', () => ({
+ useClickAway: vi.fn(),
+}))
+
+const mockLog = {
+ id: 'msg-id',
+ conversationId: 'conv-id',
+ content: 'content',
+ isAnswer: false,
+ input: 'test input',
+} as IChatItem
+
+const mockProps = {
+ currentLogItem: mockLog,
+ width: 1000,
+ onCancel: vi.fn(),
+}
+
+describe('AgentLogModal', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ vi.mocked(fetchAgentLogDetail).mockResolvedValue({
+ meta: {
+ status: 'succeeded',
+ executor: 'User',
+ start_time: '2023-01-01',
+ elapsed_time: 1.0,
+ total_tokens: 100,
+ agent_mode: 'function_call',
+ iterations: 1,
+ },
+ iterations: [{
+ created_at: '',
+ files: [],
+ thought: '',
+ tokens: 0,
+ tool_raw: { inputs: '', outputs: '' },
+ tool_calls: [{ tool_name: 'tool1', status: 'success', tool_icon: null, tool_label: { 'en-US': 'Tool 1' } }],
+ }],
+ files: [],
+ })
+ })
+
+ it('should return null if no currentLogItem', () => {
+ const { container } = render(
+
+ ),
+}))
+
+vi.mock('@/app/components/workflow/block-icon', () => ({
+ default: () => ,
+}))
+
+const mockIterationInfo: AgentIteration = {
+ created_at: '2023-01-01',
+ files: [],
+ thought: 'Test thought',
+ tokens: 100,
+ tool_calls: [
+ {
+ status: 'success',
+ tool_name: 'test_tool',
+ tool_label: { en: 'Test Tool' },
+ tool_icon: null,
+ },
+ ],
+ tool_raw: {
+ inputs: '{}',
+ outputs: 'test output',
+ },
+}
+
+describe('Iteration', () => {
+ it('should render final processing when isFinal is true', () => {
+ render({title}
+ {JSON.stringify(value)}
+
+
+ ),
+}))
+
+vi.mock('@/app/components/workflow/run/status', () => ({
+ default: ({ status, time, tokens, error }: { status: string, time?: number, tokens?: number, error?: string }) => (
+ {title}
+ {JSON.stringify(value)}
+
+ {status}
+ {time}
+ {tokens}
+ {error}
+
+ ),
+}))
+
+vi.mock('@/hooks/use-timestamp', () => ({
+ default: () => ({
+ formatTime: vi.fn((ts, _format) => `formatted-${ts}`),
+ }),
+}))
+
+const mockProps = {
+ status: 'succeeded',
+ elapsed_time: 1.23456,
+ total_tokens: 150,
+ error: '',
+ inputs: { query: 'input' },
+ outputs: { answer: 'output' },
+ created_by: 'User Name',
+ created_at: '2023-01-01T00:00:00Z',
+ agentMode: 'function_call',
+ tools: ['tool1', 'tool2'],
+ iterations: 3,
+}
+
+describe('ResultPanel', () => {
+ it('should render status panel and code editors', () => {
+ render(
+
+ ),
+}))
+
+vi.mock('@/app/components/workflow/block-icon', () => ({
+ default: ({ type }: { type: BlockEnum }) => ,
+}))
+
+const mockToolCall = {
+ status: 'success',
+ error: null,
+ tool_name: 'test_tool',
+ tool_label: { en: 'Test Tool Label' },
+ tool_icon: 'icon',
+ time_cost: 1.5,
+ tool_input: { query: 'hello' },
+ tool_output: { result: 'world' },
+}
+
+describe('ToolCallItem', () => {
+ it('should render tool name correctly for LLM', () => {
+ render({title}
+ {JSON.stringify(value)}
+
+ {title}
+ {typeof value === 'string' ? value : JSON.stringify(value)}
+
+ ),
+}))
+
+const createIteration = (thought: string, tokens: number): AgentIteration => ({
+ created_at: '',
+ files: [],
+ thought,
+ tokens,
+ tool_calls: [{ tool_name: 'tool1', status: 'success', tool_icon: null, tool_label: { 'en-US': 'Tool 1' } }],
+ tool_raw: { inputs: '', outputs: '' },
+})
+
+const mockList: AgentIteration[] = [
+ createIteration('Thought 1', 10),
+ createIteration('Thought 2', 20),
+ createIteration('Thought 3', 30),
+]
+
+describe('TracingPanel', () => {
+ it('should render all iterations in the list', () => {
+ render(
{label && (
-
+
{label}
)}
{description && (
-
+ = ({
indeterminate={isIndeterminate}
onCheck={handleSelectAll}
disabled={disabled}
+ id="selectAll"
/>
)}
{!searchQuery
? (
{description}
)}
@@ -120,13 +120,14 @@ const CheckboxList: FC
{title && (
-
+
{title}
)}
@@ -138,7 +139,7 @@ const CheckboxList: FC = ({
)
: (
-
+
{
filteredOptions.length > 0
? t('operation.searchCount', { ns: 'common', count: filteredOptions.length, content: title })
@@ -168,7 +169,7 @@ const CheckboxList: FC = ({
? (
= ({
handleToggleOption(option.value)
}}
disabled={option.disabled || disabled}
+ id={option.value}
/>
{option.label}
diff --git a/web/app/components/base/confirm/index.spec.tsx b/web/app/components/base/confirm/index.spec.tsx
new file mode 100644
index 0000000000..c2f67cc35e
--- /dev/null
+++ b/web/app/components/base/confirm/index.spec.tsx
@@ -0,0 +1,117 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import Confirm from '.'
+
+vi.mock('react-dom', async () => {
+ const actual = await vi.importActual('react-dom')
+
+ return {
+ ...actual,
+ createPortal: (children: React.ReactNode) => children,
+ }
+})
+
+const onCancel = vi.fn()
+const onConfirm = vi.fn()
+
+describe('Confirm Component', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Rendering', () => {
+ it('renders confirm correctly', () => {
+ render(
diff --git a/web/app/components/base/copy-feedback/index.spec.tsx b/web/app/components/base/copy-feedback/index.spec.tsx
new file mode 100644
index 0000000000..f89331c1bb
--- /dev/null
+++ b/web/app/components/base/copy-feedback/index.spec.tsx
@@ -0,0 +1,93 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import CopyFeedback, { CopyFeedbackNew } from '.'
+
+const mockCopy = vi.fn()
+const mockReset = vi.fn()
+let mockCopied = false
+
+vi.mock('foxact/use-clipboard', () => ({
+ useClipboard: () => ({
+ copy: mockCopy,
+ reset: mockReset,
+ copied: mockCopied,
+ }),
+}))
+
+describe('CopyFeedback', () => {
+ beforeEach(() => {
+ mockCopied = false
+ vi.clearAllMocks()
+ })
+
+ describe('Rendering', () => {
+ it('renders the action button with copy icon', () => {
+ render( = ({
{isSearching && (
<>
-
Search
+Search
{searchedEmojis.map((emoji: string, index: number) => {
return (
@@ -108,7 +106,7 @@ const EmojiPickerInner: FC = ({
setSelectedEmoji(emoji)
}}
>
- = ({
{categories.map((category, index: number) => {
return (
+
@@ -122,7 +120,7 @@ const EmojiPickerInner: FC
-
{category.id}
+{category.id}
{category.emojis.map((emoji, index: number) => {
return (
@@ -133,7 +131,7 @@ const EmojiPickerInner: FC = ({
setSelectedEmoji(emoji)
}}
>
- = ({
{/* Color Select */}
+
@@ -148,10 +146,10 @@ const EmojiPickerInner: FC
- setShowStyleColors(!showStyleColors)} />
- : setShowStyleColors(!showStyleColors)} />}
+ ? setShowStyleColors(!showStyleColors)} data-testid="toggle-colors" />
+ : setShowStyleColors(!showStyleColors)} data-testid="toggle-colors" />}
{showStyleColors && (
Choose Style
+Choose Style
{showStyleColors - ?
diff --git a/web/app/components/base/emoji-picker/index.spec.tsx b/web/app/components/base/emoji-picker/index.spec.tsx
new file mode 100644
index 0000000000..f554549cee
--- /dev/null
+++ b/web/app/components/base/emoji-picker/index.spec.tsx
@@ -0,0 +1,115 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import EmojiPicker from './index'
+
+vi.mock('@emoji-mart/data', () => ({
+ default: {
+ categories: [
+ {
+ id: 'category1',
+ name: 'Category 1',
+ emojis: ['emoji1', 'emoji2'],
+ },
+ ],
+ },
+}))
+
+vi.mock('emoji-mart', () => ({
+ init: vi.fn(),
+ SearchIndex: {
+ search: vi.fn().mockResolvedValue([{ skins: [{ native: '🔍' }] }]),
+ },
+}))
+
+vi.mock('@/utils/emoji', () => ({
+ searchEmoji: vi.fn().mockResolvedValue(['🔍']),
+}))
+
+describe('EmojiPicker', () => {
+ const mockOnSelect = vi.fn()
+ const mockOnClose = vi.fn()
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Rendering', () => {
+ it('renders nothing when isModal is false', () => {
+ const { container } = render(
+ ) => ![]()
,
+}))
+
+describe('FileThumb Component', () => {
+ const mockImageFile = {
+ name: 'test-image.jpg',
+ mimeType: 'image/jpeg',
+ extension: '.jpg',
+ size: 1024,
+ sourceUrl: 'https://example.com/test-image.jpg',
+ }
+
+ const mockNonImageFile = {
+ name: 'test.pdf',
+ mimeType: 'application/pdf',
+ extension: '.pdf',
+ size: 2048,
+ sourceUrl: 'https://example.com/test.pdf',
+ }
+
+ describe('Render', () => {
+ it('renders image thumbnail correctly', () => {
+ render()
+ })
+
+ describe('Render', () => {
+ it('renders correctly with default props', () => {
+ render()
+ render()
+ render()
+ render( {}} />)
+ const input = screen.getByPlaceholderText('common.operation.search')
+ expect(input).toBeInTheDocument()
+ expect(input).toHaveValue('')
+ })
+
+ it('renders custom placeholder', () => {
+ render( {}} placeholder="Custom Placeholder" />)
+ expect(screen.getByPlaceholderText('Custom Placeholder')).toBeInTheDocument()
+ })
+
+ it('shows clear button when value is present', () => {
+ const onChange = vi.fn()
+ render( {}} />)
+ const wrapper = container.firstChild as HTMLElement
+ const input = screen.getByPlaceholderText('common.operation.search')
+
+ fireEvent.focus(input)
+ expect(wrapper).toHaveClass(/bg-components-input-bg-active/)
+
+ fireEvent.blur(input)
+ expect(wrapper).not.toHaveClass(/bg-components-input-bg-active/)
+ })
+ })
+
+ describe('Style', () => {
+ it('applies white style', () => {
+ const { container } = render( {}} white />)
+ const wrapper = container.firstChild as HTMLElement
+ expect(wrapper).toHaveClass('!bg-white')
+ })
+
+ it('applies custom className', () => {
+ const { container } = render( {}} className="custom-test" />)
+ const wrapper = container.firstChild as HTMLElement
+ expect(wrapper).toHaveClass('custom-test')
+ })
+ })
+})
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index f55a49c564..5997abac8e 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -1724,11 +1724,6 @@
"count": 10
}
},
- "app/components/base/checkbox-list/index.tsx": {
- "tailwindcss/enforce-consistent-class-order": {
- "count": 6
- }
- },
"app/components/base/checkbox/index.stories.tsx": {
"no-console": {
"count": 1
@@ -1858,9 +1853,6 @@
"app/components/base/emoji-picker/Inner.tsx": {
"react-hooks-extra/no-direct-set-state-in-use-effect": {
"count": 1
- },
- "tailwindcss/enforce-consistent-class-order": {
- "count": 3
}
},
"app/components/base/encrypted-bottom/index.tsx": {