) => void
+ }) => {
+ mockAgentStrategy(props)
+ return (
+
+
+
+
+ )
+ },
+}))
+
+vi.mock('../../_base/components/memory-config', () => ({
+ __esModule: true,
+ default: (props: {
+ readonly?: boolean
+ config: { data?: AgentNodeType['memory'] }
+ onChange: (value?: AgentNodeType['memory']) => void
+ }) => {
+ mockMemoryConfig(props)
+ return (
+
+ )
+ },
+}))
+
+vi.mock('../../_base/components/output-vars', () => ({
+ __esModule: true,
+ default: ({ children }: { children: ReactNode }) => {children}
,
+ VarItem: ({ name, type, description }: { name: string, type: string, description?: string }) => (
+ {`${name}:${type}:${description || ''}`}
+ ),
+}))
+
+const createStrategyParam = (overrides: Partial = {}): StrategyParamItem => ({
+ name: 'instruction',
+ type: FormTypeEnum.any,
+ required: true,
+ label: { en_US: 'Instruction' } as StrategyParamItem['label'],
+ help: { en_US: 'Instruction help' } as StrategyParamItem['help'],
+ placeholder: { en_US: 'Instruction placeholder' } as StrategyParamItem['placeholder'],
+ scope: 'global',
+ default: null,
+ options: [],
+ template: { enabled: false },
+ auto_generate: { type: 'none' },
+ ...overrides,
+})
+
+const createData = (overrides: Partial = {}): AgentNodeType => ({
+ title: 'Agent',
+ desc: '',
+ type: BlockEnum.Agent,
+ output_schema: {
+ properties: {
+ summary: {
+ type: 'string',
+ description: 'summary output',
+ },
+ },
+ },
+ agent_strategy_provider_name: 'provider/agent',
+ agent_strategy_name: 'react',
+ agent_strategy_label: 'React Agent',
+ plugin_unique_identifier: 'provider/agent:1.0.0',
+ meta: { version: '1.0.0' } as AgentNodeType['meta'],
+ memory: {
+ window: {
+ enabled: false,
+ size: 3,
+ },
+ query_prompt_template: '',
+ } as AgentNodeType['memory'],
+ ...overrides,
+})
+
+const createConfigResult = (overrides: Partial> = {}): ReturnType => ({
+ readOnly: false,
+ inputs: createData(),
+ setInputs: vi.fn(),
+ handleVarListChange: vi.fn(),
+ handleAddVariable: vi.fn(),
+ currentStrategy: {
+ identity: {
+ author: 'provider',
+ name: 'react',
+ icon: 'icon',
+ label: { en_US: 'React Agent' } as StrategyParamItem['label'],
+ provider: 'provider/agent',
+ },
+ parameters: [
+ createStrategyParam(),
+ createStrategyParam({
+ name: 'modelParam',
+ type: FormTypeEnum.modelSelector,
+ required: false,
+ }),
+ ],
+ description: { en_US: 'agent description' } as StrategyParamItem['label'],
+ output_schema: {},
+ features: [AgentFeature.HISTORY_MESSAGES],
+ },
+ formData: {
+ instruction: 'Plan and answer',
+ },
+ onFormChange: vi.fn(),
+ currentStrategyStatus: {
+ plugin: { source: 'marketplace', installed: true },
+ isExistInPlugin: true,
+ },
+ strategyProvider: undefined,
+ pluginDetail: undefined,
+ availableVars: [],
+ availableNodesWithParent: [],
+ outputSchema: [{
+ name: 'summary',
+ type: 'String',
+ description: 'summary output',
+ }],
+ handleMemoryChange: vi.fn(),
+ isChatMode: true,
+ ...overrides,
+})
+
+const panelProps = {} as NodePanelProps['panelProps']
+
+describe('agent/panel', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseConfig.mockReturnValue(createConfigResult())
+ })
+
+ it('renders strategy data, forwards strategy and form updates, and exposes output vars', async () => {
+ const user = userEvent.setup()
+ const setInputs = vi.fn()
+ const onFormChange = vi.fn()
+ const handleMemoryChange = vi.fn()
+
+ mockUseConfig.mockReturnValue(createConfigResult({
+ setInputs,
+ onFormChange,
+ handleMemoryChange,
+ }))
+
+ render(
+ ,
+ )
+
+ expect(screen.getByText('text:String:workflow.nodes.agent.outputVars.text')).toBeInTheDocument()
+ expect(screen.getByText('usage:object:workflow.nodes.agent.outputVars.usage')).toBeInTheDocument()
+ expect(screen.getByText('files:Array[File]:workflow.nodes.agent.outputVars.files.title')).toBeInTheDocument()
+ expect(screen.getByText('json:Array[Object]:workflow.nodes.agent.outputVars.json')).toBeInTheDocument()
+ expect(screen.getByText('summary:String:summary output')).toBeInTheDocument()
+ expect(mockAgentStrategy).toHaveBeenCalledWith(expect.objectContaining({
+ formSchema: expect.arrayContaining([
+ expect.objectContaining({
+ variable: 'instruction',
+ tooltip: { en_US: 'Instruction help' },
+ }),
+ expect.objectContaining({
+ variable: 'modelParam',
+ }),
+ ]),
+ formValue: {
+ instruction: 'Plan and answer',
+ },
+ }))
+
+ await user.click(screen.getByRole('button', { name: 'change-strategy' }))
+ await user.click(screen.getByRole('button', { name: 'change-form' }))
+ await user.click(screen.getByRole('button', { name: 'change-memory' }))
+
+ expect(setInputs).toHaveBeenCalledWith(expect.objectContaining({
+ agent_strategy_provider_name: 'provider/updated',
+ agent_strategy_name: 'updated',
+ agent_strategy_label: 'Updated Strategy',
+ plugin_unique_identifier: 'provider/updated:1.0.0',
+ output_schema: expect.objectContaining({
+ properties: expect.objectContaining({
+ structured: expect.any(Object),
+ }),
+ }),
+ }))
+ expect(onFormChange).toHaveBeenCalledWith({ instruction: 'Use the tool' })
+ expect(handleMemoryChange).toHaveBeenCalledWith(expect.objectContaining({
+ query_prompt_template: 'history',
+ }))
+ expect(mockResetEditor).toHaveBeenCalledTimes(1)
+ })
+
+ it('hides memory config when chat mode support is unavailable', () => {
+ mockUseConfig.mockReturnValue(createConfigResult({
+ isChatMode: false,
+ currentStrategy: {
+ ...createConfigResult().currentStrategy!,
+ features: [],
+ },
+ }))
+
+ render(
+ ,
+ )
+
+ expect(screen.queryByRole('button', { name: 'change-memory' })).not.toBeInTheDocument()
+ expect(mockMemoryConfig).not.toHaveBeenCalled()
+ })
+})
diff --git a/web/app/components/workflow/nodes/agent/__tests__/use-config.spec.ts b/web/app/components/workflow/nodes/agent/__tests__/use-config.spec.ts
new file mode 100644
index 0000000000..9e09ab6d78
--- /dev/null
+++ b/web/app/components/workflow/nodes/agent/__tests__/use-config.spec.ts
@@ -0,0 +1,422 @@
+import type { AgentNodeType } from '../types'
+import type { StrategyParamItem } from '@/app/components/plugins/types'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { BlockEnum, VarType as WorkflowVarType } from '@/app/components/workflow/types'
+import { VarType } from '../../tool/types'
+import useConfig, { useStrategyInfo } from '../use-config'
+
+const mockUseNodesReadOnly = vi.hoisted(() => vi.fn())
+const mockUseIsChatMode = vi.hoisted(() => vi.fn())
+const mockUseNodeCrud = vi.hoisted(() => vi.fn())
+const mockUseVarList = vi.hoisted(() => vi.fn())
+const mockUseAvailableVarList = vi.hoisted(() => vi.fn())
+const mockUseStrategyProviderDetail = vi.hoisted(() => vi.fn())
+const mockUseFetchPluginsInMarketPlaceByIds = vi.hoisted(() => vi.fn())
+const mockUseCheckInstalled = vi.hoisted(() => vi.fn())
+const mockGenerateAgentToolValue = vi.hoisted(() => vi.fn())
+const mockToolParametersToFormSchemas = vi.hoisted(() => vi.fn())
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+ useNodesReadOnly: (...args: unknown[]) => mockUseNodesReadOnly(...args),
+ useIsChatMode: (...args: unknown[]) => mockUseIsChatMode(...args),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-node-crud', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseNodeCrud(...args),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-var-list', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseVarList(...args),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-available-var-list', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseAvailableVarList(...args),
+}))
+
+vi.mock('@/service/use-strategy', () => ({
+ useStrategyProviderDetail: (...args: unknown[]) => mockUseStrategyProviderDetail(...args),
+}))
+
+vi.mock('@/service/use-plugins', () => ({
+ useFetchPluginsInMarketPlaceByIds: (...args: unknown[]) => mockUseFetchPluginsInMarketPlaceByIds(...args),
+ useCheckInstalled: (...args: unknown[]) => mockUseCheckInstalled(...args),
+}))
+
+vi.mock('@/app/components/tools/utils/to-form-schema', () => ({
+ generateAgentToolValue: (...args: unknown[]) => mockGenerateAgentToolValue(...args),
+ toolParametersToFormSchemas: (...args: unknown[]) => mockToolParametersToFormSchemas(...args),
+}))
+
+const createStrategyParam = (overrides: Partial = {}): StrategyParamItem => ({
+ name: 'instruction',
+ type: FormTypeEnum.any,
+ required: true,
+ label: { en_US: 'Instruction' } as StrategyParamItem['label'],
+ help: { en_US: 'Instruction help' } as StrategyParamItem['help'],
+ placeholder: { en_US: 'Instruction placeholder' } as StrategyParamItem['placeholder'],
+ scope: 'global',
+ default: null,
+ options: [],
+ template: { enabled: false },
+ auto_generate: { type: 'none' },
+ ...overrides,
+})
+
+const createToolValue = () => ({
+ settings: {
+ api_key: 'secret',
+ },
+ parameters: {
+ query: 'weather',
+ },
+ schemas: [
+ {
+ variable: 'api_key',
+ form: 'form',
+ },
+ {
+ variable: 'query',
+ form: 'llm',
+ },
+ ],
+})
+
+const createData = (overrides: Partial = {}): AgentNodeType => ({
+ title: 'Agent',
+ desc: '',
+ type: BlockEnum.Agent,
+ output_schema: {
+ properties: {
+ summary: {
+ type: 'string',
+ description: 'summary output',
+ },
+ items: {
+ type: 'array',
+ items: {
+ type: 'number',
+ },
+ description: 'items output',
+ },
+ },
+ },
+ agent_strategy_provider_name: 'provider/agent',
+ agent_strategy_name: 'react',
+ agent_strategy_label: 'React Agent',
+ plugin_unique_identifier: 'provider/agent:1.0.0',
+ agent_parameters: {
+ instruction: {
+ type: VarType.variable,
+ value: '#start.topic#',
+ },
+ modelParam: {
+ type: VarType.constant,
+ value: {
+ provider: 'openai',
+ model: 'gpt-4o',
+ },
+ },
+ },
+ meta: { version: '1.0.0' } as AgentNodeType['meta'],
+ ...overrides,
+})
+
+describe('agent/use-config', () => {
+ const providerRefetch = vi.fn()
+ const marketplaceRefetch = vi.fn()
+ const setInputs = vi.fn()
+ const handleVarListChange = vi.fn()
+ const handleAddVariable = vi.fn()
+ let currentInputs: AgentNodeType
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ currentInputs = createData({
+ tool_node_version: '2',
+ })
+
+ mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: false, getNodesReadOnly: () => false })
+ mockUseIsChatMode.mockReturnValue(true)
+ mockUseNodeCrud.mockImplementation(() => ({
+ inputs: currentInputs,
+ setInputs,
+ }))
+ mockUseVarList.mockReturnValue({
+ handleVarListChange,
+ handleAddVariable,
+ } as never)
+ mockUseAvailableVarList.mockReturnValue({
+ availableVars: [{
+ nodeId: 'node-1',
+ title: 'Start',
+ vars: [{
+ variable: 'topic',
+ type: WorkflowVarType.string,
+ }],
+ }],
+ availableNodesWithParent: [{
+ nodeId: 'node-1',
+ title: 'Start',
+ }],
+ } as never)
+ mockUseStrategyProviderDetail.mockReturnValue({
+ isLoading: false,
+ isError: false,
+ data: {
+ declaration: {
+ strategies: [{
+ identity: {
+ name: 'react',
+ },
+ parameters: [
+ createStrategyParam(),
+ createStrategyParam({
+ name: 'modelParam',
+ type: FormTypeEnum.modelSelector,
+ required: false,
+ }),
+ ],
+ }],
+ },
+ },
+ refetch: providerRefetch,
+ } as never)
+ mockUseFetchPluginsInMarketPlaceByIds.mockReturnValue({
+ isLoading: false,
+ data: {
+ data: {
+ plugins: [{ id: 'provider/agent' }],
+ },
+ },
+ refetch: marketplaceRefetch,
+ } as never)
+ mockUseCheckInstalled.mockReturnValue({
+ data: {
+ plugins: [{
+ declaration: {
+ label: { en_US: 'Installed Agent Plugin' },
+ },
+ }],
+ },
+ } as never)
+ mockToolParametersToFormSchemas.mockImplementation(value => value as never)
+ mockGenerateAgentToolValue.mockImplementation((_value, schemas, isLLM) => ({
+ kind: isLLM ? 'llm' : 'setting',
+ fields: (schemas as Array<{ variable: string }>).map(item => item.variable),
+ }) as never)
+ })
+
+ it('returns an undefined strategy status while strategy data is still loading and can refetch dependencies', () => {
+ mockUseStrategyProviderDetail.mockReturnValue({
+ isLoading: true,
+ isError: false,
+ data: undefined,
+ refetch: providerRefetch,
+ } as never)
+
+ const { result } = renderHook(() => useStrategyInfo('provider/agent', 'react'))
+
+ expect(result.current.strategyStatus).toBeUndefined()
+ expect(result.current.strategy).toBeUndefined()
+
+ act(() => {
+ result.current.refetch()
+ })
+
+ expect(providerRefetch).toHaveBeenCalledTimes(1)
+ expect(marketplaceRefetch).toHaveBeenCalledTimes(1)
+ })
+
+ it('resolves strategy status for external plugins that are missing or not installed', () => {
+ mockUseStrategyProviderDetail.mockReturnValue({
+ isLoading: false,
+ isError: true,
+ data: {
+ declaration: {
+ strategies: [],
+ },
+ },
+ refetch: providerRefetch,
+ } as never)
+ mockUseFetchPluginsInMarketPlaceByIds.mockReturnValue({
+ isLoading: false,
+ data: {
+ data: {
+ plugins: [],
+ },
+ },
+ refetch: marketplaceRefetch,
+ } as never)
+
+ const { result } = renderHook(() => useStrategyInfo('provider/agent', 'react'))
+
+ expect(result.current.strategyStatus).toEqual({
+ plugin: {
+ source: 'external',
+ installed: false,
+ },
+ isExistInPlugin: false,
+ })
+ })
+
+ it('exposes derived form data, strategy state, output schema, and setter helpers', () => {
+ const { result } = renderHook(() => useConfig('agent-node', currentInputs))
+
+ expect(result.current.readOnly).toBe(false)
+ expect(result.current.isChatMode).toBe(true)
+ expect(result.current.formData).toEqual({
+ instruction: '#start.topic#',
+ modelParam: {
+ provider: 'openai',
+ model: 'gpt-4o',
+ },
+ })
+ expect(result.current.currentStrategyStatus).toEqual({
+ plugin: {
+ source: 'marketplace',
+ installed: true,
+ },
+ isExistInPlugin: true,
+ })
+ expect(result.current.availableVars).toHaveLength(1)
+ expect(result.current.availableNodesWithParent).toEqual([{
+ nodeId: 'node-1',
+ title: 'Start',
+ }])
+ expect(result.current.outputSchema).toEqual([
+ { name: 'summary', type: 'String', description: 'summary output' },
+ { name: 'items', type: 'Array[Number]', description: 'items output' },
+ ])
+
+ setInputs.mockClear()
+
+ act(() => {
+ result.current.onFormChange({
+ instruction: '#start.updated#',
+ modelParam: {
+ provider: 'anthropic',
+ model: 'claude-sonnet',
+ },
+ })
+ result.current.handleMemoryChange({
+ window: {
+ enabled: true,
+ size: 6,
+ },
+ query_prompt_template: 'history',
+ } as AgentNodeType['memory'])
+ })
+
+ expect(setInputs).toHaveBeenNthCalledWith(1, expect.objectContaining({
+ agent_parameters: {
+ instruction: {
+ type: VarType.variable,
+ value: '#start.updated#',
+ },
+ modelParam: {
+ type: VarType.constant,
+ value: {
+ provider: 'anthropic',
+ model: 'claude-sonnet',
+ },
+ },
+ },
+ }))
+ expect(setInputs).toHaveBeenNthCalledWith(2, expect.objectContaining({
+ memory: {
+ window: {
+ enabled: true,
+ size: 6,
+ },
+ query_prompt_template: 'history',
+ },
+ }))
+ expect(result.current.handleVarListChange).toBe(handleVarListChange)
+ expect(result.current.handleAddVariable).toBe(handleAddVariable)
+ expect(result.current.pluginDetail).toEqual({
+ declaration: {
+ label: { en_US: 'Installed Agent Plugin' },
+ },
+ })
+ })
+
+ it('formats legacy tool selector values before exposing the node config', async () => {
+ currentInputs = createData({
+ tool_node_version: undefined,
+ agent_parameters: {
+ toolParam: {
+ type: VarType.constant,
+ value: createToolValue(),
+ },
+ multiToolParam: {
+ type: VarType.constant,
+ value: [createToolValue()],
+ },
+ },
+ })
+ mockUseStrategyProviderDetail.mockReturnValue({
+ isLoading: false,
+ isError: false,
+ data: {
+ declaration: {
+ strategies: [{
+ identity: {
+ name: 'react',
+ },
+ parameters: [
+ createStrategyParam({
+ name: 'toolParam',
+ type: FormTypeEnum.toolSelector,
+ required: false,
+ }),
+ createStrategyParam({
+ name: 'multiToolParam',
+ type: FormTypeEnum.multiToolSelector,
+ required: false,
+ }),
+ ],
+ }],
+ },
+ },
+ refetch: providerRefetch,
+ } as never)
+
+ renderHook(() => useConfig('agent-node', currentInputs))
+
+ await waitFor(() => {
+ expect(setInputs).toHaveBeenCalledWith(expect.objectContaining({
+ tool_node_version: '2',
+ agent_parameters: expect.objectContaining({
+ toolParam: expect.objectContaining({
+ value: expect.objectContaining({
+ settings: {
+ kind: 'setting',
+ fields: ['api_key'],
+ },
+ parameters: {
+ kind: 'llm',
+ fields: ['query'],
+ },
+ }),
+ }),
+ multiToolParam: expect.objectContaining({
+ value: [expect.objectContaining({
+ settings: {
+ kind: 'setting',
+ fields: ['api_key'],
+ },
+ parameters: {
+ kind: 'llm',
+ fields: ['query'],
+ },
+ })],
+ }),
+ }),
+ }))
+ })
+ })
+})
diff --git a/web/app/components/workflow/nodes/agent/__tests__/use-single-run-form-params.spec.ts b/web/app/components/workflow/nodes/agent/__tests__/use-single-run-form-params.spec.ts
new file mode 100644
index 0000000000..33075e685f
--- /dev/null
+++ b/web/app/components/workflow/nodes/agent/__tests__/use-single-run-form-params.spec.ts
@@ -0,0 +1,144 @@
+import type { AgentNodeType } from '../types'
+import type { InputVar } from '@/app/components/workflow/types'
+import { renderHook } from '@testing-library/react'
+import formatTracing from '@/app/components/workflow/run/utils/format-log'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
+import useNodeCrud from '../../_base/hooks/use-node-crud'
+import { VarType } from '../../tool/types'
+import { useStrategyInfo } from '../use-config'
+import useSingleRunFormParams from '../use-single-run-form-params'
+
+vi.mock('@/app/components/workflow/run/utils/format-log', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+vi.mock('../../_base/hooks/use-node-crud', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+vi.mock('../use-config', async () => {
+ const actual = await vi.importActual('../use-config')
+ return {
+ ...actual,
+ useStrategyInfo: vi.fn(),
+ }
+})
+
+const mockFormatTracing = vi.mocked(formatTracing)
+const mockUseNodeCrud = vi.mocked(useNodeCrud)
+const mockUseStrategyInfo = vi.mocked(useStrategyInfo)
+
+const createData = (overrides: Partial = {}): AgentNodeType => ({
+ title: 'Agent',
+ desc: '',
+ type: BlockEnum.Agent,
+ output_schema: {},
+ agent_strategy_provider_name: 'provider/agent',
+ agent_strategy_name: 'react',
+ agent_strategy_label: 'React Agent',
+ agent_parameters: {
+ prompt: {
+ type: VarType.variable,
+ value: '#start.topic#',
+ },
+ summary: {
+ type: VarType.variable,
+ value: '#node-2.answer#',
+ },
+ count: {
+ type: VarType.constant,
+ value: 2,
+ },
+ },
+ ...overrides,
+})
+
+describe('agent/use-single-run-form-params', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseNodeCrud.mockReturnValue({
+ inputs: createData(),
+ setInputs: vi.fn(),
+ } as unknown as ReturnType)
+ mockUseStrategyInfo.mockReturnValue({
+ strategyProvider: undefined,
+ strategy: {
+ parameters: [
+ { name: 'prompt', type: 'string' },
+ { name: 'summary', type: 'string' },
+ { name: 'count', type: 'number' },
+ ],
+ },
+ strategyStatus: undefined,
+ refetch: vi.fn(),
+ } as unknown as ReturnType)
+ mockFormatTracing.mockReturnValue([{
+ id: 'agent-node',
+ status: 'succeeded',
+ }] as unknown as ReturnType)
+ })
+
+ it('builds a single-run variable form, returns node info, and skips malformed dependent vars', () => {
+ const setRunInputData = vi.fn()
+ const getInputVars = vi.fn<() => InputVar[]>(() => [
+ {
+ label: 'Prompt',
+ variable: '#start.topic#',
+ type: InputVarType.textInput,
+ required: true,
+ },
+ {
+ label: 'Broken',
+ variable: undefined as unknown as string,
+ type: InputVarType.textInput,
+ required: false,
+ },
+ ])
+
+ const { result } = renderHook(() => useSingleRunFormParams({
+ id: 'agent-node',
+ payload: createData(),
+ runInputData: { topic: 'finance' },
+ runInputDataRef: { current: { topic: 'finance' } },
+ getInputVars,
+ setRunInputData,
+ toVarInputs: () => [],
+ runResult: { id: 'trace-1' } as never,
+ }))
+
+ expect(getInputVars).toHaveBeenCalledWith(['#start.topic#', '#node-2.answer#'])
+ expect(result.current.forms).toHaveLength(1)
+ expect(result.current.forms[0].inputs).toHaveLength(2)
+ expect(result.current.forms[0].values).toEqual({ topic: 'finance' })
+ expect(result.current.nodeInfo).toEqual({
+ id: 'agent-node',
+ status: 'succeeded',
+ })
+
+ result.current.forms[0].onChange({ topic: 'updated' })
+
+ expect(setRunInputData).toHaveBeenCalledWith({ topic: 'updated' })
+ expect(result.current.getDependentVars()).toEqual([
+ ['start', 'topic'],
+ ])
+ })
+
+ it('returns an empty form list when no variable input is required and no run result is available', () => {
+ const { result } = renderHook(() => useSingleRunFormParams({
+ id: 'agent-node',
+ payload: createData(),
+ runInputData: {},
+ runInputDataRef: { current: {} },
+ getInputVars: () => [],
+ setRunInputData: vi.fn(),
+ toVarInputs: () => [],
+ runResult: undefined as never,
+ }))
+
+ expect(result.current.forms).toEqual([])
+ expect(result.current.nodeInfo).toBeUndefined()
+ expect(result.current.getDependentVars()).toEqual([])
+ })
+})
diff --git a/web/app/components/workflow/nodes/agent/components/__tests__/model-bar.spec.tsx b/web/app/components/workflow/nodes/agent/components/__tests__/model-bar.spec.tsx
new file mode 100644
index 0000000000..d85f54ed19
--- /dev/null
+++ b/web/app/components/workflow/nodes/agent/components/__tests__/model-bar.spec.tsx
@@ -0,0 +1,78 @@
+import type { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { ModelBar } from '../model-bar'
+
+type ModelProviderItem = {
+ provider: string
+ models: Array<{ model: string }>
+}
+
+const mockModelLists = new Map()
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
+ useModelList: (modelType: ModelTypeEnum) => ({
+ data: mockModelLists.get(modelType) || [],
+ }),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
+ default: ({
+ defaultModel,
+ modelList,
+ }: {
+ defaultModel?: { provider: string, model: string }
+ modelList: ModelProviderItem[]
+ }) => (
+
+ {defaultModel ? `${defaultModel.provider}/${defaultModel.model}` : 'no-model'}
+ :
+ {modelList.length}
+
+ ),
+}))
+
+vi.mock('@/app/components/header/indicator', () => ({
+ default: ({ color }: { color: string }) => {`indicator:${color}`}
,
+}))
+
+describe('agent/model-bar', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockModelLists.clear()
+ mockModelLists.set('llm' as ModelTypeEnum, [{ provider: 'openai', models: [{ model: 'gpt-4o' }] }])
+ mockModelLists.set('moderation' as ModelTypeEnum, [])
+ mockModelLists.set('rerank' as ModelTypeEnum, [])
+ mockModelLists.set('speech2text' as ModelTypeEnum, [])
+ mockModelLists.set('text-embedding' as ModelTypeEnum, [])
+ mockModelLists.set('tts' as ModelTypeEnum, [])
+ })
+
+ it('should render an empty readonly selector with a warning when no model is selected', () => {
+ render()
+
+ const emptySelector = screen.getByText((_, element) => element?.textContent === 'no-model:0')
+
+ fireEvent.mouseEnter(emptySelector)
+
+ expect(emptySelector).toBeInTheDocument()
+ expect(screen.getByText('indicator:red')).toBeInTheDocument()
+ expect(screen.getByText('workflow.nodes.agent.modelNotSelected')).toBeInTheDocument()
+ })
+
+ it('should render the selected model without warning when it is installed', () => {
+ render()
+
+ expect(screen.getByText('openai/gpt-4o:1')).toBeInTheDocument()
+ expect(screen.queryByText('indicator:red')).not.toBeInTheDocument()
+ })
+
+ it('should show a warning tooltip when the selected model is not installed', () => {
+ render()
+
+ fireEvent.mouseEnter(screen.getByText('openai/gpt-4.1:1'))
+
+ expect(screen.getByText('openai/gpt-4.1:1')).toBeInTheDocument()
+ expect(screen.getByText('indicator:red')).toBeInTheDocument()
+ expect(screen.getByText('workflow.nodes.agent.modelNotInstallTooltip')).toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/workflow/nodes/agent/components/__tests__/tool-icon.spec.tsx b/web/app/components/workflow/nodes/agent/components/__tests__/tool-icon.spec.tsx
new file mode 100644
index 0000000000..30a12bb528
--- /dev/null
+++ b/web/app/components/workflow/nodes/agent/components/__tests__/tool-icon.spec.tsx
@@ -0,0 +1,113 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { ToolIcon } from '../tool-icon'
+
+type ToolProvider = {
+ id?: string
+ name?: string
+ icon?: string | { content: string, background: string }
+ is_team_authorization?: boolean
+}
+
+let mockBuiltInTools: ToolProvider[] | undefined
+let mockCustomTools: ToolProvider[] | undefined
+let mockWorkflowTools: ToolProvider[] | undefined
+let mockMcpTools: ToolProvider[] | undefined
+let mockMarketplaceIcon: string | { content: string, background: string } | undefined
+
+vi.mock('@/service/use-tools', () => ({
+ useAllBuiltInTools: () => ({ data: mockBuiltInTools }),
+ useAllCustomTools: () => ({ data: mockCustomTools }),
+ useAllWorkflowTools: () => ({ data: mockWorkflowTools }),
+ useAllMCPTools: () => ({ data: mockMcpTools }),
+}))
+
+vi.mock('@/app/components/base/app-icon', () => ({
+ default: ({
+ icon,
+ background,
+ className,
+ }: {
+ icon?: string
+ background?: string
+ className?: string
+ }) => {`app-icon:${background}:${icon}`}
,
+}))
+
+vi.mock('@/app/components/base/icons/src/vender/other', () => ({
+ Group: ({ className }: { className?: string }) => group-icon
,
+}))
+
+vi.mock('@/app/components/header/indicator', () => ({
+ default: ({ color }: { color: string }) => {`indicator:${color}`}
,
+}))
+
+vi.mock('@/utils/get-icon', () => ({
+ getIconFromMarketPlace: () => mockMarketplaceIcon,
+}))
+
+describe('agent/tool-icon', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockBuiltInTools = []
+ mockCustomTools = []
+ mockWorkflowTools = []
+ mockMcpTools = []
+ mockMarketplaceIcon = undefined
+ })
+
+ it('should render a string icon, recover from fetch errors, and keep installed tools warning-free', () => {
+ mockBuiltInTools = [{
+ name: 'author/tool-a',
+ icon: 'https://example.com/tool-a.png',
+ is_team_authorization: true,
+ }]
+
+ render()
+
+ const icon = screen.getByRole('img', { name: 'tool icon' })
+ expect(icon).toHaveAttribute('src', 'https://example.com/tool-a.png')
+ expect(screen.queryByText(/indicator:/)).not.toBeInTheDocument()
+
+ fireEvent.mouseEnter(icon)
+ expect(screen.queryByText('workflow.nodes.agent.toolNotInstallTooltip')).not.toBeInTheDocument()
+
+ fireEvent.error(icon)
+ expect(screen.getByText('group-icon')).toBeInTheDocument()
+ })
+
+ it('should render authorization and installation warnings with the correct icon sources', () => {
+ mockWorkflowTools = [{
+ id: 'author/tool-b',
+ icon: {
+ content: 'B',
+ background: '#fff',
+ },
+ is_team_authorization: false,
+ }]
+
+ const { rerender } = render()
+
+ fireEvent.mouseEnter(screen.getByText('app-icon:#fff:B'))
+ expect(screen.getByText('indicator:yellow')).toBeInTheDocument()
+ expect(screen.getByText('workflow.nodes.agent.toolNotAuthorizedTooltip:{"tool":"tool-b"}')).toBeInTheDocument()
+
+ mockWorkflowTools = []
+ mockMarketplaceIcon = 'https://example.com/market-tool.png'
+ rerender()
+
+ const marketplaceIcon = screen.getByRole('img', { name: 'tool icon' })
+ fireEvent.mouseEnter(marketplaceIcon)
+ expect(marketplaceIcon).toHaveAttribute('src', 'https://example.com/market-tool.png')
+ expect(screen.getByText('indicator:red')).toBeInTheDocument()
+ expect(screen.getByText('workflow.nodes.agent.toolNotInstallTooltip:{"tool":"tool-c"}')).toBeInTheDocument()
+ })
+
+ it('should fall back to the group icon while tool data is still loading', () => {
+ mockBuiltInTools = undefined
+
+ render()
+
+ expect(screen.getByText('group-icon')).toBeInTheDocument()
+ expect(screen.queryByText(/indicator:/)).not.toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/workflow/nodes/answer/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/answer/__tests__/panel.spec.tsx
new file mode 100644
index 0000000000..b5fbdf163f
--- /dev/null
+++ b/web/app/components/workflow/nodes/answer/__tests__/panel.spec.tsx
@@ -0,0 +1,92 @@
+import type { AnswerNodeType } from '../types'
+import type { PanelProps } from '@/types/workflow'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { BlockEnum } from '@/app/components/workflow/types'
+import Panel from '../panel'
+
+type MockEditorProps = {
+ readOnly: boolean
+ title: string
+ value: string
+ onChange: (value: string) => void
+ nodesOutputVars: unknown[]
+ availableNodes: unknown[]
+}
+
+const mockUseConfig = vi.hoisted(() => vi.fn())
+const mockUseAvailableVarList = vi.hoisted(() => vi.fn())
+const mockEditorRender = vi.hoisted(() => vi.fn())
+
+vi.mock('../use-config', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseConfig(...args),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-available-var-list', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseAvailableVarList(...args),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/prompt/editor', () => ({
+ __esModule: true,
+ default: (props: MockEditorProps) => {
+ mockEditorRender(props)
+ return (
+
+ )
+ },
+}))
+
+const createData = (overrides: Partial = {}): AnswerNodeType => ({
+ title: 'Answer',
+ desc: '',
+ type: BlockEnum.Answer,
+ variables: [],
+ answer: 'Initial answer',
+ ...overrides,
+})
+
+describe('AnswerPanel', () => {
+ const handleAnswerChange = vi.fn()
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseConfig.mockReturnValue({
+ readOnly: false,
+ inputs: createData(),
+ handleAnswerChange,
+ filterVar: vi.fn(),
+ })
+ mockUseAvailableVarList.mockReturnValue({
+ availableVars: [{ variable: 'context', type: 'string' }],
+ availableNodesWithParent: [{ value: 'node-1', label: 'Node 1' }],
+ })
+ })
+
+ it('should pass editor state and available variables through to the prompt editor', () => {
+ render()
+
+ expect(screen.getByRole('button', { name: 'workflow.nodes.answer.answer:Initial answer' })).toBeInTheDocument()
+ expect(mockEditorRender).toHaveBeenCalledWith(expect.objectContaining({
+ readOnly: false,
+ title: 'workflow.nodes.answer.answer',
+ value: 'Initial answer',
+ nodesOutputVars: [{ variable: 'context', type: 'string' }],
+ availableNodes: [{ value: 'node-1', label: 'Node 1' }],
+ isSupportFileVar: true,
+ justVar: true,
+ }))
+ })
+
+ it('should delegate answer edits to use-config', () => {
+ render()
+
+ fireEvent.click(screen.getByRole('button', { name: 'workflow.nodes.answer.answer:Initial answer' }))
+
+ expect(handleAnswerChange).toHaveBeenCalledWith('Updated answer')
+ })
+})
diff --git a/web/app/components/workflow/nodes/answer/__tests__/use-config.spec.ts b/web/app/components/workflow/nodes/answer/__tests__/use-config.spec.ts
new file mode 100644
index 0000000000..106355e8c5
--- /dev/null
+++ b/web/app/components/workflow/nodes/answer/__tests__/use-config.spec.ts
@@ -0,0 +1,81 @@
+import type { AnswerNodeType } from '../types'
+import { act, renderHook } from '@testing-library/react'
+import { BlockEnum, VarType } from '@/app/components/workflow/types'
+import useConfig from '../use-config'
+
+const mockUseNodesReadOnly = vi.hoisted(() => vi.fn())
+const mockUseNodeCrud = vi.hoisted(() => vi.fn())
+const mockUseVarList = vi.hoisted(() => vi.fn())
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+ useNodesReadOnly: () => mockUseNodesReadOnly(),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-node-crud', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseNodeCrud(...args),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-var-list', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseVarList(...args),
+}))
+
+const createPayload = (overrides: Partial = {}): AnswerNodeType => ({
+ title: 'Answer',
+ desc: '',
+ type: BlockEnum.Answer,
+ variables: [],
+ answer: 'Initial answer',
+ ...overrides,
+})
+
+describe('answer/use-config', () => {
+ const mockSetInputs = vi.fn()
+ const mockHandleVarListChange = vi.fn()
+ const mockHandleAddVariable = vi.fn()
+ let currentInputs: AnswerNodeType
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ currentInputs = createPayload()
+
+ mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: false })
+ mockUseNodeCrud.mockReturnValue({
+ inputs: currentInputs,
+ setInputs: mockSetInputs,
+ })
+ mockUseVarList.mockReturnValue({
+ handleVarListChange: mockHandleVarListChange,
+ handleAddVariable: mockHandleAddVariable,
+ })
+ })
+
+ it('should update the answer text and expose var-list handlers', () => {
+ const { result } = renderHook(() => useConfig('answer-node', currentInputs))
+
+ act(() => {
+ result.current.handleAnswerChange('Updated answer')
+ })
+
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ answer: 'Updated answer',
+ }))
+ expect(result.current.handleVarListChange).toBe(mockHandleVarListChange)
+ expect(result.current.handleAddVariable).toBe(mockHandleAddVariable)
+ expect(result.current.readOnly).toBe(false)
+ })
+
+ it('should filter out array-object variables from the prompt editor picker', () => {
+ const { result } = renderHook(() => useConfig('answer-node', currentInputs))
+
+ expect(result.current.filterVar({
+ variable: 'items',
+ type: VarType.arrayObject,
+ })).toBe(false)
+ expect(result.current.filterVar({
+ variable: 'message',
+ type: VarType.string,
+ })).toBe(true)
+ })
+})
diff --git a/web/app/components/workflow/nodes/assigner/__tests__/node.spec.tsx b/web/app/components/workflow/nodes/assigner/__tests__/node.spec.tsx
new file mode 100644
index 0000000000..a1fd87d386
--- /dev/null
+++ b/web/app/components/workflow/nodes/assigner/__tests__/node.spec.tsx
@@ -0,0 +1,150 @@
+import type { AssignerNodeOperation, AssignerNodeType } from '../types'
+import { render, screen } from '@testing-library/react'
+import { useNodes } from 'reactflow'
+import { BlockEnum } from '@/app/components/workflow/types'
+import Node from '../node'
+import { AssignerNodeInputType, WriteMode } from '../types'
+
+vi.mock('reactflow', async () => {
+ const actual = await vi.importActual('reactflow')
+ return {
+ ...actual,
+ useNodes: vi.fn(),
+ }
+})
+
+vi.mock('@/app/components/workflow/nodes/_base/components/variable/variable-label', () => ({
+ VariableLabelInNode: ({
+ variables,
+ nodeTitle,
+ nodeType,
+ rightSlot,
+ }: {
+ variables: string[]
+ nodeTitle?: string
+ nodeType?: BlockEnum
+ rightSlot?: React.ReactNode
+ }) => (
+
+ {`${nodeTitle}:${nodeType}:${variables.join('.')}`}
+ {rightSlot}
+
+ ),
+}))
+
+const mockUseNodes = vi.mocked(useNodes)
+
+const createOperation = (overrides: Partial = {}): AssignerNodeOperation => ({
+ variable_selector: ['node-1', 'count'],
+ input_type: AssignerNodeInputType.variable,
+ operation: WriteMode.overwrite,
+ value: ['node-2', 'result'],
+ ...overrides,
+})
+
+const createData = (overrides: Partial = {}): AssignerNodeType => ({
+ title: 'Assigner',
+ desc: '',
+ type: BlockEnum.VariableAssigner,
+ version: '2',
+ items: [createOperation()],
+ ...overrides,
+})
+
+describe('assigner/node', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseNodes.mockReturnValue([
+ {
+ id: 'node-1',
+ data: {
+ title: 'Answer',
+ type: BlockEnum.Answer,
+ },
+ },
+ {
+ id: 'start-node',
+ data: {
+ title: 'Start',
+ type: BlockEnum.Start,
+ },
+ },
+ ] as ReturnType)
+ })
+
+ it('renders the empty-state hint when no assignable variable is configured', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText('workflow.nodes.assigner.varNotSet')).toBeInTheDocument()
+ })
+
+ it('renders both version 2 and legacy previews with resolved node labels', () => {
+ const { container, rerender } = render(
+ ,
+ )
+
+ expect(screen.getByText('Answer:answer:node-1.count')).toBeInTheDocument()
+ expect(screen.getByText('workflow.nodes.assigner.operations.over-write')).toBeInTheDocument()
+
+ rerender(
+ ,
+ )
+
+ expect(screen.getByText('Start:start:sys.query')).toBeInTheDocument()
+ expect(screen.getByText('workflow.nodes.assigner.operations.append')).toBeInTheDocument()
+
+ rerender(
+ ,
+ )
+
+ expect(container).toBeEmptyDOMElement()
+ })
+
+ it('skips empty v2 operations and resolves system variables through the start node', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText('Start:start:sys.query')).toBeInTheDocument()
+ expect(screen.queryByText('undefined:undefined:')).not.toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/workflow/nodes/assigner/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/assigner/__tests__/panel.spec.tsx
new file mode 100644
index 0000000000..c70c84beab
--- /dev/null
+++ b/web/app/components/workflow/nodes/assigner/__tests__/panel.spec.tsx
@@ -0,0 +1,119 @@
+import type { AssignerNodeOperation, AssignerNodeType } from '../types'
+import type { PanelProps } from '@/types/workflow'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { BlockEnum } from '@/app/components/workflow/types'
+import Panel from '../panel'
+import { AssignerNodeInputType, WriteMode } from '../types'
+
+type MockVarListProps = {
+ readonly: boolean
+ nodeId: string
+ list: AssignerNodeOperation[]
+ onChange: (list: AssignerNodeOperation[]) => void
+}
+
+const mockUseConfig = vi.hoisted(() => vi.fn())
+const mockUseHandleAddOperationItem = vi.hoisted(() => vi.fn())
+const mockVarListRender = vi.hoisted(() => vi.fn())
+
+const createOperation = (overrides: Partial = {}): AssignerNodeOperation => ({
+ variable_selector: ['node-1', 'count'],
+ input_type: AssignerNodeInputType.variable,
+ operation: WriteMode.overwrite,
+ value: ['node-2', 'result'],
+ ...overrides,
+})
+
+vi.mock('../use-config', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseConfig(...args),
+}))
+
+vi.mock('../hooks', () => ({
+ useHandleAddOperationItem: () => mockUseHandleAddOperationItem,
+}))
+
+vi.mock('../components/var-list', () => ({
+ __esModule: true,
+ default: (props: MockVarListProps) => {
+ mockVarListRender(props)
+ return (
+
+
{props.list.map(item => item.variable_selector.join('.')).join(',')}
+
+
+
+
+
+ ),
+}))
+
+vi.mock('../../operation-selector', () => ({
+ __esModule: true,
+ default: ({
+ onSelect,
+ }: {
+ onSelect: (item: { value: string }) => void
+ }) => (
+
+
+
+
+ ),
+}))
+
+const createOperation = (
+ overrides: Partial['list'][number]> = {},
+): ComponentProps['list'][number] => ({
+ variable_selector: ['node-a', 'flag'],
+ input_type: AssignerNodeInputType.variable,
+ operation: WriteMode.overwrite,
+ value: ['node-a', 'answer'],
+ ...overrides,
+})
+
+const renderVarList = (props: Partial> = {}) => {
+ const handleChange = vi.fn()
+ const handleOpen = vi.fn()
+
+ const result = render(
+ VarType.string}
+ getToAssignedVarType={() => VarType.string}
+ writeModeTypes={[WriteMode.overwrite, WriteMode.clear, WriteMode.set]}
+ writeModeTypesArr={[WriteMode.overwrite, WriteMode.clear]}
+ writeModeTypesNum={[WriteMode.increment]}
+ {...props}
+ />,
+ )
+
+ return {
+ ...result,
+ handleChange,
+ handleOpen,
+ }
+}
+
+describe('assigner/var-list branches', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('resets operation metadata when the assigned variable changes', async () => {
+ const user = userEvent.setup()
+ const { handleChange, handleOpen } = renderVarList({
+ list: [createOperation({
+ operation: WriteMode.set,
+ input_type: AssignerNodeInputType.constant,
+ value: 'stale',
+ })],
+ })
+
+ await user.click(screen.getByTestId('assigned-picker-trigger'))
+ await user.click(screen.getByRole('button', { name: 'select-assigned' }))
+
+ expect(handleOpen).toHaveBeenCalledWith(0)
+ expect(handleChange).toHaveBeenLastCalledWith([
+ createOperation({
+ variable_selector: ['node-b', 'total'],
+ operation: WriteMode.overwrite,
+ input_type: AssignerNodeInputType.variable,
+ value: undefined,
+ }),
+ ], ['node-b', 'total'])
+ })
+
+ it('switches back to variable mode when the selected operation no longer requires a constant', async () => {
+ const user = userEvent.setup()
+ const { handleChange } = renderVarList({
+ list: [createOperation({
+ operation: WriteMode.set,
+ input_type: AssignerNodeInputType.constant,
+ value: 'hello',
+ })],
+ })
+
+ await user.click(screen.getByRole('button', { name: 'operation-overwrite' }))
+
+ expect(handleChange).toHaveBeenLastCalledWith([
+ createOperation({
+ operation: WriteMode.overwrite,
+ input_type: AssignerNodeInputType.variable,
+ value: '',
+ }),
+ ])
+ })
+
+ it('updates string and number constant inputs through the inline editors', () => {
+ const { handleChange, rerender } = renderVarList({
+ list: [createOperation({
+ operation: WriteMode.set,
+ input_type: AssignerNodeInputType.constant,
+ value: 1,
+ })],
+ getAssignedVarType: () => VarType.number,
+ getToAssignedVarType: () => VarType.number,
+ })
+
+ fireEvent.change(screen.getByRole('spinbutton'), {
+ target: { value: '2' },
+ })
+
+ expect(handleChange).toHaveBeenLastCalledWith([
+ createOperation({
+ operation: WriteMode.set,
+ input_type: AssignerNodeInputType.constant,
+ value: 2,
+ }),
+ ], 2)
+
+ rerender(
+ VarType.string}
+ getToAssignedVarType={() => VarType.string}
+ writeModeTypes={[WriteMode.overwrite, WriteMode.clear, WriteMode.set]}
+ writeModeTypesArr={[WriteMode.overwrite, WriteMode.clear]}
+ writeModeTypesNum={[WriteMode.increment]}
+ />,
+ )
+
+ fireEvent.change(screen.getByRole('textbox'), {
+ target: { value: 'updated' },
+ })
+
+ expect(handleChange).toHaveBeenLastCalledWith([
+ createOperation({
+ operation: WriteMode.set,
+ input_type: AssignerNodeInputType.constant,
+ value: 'updated',
+ }),
+ ], 'updated')
+ })
+
+ it('updates numeric write-mode inputs through the dedicated number field', () => {
+ const { handleChange } = renderVarList({
+ list: [createOperation({
+ operation: WriteMode.increment,
+ value: 2,
+ })],
+ getAssignedVarType: () => VarType.number,
+ getToAssignedVarType: () => VarType.number,
+ writeModeTypesNum: [WriteMode.increment],
+ })
+
+ fireEvent.change(screen.getByRole('spinbutton'), {
+ target: { value: '5' },
+ })
+
+ expect(handleChange).toHaveBeenLastCalledWith([
+ createOperation({
+ operation: WriteMode.increment,
+ value: 5,
+ }),
+ ], 5)
+ })
+})
diff --git a/web/app/components/workflow/nodes/assigner/components/var-list/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/assigner/components/var-list/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..f7408ab814
--- /dev/null
+++ b/web/app/components/workflow/nodes/assigner/components/var-list/__tests__/index.spec.tsx
@@ -0,0 +1,146 @@
+import type { ComponentProps } from 'react'
+import { fireEvent, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { createNode, resetFixtureCounters } from '@/app/components/workflow/__tests__/fixtures'
+import { renderWorkflowFlowComponent } from '@/app/components/workflow/__tests__/workflow-test-env'
+import { BlockEnum, VarType } from '@/app/components/workflow/types'
+import { AssignerNodeInputType, WriteMode } from '../../../types'
+import VarList from '../index'
+
+const sourceNode = createNode({
+ id: 'node-a',
+ data: {
+ type: BlockEnum.Answer,
+ title: 'Answer Node',
+ outputs: {
+ answer: { type: VarType.string },
+ flag: { type: VarType.boolean },
+ },
+ },
+})
+
+const currentNode = createNode({
+ id: 'node-current',
+ data: {
+ type: BlockEnum.VariableAssigner,
+ title: 'Assigner Node',
+ },
+})
+
+const createOperation = (overrides: Partial['list'][number]> = {}) => ({
+ variable_selector: ['node-a', 'flag'],
+ input_type: AssignerNodeInputType.variable,
+ operation: WriteMode.overwrite,
+ value: ['node-a', 'answer'],
+ ...overrides,
+})
+
+const renderVarList = (props: Partial> = {}) => {
+ const handleChange = vi.fn()
+ const handleOpen = vi.fn()
+
+ const result = renderWorkflowFlowComponent(
+ VarType.string}
+ getToAssignedVarType={() => VarType.string}
+ writeModeTypes={[WriteMode.overwrite, WriteMode.clear, WriteMode.set]}
+ writeModeTypesArr={[WriteMode.overwrite, WriteMode.clear]}
+ writeModeTypesNum={[WriteMode.increment]}
+ {...props}
+ />,
+ {
+ nodes: [sourceNode, currentNode],
+ edges: [],
+ hooksStoreProps: {},
+ },
+ )
+
+ return {
+ ...result,
+ handleChange,
+ handleOpen,
+ }
+}
+
+describe('assigner/var-list', () => {
+ beforeEach(() => {
+ resetFixtureCounters()
+ })
+
+ it('renders the empty placeholder when no operations are configured', () => {
+ renderVarList()
+
+ expect(screen.getByText('workflow.nodes.assigner.noVarTip')).toBeInTheDocument()
+ })
+
+ it('switches a boolean assignment to constant mode and updates the selected value', async () => {
+ const user = userEvent.setup()
+ const list = [createOperation()]
+ const { handleChange, rerender } = renderVarList({
+ list,
+ getAssignedVarType: () => VarType.boolean,
+ getToAssignedVarType: () => VarType.boolean,
+ })
+
+ await user.click(screen.getByText('workflow.nodes.assigner.operations.over-write'))
+ await user.click(screen.getAllByText('workflow.nodes.assigner.operations.set').at(-1)!)
+
+ expect(handleChange.mock.lastCall?.[0]).toEqual([
+ createOperation({
+ operation: WriteMode.set,
+ input_type: AssignerNodeInputType.constant,
+ value: false,
+ }),
+ ])
+
+ rerender(
+ VarType.boolean}
+ getToAssignedVarType={() => VarType.boolean}
+ writeModeTypes={[WriteMode.overwrite, WriteMode.clear, WriteMode.set]}
+ writeModeTypesArr={[WriteMode.overwrite, WriteMode.clear]}
+ writeModeTypesNum={[WriteMode.increment]}
+ />,
+ )
+
+ await user.click(screen.getByText('True'))
+
+ expect(handleChange.mock.lastCall?.[0]).toEqual([
+ createOperation({
+ operation: WriteMode.set,
+ input_type: AssignerNodeInputType.constant,
+ value: true,
+ }),
+ ])
+ })
+
+ it('opens the assigned-variable picker and removes an operation', () => {
+ const { handleChange, handleOpen } = renderVarList({
+ list: [createOperation()],
+ })
+
+ fireEvent.click(screen.getAllByTestId('var-reference-picker-trigger')[0]!)
+ expect(handleOpen).toHaveBeenCalledWith(0)
+
+ const buttons = screen.getAllByRole('button')
+ fireEvent.click(buttons[buttons.length - 1]!)
+
+ expect(handleChange).toHaveBeenLastCalledWith([])
+ })
+})
diff --git a/web/app/components/workflow/nodes/code/__tests__/node.spec.tsx b/web/app/components/workflow/nodes/code/__tests__/node.spec.tsx
new file mode 100644
index 0000000000..a8648324ed
--- /dev/null
+++ b/web/app/components/workflow/nodes/code/__tests__/node.spec.tsx
@@ -0,0 +1,29 @@
+import type { CodeNodeType } from '../types'
+import { render } from '@testing-library/react'
+import { BlockEnum } from '@/app/components/workflow/types'
+import Node from '../node'
+import { CodeLanguage } from '../types'
+
+const createData = (overrides: Partial = {}): CodeNodeType => ({
+ title: 'Code',
+ desc: '',
+ type: BlockEnum.Code,
+ variables: [],
+ code_language: CodeLanguage.javascript,
+ code: 'function main() { return {} }',
+ outputs: {},
+ ...overrides,
+})
+
+describe('code/node', () => {
+ it('renders an empty summary container', () => {
+ const { container } = render(
+ ,
+ )
+
+ expect(container.firstChild).toBeEmptyDOMElement()
+ })
+})
diff --git a/web/app/components/workflow/nodes/code/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/code/__tests__/panel.spec.tsx
new file mode 100644
index 0000000000..72d640651d
--- /dev/null
+++ b/web/app/components/workflow/nodes/code/__tests__/panel.spec.tsx
@@ -0,0 +1,295 @@
+import type { ReactNode } from 'react'
+import type { CodeNodeType, OutputVar } from '../types'
+import type useConfig from '../use-config'
+import type { NodePanelProps, Variable } from '@/app/components/workflow/types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { BlockEnum, VarType } from '@/app/components/workflow/types'
+import Panel from '../panel'
+import { CodeLanguage } from '../types'
+
+const mockUseConfig = vi.hoisted(() => vi.fn())
+const mockExtractFunctionParams = vi.hoisted(() => vi.fn())
+const mockExtractReturnType = vi.hoisted(() => vi.fn())
+const mockCodeEditor = vi.hoisted(() => vi.fn())
+const mockVarList = vi.hoisted(() => vi.fn())
+const mockOutputVarList = vi.hoisted(() => vi.fn())
+const mockRemoveEffectVarConfirm = vi.hoisted(() => vi.fn())
+
+vi.mock('../use-config', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseConfig(...args),
+}))
+
+vi.mock('../code-parser', () => ({
+ extractFunctionParams: (...args: unknown[]) => mockExtractFunctionParams(...args),
+ extractReturnType: (...args: unknown[]) => mockExtractReturnType(...args),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/editor/code-editor', () => ({
+ __esModule: true,
+ default: (props: {
+ readOnly: boolean
+ language: CodeLanguage
+ value: string
+ onChange: (value: string) => void
+ onGenerated: (value: string) => void
+ title: ReactNode
+ }) => {
+ mockCodeEditor(props)
+ return (
+
+
{props.readOnly ? 'editor:readonly' : 'editor:editable'}
+
{props.language}
+
{props.title}
+
+
+
+
{props.readonly ? 'var-list:readonly' : 'var-list:editable'}
+
+
+
{props.readonly ? 'output-list:readonly' : 'output-list:editable'}
+
+
+
+
+
+
+ )
+ : null
+ },
+}))
+
+const createData = (overrides: Partial = {}): CodeNodeType => ({
+ title: 'Code',
+ desc: '',
+ type: BlockEnum.Code,
+ code_language: CodeLanguage.javascript,
+ code: 'function main({ foo }) { return { result: foo } }',
+ variables: [{
+ variable: 'foo',
+ value_selector: ['start', 'foo'],
+ value_type: VarType.string,
+ }],
+ outputs: {
+ result: {
+ type: VarType.string,
+ children: null,
+ },
+ },
+ ...overrides,
+})
+
+const createConfigResult = (overrides: Partial> = {}): ReturnType => ({
+ readOnly: false,
+ inputs: createData(),
+ outputKeyOrders: ['result'],
+ handleCodeAndVarsChange: vi.fn(),
+ handleVarListChange: vi.fn(),
+ handleAddVariable: vi.fn(),
+ handleRemoveVariable: vi.fn(),
+ handleSyncFunctionSignature: vi.fn(),
+ handleCodeChange: vi.fn(),
+ handleCodeLanguageChange: vi.fn(),
+ handleVarsChange: vi.fn(),
+ handleAddOutputVariable: vi.fn(),
+ filterVar: vi.fn(() => true),
+ isShowRemoveVarConfirm: true,
+ hideRemoveVarConfirm: vi.fn(),
+ onRemoveVarConfirm: vi.fn(),
+ ...overrides,
+})
+
+const renderPanel = (data: CodeNodeType = createData()) => {
+ const props: NodePanelProps = {
+ id: 'code-node',
+ data,
+ panelProps: {
+ getInputVars: vi.fn(() => []),
+ toVarInputs: vi.fn(() => []),
+ runInputData: {},
+ runInputDataRef: { current: {} },
+ setRunInputData: vi.fn(),
+ runResult: null,
+ },
+ }
+
+ return render()
+}
+
+describe('code/panel', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockExtractFunctionParams.mockReturnValue(['summary', 'count'])
+ mockExtractReturnType.mockReturnValue({
+ result: {
+ type: VarType.string,
+ children: null,
+ },
+ })
+ mockUseConfig.mockReturnValue(createConfigResult())
+ })
+
+ it('renders editable controls and forwards all input, output, and code actions', async () => {
+ const user = userEvent.setup()
+ const config = createConfigResult()
+ mockUseConfig.mockReturnValue(config)
+
+ renderPanel()
+
+ expect(screen.getByText('workflow.nodes.code.inputVars')).toBeInTheDocument()
+ expect(screen.getByText('workflow.nodes.code.outputVars')).toBeInTheDocument()
+ expect(screen.getByText('editor:editable')).toBeInTheDocument()
+ expect(screen.getByText('language:javascript')).toBeInTheDocument()
+
+ const addButtons = screen.getAllByTestId('add-button')
+ await user.click(addButtons[0]!)
+ await user.click(screen.getByTestId('sync-button'))
+ await user.click(screen.getByRole('button', { name: 'change-code' }))
+ await user.click(screen.getByRole('button', { name: 'generate-code' }))
+ await user.click(screen.getByRole('button', { name: 'language:javascript' }))
+ await user.click(screen.getByRole('button', { name: 'change-var-list' }))
+ await user.click(screen.getByRole('button', { name: 'change-output-list' }))
+ await user.click(screen.getByRole('button', { name: 'remove-output' }))
+ await user.click(addButtons[1]!)
+ await user.click(screen.getByRole('button', { name: 'cancel-remove' }))
+ await user.click(screen.getByRole('button', { name: 'confirm-remove' }))
+
+ expect(config.handleAddVariable).toHaveBeenCalled()
+ expect(config.handleSyncFunctionSignature).toHaveBeenCalled()
+ expect(config.handleCodeChange).toHaveBeenCalledWith('generated code body')
+ expect(config.handleCodeLanguageChange).toHaveBeenCalledWith(CodeLanguage.python3)
+ expect(config.handleVarListChange).toHaveBeenCalledWith([{
+ variable: 'changed',
+ value_selector: ['start', 'changed'],
+ }])
+ expect(config.handleVarsChange).toHaveBeenCalledWith({
+ next_result: {
+ type: VarType.number,
+ children: null,
+ },
+ })
+ expect(config.handleRemoveVariable).toHaveBeenCalledWith('result')
+ expect(config.handleAddOutputVariable).toHaveBeenCalled()
+ expect(config.hideRemoveVarConfirm).toHaveBeenCalled()
+ expect(config.onRemoveVarConfirm).toHaveBeenCalled()
+ expect(config.handleCodeAndVarsChange).toHaveBeenCalledWith(
+ 'generated signature code',
+ [{
+ variable: 'summary',
+ value_selector: [],
+ }, {
+ variable: 'count',
+ value_selector: [],
+ }],
+ {
+ result: {
+ type: VarType.string,
+ children: null,
+ },
+ },
+ )
+ expect(mockExtractFunctionParams).toHaveBeenCalledWith('generated signature code', CodeLanguage.javascript)
+ expect(mockExtractReturnType).toHaveBeenCalledWith('generated signature code', CodeLanguage.javascript)
+ })
+
+ it('removes input actions in readonly mode and passes readonly state to child sections', () => {
+ mockUseConfig.mockReturnValue(createConfigResult({
+ readOnly: true,
+ isShowRemoveVarConfirm: false,
+ }))
+
+ renderPanel()
+
+ expect(screen.queryByTestId('sync-button')).not.toBeInTheDocument()
+ expect(screen.getAllByTestId('add-button')).toHaveLength(1)
+ expect(screen.getByText('editor:readonly')).toBeInTheDocument()
+ expect(screen.getByText('var-list:readonly')).toBeInTheDocument()
+ expect(screen.getByText('output-list:readonly')).toBeInTheDocument()
+ expect(mockRemoveEffectVarConfirm).toHaveBeenCalled()
+ })
+})
diff --git a/web/app/components/workflow/nodes/code/__tests__/use-config.spec.ts b/web/app/components/workflow/nodes/code/__tests__/use-config.spec.ts
new file mode 100644
index 0000000000..b02ff8a4fc
--- /dev/null
+++ b/web/app/components/workflow/nodes/code/__tests__/use-config.spec.ts
@@ -0,0 +1,315 @@
+import type { CodeNodeType, OutputVar } from '../types'
+import type { Var, Variable } from '@/app/components/workflow/types'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { useNodesReadOnly } from '@/app/components/workflow/hooks'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import { useStore } from '@/app/components/workflow/store'
+import { BlockEnum, VarType } from '@/app/components/workflow/types'
+import { fetchNodeDefault, fetchPipelineNodeDefault } from '@/service/workflow'
+import useOutputVarList from '../../_base/hooks/use-output-var-list'
+import useVarList from '../../_base/hooks/use-var-list'
+import { CodeLanguage } from '../types'
+import useConfig from '../use-config'
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+ useNodesReadOnly: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-node-crud', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-var-list', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-output-var-list', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+ useStore: vi.fn(),
+}))
+
+vi.mock('@/service/workflow', () => ({
+ fetchNodeDefault: vi.fn(),
+ fetchPipelineNodeDefault: vi.fn(),
+}))
+
+const mockUseNodesReadOnly = vi.mocked(useNodesReadOnly)
+const mockUseNodeCrud = vi.mocked(useNodeCrud)
+const mockUseVarList = vi.mocked(useVarList)
+const mockUseOutputVarList = vi.mocked(useOutputVarList)
+const mockUseStore = vi.mocked(useStore)
+const mockFetchNodeDefault = vi.mocked(fetchNodeDefault)
+const mockFetchPipelineNodeDefault = vi.mocked(fetchPipelineNodeDefault)
+
+const createVariable = (variable: string, valueType: VarType = VarType.string): Variable => ({
+ variable,
+ value_selector: ['start', variable],
+ value_type: valueType,
+})
+
+const createOutputs = (name = 'result', type: VarType = VarType.string): OutputVar => ({
+ [name]: {
+ type,
+ children: null,
+ },
+})
+
+const createData = (overrides: Partial = {}): CodeNodeType => ({
+ title: 'Code',
+ desc: '',
+ type: BlockEnum.Code,
+ code_language: CodeLanguage.javascript,
+ code: 'function main({ foo }) { return { result: foo } }',
+ variables: [createVariable('foo')],
+ outputs: createOutputs(),
+ ...overrides,
+})
+
+describe('code/use-config', () => {
+ const mockSetInputs = vi.fn()
+ const mockHandleVarListChange = vi.fn()
+ const mockHandleAddVariable = vi.fn()
+ const mockHandleVarsChange = vi.fn()
+ const mockHandleAddOutputVariable = vi.fn()
+ const mockHandleRemoveVariable = vi.fn()
+ const mockHideRemoveVarConfirm = vi.fn()
+ const mockOnRemoveVarConfirm = vi.fn()
+
+ let workflowStoreState: {
+ appId?: string
+ pipelineId?: string
+ nodesDefaultConfigs?: Record
+ }
+ let currentInputs: CodeNodeType
+ let javaScriptConfig: CodeNodeType
+ let pythonConfig: CodeNodeType
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+
+ javaScriptConfig = createData({
+ code_language: CodeLanguage.javascript,
+ code: 'function main({ query }) { return { result: query } }',
+ variables: [createVariable('query')],
+ outputs: createOutputs('result'),
+ })
+ pythonConfig = createData({
+ code_language: CodeLanguage.python3,
+ code: 'def main(name: str):\n return {"result": name}',
+ variables: [createVariable('name')],
+ outputs: createOutputs('result'),
+ })
+ currentInputs = createData()
+ workflowStoreState = {
+ appId: undefined,
+ pipelineId: undefined,
+ nodesDefaultConfigs: {
+ [BlockEnum.Code]: createData({
+ code_language: CodeLanguage.javascript,
+ code: 'function main() { return { default_result: "" } }',
+ variables: [],
+ outputs: createOutputs('default_result'),
+ }),
+ },
+ }
+
+ mockUseNodesReadOnly.mockReturnValue({
+ nodesReadOnly: false,
+ getNodesReadOnly: () => false,
+ })
+ mockUseNodeCrud.mockImplementation(() => ({
+ inputs: currentInputs,
+ setInputs: mockSetInputs,
+ }))
+ mockUseVarList.mockReturnValue({
+ handleVarListChange: mockHandleVarListChange,
+ handleAddVariable: mockHandleAddVariable,
+ } as ReturnType)
+ mockUseOutputVarList.mockReturnValue({
+ handleVarsChange: mockHandleVarsChange,
+ handleAddVariable: mockHandleAddOutputVariable,
+ handleRemoveVariable: mockHandleRemoveVariable,
+ isShowRemoveVarConfirm: false,
+ hideRemoveVarConfirm: mockHideRemoveVarConfirm,
+ onRemoveVarConfirm: mockOnRemoveVarConfirm,
+ } as ReturnType)
+ mockUseStore.mockImplementation(selector => selector(workflowStoreState as never))
+ mockFetchNodeDefault.mockResolvedValue({ config: javaScriptConfig } as never)
+ mockFetchPipelineNodeDefault.mockResolvedValue({ config: javaScriptConfig } as never)
+ mockFetchNodeDefault
+ .mockResolvedValueOnce({ config: javaScriptConfig } as never)
+ .mockResolvedValueOnce({ config: pythonConfig } as never)
+ mockFetchPipelineNodeDefault
+ .mockResolvedValueOnce({ config: javaScriptConfig } as never)
+ .mockResolvedValueOnce({ config: pythonConfig } as never)
+ })
+
+ it('hydrates node defaults when the code payload is empty and syncs output key order', async () => {
+ currentInputs = createData({
+ code: '',
+ variables: [],
+ outputs: {},
+ })
+
+ const { result } = renderHook(() => useConfig('code-node', currentInputs))
+
+ await waitFor(() => {
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ code: workflowStoreState.nodesDefaultConfigs?.[BlockEnum.Code]?.code,
+ outputs: workflowStoreState.nodesDefaultConfigs?.[BlockEnum.Code]?.outputs,
+ }))
+ })
+
+ expect(result.current.handleVarListChange).toBe(mockHandleVarListChange)
+ expect(result.current.handleAddVariable).toBe(mockHandleAddVariable)
+ expect(result.current.handleVarsChange).toBe(mockHandleVarsChange)
+ expect(result.current.handleAddOutputVariable).toBe(mockHandleAddOutputVariable)
+ expect(result.current.handleRemoveVariable).toBe(mockHandleRemoveVariable)
+ expect(result.current.hideRemoveVarConfirm).toBe(mockHideRemoveVarConfirm)
+ expect(result.current.onRemoveVarConfirm).toBe(mockOnRemoveVarConfirm)
+ expect(result.current.outputKeyOrders).toEqual(['default_result'])
+ expect(result.current.filterVar({ type: VarType.file } as Var)).toBe(true)
+ expect(result.current.filterVar({ type: VarType.secret } as Var)).toBe(true)
+ })
+
+ it('fetches app and pipeline defaults, switches language, and updates code and output vars together', async () => {
+ workflowStoreState.appId = 'app-1'
+ workflowStoreState.pipelineId = 'pipeline-1'
+
+ const { result } = renderHook(() => useConfig('code-node', currentInputs))
+
+ await waitFor(() => {
+ expect(mockFetchNodeDefault).toHaveBeenCalledWith('app-1', BlockEnum.Code, { code_language: CodeLanguage.javascript })
+ expect(mockFetchNodeDefault).toHaveBeenCalledWith('app-1', BlockEnum.Code, { code_language: CodeLanguage.python3 })
+ expect(mockFetchPipelineNodeDefault).toHaveBeenCalledWith('pipeline-1', BlockEnum.Code, { code_language: CodeLanguage.javascript })
+ expect(mockFetchPipelineNodeDefault).toHaveBeenCalledWith('pipeline-1', BlockEnum.Code, { code_language: CodeLanguage.python3 })
+ })
+
+ mockSetInputs.mockClear()
+
+ act(() => {
+ result.current.handleCodeLanguageChange(CodeLanguage.python3)
+ result.current.handleCodeChange('function main({ bar }) { return { result: bar } }')
+ result.current.handleCodeAndVarsChange(
+ 'function main({ amount }) { return { total: amount } }',
+ [createVariable('amount', VarType.number)],
+ createOutputs('total', VarType.number),
+ )
+ })
+
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ code_language: CodeLanguage.python3,
+ code: pythonConfig.code,
+ variables: pythonConfig.variables,
+ outputs: pythonConfig.outputs,
+ }))
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ code: 'function main({ bar }) { return { result: bar } }',
+ }))
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ code: 'function main({ amount }) { return { total: amount } }',
+ variables: [expect.objectContaining({ variable: 'amount' })],
+ outputs: createOutputs('total', VarType.number),
+ }))
+ expect(result.current.outputKeyOrders).toEqual(['total'])
+ })
+
+ it('syncs javascript and python function signatures and keeps json code unchanged', () => {
+ currentInputs = createData({
+ code_language: CodeLanguage.javascript,
+ code: 'function main() { return { result: "" } }',
+ variables: [createVariable('foo'), createVariable('bar')],
+ })
+
+ const { result, rerender } = renderHook(() => useConfig('code-node', currentInputs))
+
+ act(() => {
+ result.current.handleSyncFunctionSignature()
+ })
+
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ code: 'function main({foo, bar}) { return { result: "" } }',
+ }))
+
+ mockSetInputs.mockClear()
+ currentInputs = createData({
+ code_language: CodeLanguage.python3,
+ code: 'def main():\n return {"result": ""}',
+ variables: [
+ createVariable('text', VarType.string),
+ createVariable('score', VarType.number),
+ createVariable('payload', VarType.object),
+ createVariable('items', VarType.array),
+ createVariable('numbers', VarType.arrayNumber),
+ createVariable('names', VarType.arrayString),
+ createVariable('records', VarType.arrayObject),
+ ],
+ })
+ rerender()
+
+ act(() => {
+ result.current.handleSyncFunctionSignature()
+ })
+
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ code: 'def main(text: str, score: float, payload: dict, items: list, numbers: list[float], names: list[str], records: list[dict]):\n return {"result": ""}',
+ }))
+
+ mockSetInputs.mockClear()
+ currentInputs = createData({
+ code_language: CodeLanguage.json,
+ code: '{"result": true}',
+ })
+ rerender()
+
+ act(() => {
+ result.current.handleSyncFunctionSignature()
+ })
+
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ code: '{"result": true}',
+ }))
+ })
+
+ it('keeps language changes local when no fetched default exists and preserves existing output order', async () => {
+ currentInputs = createData({
+ outputs: {
+ summary: {
+ type: VarType.string,
+ children: null,
+ },
+ count: {
+ type: VarType.number,
+ children: null,
+ },
+ },
+ })
+ workflowStoreState.appId = undefined
+ workflowStoreState.pipelineId = undefined
+
+ const { result } = renderHook(() => useConfig('code-node', currentInputs))
+
+ await waitFor(() => {
+ expect(result.current.outputKeyOrders).toEqual(['summary', 'count'])
+ })
+
+ mockSetInputs.mockClear()
+
+ act(() => {
+ result.current.handleCodeLanguageChange(CodeLanguage.python3)
+ })
+
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ code_language: CodeLanguage.python3,
+ code: currentInputs.code,
+ variables: currentInputs.variables,
+ outputs: currentInputs.outputs,
+ }))
+ })
+})
diff --git a/web/app/components/workflow/nodes/code/__tests__/use-single-run-form-params.spec.ts b/web/app/components/workflow/nodes/code/__tests__/use-single-run-form-params.spec.ts
new file mode 100644
index 0000000000..39e9d8139a
--- /dev/null
+++ b/web/app/components/workflow/nodes/code/__tests__/use-single-run-form-params.spec.ts
@@ -0,0 +1,80 @@
+import type { CodeNodeType } from '../types'
+import { renderHook } from '@testing-library/react'
+import { BlockEnum, InputVarType, VarType } from '@/app/components/workflow/types'
+import useNodeCrud from '../../_base/hooks/use-node-crud'
+import { CodeLanguage } from '../types'
+import useSingleRunFormParams from '../use-single-run-form-params'
+
+vi.mock('../../_base/hooks/use-node-crud', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+const mockUseNodeCrud = vi.mocked(useNodeCrud)
+
+const createData = (overrides: Partial = {}): CodeNodeType => ({
+ title: 'Code',
+ desc: '',
+ type: BlockEnum.Code,
+ code_language: CodeLanguage.javascript,
+ code: 'function main({ amount }) { return { result: amount } }',
+ variables: [{
+ variable: 'amount',
+ value_selector: ['start', 'amount'],
+ value_type: VarType.number,
+ }],
+ outputs: {
+ result: {
+ type: VarType.number,
+ children: null,
+ },
+ },
+ ...overrides,
+})
+
+describe('code/use-single-run-form-params', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseNodeCrud.mockReturnValue({
+ inputs: createData(),
+ setInputs: vi.fn(),
+ } as unknown as ReturnType)
+ })
+
+ it('builds a single form, updates run input values, and exposes dependent vars', () => {
+ const setRunInputData = vi.fn()
+
+ const { result } = renderHook(() => useSingleRunFormParams({
+ id: 'code-node',
+ payload: createData(),
+ runInputData: { amount: 1 },
+ runInputDataRef: { current: { amount: 1 } },
+ getInputVars: () => [],
+ setRunInputData,
+ toVarInputs: variables => variables.map(variable => ({
+ type: InputVarType.number,
+ label: variable.variable,
+ variable: variable.variable,
+ required: false,
+ })),
+ }))
+
+ expect(result.current.forms).toEqual([{
+ inputs: [{
+ type: InputVarType.number,
+ label: 'amount',
+ variable: 'amount',
+ required: false,
+ }],
+ values: { amount: 1 },
+ onChange: expect.any(Function),
+ }])
+
+ result.current.forms[0]?.onChange({ amount: 3 })
+
+ expect(setRunInputData).toHaveBeenCalledWith({ amount: 3 })
+ expect(result.current.getDependentVars()).toEqual([['start', 'amount']])
+ expect(result.current.getDependentVar('amount')).toEqual(['start', 'amount'])
+ expect(result.current.getDependentVar('missing')).toBeUndefined()
+ })
+})
diff --git a/web/app/components/workflow/nodes/data-source/__tests__/before-run-form.spec.tsx b/web/app/components/workflow/nodes/data-source/__tests__/before-run-form.spec.tsx
new file mode 100644
index 0000000000..c12ec212bf
--- /dev/null
+++ b/web/app/components/workflow/nodes/data-source/__tests__/before-run-form.spec.tsx
@@ -0,0 +1,205 @@
+import type { ReactNode } from 'react'
+import type { CustomRunFormProps, DataSourceNodeType } from '../types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { DatasourceType } from '@/models/pipeline'
+import { FlowType } from '@/types/common'
+import { BlockEnum } from '../../../types'
+import BeforeRunForm from '../before-run-form'
+import useBeforeRunForm from '../hooks/use-before-run-form'
+
+const mockUseDataSourceStore = vi.hoisted(() => vi.fn())
+const mockSetCurrentCredentialId = vi.hoisted(() => vi.fn())
+const mockClearOnlineDocumentData = vi.hoisted(() => vi.fn())
+const mockClearWebsiteCrawlData = vi.hoisted(() => vi.fn())
+const mockClearOnlineDriveData = vi.hoisted(() => vi.fn())
+
+vi.mock('@/app/components/datasets/documents/create-from-pipeline/data-source/store', () => ({
+ useDataSourceStore: () => mockUseDataSourceStore(),
+}))
+
+vi.mock('@/app/components/datasets/documents/create-from-pipeline/data-source/store/provider', () => ({
+ __esModule: true,
+ default: ({ children }: { children: ReactNode }) => <>{children},
+}))
+
+vi.mock('@/app/components/datasets/documents/create-from-pipeline/data-source/local-file', () => ({
+ __esModule: true,
+ default: ({ allowedExtensions }: { allowedExtensions: string[] }) => {allowedExtensions.join(',')}
,
+}))
+
+vi.mock('@/app/components/datasets/documents/create-from-pipeline/data-source/online-documents', () => ({
+ __esModule: true,
+ default: ({ onCredentialChange }: { onCredentialChange: (credentialId: string) => void }) => (
+
+ ),
+}))
+
+vi.mock('@/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl', () => ({
+ __esModule: true,
+ default: ({ onCredentialChange }: { onCredentialChange: (credentialId: string) => void }) => (
+
+ ),
+}))
+
+vi.mock('@/app/components/datasets/documents/create-from-pipeline/data-source/online-drive', () => ({
+ __esModule: true,
+ default: ({ onCredentialChange }: { onCredentialChange: (credentialId: string) => void }) => (
+
+ ),
+}))
+
+vi.mock('@/app/components/rag-pipeline/components/panel/test-run/preparation/hooks', () => ({
+ useOnlineDocument: () => ({ clearOnlineDocumentData: mockClearOnlineDocumentData }),
+ useWebsiteCrawl: () => ({ clearWebsiteCrawlData: mockClearWebsiteCrawlData }),
+ useOnlineDrive: () => ({ clearOnlineDriveData: mockClearOnlineDriveData }),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/before-run-form/panel-wrap', () => ({
+ __esModule: true,
+ default: ({ nodeName, onHide, children }: { nodeName: string, onHide: () => void, children: ReactNode }) => (
+
+
{nodeName}
+
+ {children}
+
{children}
,
+ VarItem: ({ name, type }: { name: string, type: string }) => {`${name}:${type}`}
,
+}))
+
+vi.mock('../../_base/components/variable/object-child-tree-panel/show', () => ({
+ __esModule: true,
+ default: ({ payload }: { payload: { name: string } }) => {payload.name}
,
+}))
+
+vi.mock('../../_base/components/variable/use-match-schema-type', () => ({
+ __esModule: true,
+ default: vi.fn(),
+ getMatchedSchemaType: vi.fn(),
+}))
+
+vi.mock('../../tool/components/tool-form', () => ({
+ __esModule: true,
+ default: vi.fn(({ onChange, onManageInputField }: { onChange: (value: unknown) => void, onManageInputField?: () => void }) => (
+
+
+
+
+ )),
+}))
+
+vi.mock('../hooks/use-config', () => ({
+ useConfig: vi.fn(),
+}))
+
+const mockUseNodesReadOnly = vi.mocked(useNodesReadOnly)
+const mockUseStore = vi.mocked(useStore)
+const mockUseConfig = vi.mocked(useConfig)
+const mockToolParametersToFormSchemas = vi.mocked(toolParametersToFormSchemas)
+const mockUseMatchSchemaType = vi.mocked(useMatchSchemaType)
+const mockGetMatchedSchemaType = vi.mocked(getMatchedSchemaType)
+const mockToolForm = vi.mocked(ToolForm)
+
+const setShowInputFieldPanel = vi.fn()
+
+const createData = (overrides: Partial = {}): DataSourceNodeType => ({
+ title: 'Datasource',
+ desc: '',
+ type: BlockEnum.DataSource,
+ plugin_id: 'plugin-1',
+ provider_type: 'remote',
+ provider_name: 'provider',
+ datasource_name: 'source-a',
+ datasource_label: 'Source A',
+ datasource_parameters: {},
+ datasource_configurations: {},
+ fileExtensions: ['pdf'],
+ ...overrides,
+})
+
+const panelProps = {} as NodePanelProps['panelProps']
+
+describe('data-source/panel', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: false, getNodesReadOnly: () => false })
+ mockUseStore.mockImplementation((selector) => {
+ const select = selector as (state: unknown) => unknown
+ return select({
+ dataSourceList: [{
+ plugin_id: 'plugin-1',
+ is_authorized: true,
+ tools: [{
+ name: 'source-a',
+ parameters: [{ name: 'dataset' }],
+ }],
+ }],
+ pipelineId: 'pipeline-1',
+ setShowInputFieldPanel,
+ })
+ })
+ mockUseConfig.mockReturnValue({
+ handleFileExtensionsChange: vi.fn(),
+ handleParametersChange: vi.fn(),
+ outputSchema: [],
+ hasObjectOutput: false,
+ })
+ mockToolParametersToFormSchemas.mockReturnValue([{ name: 'dataset' }] as never)
+ mockUseMatchSchemaType.mockReturnValue({ schemaTypeDefinitions: {} } as ReturnType)
+ mockGetMatchedSchemaType.mockReturnValue('')
+ })
+
+ it('renders the authorized tool form path and forwards parameter changes', () => {
+ const handleParametersChange = vi.fn()
+ mockUseConfig.mockReturnValueOnce({
+ handleFileExtensionsChange: vi.fn(),
+ handleParametersChange,
+ outputSchema: [{
+ name: 'metadata',
+ value: { type: 'object' },
+ }],
+ hasObjectOutput: true,
+ })
+ mockGetMatchedSchemaType.mockReturnValueOnce('json')
+
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByRole('button', { name: 'tool-form-change' }))
+ fireEvent.click(screen.getByRole('button', { name: 'manage-input-field' }))
+
+ expect(handleParametersChange).toHaveBeenCalledWith({ dataset: 'docs' })
+ expect(setShowInputFieldPanel).toHaveBeenCalledWith(true)
+ expect(mockToolForm).toHaveBeenCalledWith(expect.objectContaining({
+ nodeId: 'data-source-node',
+ showManageInputField: true,
+ value: {},
+ }), undefined)
+ expect(screen.getByText('metadata')).toBeInTheDocument()
+ })
+
+ it('renders the local-file path and updates supported file extensions', () => {
+ const handleFileExtensionsChange = vi.fn()
+ mockUseConfig.mockReturnValueOnce({
+ handleFileExtensionsChange,
+ handleParametersChange: vi.fn(),
+ outputSchema: [],
+ hasObjectOutput: false,
+ })
+
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByRole('button', { name: 'workflow.nodes.dataSource.supportedFileFormatsPlaceholder' }))
+
+ expect(handleFileExtensionsChange).toHaveBeenCalledWith(['pdf', 'txt'])
+ expect(screen.getByText(`datasource_type:${VarType.string}`)).toBeInTheDocument()
+ expect(screen.getByText(`file:${VarType.file}`)).toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/workflow/nodes/data-source/hooks/__tests__/use-before-run-form.branches.spec.tsx b/web/app/components/workflow/nodes/data-source/hooks/__tests__/use-before-run-form.branches.spec.tsx
new file mode 100644
index 0000000000..09172dd673
--- /dev/null
+++ b/web/app/components/workflow/nodes/data-source/hooks/__tests__/use-before-run-form.branches.spec.tsx
@@ -0,0 +1,308 @@
+import type { CustomRunFormProps, DataSourceNodeType } from '../../types'
+import type { NodeRunResult, VarInInspect } from '@/types/workflow'
+import { act, renderHook } from '@testing-library/react'
+import { useStoreApi } from 'reactflow'
+import { useDataSourceStore, useDataSourceStoreWithSelector } from '@/app/components/datasets/documents/create-from-pipeline/data-source/store'
+import { BlockEnum, NodeRunningStatus } from '@/app/components/workflow/types'
+import { DatasourceType } from '@/models/pipeline'
+import { useDatasourceSingleRun } from '@/service/use-pipeline'
+import { useInvalidLastRun } from '@/service/use-workflow'
+import { fetchNodeInspectVars } from '@/service/workflow'
+import { FlowType } from '@/types/common'
+import { useNodeDataUpdate, useNodesSyncDraft } from '../../../../hooks'
+import useBeforeRunForm from '../use-before-run-form'
+
+type DataSourceStoreState = {
+ currentNodeIdRef: { current: string }
+ currentCredentialId: string
+ setCurrentCredentialId: (credentialId: string) => void
+ currentCredentialIdRef: { current: string }
+ localFileList: Array<{
+ file: {
+ id: string
+ name: string
+ type: string
+ size: number
+ extension: string
+ mime_type: string
+ }
+ }>
+ onlineDocuments: Array>
+ websitePages: Array>
+ selectedFileIds: string[]
+ onlineDriveFileList: Array<{ id: string, type: string }>
+ bucket?: string
+}
+
+type DatasourceSingleRunOptions = {
+ onError?: () => void
+ onSettled?: (data?: NodeRunResult) => void
+}
+
+const mockHandleNodeDataUpdate = vi.hoisted(() => vi.fn())
+const mockHandleSyncWorkflowDraft = vi.hoisted(() => vi.fn())
+const mockMutateAsync = vi.hoisted(() => vi.fn())
+const mockInvalidLastRun = vi.hoisted(() => vi.fn())
+const mockFetchNodeInspectVars = vi.hoisted(() => vi.fn())
+const mockUseDataSourceStore = vi.hoisted(() => vi.fn())
+const mockUseDataSourceStoreWithSelector = vi.hoisted(() => vi.fn())
+
+vi.mock('reactflow', async () => {
+ const actual = await vi.importActual('reactflow')
+ return {
+ ...actual,
+ useStoreApi: vi.fn(),
+ }
+})
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+ useNodeDataUpdate: vi.fn(),
+ useNodesSyncDraft: vi.fn(),
+}))
+
+vi.mock('@/service/use-pipeline', () => ({
+ useDatasourceSingleRun: vi.fn(),
+}))
+
+vi.mock('@/service/use-workflow', () => ({
+ useInvalidLastRun: vi.fn(),
+}))
+
+vi.mock('@/service/workflow', () => ({
+ fetchNodeInspectVars: vi.fn(),
+}))
+
+vi.mock('@/app/components/datasets/documents/create-from-pipeline/data-source/store', () => ({
+ useDataSourceStore: vi.fn(),
+ useDataSourceStoreWithSelector: vi.fn(),
+}))
+
+const mockUseStoreApi = vi.mocked(useStoreApi)
+const mockUseNodeDataUpdateHook = vi.mocked(useNodeDataUpdate)
+const mockUseNodesSyncDraftHook = vi.mocked(useNodesSyncDraft)
+const mockUseDatasourceSingleRunHook = vi.mocked(useDatasourceSingleRun)
+const mockUseInvalidLastRunHook = vi.mocked(useInvalidLastRun)
+const mockFetchNodeInspectVarsFn = vi.mocked(fetchNodeInspectVars)
+const mockUseDataSourceStoreHook = vi.mocked(useDataSourceStore)
+const mockUseDataSourceStoreWithSelectorHook = vi.mocked(useDataSourceStoreWithSelector)
+
+const createData = (overrides: Partial = {}): DataSourceNodeType => ({
+ title: 'Datasource',
+ desc: '',
+ type: BlockEnum.DataSource,
+ plugin_id: 'plugin-id',
+ provider_type: DatasourceType.localFile,
+ provider_name: 'provider',
+ datasource_name: 'local-file',
+ datasource_label: 'Local File',
+ datasource_parameters: {},
+ datasource_configurations: {},
+ fileExtensions: ['pdf'],
+ ...overrides,
+})
+
+const createProps = (overrides: Partial = {}): CustomRunFormProps => ({
+ nodeId: 'data-source-node',
+ flowId: 'flow-id',
+ flowType: FlowType.ragPipeline,
+ payload: createData(),
+ setRunResult: vi.fn(),
+ setIsRunAfterSingleRun: vi.fn(),
+ isPaused: false,
+ isRunAfterSingleRun: false,
+ onSuccess: vi.fn(),
+ onCancel: vi.fn(),
+ appendNodeInspectVars: vi.fn(),
+ ...overrides,
+})
+
+describe('data-source/hooks/use-before-run-form branches', () => {
+ let dataSourceStoreState: DataSourceStoreState
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+
+ dataSourceStoreState = {
+ currentNodeIdRef: { current: 'data-source-node' },
+ currentCredentialId: 'credential-1',
+ setCurrentCredentialId: vi.fn(),
+ currentCredentialIdRef: { current: 'credential-1' },
+ localFileList: [],
+ onlineDocuments: [],
+ websitePages: [],
+ selectedFileIds: [],
+ onlineDriveFileList: [],
+ bucket: 'drive-bucket',
+ }
+
+ mockUseStoreApi.mockReturnValue({
+ getState: () => ({
+ getNodes: () => [{ id: 'data-source-node', data: { title: 'Datasource' } }],
+ }),
+ } as ReturnType)
+
+ mockUseNodeDataUpdateHook.mockReturnValue({
+ handleNodeDataUpdate: mockHandleNodeDataUpdate,
+ handleNodeDataUpdateWithSyncDraft: vi.fn(),
+ } as ReturnType)
+ mockUseNodesSyncDraftHook.mockReturnValue({
+ handleSyncWorkflowDraft: (...args: unknown[]) => {
+ mockHandleSyncWorkflowDraft(...args)
+ const callbacks = args[2] as { onSuccess?: () => void } | undefined
+ callbacks?.onSuccess?.()
+ },
+ } as ReturnType)
+ mockUseDatasourceSingleRunHook.mockReturnValue({
+ mutateAsync: (...args: unknown[]) => mockMutateAsync(...args),
+ isPending: false,
+ } as ReturnType)
+ mockUseInvalidLastRunHook.mockReturnValue(mockInvalidLastRun)
+ mockFetchNodeInspectVarsFn.mockImplementation((...args: unknown[]) => mockFetchNodeInspectVars(...args))
+ mockUseDataSourceStoreHook.mockImplementation(() => mockUseDataSourceStore())
+ mockUseDataSourceStoreWithSelectorHook.mockImplementation(selector =>
+ mockUseDataSourceStoreWithSelector(selector as unknown as (state: DataSourceStoreState) => unknown))
+
+ mockUseDataSourceStore.mockImplementation(() => ({
+ getState: () => dataSourceStoreState,
+ }))
+ mockUseDataSourceStoreWithSelector.mockImplementation((selector: (state: DataSourceStoreState) => unknown) =>
+ selector(dataSourceStoreState))
+ mockFetchNodeInspectVars.mockResolvedValue([{ name: 'metadata' }] as VarInInspect[])
+ })
+
+ it('derives disabled states for online documents and website crawl sources', () => {
+ const { result, rerender } = renderHook(
+ ({ payload }) => useBeforeRunForm(createProps({ payload })),
+ {
+ initialProps: {
+ payload: createData({ provider_type: DatasourceType.onlineDocument }),
+ },
+ },
+ )
+
+ expect(result.current.startRunBtnDisabled).toBe(true)
+
+ dataSourceStoreState.onlineDocuments = [{
+ workspace_id: 'workspace-1',
+ id: 'doc-1',
+ title: 'Document',
+ }]
+ rerender({ payload: createData({ provider_type: DatasourceType.onlineDocument }) })
+ expect(result.current.startRunBtnDisabled).toBe(false)
+
+ rerender({ payload: createData({ provider_type: DatasourceType.websiteCrawl }) })
+ expect(result.current.startRunBtnDisabled).toBe(true)
+
+ dataSourceStoreState.websitePages = [{ url: 'https://example.com' }]
+ rerender({ payload: createData({ provider_type: DatasourceType.websiteCrawl }) })
+ expect(result.current.startRunBtnDisabled).toBe(false)
+ })
+
+ it('returns the settled run result directly when chained single-run execution should stop', async () => {
+ dataSourceStoreState.localFileList = [{
+ file: {
+ id: 'file-1',
+ name: 'doc.pdf',
+ type: 'document',
+ size: 12,
+ extension: 'pdf',
+ mime_type: 'application/pdf',
+ },
+ }]
+
+ mockMutateAsync.mockImplementation((_payload: unknown, options: DatasourceSingleRunOptions) => {
+ options.onSettled?.({ status: NodeRunningStatus.Succeeded } as NodeRunResult)
+ return Promise.resolve(undefined)
+ })
+
+ const props = createProps({
+ isRunAfterSingleRun: true,
+ payload: createData({
+ _singleRunningStatus: NodeRunningStatus.Running,
+ } as Partial),
+ })
+ const { result } = renderHook(() => useBeforeRunForm(props))
+
+ await act(async () => {
+ result.current.handleRunWithSyncDraft()
+ await Promise.resolve()
+ })
+
+ expect(props.setRunResult).toHaveBeenCalledWith({ status: NodeRunningStatus.Succeeded })
+ expect(mockFetchNodeInspectVars).not.toHaveBeenCalled()
+ expect(props.onSuccess).not.toHaveBeenCalled()
+ })
+
+ it('builds online document datasource info before running', async () => {
+ dataSourceStoreState.onlineDocuments = [{
+ workspace_id: 'workspace-1',
+ id: 'doc-1',
+ title: 'Document',
+ url: 'https://example.com/doc',
+ }]
+
+ mockMutateAsync.mockImplementation((payload: unknown, options: DatasourceSingleRunOptions) => {
+ options.onSettled?.({ status: NodeRunningStatus.Succeeded } as NodeRunResult)
+ return Promise.resolve(payload)
+ })
+
+ const { result } = renderHook(() => useBeforeRunForm(createProps({
+ payload: createData({ provider_type: DatasourceType.onlineDocument }),
+ })))
+
+ await act(async () => {
+ result.current.handleRunWithSyncDraft()
+ await Promise.resolve()
+ })
+
+ expect(mockMutateAsync).toHaveBeenCalledWith(expect.objectContaining({
+ datasource_type: DatasourceType.onlineDocument,
+ datasource_info: {
+ workspace_id: 'workspace-1',
+ page: {
+ id: 'doc-1',
+ title: 'Document',
+ url: 'https://example.com/doc',
+ },
+ credential_id: 'credential-1',
+ },
+ }), expect.any(Object))
+ })
+
+ it('builds website crawl datasource info and skips the failure update while paused', async () => {
+ dataSourceStoreState.websitePages = [{
+ url: 'https://example.com',
+ title: 'Example',
+ }]
+
+ mockMutateAsync.mockImplementation((payload: unknown, options: DatasourceSingleRunOptions) => {
+ options.onError?.()
+ return Promise.resolve(payload)
+ })
+
+ const { result } = renderHook(() => useBeforeRunForm(createProps({
+ isPaused: true,
+ payload: createData({ provider_type: DatasourceType.websiteCrawl }),
+ })))
+
+ await act(async () => {
+ result.current.handleRunWithSyncDraft()
+ await Promise.resolve()
+ })
+
+ expect(mockMutateAsync).toHaveBeenCalledWith(expect.objectContaining({
+ datasource_type: DatasourceType.websiteCrawl,
+ datasource_info: {
+ url: 'https://example.com',
+ title: 'Example',
+ credential_id: 'credential-1',
+ },
+ }), expect.any(Object))
+ expect(mockInvalidLastRun).toHaveBeenCalled()
+ expect(mockHandleNodeDataUpdate).not.toHaveBeenCalledWith(expect.objectContaining({
+ data: expect.objectContaining({
+ _singleRunningStatus: NodeRunningStatus.Failed,
+ }),
+ }))
+ })
+})
diff --git a/web/app/components/workflow/nodes/data-source/hooks/__tests__/use-before-run-form.spec.tsx b/web/app/components/workflow/nodes/data-source/hooks/__tests__/use-before-run-form.spec.tsx
new file mode 100644
index 0000000000..b4e79b3334
--- /dev/null
+++ b/web/app/components/workflow/nodes/data-source/hooks/__tests__/use-before-run-form.spec.tsx
@@ -0,0 +1,307 @@
+import type { CustomRunFormProps, DataSourceNodeType } from '../../types'
+import type { NodeRunResult, VarInInspect } from '@/types/workflow'
+import { act, renderHook } from '@testing-library/react'
+import { useStoreApi } from 'reactflow'
+import { useDataSourceStore, useDataSourceStoreWithSelector } from '@/app/components/datasets/documents/create-from-pipeline/data-source/store'
+import { BlockEnum, NodeRunningStatus } from '@/app/components/workflow/types'
+import { DatasourceType } from '@/models/pipeline'
+import { useDatasourceSingleRun } from '@/service/use-pipeline'
+import { useInvalidLastRun } from '@/service/use-workflow'
+import { fetchNodeInspectVars } from '@/service/workflow'
+import { TransferMethod } from '@/types/app'
+import { FlowType } from '@/types/common'
+import { useNodeDataUpdate, useNodesSyncDraft } from '../../../../hooks'
+import useBeforeRunForm from '../use-before-run-form'
+
+type DataSourceStoreState = {
+ currentNodeIdRef: { current: string }
+ currentCredentialId: string
+ setCurrentCredentialId: (credentialId: string) => void
+ currentCredentialIdRef: { current: string }
+ localFileList: Array<{
+ file: {
+ id: string
+ name: string
+ type: string
+ size: number
+ extension: string
+ mime_type: string
+ }
+ }>
+ onlineDocuments: Array>
+ websitePages: Array>
+ selectedFileIds: string[]
+ onlineDriveFileList: Array<{ id: string, type: string }>
+ bucket?: string
+}
+
+type DatasourceSingleRunOptions = {
+ onError?: () => void
+ onSettled?: (data?: NodeRunResult) => void
+}
+
+const mockHandleNodeDataUpdate = vi.hoisted(() => vi.fn())
+const mockHandleSyncWorkflowDraft = vi.hoisted(() => vi.fn())
+const mockMutateAsync = vi.hoisted(() => vi.fn())
+const mockInvalidLastRun = vi.hoisted(() => vi.fn())
+const mockFetchNodeInspectVars = vi.hoisted(() => vi.fn())
+const mockUseDataSourceStore = vi.hoisted(() => vi.fn())
+const mockUseDataSourceStoreWithSelector = vi.hoisted(() => vi.fn())
+
+vi.mock('reactflow', async () => {
+ const actual = await vi.importActual('reactflow')
+ return {
+ ...actual,
+ useStoreApi: vi.fn(),
+ }
+})
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+ useNodeDataUpdate: vi.fn(),
+ useNodesSyncDraft: vi.fn(),
+}))
+
+vi.mock('@/service/use-pipeline', () => ({
+ useDatasourceSingleRun: vi.fn(),
+}))
+
+vi.mock('@/service/use-workflow', () => ({
+ useInvalidLastRun: vi.fn(),
+}))
+
+vi.mock('@/service/workflow', () => ({
+ fetchNodeInspectVars: vi.fn(),
+}))
+
+vi.mock('@/app/components/datasets/documents/create-from-pipeline/data-source/store', () => ({
+ useDataSourceStore: vi.fn(),
+ useDataSourceStoreWithSelector: vi.fn(),
+}))
+
+const mockUseStoreApi = vi.mocked(useStoreApi)
+const mockUseNodeDataUpdateHook = vi.mocked(useNodeDataUpdate)
+const mockUseNodesSyncDraftHook = vi.mocked(useNodesSyncDraft)
+const mockUseDatasourceSingleRunHook = vi.mocked(useDatasourceSingleRun)
+const mockUseInvalidLastRunHook = vi.mocked(useInvalidLastRun)
+const mockFetchNodeInspectVarsFn = vi.mocked(fetchNodeInspectVars)
+const mockUseDataSourceStoreHook = vi.mocked(useDataSourceStore)
+const mockUseDataSourceStoreWithSelectorHook = vi.mocked(useDataSourceStoreWithSelector)
+
+const createData = (overrides: Partial = {}): DataSourceNodeType => ({
+ title: 'Datasource',
+ desc: '',
+ type: BlockEnum.DataSource,
+ plugin_id: 'plugin-id',
+ provider_type: DatasourceType.localFile,
+ provider_name: 'provider',
+ datasource_name: 'local-file',
+ datasource_label: 'Local File',
+ datasource_parameters: {},
+ datasource_configurations: {},
+ fileExtensions: ['pdf'],
+ ...overrides,
+})
+
+const createProps = (overrides: Partial = {}): CustomRunFormProps => ({
+ nodeId: 'data-source-node',
+ flowId: 'flow-id',
+ flowType: FlowType.ragPipeline,
+ payload: createData(),
+ setRunResult: vi.fn(),
+ setIsRunAfterSingleRun: vi.fn(),
+ isPaused: false,
+ isRunAfterSingleRun: false,
+ onSuccess: vi.fn(),
+ onCancel: vi.fn(),
+ appendNodeInspectVars: vi.fn(),
+ ...overrides,
+})
+
+describe('data-source/hooks/use-before-run-form', () => {
+ let dataSourceStoreState: DataSourceStoreState
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+
+ dataSourceStoreState = {
+ currentNodeIdRef: { current: 'data-source-node' },
+ currentCredentialId: 'credential-1',
+ setCurrentCredentialId: vi.fn(),
+ currentCredentialIdRef: { current: 'credential-1' },
+ localFileList: [],
+ onlineDocuments: [],
+ websitePages: [],
+ selectedFileIds: [],
+ onlineDriveFileList: [],
+ bucket: 'drive-bucket',
+ }
+
+ mockUseStoreApi.mockReturnValue({
+ getState: () => ({
+ getNodes: () => [
+ {
+ id: 'data-source-node',
+ data: {
+ title: 'Datasource',
+ },
+ },
+ ],
+ }),
+ } as ReturnType)
+
+ mockUseNodeDataUpdateHook.mockReturnValue({
+ handleNodeDataUpdate: mockHandleNodeDataUpdate,
+ handleNodeDataUpdateWithSyncDraft: vi.fn(),
+ } as ReturnType)
+ mockUseNodesSyncDraftHook.mockReturnValue({
+ handleSyncWorkflowDraft: (...args: unknown[]) => {
+ mockHandleSyncWorkflowDraft(...args)
+ const callbacks = args[2] as { onSuccess?: () => void } | undefined
+ callbacks?.onSuccess?.()
+ },
+ } as ReturnType)
+ mockUseDatasourceSingleRunHook.mockReturnValue({
+ mutateAsync: (...args: unknown[]) => mockMutateAsync(...args),
+ isPending: false,
+ } as ReturnType)
+ mockUseInvalidLastRunHook.mockReturnValue(mockInvalidLastRun)
+ mockFetchNodeInspectVarsFn.mockImplementation((...args: unknown[]) => mockFetchNodeInspectVars(...args))
+ mockUseDataSourceStoreHook.mockImplementation(() => mockUseDataSourceStore())
+ mockUseDataSourceStoreWithSelectorHook.mockImplementation(selector =>
+ mockUseDataSourceStoreWithSelector(selector as unknown as (state: DataSourceStoreState) => unknown))
+
+ mockUseDataSourceStore.mockImplementation(() => ({
+ getState: () => dataSourceStoreState,
+ }))
+ mockUseDataSourceStoreWithSelector.mockImplementation((selector: (state: DataSourceStoreState) => unknown) =>
+ selector(dataSourceStoreState))
+ mockFetchNodeInspectVars.mockResolvedValue([{ name: 'metadata' }] as VarInInspect[])
+ })
+
+ it('derives the run button disabled state from the selected datasource payload', () => {
+ const { result, rerender } = renderHook(
+ ({ payload }) => useBeforeRunForm(createProps({ payload })),
+ {
+ initialProps: {
+ payload: createData(),
+ },
+ },
+ )
+
+ expect(result.current.startRunBtnDisabled).toBe(true)
+
+ dataSourceStoreState.localFileList = [{
+ file: {
+ id: 'file-1',
+ name: 'doc.pdf',
+ type: 'document',
+ size: 12,
+ extension: 'pdf',
+ mime_type: 'application/pdf',
+ },
+ }]
+ rerender({ payload: createData() })
+ expect(result.current.startRunBtnDisabled).toBe(false)
+
+ dataSourceStoreState.selectedFileIds = []
+ rerender({
+ payload: createData({
+ provider_type: DatasourceType.onlineDrive,
+ }),
+ })
+ expect(result.current.startRunBtnDisabled).toBe(true)
+ })
+
+ it('syncs the draft, runs the datasource, and appends inspect vars on success', async () => {
+ dataSourceStoreState.localFileList = [{
+ file: {
+ id: 'file-1',
+ name: 'doc.pdf',
+ type: 'document',
+ size: 12,
+ extension: 'pdf',
+ mime_type: 'application/pdf',
+ },
+ }]
+
+ mockMutateAsync.mockImplementation((payload: unknown, options: DatasourceSingleRunOptions) => {
+ options.onSettled?.({ status: NodeRunningStatus.Succeeded } as NodeRunResult)
+ return Promise.resolve(payload)
+ })
+
+ const props = createProps()
+ const { result } = renderHook(() => useBeforeRunForm(props))
+
+ await act(async () => {
+ result.current.handleRunWithSyncDraft()
+ await Promise.resolve()
+ })
+
+ expect(props.setIsRunAfterSingleRun).toHaveBeenCalledWith(true)
+ expect(mockHandleNodeDataUpdate).toHaveBeenNthCalledWith(1, {
+ id: 'data-source-node',
+ data: expect.objectContaining({
+ _singleRunningStatus: NodeRunningStatus.Running,
+ }),
+ })
+ expect(mockMutateAsync).toHaveBeenCalledWith(expect.objectContaining({
+ pipeline_id: 'flow-id',
+ start_node_id: 'data-source-node',
+ datasource_type: DatasourceType.localFile,
+ datasource_info: expect.objectContaining({
+ related_id: 'file-1',
+ transfer_method: TransferMethod.local_file,
+ }),
+ }), expect.any(Object))
+ expect(mockFetchNodeInspectVars).toHaveBeenCalledWith(FlowType.ragPipeline, 'flow-id', 'data-source-node')
+ expect(props.appendNodeInspectVars).toHaveBeenCalledWith('data-source-node', [{ name: 'metadata' }], [
+ {
+ id: 'data-source-node',
+ data: {
+ title: 'Datasource',
+ },
+ },
+ ])
+ expect(props.onSuccess).toHaveBeenCalled()
+ expect(mockHandleNodeDataUpdate).toHaveBeenLastCalledWith({
+ id: 'data-source-node',
+ data: expect.objectContaining({
+ _isSingleRun: false,
+ _singleRunningStatus: NodeRunningStatus.Succeeded,
+ }),
+ })
+ })
+
+ it('marks the last run invalid and updates the node to failed when the single run errors', async () => {
+ dataSourceStoreState.selectedFileIds = ['drive-file-1']
+ dataSourceStoreState.onlineDriveFileList = [{
+ id: 'drive-file-1',
+ type: 'file',
+ }]
+
+ mockMutateAsync.mockImplementation((_payload: unknown, options: DatasourceSingleRunOptions) => {
+ options.onError?.()
+ return Promise.resolve(undefined)
+ })
+
+ const { result } = renderHook(() => useBeforeRunForm(createProps({
+ payload: createData({
+ provider_type: DatasourceType.onlineDrive,
+ }),
+ })))
+
+ await act(async () => {
+ result.current.handleRunWithSyncDraft()
+ await Promise.resolve()
+ })
+
+ expect(mockInvalidLastRun).toHaveBeenCalled()
+ expect(mockHandleNodeDataUpdate).toHaveBeenLastCalledWith({
+ id: 'data-source-node',
+ data: expect.objectContaining({
+ _isSingleRun: false,
+ _singleRunningStatus: NodeRunningStatus.Failed,
+ }),
+ })
+ })
+})
diff --git a/web/app/components/workflow/nodes/document-extractor/__tests__/node.spec.tsx b/web/app/components/workflow/nodes/document-extractor/__tests__/node.spec.tsx
new file mode 100644
index 0000000000..2044d7e6b9
--- /dev/null
+++ b/web/app/components/workflow/nodes/document-extractor/__tests__/node.spec.tsx
@@ -0,0 +1,74 @@
+import type { DocExtractorNodeType } from '../types'
+import { render, screen } from '@testing-library/react'
+import { useNodes } from 'reactflow'
+import { BlockEnum } from '@/app/components/workflow/types'
+import Node from '../node'
+
+vi.mock('reactflow', async () => {
+ const actual = await vi.importActual('reactflow')
+ return {
+ ...actual,
+ useNodes: vi.fn(),
+ }
+})
+
+vi.mock('@/app/components/workflow/nodes/_base/components/variable/variable-label', () => ({
+ VariableLabelInNode: ({
+ variables,
+ nodeTitle,
+ nodeType,
+ }: {
+ variables: string[]
+ nodeTitle?: string
+ nodeType?: BlockEnum
+ }) => {`${nodeTitle}:${nodeType}:${variables.join('.')}`}
,
+}))
+
+const mockUseNodes = vi.mocked(useNodes)
+
+const createData = (overrides: Partial = {}): DocExtractorNodeType => ({
+ title: 'Document Extractor',
+ desc: '',
+ type: BlockEnum.DocExtractor,
+ variable_selector: ['node-1', 'files'],
+ is_array_file: false,
+ ...overrides,
+})
+
+describe('document-extractor/node', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseNodes.mockReturnValue([
+ {
+ id: 'node-1',
+ data: {
+ title: 'Input Files',
+ type: BlockEnum.Start,
+ },
+ },
+ ] as ReturnType)
+ })
+
+ it('renders nothing when no input variable is configured', () => {
+ const { container } = render(
+ ,
+ )
+
+ expect(container).toBeEmptyDOMElement()
+ })
+
+ it('renders the selected input variable label', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText('workflow.nodes.docExtractor.inputVar')).toBeInTheDocument()
+ expect(screen.getByText('Input Files:start:node-1.files')).toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/workflow/nodes/document-extractor/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/document-extractor/__tests__/panel.spec.tsx
new file mode 100644
index 0000000000..06512f94c6
--- /dev/null
+++ b/web/app/components/workflow/nodes/document-extractor/__tests__/panel.spec.tsx
@@ -0,0 +1,144 @@
+import type { ReactNode } from 'react'
+import type { DocExtractorNodeType } from '../types'
+import type { PanelProps } from '@/types/workflow'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { LanguagesSupported } from '@/i18n-config/language'
+import { BlockEnum } from '../../../types'
+import Panel from '../panel'
+import useConfig from '../use-config'
+
+let mockLocale = 'en-US'
+
+vi.mock('@/app/components/workflow/nodes/_base/components/field', () => ({
+ __esModule: true,
+ default: ({ title, children }: { title: ReactNode, children: ReactNode }) => (
+
+ ),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/output-vars', () => ({
+ __esModule: true,
+ default: ({ children }: { children: ReactNode }) => {children}
,
+ VarItem: ({ name, type }: { name: string, type: string }) => {`${name}:${type}`}
,
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/split', () => ({
+ __esModule: true,
+ default: () => split
,
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/components/variable/var-reference-picker', () => ({
+ __esModule: true,
+ default: ({
+ onChange,
+ }: {
+ onChange: (value: string[]) => void
+ }) => ,
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-node-help-link', () => ({
+ useNodeHelpLink: () => 'https://docs.example.com/document-extractor',
+}))
+
+vi.mock('@/service/use-common', () => ({
+ useFileSupportTypes: () => ({
+ data: {
+ allowed_extensions: ['PDF', 'md', 'md', 'DOCX'],
+ },
+ }),
+}))
+
+vi.mock('@/context/i18n', () => ({
+ useLocale: () => mockLocale,
+}))
+
+vi.mock('../use-config', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+const mockUseConfig = vi.mocked(useConfig)
+
+const createData = (overrides: Partial = {}): DocExtractorNodeType => ({
+ title: 'Document Extractor',
+ desc: '',
+ type: BlockEnum.DocExtractor,
+ variable_selector: ['node-1', 'files'],
+ is_array_file: false,
+ ...overrides,
+})
+
+const createConfigResult = (overrides: Partial> = {}): ReturnType => ({
+ readOnly: false,
+ inputs: createData(),
+ handleVarChanges: vi.fn(),
+ filterVar: () => true,
+ ...overrides,
+})
+
+const panelProps: PanelProps = {
+ getInputVars: vi.fn(() => []),
+ toVarInputs: vi.fn(() => []),
+ runInputData: {},
+ runInputDataRef: { current: {} },
+ setRunInputData: vi.fn(),
+ runResult: null,
+}
+
+describe('document-extractor/panel', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockLocale = 'en-US'
+ mockUseConfig.mockReturnValue(createConfigResult())
+ })
+
+ it('wires variable changes and renders supported file types for english locales', async () => {
+ const user = userEvent.setup()
+ const handleVarChanges = vi.fn()
+
+ mockUseConfig.mockReturnValueOnce(createConfigResult({
+ inputs: createData({ is_array_file: false }),
+ handleVarChanges,
+ }))
+
+ render(
+ ,
+ )
+
+ await user.click(screen.getByRole('button', { name: 'pick-file-var' }))
+
+ expect(handleVarChanges).toHaveBeenCalledWith(['node-1', 'files'])
+ expect(screen.getByText('workflow.nodes.docExtractor.supportFileTypes:{"types":"pdf, markdown, docx"}')).toBeInTheDocument()
+ expect(screen.getByRole('link', { name: 'workflow.nodes.docExtractor.learnMore' })).toHaveAttribute(
+ 'href',
+ 'https://docs.example.com/document-extractor',
+ )
+ expect(screen.getByText('text:string')).toBeInTheDocument()
+ })
+
+ it('uses chinese separators and array output types when the input is an array of files', () => {
+ mockLocale = LanguagesSupported[1]
+ mockUseConfig.mockReturnValueOnce(createConfigResult({
+ inputs: createData({ is_array_file: true }),
+ }))
+
+ render(
+ ,
+ )
+
+ expect(screen.getByText('workflow.nodes.docExtractor.supportFileTypes:{"types":"pdf、 markdown、 docx"}')).toBeInTheDocument()
+ expect(screen.getByText('text:array[string]')).toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/workflow/nodes/document-extractor/__tests__/use-config.spec.ts b/web/app/components/workflow/nodes/document-extractor/__tests__/use-config.spec.ts
new file mode 100644
index 0000000000..d988b2751d
--- /dev/null
+++ b/web/app/components/workflow/nodes/document-extractor/__tests__/use-config.spec.ts
@@ -0,0 +1,100 @@
+import type { DocExtractorNodeType } from '../types'
+import { renderHook } from '@testing-library/react'
+import { useStoreApi } from 'reactflow'
+import {
+ useIsChatMode,
+ useNodesReadOnly,
+ useWorkflow,
+ useWorkflowVariables,
+} from '@/app/components/workflow/hooks'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import { BlockEnum, VarType } from '@/app/components/workflow/types'
+import useConfig from '../use-config'
+
+const mockUseStoreApi = vi.mocked(useStoreApi)
+const mockUseNodesReadOnly = vi.mocked(useNodesReadOnly)
+const mockUseNodeCrud = vi.mocked(useNodeCrud)
+const mockUseIsChatMode = vi.mocked(useIsChatMode)
+const mockUseWorkflow = vi.mocked(useWorkflow)
+const mockUseWorkflowVariables = vi.mocked(useWorkflowVariables)
+
+vi.mock('reactflow', async () => {
+ const actual = await vi.importActual('reactflow')
+ return {
+ ...actual,
+ useStoreApi: vi.fn(),
+ }
+})
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+ useIsChatMode: vi.fn(),
+ useNodesReadOnly: vi.fn(),
+ useWorkflow: vi.fn(),
+ useWorkflowVariables: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-node-crud', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+const setInputs = vi.fn()
+const getCurrentVariableType = vi.fn()
+
+const createData = (overrides: Partial = {}): DocExtractorNodeType => ({
+ title: 'Document Extractor',
+ desc: '',
+ type: BlockEnum.DocExtractor,
+ variable_selector: ['node-1', 'files'],
+ is_array_file: false,
+ ...overrides,
+})
+
+describe('document-extractor/use-config', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: false, getNodesReadOnly: () => false })
+ mockUseIsChatMode.mockReturnValue(false)
+ mockUseWorkflow.mockReturnValue({
+ getBeforeNodesInSameBranch: vi.fn(() => [{ id: 'start-node' }]),
+ } as unknown as ReturnType)
+ mockUseWorkflowVariables.mockReturnValue({
+ getCurrentVariableType,
+ } as unknown as ReturnType)
+ mockUseStoreApi.mockReturnValue({
+ getState: () => ({
+ getNodes: () => [
+ { id: 'doc-node', parentId: 'loop-1', data: { type: BlockEnum.DocExtractor } },
+ { id: 'loop-1', data: { type: BlockEnum.Loop } },
+ ],
+ }),
+ } as ReturnType)
+ mockUseNodeCrud.mockReturnValue({
+ inputs: createData(),
+ setInputs,
+ } as ReturnType)
+ })
+
+ it('updates the selected variable and tracks array file output types', () => {
+ getCurrentVariableType.mockReturnValue(VarType.arrayFile)
+
+ const { result } = renderHook(() => useConfig('doc-node', createData()))
+
+ result.current.handleVarChanges(['node-2', 'files'])
+
+ expect(getCurrentVariableType).toHaveBeenCalled()
+ expect(setInputs).toHaveBeenCalledWith(expect.objectContaining({
+ variable_selector: ['node-2', 'files'],
+ is_array_file: true,
+ }))
+ })
+
+ it('only accepts file variables in the picker filter', () => {
+ const { result } = renderHook(() => useConfig('doc-node', createData()))
+
+ expect(result.current.readOnly).toBe(false)
+ expect(result.current.filterVar({ type: VarType.file } as never)).toBe(true)
+ expect(result.current.filterVar({ type: VarType.arrayFile } as never)).toBe(true)
+ expect(result.current.filterVar({ type: VarType.string } as never)).toBe(false)
+ })
+})
diff --git a/web/app/components/workflow/nodes/document-extractor/__tests__/use-single-run-form-params.spec.ts b/web/app/components/workflow/nodes/document-extractor/__tests__/use-single-run-form-params.spec.ts
new file mode 100644
index 0000000000..935118f26e
--- /dev/null
+++ b/web/app/components/workflow/nodes/document-extractor/__tests__/use-single-run-form-params.spec.ts
@@ -0,0 +1,43 @@
+import type { DocExtractorNodeType } from '../types'
+import { renderHook } from '@testing-library/react'
+import { BlockEnum } from '@/app/components/workflow/types'
+import useSingleRunFormParams from '../use-single-run-form-params'
+
+const createData = (overrides: Partial = {}): DocExtractorNodeType => ({
+ title: 'Document Extractor',
+ desc: '',
+ type: BlockEnum.DocExtractor,
+ variable_selector: ['start', 'files'],
+ is_array_file: false,
+ ...overrides,
+})
+
+describe('document-extractor/use-single-run-form-params', () => {
+ it('exposes a single files form and updates run input values', () => {
+ const setRunInputData = vi.fn()
+
+ const { result } = renderHook(() => useSingleRunFormParams({
+ id: 'doc-node',
+ payload: createData(),
+ runInputData: { files: ['old-file'] },
+ runInputDataRef: { current: {} },
+ getInputVars: () => [],
+ setRunInputData,
+ toVarInputs: () => [],
+ }))
+
+ expect(result.current.forms).toHaveLength(1)
+ expect(result.current.forms[0].inputs).toEqual([
+ expect.objectContaining({
+ variable: 'files',
+ required: true,
+ }),
+ ])
+
+ result.current.forms[0].onChange({ files: ['new-file'] })
+
+ expect(setRunInputData).toHaveBeenCalledWith({ files: ['new-file'] })
+ expect(result.current.getDependentVars()).toEqual([['start', 'files']])
+ expect(result.current.getDependentVar('files')).toEqual(['start', 'files'])
+ })
+})
diff --git a/web/app/components/workflow/nodes/end/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/end/__tests__/panel.spec.tsx
new file mode 100644
index 0000000000..b4218e338b
--- /dev/null
+++ b/web/app/components/workflow/nodes/end/__tests__/panel.spec.tsx
@@ -0,0 +1,58 @@
+import type { EndNodeType } from '../types'
+import type { PanelProps } from '@/types/workflow'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { BlockEnum } from '@/app/components/workflow/types'
+import Panel from '../panel'
+
+const mockUseConfig = vi.hoisted(() => vi.fn())
+
+vi.mock('../use-config', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseConfig(...args),
+}))
+
+const createData = (overrides: Partial = {}): EndNodeType => ({
+ title: 'End',
+ desc: '',
+ type: BlockEnum.End,
+ outputs: [],
+ ...overrides,
+})
+
+describe('EndPanel', () => {
+ const handleVarListChange = vi.fn()
+ const handleAddVariable = vi.fn()
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseConfig.mockReturnValue({
+ readOnly: false,
+ inputs: createData(),
+ handleVarListChange,
+ handleAddVariable,
+ })
+ })
+
+ it('should show the output field and allow adding output variables when writable', () => {
+ render()
+
+ expect(screen.getByText('workflow.nodes.end.output.variable')).toBeInTheDocument()
+
+ fireEvent.click(screen.getByTestId('add-button'))
+
+ expect(handleAddVariable).toHaveBeenCalledTimes(1)
+ })
+
+ it('should hide the add action when the node is read-only', () => {
+ mockUseConfig.mockReturnValue({
+ readOnly: true,
+ inputs: createData(),
+ handleVarListChange,
+ handleAddVariable,
+ })
+
+ render()
+
+ expect(screen.queryByTestId('add-button')).not.toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/workflow/nodes/end/__tests__/use-config.spec.ts b/web/app/components/workflow/nodes/end/__tests__/use-config.spec.ts
new file mode 100644
index 0000000000..8d0cbff547
--- /dev/null
+++ b/web/app/components/workflow/nodes/end/__tests__/use-config.spec.ts
@@ -0,0 +1,76 @@
+import type { EndNodeType } from '../types'
+import { act, renderHook } from '@testing-library/react'
+import { BlockEnum } from '@/app/components/workflow/types'
+import useConfig from '../use-config'
+
+const mockUseNodesReadOnly = vi.hoisted(() => vi.fn())
+const mockUseNodeCrud = vi.hoisted(() => vi.fn())
+const mockUseVarList = vi.hoisted(() => vi.fn())
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+ useNodesReadOnly: () => mockUseNodesReadOnly(),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-node-crud', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseNodeCrud(...args),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-var-list', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseVarList(...args),
+}))
+
+const createPayload = (overrides: Partial = {}): EndNodeType => ({
+ title: 'End',
+ desc: '',
+ type: BlockEnum.End,
+ outputs: [],
+ ...overrides,
+})
+
+describe('end/use-config', () => {
+ const mockHandleVarListChange = vi.fn()
+ const mockHandleAddVariable = vi.fn()
+ const mockSetInputs = vi.fn()
+ let currentInputs: EndNodeType
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ currentInputs = createPayload()
+
+ mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: true })
+ mockUseNodeCrud.mockReturnValue({
+ inputs: currentInputs,
+ setInputs: mockSetInputs,
+ })
+ mockUseVarList.mockReturnValue({
+ handleVarListChange: mockHandleVarListChange,
+ handleAddVariable: mockHandleAddVariable,
+ })
+ })
+
+ it('should build var-list handlers against outputs and surface the readonly state', () => {
+ const { result } = renderHook(() => useConfig('end-node', currentInputs))
+ const config = mockUseVarList.mock.calls[0][0] as { setInputs: (inputs: EndNodeType) => void }
+
+ expect(mockUseVarList).toHaveBeenCalledWith(expect.objectContaining({
+ inputs: currentInputs,
+ setInputs: expect.any(Function),
+ varKey: 'outputs',
+ }))
+ expect(result.current.readOnly).toBe(true)
+ expect(result.current.handleVarListChange).toBe(mockHandleVarListChange)
+ expect(result.current.handleAddVariable).toBe(mockHandleAddVariable)
+
+ act(() => {
+ config.setInputs(createPayload({
+ outputs: currentInputs.outputs,
+ }))
+ })
+
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ outputs: currentInputs.outputs,
+ }))
+ })
+})
diff --git a/web/app/components/workflow/nodes/http/__tests__/node.spec.tsx b/web/app/components/workflow/nodes/http/__tests__/node.spec.tsx
new file mode 100644
index 0000000000..428aabd99e
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/__tests__/node.spec.tsx
@@ -0,0 +1,67 @@
+import type { HttpNodeType } from '../types'
+import { render, screen } from '@testing-library/react'
+import { BlockEnum } from '@/app/components/workflow/types'
+import Node from '../node'
+import { AuthorizationType, BodyType, Method } from '../types'
+
+const mockReadonlyInputWithSelectVar = vi.hoisted(() => vi.fn())
+
+vi.mock('@/app/components/workflow/nodes/_base/components/readonly-input-with-select-var', () => ({
+ __esModule: true,
+ default: (props: { value: string, nodeId: string, className?: string }) => {
+ mockReadonlyInputWithSelectVar(props)
+ return {props.value}
+ },
+}))
+
+const createData = (overrides: Partial = {}): HttpNodeType => ({
+ title: 'HTTP Request',
+ desc: '',
+ type: BlockEnum.HttpRequest,
+ variables: [],
+ method: Method.get,
+ url: 'https://api.example.com',
+ authorization: { type: AuthorizationType.none },
+ headers: '',
+ params: '',
+ body: { type: BodyType.none, data: [] },
+ timeout: { connect: 5, read: 10, write: 15 },
+ ssl_verify: true,
+ ...overrides,
+})
+
+describe('http/node', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('renders the request method and forwards the URL to the readonly input', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText('post')).toBeInTheDocument()
+ expect(screen.getByTestId('readonly-input')).toHaveTextContent('https://api.example.com/users')
+ expect(mockReadonlyInputWithSelectVar).toHaveBeenCalledWith(expect.objectContaining({
+ nodeId: 'http-node',
+ value: 'https://api.example.com/users',
+ }))
+ })
+
+ it('renders nothing when the request URL is empty', () => {
+ const { container } = render(
+ ,
+ )
+
+ expect(container).toBeEmptyDOMElement()
+ })
+})
diff --git a/web/app/components/workflow/nodes/http/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/http/__tests__/panel.spec.tsx
new file mode 100644
index 0000000000..e8ce5ac5c3
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/__tests__/panel.spec.tsx
@@ -0,0 +1,295 @@
+import type { ReactNode } from 'react'
+import type { HttpNodeType } from '../types'
+import type { NodePanelProps } from '@/app/components/workflow/types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { BlockEnum } from '@/app/components/workflow/types'
+import Panel from '../panel'
+import { AuthorizationType, BodyPayloadValueType, BodyType, Method } from '../types'
+
+const mockUseConfig = vi.hoisted(() => vi.fn())
+const mockAuthorizationModal = vi.hoisted(() => vi.fn())
+const mockCurlPanel = vi.hoisted(() => vi.fn())
+const mockApiInput = vi.hoisted(() => vi.fn())
+const mockKeyValue = vi.hoisted(() => vi.fn())
+const mockEditBody = vi.hoisted(() => vi.fn())
+const mockTimeout = vi.hoisted(() => vi.fn())
+
+type ApiInputProps = {
+ method: Method
+ url: string
+ onMethodChange: (method: Method) => void
+ onUrlChange: (url: string) => void
+}
+
+type KeyValueProps = {
+ nodeId: string
+ list: Array<{ key: string, value: string }>
+ onChange: (value: Array<{ key: string, value: string }>) => void
+ onAdd: () => void
+}
+
+type EditBodyProps = {
+ payload: HttpNodeType['body']
+ onChange: (value: HttpNodeType['body']) => void
+}
+
+type TimeoutProps = {
+ payload: HttpNodeType['timeout']
+ onChange: (value: HttpNodeType['timeout']) => void
+}
+
+vi.mock('../use-config', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseConfig(...args),
+}))
+
+vi.mock('../components/authorization', () => ({
+ __esModule: true,
+ default: (props: { nodeId: string, payload: HttpNodeType['authorization'], onChange: (value: HttpNodeType['authorization']) => void, onHide: () => void }) => {
+ mockAuthorizationModal(props)
+ return {props.nodeId}
+ },
+}))
+
+vi.mock('../components/curl-panel', () => ({
+ __esModule: true,
+ default: (props: { nodeId: string, onHide: () => void, handleCurlImport: (node: HttpNodeType) => void }) => {
+ mockCurlPanel(props)
+ return {props.nodeId}
+ },
+}))
+
+vi.mock('../components/api-input', () => ({
+ __esModule: true,
+ default: (props: ApiInputProps) => {
+ mockApiInput(props)
+ return (
+
+
{`${props.method}:${props.url}`}
+
+
+
+
{props.list.map(item => `${item.key}:${item.value}`).join(',')}
+
+
+
{children}
,
+ VarItem: ({ name, type }: { name: string, type: string }) => {`${name}:${type}`}
,
+}))
+
+const createData = (overrides: Partial = {}): HttpNodeType => ({
+ title: 'HTTP Request',
+ desc: '',
+ type: BlockEnum.HttpRequest,
+ variables: [],
+ method: Method.get,
+ url: 'https://api.example.com',
+ authorization: { type: AuthorizationType.none },
+ headers: '',
+ params: '',
+ body: { type: BodyType.none, data: [] },
+ timeout: { connect: 5, read: 10, write: 15 },
+ ssl_verify: true,
+ ...overrides,
+})
+
+const panelProps = {} as NodePanelProps['panelProps']
+
+describe('http/panel', () => {
+ const handleMethodChange = vi.fn()
+ const handleUrlChange = vi.fn()
+ const setHeaders = vi.fn()
+ const addHeader = vi.fn()
+ const setParams = vi.fn()
+ const addParam = vi.fn()
+ const setBody = vi.fn()
+ const showAuthorization = vi.fn()
+ const hideAuthorization = vi.fn()
+ const setAuthorization = vi.fn()
+ const setTimeout = vi.fn()
+ const showCurlPanel = vi.fn()
+ const hideCurlPanel = vi.fn()
+ const handleCurlImport = vi.fn()
+ const handleSSLVerifyChange = vi.fn()
+
+ const createConfigResult = (overrides: Record = {}) => ({
+ readOnly: false,
+ isDataReady: true,
+ inputs: createData({
+ authorization: { type: AuthorizationType.apiKey, config: null },
+ }),
+ handleMethodChange,
+ handleUrlChange,
+ headers: [{ key: 'accept', value: 'application/json' }],
+ setHeaders,
+ addHeader,
+ params: [{ key: 'page', value: '1' }],
+ setParams,
+ addParam,
+ setBody,
+ isShowAuthorization: false,
+ showAuthorization,
+ hideAuthorization,
+ setAuthorization,
+ setTimeout,
+ isShowCurlPanel: false,
+ showCurlPanel,
+ hideCurlPanel,
+ handleCurlImport,
+ handleSSLVerifyChange,
+ ...overrides,
+ })
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseConfig.mockReturnValue(createConfigResult())
+ })
+
+ it('renders request fields, forwards child changes, and wires header operations', async () => {
+ const user = userEvent.setup()
+
+ render(
+ ,
+ )
+
+ expect(screen.getByText('get:https://api.example.com')).toBeInTheDocument()
+ expect(screen.getByText('body:string')).toBeInTheDocument()
+ expect(screen.getByText('status_code:number')).toBeInTheDocument()
+ expect(screen.getByText('headers:object')).toBeInTheDocument()
+ expect(screen.getByText('files:Array[File]')).toBeInTheDocument()
+
+ await user.click(screen.getByRole('button', { name: 'emit-method-change' }))
+ await user.click(screen.getByRole('button', { name: 'emit-url-change' }))
+ await user.click(screen.getAllByRole('button', { name: 'emit-key-value-change' })[0]!)
+ await user.click(screen.getAllByRole('button', { name: 'emit-key-value-add' })[0]!)
+ await user.click(screen.getAllByRole('button', { name: 'emit-key-value-change' })[1]!)
+ await user.click(screen.getAllByRole('button', { name: 'emit-key-value-add' })[1]!)
+ await user.click(screen.getByRole('button', { name: 'emit-body-change' }))
+ await user.click(screen.getByRole('button', { name: 'emit-timeout-change' }))
+ await user.click(screen.getByText('workflow.nodes.http.authorization.authorization'))
+ await user.click(screen.getByText('workflow.nodes.http.curl.title'))
+ await user.click(screen.getByRole('switch'))
+
+ expect(handleMethodChange).toHaveBeenCalledWith(Method.post)
+ expect(handleUrlChange).toHaveBeenCalledWith('https://changed.example.com')
+ expect(setHeaders).toHaveBeenCalledWith([{ key: 'x-token', value: '123' }])
+ expect(addHeader).toHaveBeenCalledTimes(1)
+ expect(setParams).toHaveBeenCalledWith([{ key: 'x-token', value: '123' }])
+ expect(addParam).toHaveBeenCalledTimes(1)
+ expect(setBody).toHaveBeenCalledWith({
+ type: BodyType.json,
+ data: [{ type: 'text', value: '{"hello":"world"}' }],
+ })
+ expect(setTimeout).toHaveBeenCalledWith(expect.objectContaining({ connect: 9 }))
+ expect(showAuthorization).toHaveBeenCalledTimes(1)
+ expect(showCurlPanel).toHaveBeenCalledTimes(1)
+ expect(handleSSLVerifyChange).toHaveBeenCalledWith(false)
+ expect(mockApiInput).toHaveBeenCalledWith(expect.objectContaining({
+ method: Method.get,
+ url: 'https://api.example.com',
+ }))
+ })
+
+ it('returns null before the config data is ready', () => {
+ mockUseConfig.mockReturnValueOnce(createConfigResult({ isDataReady: false }))
+
+ const { container } = render(
+ ,
+ )
+
+ expect(container).toBeEmptyDOMElement()
+ })
+
+ it('renders auth and curl panels only when writable and toggled on', () => {
+ mockUseConfig.mockReturnValueOnce(createConfigResult({
+ isShowAuthorization: true,
+ isShowCurlPanel: true,
+ }))
+
+ const { rerender } = render(
+ ,
+ )
+
+ expect(screen.getByTestId('authorization-modal')).toHaveTextContent('http-node')
+ expect(screen.getByTestId('curl-panel')).toHaveTextContent('http-node')
+
+ mockUseConfig.mockReturnValueOnce(createConfigResult({
+ readOnly: true,
+ isShowAuthorization: true,
+ isShowCurlPanel: true,
+ }))
+
+ rerender(
+ ,
+ )
+
+ expect(screen.queryByTestId('authorization-modal')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('curl-panel')).not.toBeInTheDocument()
+ expect(screen.getByRole('switch')).toHaveAttribute('aria-disabled', 'true')
+ })
+})
diff --git a/web/app/components/workflow/nodes/http/__tests__/use-config.spec.ts b/web/app/components/workflow/nodes/http/__tests__/use-config.spec.ts
new file mode 100644
index 0000000000..e771122e28
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/__tests__/use-config.spec.ts
@@ -0,0 +1,271 @@
+import type { HttpNodeType } from '../types'
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { useNodesReadOnly } from '@/app/components/workflow/hooks'
+import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import { useStore } from '@/app/components/workflow/store'
+import { BlockEnum, VarType } from '@/app/components/workflow/types'
+import useVarList from '../../_base/hooks/use-var-list'
+import useKeyValueList from '../hooks/use-key-value-list'
+import { APIType, AuthorizationType, BodyPayloadValueType, BodyType, Method } from '../types'
+import useConfig from '../use-config'
+
+vi.mock('@/app/components/workflow/hooks', () => ({
+ useNodesReadOnly: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-node-crud', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-var-list', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+vi.mock('../hooks/use-key-value-list', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+ useStore: vi.fn(),
+}))
+
+const mockUseNodesReadOnly = vi.mocked(useNodesReadOnly)
+const mockUseNodeCrud = vi.mocked(useNodeCrud)
+const mockUseVarList = vi.mocked(useVarList)
+const mockUseKeyValueList = vi.mocked(useKeyValueList)
+const mockUseStore = vi.mocked(useStore)
+
+const createPayload = (overrides: Partial = {}): HttpNodeType => ({
+ title: 'HTTP Request',
+ desc: '',
+ type: BlockEnum.HttpRequest,
+ variables: [],
+ method: Method.get,
+ url: 'https://api.example.com',
+ authorization: { type: AuthorizationType.none },
+ headers: 'accept:application/json',
+ params: 'page:1',
+ body: {
+ type: BodyType.json,
+ data: '{"name":"alice"}',
+ },
+ timeout: { connect: 5, read: 10, write: 15 },
+ ssl_verify: true,
+ ...overrides,
+})
+
+describe('http/use-config', () => {
+ const mockSetInputs = vi.fn()
+ const mockHandleVarListChange = vi.fn()
+ const mockHandleAddVariable = vi.fn()
+ const headerSetList = vi.fn()
+ const headerAddItem = vi.fn()
+ const headerToggle = vi.fn()
+ const paramSetList = vi.fn()
+ const paramAddItem = vi.fn()
+ const paramToggle = vi.fn()
+ let currentInputs: HttpNodeType
+ let headerFieldChange: ((value: string) => void) | undefined
+ let paramFieldChange: ((value: string) => void) | undefined
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ currentInputs = createPayload()
+ headerFieldChange = undefined
+ paramFieldChange = undefined
+
+ mockUseNodesReadOnly.mockReturnValue({ nodesReadOnly: false, getNodesReadOnly: () => false })
+ mockUseNodeCrud.mockImplementation(() => ({
+ inputs: currentInputs,
+ setInputs: mockSetInputs,
+ }))
+ mockUseVarList.mockReturnValue({
+ handleVarListChange: mockHandleVarListChange,
+ handleAddVariable: mockHandleAddVariable,
+ } as ReturnType)
+ mockUseKeyValueList.mockImplementation((value, onChange) => {
+ if (value === currentInputs.headers) {
+ headerFieldChange = onChange
+ return {
+ list: [{ id: 'header-1', key: 'accept', value: 'application/json' }],
+ setList: headerSetList,
+ addItem: headerAddItem,
+ isKeyValueEdit: true,
+ toggleIsKeyValueEdit: headerToggle,
+ }
+ }
+
+ paramFieldChange = onChange
+ return {
+ list: [{ id: 'param-1', key: 'page', value: '1' }],
+ setList: paramSetList,
+ addItem: paramAddItem,
+ isKeyValueEdit: false,
+ toggleIsKeyValueEdit: paramToggle,
+ }
+ })
+ mockUseStore.mockImplementation((selector) => {
+ const state = {
+ nodesDefaultConfigs: {
+ [BlockEnum.HttpRequest]: createPayload({
+ method: Method.post,
+ url: 'https://default.example.com',
+ headers: '',
+ params: '',
+ body: { type: BodyType.none, data: [] },
+ timeout: { connect: 1, read: 2, write: 3 },
+ ssl_verify: false,
+ }),
+ },
+ }
+
+ return selector(state as never)
+ })
+ })
+
+ it('stays pending when the node default config is unavailable', () => {
+ mockUseStore.mockImplementation((selector) => {
+ return selector({ nodesDefaultConfigs: {} } as never)
+ })
+
+ const { result } = renderHook(() => useConfig('http-node', currentInputs))
+
+ expect(result.current.isDataReady).toBe(false)
+ expect(mockSetInputs).not.toHaveBeenCalled()
+ })
+
+ it('hydrates defaults, normalizes body payloads, and exposes var-list and key-value helpers', async () => {
+ const { result } = renderHook(() => useConfig('http-node', currentInputs))
+
+ await waitFor(() => {
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ method: Method.get,
+ url: 'https://api.example.com',
+ body: {
+ type: BodyType.json,
+ data: [{
+ type: BodyPayloadValueType.text,
+ value: '{"name":"alice"}',
+ }],
+ },
+ ssl_verify: true,
+ }))
+ })
+
+ expect(result.current.isDataReady).toBe(true)
+ expect(result.current.readOnly).toBe(false)
+ expect(result.current.handleVarListChange).toBe(mockHandleVarListChange)
+ expect(result.current.handleAddVariable).toBe(mockHandleAddVariable)
+ expect(result.current.headers).toEqual([{ id: 'header-1', key: 'accept', value: 'application/json' }])
+ expect(result.current.setHeaders).toBe(headerSetList)
+ expect(result.current.addHeader).toBe(headerAddItem)
+ expect(result.current.isHeaderKeyValueEdit).toBe(true)
+ expect(result.current.toggleIsHeaderKeyValueEdit).toBe(headerToggle)
+ expect(result.current.params).toEqual([{ id: 'param-1', key: 'page', value: '1' }])
+ expect(result.current.setParams).toBe(paramSetList)
+ expect(result.current.addParam).toBe(paramAddItem)
+ expect(result.current.isParamKeyValueEdit).toBe(false)
+ expect(result.current.toggleIsParamKeyValueEdit).toBe(paramToggle)
+ expect(result.current.filterVar({ type: VarType.string } as never)).toBe(true)
+ expect(result.current.filterVar({ type: VarType.number } as never)).toBe(true)
+ expect(result.current.filterVar({ type: VarType.secret } as never)).toBe(true)
+ expect(result.current.filterVar({ type: VarType.file } as never)).toBe(false)
+ })
+
+ it('initializes empty body data arrays when the payload body is missing', async () => {
+ currentInputs = createPayload({
+ body: {
+ type: BodyType.formData,
+ data: undefined as unknown as HttpNodeType['body']['data'],
+ },
+ })
+
+ renderHook(() => useConfig('http-node', currentInputs))
+
+ await waitFor(() => {
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ body: {
+ type: BodyType.formData,
+ data: [],
+ },
+ }))
+ })
+ })
+
+ it('updates request fields, authorization state, curl imports, and ssl verification', async () => {
+ const { result } = renderHook(() => useConfig('http-node', currentInputs))
+
+ await waitFor(() => {
+ expect(result.current.isDataReady).toBe(true)
+ })
+
+ mockSetInputs.mockClear()
+
+ act(() => {
+ result.current.handleMethodChange(Method.delete)
+ result.current.handleUrlChange('https://changed.example.com')
+ headerFieldChange?.('x-token:123')
+ paramFieldChange?.('size:20')
+ result.current.setBody({ type: BodyType.rawText, data: 'raw payload' })
+ result.current.showAuthorization()
+ })
+
+ expect(result.current.isShowAuthorization).toBe(true)
+
+ act(() => {
+ result.current.hideAuthorization()
+ result.current.setAuthorization({
+ type: AuthorizationType.apiKey,
+ config: {
+ type: APIType.bearer,
+ api_key: 'secret',
+ },
+ })
+ result.current.setTimeout({ connect: 30, read: 40, write: 50 })
+ result.current.showCurlPanel()
+ })
+
+ expect(result.current.isShowCurlPanel).toBe(true)
+
+ act(() => {
+ result.current.hideCurlPanel()
+ result.current.handleCurlImport(createPayload({
+ method: Method.patch,
+ url: 'https://imported.example.com',
+ headers: 'authorization:Bearer imported',
+ params: 'debug:true',
+ body: { type: BodyType.json, data: [{ type: BodyPayloadValueType.text, value: '{"ok":true}' }] },
+ }))
+ result.current.handleSSLVerifyChange(false)
+ })
+
+ expect(result.current.isShowAuthorization).toBe(false)
+ expect(result.current.isShowCurlPanel).toBe(false)
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({ method: Method.delete }))
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({ url: 'https://changed.example.com' }))
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({ headers: 'x-token:123' }))
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({ params: 'size:20' }))
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ body: { type: BodyType.rawText, data: 'raw payload' },
+ }))
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ authorization: expect.objectContaining({
+ type: AuthorizationType.apiKey,
+ }),
+ }))
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ timeout: { connect: 30, read: 40, write: 50 },
+ }))
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({
+ method: Method.patch,
+ url: 'https://imported.example.com',
+ headers: 'authorization:Bearer imported',
+ params: 'debug:true',
+ body: { type: BodyType.json, data: [{ type: BodyPayloadValueType.text, value: '{"ok":true}' }] },
+ }))
+ expect(mockSetInputs).toHaveBeenCalledWith(expect.objectContaining({ ssl_verify: false }))
+ })
+})
diff --git a/web/app/components/workflow/nodes/human-input/__tests__/node.spec.tsx b/web/app/components/workflow/nodes/human-input/__tests__/node.spec.tsx
new file mode 100644
index 0000000000..915f9136be
--- /dev/null
+++ b/web/app/components/workflow/nodes/human-input/__tests__/node.spec.tsx
@@ -0,0 +1,83 @@
+import type { HumanInputNodeType } from '../types'
+import { render, screen } from '@testing-library/react'
+import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
+import Node from '../node'
+import { DeliveryMethodType, UserActionButtonType } from '../types'
+
+vi.mock('../../_base/components/node-handle', () => ({
+ NodeSourceHandle: (props: { handleId: string }) => {`handle:${props.handleId}`}
,
+}))
+
+const createData = (overrides: Partial = {}): HumanInputNodeType => ({
+ title: 'Human Input',
+ desc: '',
+ type: BlockEnum.HumanInput,
+ delivery_methods: [{
+ id: 'dm-webapp',
+ type: DeliveryMethodType.WebApp,
+ enabled: true,
+ }, {
+ id: 'dm-email',
+ type: DeliveryMethodType.Email,
+ enabled: true,
+ }],
+ form_content: 'Please review this request',
+ inputs: [{
+ type: InputVarType.textInput,
+ output_variable_name: 'review_result',
+ default: {
+ selector: [],
+ type: 'constant',
+ value: '',
+ },
+ }],
+ user_actions: [{
+ id: 'approve',
+ title: 'Approve',
+ button_style: UserActionButtonType.Primary,
+ }, {
+ id: 'reject',
+ title: 'Reject',
+ button_style: UserActionButtonType.Default,
+ }],
+ timeout: 3,
+ timeout_unit: 'day',
+ ...overrides,
+})
+
+describe('human-input/node', () => {
+ it('renders delivery methods, user action handles, and the timeout handle', () => {
+ render(
+ ,
+ )
+
+ expect(screen.getByText('workflow.nodes.humanInput.deliveryMethod.title')).toBeInTheDocument()
+ expect(screen.getByText('webapp')).toBeInTheDocument()
+ expect(screen.getByText('email')).toBeInTheDocument()
+ expect(screen.getByText('approve')).toBeInTheDocument()
+ expect(screen.getByText('reject')).toBeInTheDocument()
+ expect(screen.getByText('Timeout')).toBeInTheDocument()
+ expect(screen.getByText('handle:approve')).toBeInTheDocument()
+ expect(screen.getByText('handle:reject')).toBeInTheDocument()
+ expect(screen.getByText('handle:__timeout')).toBeInTheDocument()
+ })
+
+ it('keeps the timeout handle when delivery methods and actions are empty', () => {
+ render(
+ ,
+ )
+
+ expect(screen.queryByText('workflow.nodes.humanInput.deliveryMethod.title')).not.toBeInTheDocument()
+ expect(screen.getByText('Timeout')).toBeInTheDocument()
+ expect(screen.getByText('handle:__timeout')).toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx
new file mode 100644
index 0000000000..937a2da61a
--- /dev/null
+++ b/web/app/components/workflow/nodes/human-input/__tests__/panel.spec.tsx
@@ -0,0 +1,386 @@
+import type { ReactNode } from 'react'
+import type useConfig from '../hooks/use-config'
+import type { HumanInputNodeType } from '../types'
+import type { NodePanelProps } from '@/app/components/workflow/types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import copy from 'copy-to-clipboard'
+import { toast } from '@/app/components/base/ui/toast'
+import { BlockEnum, InputVarType, VarType } from '@/app/components/workflow/types'
+import Panel from '../panel'
+import { DeliveryMethodType, UserActionButtonType } from '../types'
+
+const mockUseConfig = vi.hoisted(() => vi.fn())
+const mockUseStore = vi.hoisted(() => vi.fn())
+const mockUseAvailableVarList = vi.hoisted(() => vi.fn())
+const mockDeliveryMethod = vi.hoisted(() => vi.fn())
+const mockFormContent = vi.hoisted(() => vi.fn())
+const mockFormContentPreview = vi.hoisted(() => vi.fn())
+const mockTimeoutInput = vi.hoisted(() => vi.fn())
+const mockUserActionItem = vi.hoisted(() => vi.fn())
+
+vi.mock('copy-to-clipboard', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+ toast: {
+ success: vi.fn(),
+ },
+}))
+
+vi.mock('@/app/components/base/tooltip', () => ({
+ __esModule: true,
+ default: () => tooltip
,
+}))
+
+vi.mock('@/app/components/base/action-button', () => ({
+ __esModule: true,
+ default: (props: {
+ children: ReactNode
+ onClick: () => void
+ }) => (
+
+ ),
+}))
+
+vi.mock('@/app/components/workflow/store', () => ({
+ useStore: (selector: (state: { nodePanelWidth: number }) => unknown) => mockUseStore(selector),
+}))
+
+vi.mock('@/app/components/workflow/nodes/_base/hooks/use-available-var-list', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseAvailableVarList(...args),
+}))
+
+vi.mock('../hooks/use-config', () => ({
+ __esModule: true,
+ default: (...args: unknown[]) => mockUseConfig(...args),
+}))
+
+vi.mock('../components/delivery-method', () => ({
+ __esModule: true,
+ default: (props: {
+ readonly: boolean
+ onChange: (methods: HumanInputNodeType['delivery_methods']) => void
+ }) => {
+ mockDeliveryMethod(props)
+ return (
+
+ )
+ },
+}))
+
+vi.mock('../components/form-content', () => ({
+ __esModule: true,
+ default: (props: {
+ readonly: boolean
+ isExpand: boolean
+ onChange: (value: string) => void
+ onFormInputsChange: (value: HumanInputNodeType['inputs']) => void
+ onFormInputItemRename: (oldName: string, newName: string) => void
+ onFormInputItemRemove: (name: string) => void
+ }) => {
+ mockFormContent(props)
+ return (
+
+
{props.readonly ? 'form-content:readonly' : `form-content:${props.isExpand ? 'expanded' : 'collapsed'}`}
+
+
+
+
+
+
form-preview
+
+
+
{`${props.data.id}:${props.readonly ? 'readonly' : 'editable'}`}
+
+
+
+
+ {props.children}
+
+ ),
+ VarItem: ({ name, type, description }: { name: string, type: string, description: string }) => (
+ {`${name}:${type}:${description}`}
+ ),
+}))
+
+vi.mock('@remixicon/react', () => ({
+ RiAddLine: () => add-icon,
+ RiClipboardLine: () => clipboard-icon,
+ RiCollapseDiagonalLine: () => collapse-icon,
+ RiExpandDiagonalLine: () => expand-icon,
+ RiEyeLine: () => preview-icon,
+}))
+
+const mockCopy = vi.mocked(copy)
+const mockToastSuccess = vi.mocked(toast.success)
+
+const createData = (overrides: Partial = {}): HumanInputNodeType => ({
+ title: 'Human Input',
+ desc: '',
+ type: BlockEnum.HumanInput,
+ delivery_methods: [{
+ id: 'dm-webapp',
+ type: DeliveryMethodType.WebApp,
+ enabled: true,
+ }],
+ form_content: 'Please review this request',
+ inputs: [{
+ type: InputVarType.textInput,
+ output_variable_name: 'review_result',
+ default: {
+ selector: [],
+ type: 'constant',
+ value: '',
+ },
+ }],
+ user_actions: [{
+ id: 'approve',
+ title: 'Approve',
+ button_style: UserActionButtonType.Primary,
+ }],
+ timeout: 3,
+ timeout_unit: 'day',
+ ...overrides,
+})
+
+const createConfigResult = (overrides: Partial> = {}): ReturnType => ({
+ readOnly: false,
+ inputs: createData(),
+ handleDeliveryMethodChange: vi.fn(),
+ handleUserActionAdd: vi.fn(),
+ handleUserActionChange: vi.fn(),
+ handleUserActionDelete: vi.fn(),
+ handleTimeoutChange: vi.fn(),
+ handleFormContentChange: vi.fn(),
+ handleFormInputsChange: vi.fn(),
+ handleFormInputItemRename: vi.fn(),
+ handleFormInputItemRemove: vi.fn(),
+ editorKey: 1,
+ structuredOutputCollapsed: true,
+ setStructuredOutputCollapsed: vi.fn(),
+ ...overrides,
+})
+
+const renderPanel = (data: HumanInputNodeType = createData()) => {
+ const props: NodePanelProps = {
+ id: 'human-input-node',
+ data,
+ panelProps: {
+ getInputVars: vi.fn(() => []),
+ toVarInputs: vi.fn(() => []),
+ runInputData: {},
+ runInputDataRef: { current: {} },
+ setRunInputData: vi.fn(),
+ runResult: null,
+ },
+ }
+
+ return render()
+}
+
+describe('human-input/panel', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUseStore.mockImplementation(selector => selector({ nodePanelWidth: 480 }))
+ mockUseAvailableVarList.mockImplementation((_id, options?: { filterVar?: (payload: { type: VarType }) => boolean }) => ({
+ availableVars: [{
+ variable: ['start', 'email'],
+ type: VarType.string,
+ }, {
+ variable: ['start', 'files'],
+ type: VarType.file,
+ }].filter(variable => options?.filterVar ? options.filterVar({ type: variable.type } as never) : true),
+ availableNodesWithParent: [{
+ id: 'start-node',
+ data: {
+ title: 'Start',
+ type: BlockEnum.Start,
+ },
+ }],
+ }))
+ mockUseConfig.mockReturnValue(createConfigResult())
+ })
+
+ it('renders editable controls, forwards updates, and toggles preview and output sections', async () => {
+ const user = userEvent.setup()
+ const config = createConfigResult()
+ mockUseConfig.mockReturnValue(config)
+
+ const { container } = renderPanel()
+
+ expect(screen.getByRole('button', { name: 'delivery-method:editable' })).toBeInTheDocument()
+ expect(screen.getByText('form-content:collapsed')).toBeInTheDocument()
+ expect(screen.getByText('approve:editable')).toBeInTheDocument()
+ expect(screen.getByText('review_result:string:Form input value')).toBeInTheDocument()
+ expect(screen.getByText('__action_id:string:Action ID user triggered')).toBeInTheDocument()
+ expect(screen.getByText('__rendered_content:string:Rendered content')).toBeInTheDocument()
+
+ await user.click(screen.getByRole('button', { name: 'delivery-method:editable' }))
+ await user.click(screen.getByRole('button', { name: /workflow\.nodes\.humanInput\.formContent\.preview/ }))
+ await user.click(screen.getByRole('button', { name: 'change-form-content' }))
+ await user.click(screen.getByRole('button', { name: 'change-form-inputs' }))
+ await user.click(screen.getByRole('button', { name: 'rename-form-input' }))
+ await user.click(screen.getByRole('button', { name: 'remove-form-input' }))
+ await user.click(screen.getByRole('button', { name: 'action-button' }))
+ await user.click(screen.getByRole('button', { name: 'change-action-approve' }))
+ await user.click(screen.getByRole('button', { name: 'delete-action-approve' }))
+ await user.click(screen.getByRole('button', { name: 'timeout:editable' }))
+ await user.click(screen.getByRole('button', { name: 'toggle-output-vars' }))
+ await user.click(screen.getByRole('button', { name: 'close-preview' }))
+
+ const iconContainers = container.querySelectorAll('div.flex.size-6.cursor-pointer')
+ await user.click(iconContainers[0] as HTMLElement)
+ await user.click(iconContainers[1] as HTMLElement)
+
+ expect(config.handleDeliveryMethodChange).toHaveBeenCalledWith([{
+ id: 'dm-email',
+ type: DeliveryMethodType.Email,
+ enabled: true,
+ }])
+ expect(config.handleFormContentChange).toHaveBeenCalledWith('Updated content')
+ expect(config.handleFormInputsChange).toHaveBeenCalled()
+ expect(config.handleFormInputItemRename).toHaveBeenCalledWith('name', 'email')
+ expect(config.handleFormInputItemRemove).toHaveBeenCalledWith('name')
+ expect(config.handleUserActionAdd).toHaveBeenCalledWith({
+ id: 'action_2',
+ title: 'Button Text 2',
+ button_style: UserActionButtonType.Default,
+ })
+ expect(config.handleUserActionChange).toHaveBeenCalledWith(0, {
+ id: 'approve',
+ title: 'Approve updated',
+ button_style: UserActionButtonType.Primary,
+ })
+ expect(config.handleUserActionDelete).toHaveBeenCalledWith('approve')
+ expect(config.handleTimeoutChange).toHaveBeenCalledWith({ timeout: 8, unit: 'hour' })
+ expect(config.setStructuredOutputCollapsed).toHaveBeenCalledWith(false)
+ expect(mockCopy).toHaveBeenCalledWith('Please review this request')
+ expect(mockToastSuccess).toHaveBeenCalledWith('common.actionMsg.copySuccessfully')
+ expect(mockFormContentPreview).toHaveBeenCalled()
+ })
+
+ it('renders readonly and empty states without preview or add controls', () => {
+ mockUseConfig.mockReturnValue(createConfigResult({
+ readOnly: true,
+ inputs: createData({
+ user_actions: [],
+ }),
+ structuredOutputCollapsed: false,
+ }))
+
+ renderPanel()
+
+ expect(screen.getByRole('button', { name: 'delivery-method:readonly' })).toBeInTheDocument()
+ expect(screen.getByText('form-content:readonly')).toBeInTheDocument()
+ expect(screen.getByText('workflow.nodes.humanInput.userActions.emptyTip')).toBeInTheDocument()
+ expect(screen.queryByRole('button', { name: /workflow\.nodes\.humanInput\.formContent\.preview/ })).not.toBeInTheDocument()
+ expect(screen.queryByRole('button', { name: 'action-button' })).not.toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'timeout:readonly' })).toBeInTheDocument()
+ expect(screen.queryByText('form-preview')).not.toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/email-configure-modal.spec.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/email-configure-modal.spec.tsx
new file mode 100644
index 0000000000..cec9ffe69a
--- /dev/null
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/__tests__/email-configure-modal.spec.tsx
@@ -0,0 +1,180 @@
+import type { EmailConfig } from '../../../types'
+import { fireEvent, render, screen } from '@testing-library/react'
+import EmailConfigureModal from '../email-configure-modal'
+
+const mockToastError = vi.hoisted(() => vi.fn())
+const mockUseAppContextSelector = vi.hoisted(() => vi.fn())
+
+vi.mock('@/app/components/base/ui/toast', () => ({
+ toast: {
+ error: (message: string) => mockToastError(message),
+ },
+}))
+
+vi.mock('@/context/app-context', () => ({
+ useSelector: (selector: (state: { userProfile: { email: string } }) => string) =>
+ mockUseAppContextSelector(selector),
+}))
+
+vi.mock('../mail-body-input', () => ({
+ default: ({ value, onChange }: { value: string, onChange: (value: string) => void }) => (
+