= {}): ModelParameterRule => ({
+ name: 'temperature',
+ label: { en_US: 'Temperature', zh_Hans: '温度' },
+ type: 'float',
+ default: 0.7,
+ min: 0,
+ max: 2,
+ precision: 2,
+ required: false,
+ ...overrides,
+})
+
+/**
+ * Factory function to create default props
+ */
+const createDefaultProps = (overrides: Partial<{
+ isAdvancedMode: boolean
+ provider: string
+ modelId: string
+ completionParams: FormValue
+ onCompletionParamsChange: (newParams: FormValue) => void
+}> = {}) => ({
+ isAdvancedMode: false,
+ provider: 'langgenius/openai/openai',
+ modelId: 'gpt-4',
+ completionParams: {},
+ onCompletionParamsChange: vi.fn(),
+ ...overrides,
+})
+
+/**
+ * Setup mock for useModelParameterRules
+ */
+const setupModelParameterRulesMock = (config: {
+ data?: ModelParameterRule[]
+ isPending?: boolean
+} = {}) => {
+ mockUseModelParameterRules.mockReturnValue({
+ data: config.data ? { data: config.data } : undefined,
+ isPending: config.isPending ?? false,
+ })
+}
+
+// ==================== Tests ====================
+
+describe('LLMParamsPanel', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ setupModelParameterRulesMock({ data: [], isPending: false })
+ })
+
+ // ==================== Rendering Tests ====================
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ // Arrange
+ const props = createDefaultProps()
+
+ // Act
+ const { container } = render()
+
+ // Assert
+ expect(container).toBeInTheDocument()
+ })
+
+ it('should render loading state when isPending is true', () => {
+ // Arrange
+ setupModelParameterRulesMock({ isPending: true })
+ const props = createDefaultProps()
+
+ // Act
+ render()
+
+ // Assert - Loading component uses aria-label instead of visible text
+ expect(screen.getByRole('status')).toBeInTheDocument()
+ })
+
+ it('should render parameters header', () => {
+ // Arrange
+ setupModelParameterRulesMock({ data: [], isPending: false })
+ const props = createDefaultProps()
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByText('common.modelProvider.parameters')).toBeInTheDocument()
+ })
+
+ it('should render PresetsParameter for openai provider', () => {
+ // Arrange
+ setupModelParameterRulesMock({ data: [], isPending: false })
+ const props = createDefaultProps({ provider: 'langgenius/openai/openai' })
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('presets-parameter')).toBeInTheDocument()
+ })
+
+ it('should render PresetsParameter for azure_openai provider', () => {
+ // Arrange
+ setupModelParameterRulesMock({ data: [], isPending: false })
+ const props = createDefaultProps({ provider: 'langgenius/azure_openai/azure_openai' })
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('presets-parameter')).toBeInTheDocument()
+ })
+
+ it('should not render PresetsParameter for non-preset providers', () => {
+ // Arrange
+ setupModelParameterRulesMock({ data: [], isPending: false })
+ const props = createDefaultProps({ provider: 'anthropic/claude' })
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.queryByTestId('presets-parameter')).not.toBeInTheDocument()
+ })
+
+ it('should render parameter items when rules are available', () => {
+ // Arrange
+ const rules = [
+ createParameterRule({ name: 'temperature' }),
+ createParameterRule({ name: 'top_p', label: { en_US: 'Top P', zh_Hans: 'Top P' } }),
+ ]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps()
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('parameter-item-temperature')).toBeInTheDocument()
+ expect(screen.getByTestId('parameter-item-top_p')).toBeInTheDocument()
+ })
+
+ it('should not render parameter items when rules are empty', () => {
+ // Arrange
+ setupModelParameterRulesMock({ data: [], isPending: false })
+ const props = createDefaultProps()
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.queryByTestId('parameter-item-temperature')).not.toBeInTheDocument()
+ })
+
+ it('should include stop parameter rule in advanced mode', () => {
+ // Arrange
+ const rules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps({ isAdvancedMode: true })
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('parameter-item-temperature')).toBeInTheDocument()
+ expect(screen.getByTestId('parameter-item-stop')).toBeInTheDocument()
+ })
+
+ it('should not include stop parameter rule in non-advanced mode', () => {
+ // Arrange
+ const rules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps({ isAdvancedMode: false })
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('parameter-item-temperature')).toBeInTheDocument()
+ expect(screen.queryByTestId('parameter-item-stop')).not.toBeInTheDocument()
+ })
+
+ it('should pass isInWorkflow=true to ParameterItem', () => {
+ // Arrange
+ const rules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps()
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('parameter-item-temperature')).toHaveAttribute('data-is-in-workflow', 'true')
+ })
+ })
+
+ // ==================== Props Testing ====================
+ describe('Props', () => {
+ it('should call useModelParameterRules with provider and modelId', () => {
+ // Arrange
+ const props = createDefaultProps({
+ provider: 'test-provider',
+ modelId: 'test-model',
+ })
+
+ // Act
+ render()
+
+ // Assert
+ expect(mockUseModelParameterRules).toHaveBeenCalledWith('test-provider', 'test-model')
+ })
+
+ it('should pass completion params value to ParameterItem', () => {
+ // Arrange
+ const rules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps({
+ completionParams: { temperature: 0.8 },
+ })
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('parameter-item-temperature')).toHaveAttribute('data-value', '0.8')
+ })
+
+ it('should handle undefined completion params value', () => {
+ // Arrange
+ const rules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps({
+ completionParams: {},
+ })
+
+ // Act
+ render()
+
+ // Assert - when value is undefined, JSON.stringify returns undefined string
+ expect(screen.getByTestId('parameter-item-temperature')).not.toHaveAttribute('data-value')
+ })
+ })
+
+ // ==================== Event Handlers ====================
+ describe('Event Handlers', () => {
+ describe('handleSelectPresetParameter', () => {
+ it('should apply Creative preset config', () => {
+ // Arrange
+ const onCompletionParamsChange = vi.fn()
+ setupModelParameterRulesMock({ data: [], isPending: false })
+ const props = createDefaultProps({
+ provider: 'langgenius/openai/openai',
+ onCompletionParamsChange,
+ completionParams: { existing: 'value' },
+ })
+
+ // Act
+ render()
+ fireEvent.click(screen.getByTestId('preset-creative'))
+
+ // Assert
+ expect(onCompletionParamsChange).toHaveBeenCalledWith({
+ existing: 'value',
+ temperature: 0.8,
+ top_p: 0.9,
+ presence_penalty: 0.1,
+ frequency_penalty: 0.1,
+ })
+ })
+
+ it('should apply Balanced preset config', () => {
+ // Arrange
+ const onCompletionParamsChange = vi.fn()
+ setupModelParameterRulesMock({ data: [], isPending: false })
+ const props = createDefaultProps({
+ provider: 'langgenius/openai/openai',
+ onCompletionParamsChange,
+ completionParams: {},
+ })
+
+ // Act
+ render()
+ fireEvent.click(screen.getByTestId('preset-balanced'))
+
+ // Assert
+ expect(onCompletionParamsChange).toHaveBeenCalledWith({
+ temperature: 0.5,
+ top_p: 0.85,
+ presence_penalty: 0.2,
+ frequency_penalty: 0.3,
+ })
+ })
+
+ it('should apply Precise preset config', () => {
+ // Arrange
+ const onCompletionParamsChange = vi.fn()
+ setupModelParameterRulesMock({ data: [], isPending: false })
+ const props = createDefaultProps({
+ provider: 'langgenius/openai/openai',
+ onCompletionParamsChange,
+ completionParams: {},
+ })
+
+ // Act
+ render()
+ fireEvent.click(screen.getByTestId('preset-precise'))
+
+ // Assert
+ expect(onCompletionParamsChange).toHaveBeenCalledWith({
+ temperature: 0.2,
+ top_p: 0.75,
+ presence_penalty: 0.5,
+ frequency_penalty: 0.5,
+ })
+ })
+
+ it('should apply empty config for Custom preset (spreads undefined)', () => {
+ // Arrange
+ const onCompletionParamsChange = vi.fn()
+ setupModelParameterRulesMock({ data: [], isPending: false })
+ const props = createDefaultProps({
+ provider: 'langgenius/openai/openai',
+ onCompletionParamsChange,
+ completionParams: { existing: 'value' },
+ })
+
+ // Act
+ render()
+ fireEvent.click(screen.getByTestId('preset-custom'))
+
+ // Assert - Custom preset has no config, so only existing params are kept
+ expect(onCompletionParamsChange).toHaveBeenCalledWith({ existing: 'value' })
+ })
+ })
+
+ describe('handleParamChange', () => {
+ it('should call onCompletionParamsChange with updated param', () => {
+ // Arrange
+ const onCompletionParamsChange = vi.fn()
+ const rules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps({
+ onCompletionParamsChange,
+ completionParams: { existing: 'value' },
+ })
+
+ // Act
+ render()
+ fireEvent.click(screen.getByTestId('change-temperature'))
+
+ // Assert
+ expect(onCompletionParamsChange).toHaveBeenCalledWith({
+ existing: 'value',
+ temperature: 0.5,
+ })
+ })
+
+ it('should override existing param value', () => {
+ // Arrange
+ const onCompletionParamsChange = vi.fn()
+ const rules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps({
+ onCompletionParamsChange,
+ completionParams: { temperature: 0.9 },
+ })
+
+ // Act
+ render()
+ fireEvent.click(screen.getByTestId('change-temperature'))
+
+ // Assert
+ expect(onCompletionParamsChange).toHaveBeenCalledWith({
+ temperature: 0.5,
+ })
+ })
+ })
+
+ describe('handleSwitch', () => {
+ it('should add param when switch is turned on', () => {
+ // Arrange
+ const onCompletionParamsChange = vi.fn()
+ const rules = [createParameterRule({ name: 'temperature', default: 0.7 })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps({
+ onCompletionParamsChange,
+ completionParams: { existing: 'value' },
+ })
+
+ // Act
+ render()
+ fireEvent.click(screen.getByTestId('switch-on-temperature'))
+
+ // Assert
+ expect(onCompletionParamsChange).toHaveBeenCalledWith({
+ existing: 'value',
+ temperature: 0.7,
+ })
+ })
+
+ it('should remove param when switch is turned off', () => {
+ // Arrange
+ const onCompletionParamsChange = vi.fn()
+ const rules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps({
+ onCompletionParamsChange,
+ completionParams: { temperature: 0.8, other: 'value' },
+ })
+
+ // Act
+ render()
+ fireEvent.click(screen.getByTestId('switch-off-temperature'))
+
+ // Assert
+ expect(onCompletionParamsChange).toHaveBeenCalledWith({
+ other: 'value',
+ })
+ })
+ })
+ })
+
+ // ==================== Memoization ====================
+ describe('Memoization - parameterRules', () => {
+ it('should return empty array when data is undefined', () => {
+ // Arrange
+ mockUseModelParameterRules.mockReturnValue({
+ data: undefined,
+ isPending: false,
+ })
+ const props = createDefaultProps()
+
+ // Act
+ render()
+
+ // Assert - no parameter items should be rendered
+ expect(screen.queryByTestId(/parameter-item-/)).not.toBeInTheDocument()
+ })
+
+ it('should return empty array when data.data is undefined', () => {
+ // Arrange
+ mockUseModelParameterRules.mockReturnValue({
+ data: { data: undefined },
+ isPending: false,
+ })
+ const props = createDefaultProps()
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.queryByTestId(/parameter-item-/)).not.toBeInTheDocument()
+ })
+
+ it('should use data.data when available', () => {
+ // Arrange
+ const rules = [
+ createParameterRule({ name: 'temperature' }),
+ createParameterRule({ name: 'top_p' }),
+ ]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps()
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('parameter-item-temperature')).toBeInTheDocument()
+ expect(screen.getByTestId('parameter-item-top_p')).toBeInTheDocument()
+ })
+ })
+
+ // ==================== Edge Cases ====================
+ describe('Edge Cases', () => {
+ it('should handle empty completionParams', () => {
+ // Arrange
+ const rules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps({ completionParams: {} })
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('parameter-item-temperature')).toBeInTheDocument()
+ })
+
+ it('should handle multiple parameter rules', () => {
+ // Arrange
+ const rules = [
+ createParameterRule({ name: 'temperature' }),
+ createParameterRule({ name: 'top_p' }),
+ createParameterRule({ name: 'max_tokens', type: 'int' }),
+ createParameterRule({ name: 'presence_penalty' }),
+ ]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps()
+
+ // Act
+ render()
+
+ // Assert
+ expect(screen.getByTestId('parameter-item-temperature')).toBeInTheDocument()
+ expect(screen.getByTestId('parameter-item-top_p')).toBeInTheDocument()
+ expect(screen.getByTestId('parameter-item-max_tokens')).toBeInTheDocument()
+ expect(screen.getByTestId('parameter-item-presence_penalty')).toBeInTheDocument()
+ })
+
+ it('should use unique keys for parameter items based on modelId and name', () => {
+ // Arrange
+ const rules = [
+ createParameterRule({ name: 'temperature' }),
+ createParameterRule({ name: 'top_p' }),
+ ]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps({ modelId: 'gpt-4' })
+
+ // Act
+ const { container } = render()
+
+ // Assert - verify both items are rendered (keys are internal but rendering proves uniqueness)
+ const items = container.querySelectorAll('[data-testid^="parameter-item-"]')
+ expect(items).toHaveLength(2)
+ })
+ })
+
+ // ==================== Re-render Behavior ====================
+ describe('Re-render Behavior', () => {
+ it('should update parameter items when rules change', () => {
+ // Arrange
+ const initialRules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: initialRules, isPending: false })
+ const props = createDefaultProps()
+
+ // Act
+ const { rerender } = render()
+ expect(screen.getByTestId('parameter-item-temperature')).toBeInTheDocument()
+ expect(screen.queryByTestId('parameter-item-top_p')).not.toBeInTheDocument()
+
+ // Update mock
+ const newRules = [
+ createParameterRule({ name: 'temperature' }),
+ createParameterRule({ name: 'top_p' }),
+ ]
+ setupModelParameterRulesMock({ data: newRules, isPending: false })
+ rerender()
+
+ // Assert
+ expect(screen.getByTestId('parameter-item-temperature')).toBeInTheDocument()
+ expect(screen.getByTestId('parameter-item-top_p')).toBeInTheDocument()
+ })
+
+ it('should show loading when transitioning from loaded to loading', () => {
+ // Arrange
+ const rules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps()
+
+ // Act
+ const { rerender } = render()
+ expect(screen.getByTestId('parameter-item-temperature')).toBeInTheDocument()
+
+ // Update to loading
+ setupModelParameterRulesMock({ isPending: true })
+ rerender()
+
+ // Assert - Loading component uses role="status" with aria-label
+ expect(screen.getByRole('status')).toBeInTheDocument()
+ })
+
+ it('should update when isAdvancedMode changes', () => {
+ // Arrange
+ const rules = [createParameterRule({ name: 'temperature' })]
+ setupModelParameterRulesMock({ data: rules, isPending: false })
+ const props = createDefaultProps({ isAdvancedMode: false })
+
+ // Act
+ const { rerender } = render()
+ expect(screen.queryByTestId('parameter-item-stop')).not.toBeInTheDocument()
+
+ rerender()
+
+ // Assert
+ expect(screen.getByTestId('parameter-item-stop')).toBeInTheDocument()
+ })
+ })
+
+ // ==================== Component Type ====================
+ describe('Component Type', () => {
+ it('should be a functional component', () => {
+ // Assert
+ expect(typeof LLMParamsPanel).toBe('function')
+ })
+
+ it('should accept all required props', () => {
+ // Arrange
+ setupModelParameterRulesMock({ data: [], isPending: false })
+ const props = createDefaultProps()
+
+ // Act & Assert
+ expect(() => render()).not.toThrow()
+ })
+ })
+})
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.spec.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.spec.tsx
new file mode 100644
index 0000000000..304bd563f7
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.spec.tsx
@@ -0,0 +1,623 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// Import component after mocks
+import TTSParamsPanel from './tts-params-panel'
+
+// ==================== Mock Setup ====================
+// All vi.mock() calls are hoisted, so inline all mock data
+
+// Mock languages data with inline definition
+vi.mock('@/i18n-config/language', () => ({
+ languages: [
+ { value: 'en-US', name: 'English (United States)', supported: true },
+ { value: 'zh-Hans', name: '简体中文', supported: true },
+ { value: 'ja-JP', name: '日本語', supported: true },
+ { value: 'unsupported-lang', name: 'Unsupported Language', supported: false },
+ ],
+}))
+
+// Mock PortalSelect component
+vi.mock('@/app/components/base/select', () => ({
+ PortalSelect: ({
+ value,
+ items,
+ onSelect,
+ triggerClassName,
+ popupClassName,
+ popupInnerClassName,
+ }: {
+ value: string
+ items: Array<{ value: string, name: string }>
+ onSelect: (item: { value: string }) => void
+ triggerClassName?: string
+ popupClassName?: string
+ popupInnerClassName?: string
+ }) => (
+
+
{value}
+
+ {items.map(item => (
+
+ ))}
+
+
+ {value && (
+ <>
+ {value.tool_label}
+
+
+ {onSelectMultiple && (
+
+ )}
+
+ )}
+
+ )
+ }
+ else {
+ return (
+
+
+ {onSelectMultiple && (
+
+ )}
+
+ )
+ }
+ },
+}))
+
+// ==================== Test Utilities ====================
+
+const createQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: { retry: false },
+ mutations: { retry: false },
+ },
+})
+
+const createToolValue = (overrides: Partial = {}): ToolValue => ({
+ provider_name: 'test-provider',
+ provider_show_name: 'Test Provider',
+ tool_name: 'test-tool',
+ tool_label: 'Test Tool',
+ tool_description: 'Test tool description',
+ settings: {},
+ parameters: {},
+ enabled: true,
+ extra: { description: 'Test description' },
+ ...overrides,
+})
+
+const createMCPTool = (overrides: Partial = {}): ToolWithProvider => ({
+ id: 'mcp-provider-1',
+ name: 'mcp-provider',
+ author: 'test-author',
+ type: 'mcp',
+ icon: 'test-icon.png',
+ label: { en_US: 'MCP Provider' } as any,
+ description: { en_US: 'MCP Provider description' } as any,
+ is_team_authorization: true,
+ allow_delete: false,
+ labels: [],
+ tools: [{
+ name: 'mcp-tool-1',
+ label: { en_US: 'MCP Tool 1' } as any,
+ description: { en_US: 'MCP Tool 1 description' } as any,
+ parameters: [],
+ output_schema: {},
+ }],
+ ...overrides,
+} as ToolWithProvider)
+
+const createNodeOutputVar = (overrides: Partial = {}): NodeOutPutVar => ({
+ nodeId: 'node-1',
+ title: 'Test Node',
+ vars: [],
+ ...overrides,
+})
+
+const createNode = (overrides: Partial = {}): Node => ({
+ id: 'node-1',
+ position: { x: 0, y: 0 },
+ data: { title: 'Test Node' },
+ ...overrides,
+})
+
+type RenderOptions = {
+ disabled?: boolean
+ value?: ToolValue[]
+ label?: string
+ required?: boolean
+ tooltip?: React.ReactNode
+ supportCollapse?: boolean
+ scope?: string
+ onChange?: (value: ToolValue[]) => void
+ nodeOutputVars?: NodeOutPutVar[]
+ availableNodes?: Node[]
+ nodeId?: string
+ canChooseMCPTool?: boolean
+}
+
+const renderComponent = (options: RenderOptions = {}) => {
+ const defaultProps = {
+ disabled: false,
+ value: [],
+ label: 'Tools',
+ required: false,
+ tooltip: undefined,
+ supportCollapse: false,
+ scope: undefined,
+ onChange: vi.fn(),
+ nodeOutputVars: [createNodeOutputVar()],
+ availableNodes: [createNode()],
+ nodeId: 'test-node-id',
+ canChooseMCPTool: false,
+ }
+
+ const props = { ...defaultProps, ...options }
+ const queryClient = createQueryClient()
+
+ return {
+ ...render(
+
+
+ ,
+ ),
+ props,
+ }
+}
+
+// ==================== Tests ====================
+
+describe('MultipleToolSelector', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockMCPToolsData.mockReturnValue(undefined)
+ editToolIndex = 0
+ })
+
+ // ==================== Rendering Tests ====================
+ describe('Rendering', () => {
+ it('should render with label', () => {
+ // Arrange & Act
+ renderComponent({ label: 'My Tools' })
+
+ // Assert
+ expect(screen.getByText('My Tools')).toBeInTheDocument()
+ })
+
+ it('should render required indicator when required is true', () => {
+ // Arrange & Act
+ renderComponent({ required: true })
+
+ // Assert
+ expect(screen.getByText('*')).toBeInTheDocument()
+ })
+
+ it('should not render required indicator when required is false', () => {
+ // Arrange & Act
+ renderComponent({ required: false })
+
+ // Assert
+ expect(screen.queryByText('*')).not.toBeInTheDocument()
+ })
+
+ it('should render empty state when no tools are selected', () => {
+ // Arrange & Act
+ renderComponent({ value: [] })
+
+ // Assert
+ expect(screen.getByText('plugin.detailPanel.toolSelector.empty')).toBeInTheDocument()
+ })
+
+ it('should render selected tools when value is provided', () => {
+ // Arrange
+ const tools = [
+ createToolValue({ tool_name: 'tool-1', tool_label: 'Tool 1' }),
+ createToolValue({ tool_name: 'tool-2', tool_label: 'Tool 2' }),
+ ]
+
+ // Act
+ renderComponent({ value: tools })
+
+ // Assert
+ const editSelectors = screen.getAllByTestId('tool-selector-edit')
+ expect(editSelectors).toHaveLength(2)
+ })
+
+ it('should render add button when not disabled', () => {
+ // Arrange & Act
+ const { container } = renderComponent({ disabled: false })
+
+ // Assert
+ const addButton = container.querySelector('[class*="mx-1"]')
+ expect(addButton).toBeInTheDocument()
+ })
+
+ it('should not render add button when disabled', () => {
+ // Arrange & Act
+ renderComponent({ disabled: true })
+
+ // Assert
+ const addSelectors = screen.queryAllByTestId('tool-selector-add')
+ // The add button should still be present but outside the disabled check
+ expect(addSelectors).toHaveLength(1)
+ })
+
+ it('should render tooltip when provided', () => {
+ // Arrange & Act
+ const { container } = renderComponent({ tooltip: 'This is a tooltip' })
+
+ // Assert - Tooltip icon should be present
+ const tooltipIcon = container.querySelector('svg')
+ expect(tooltipIcon).toBeInTheDocument()
+ })
+
+ it('should render enabled count when tools are selected', () => {
+ // Arrange
+ const tools = [
+ createToolValue({ tool_name: 'tool-1', enabled: true }),
+ createToolValue({ tool_name: 'tool-2', enabled: false }),
+ ]
+
+ // Act
+ renderComponent({ value: tools })
+
+ // Assert
+ expect(screen.getByText('1/2')).toBeInTheDocument()
+ expect(screen.getByText('appDebug.agent.tools.enabled')).toBeInTheDocument()
+ })
+ })
+
+ // ==================== Collapse Functionality Tests ====================
+ describe('Collapse Functionality', () => {
+ it('should render collapse arrow when supportCollapse is true', () => {
+ // Arrange & Act
+ const { container } = renderComponent({ supportCollapse: true })
+
+ // Assert
+ const collapseArrow = container.querySelector('svg[class*="cursor-pointer"]')
+ expect(collapseArrow).toBeInTheDocument()
+ })
+
+ it('should not render collapse arrow when supportCollapse is false', () => {
+ // Arrange & Act
+ const { container } = renderComponent({ supportCollapse: false })
+
+ // Assert
+ const collapseArrows = container.querySelectorAll('svg[class*="rotate"]')
+ expect(collapseArrows).toHaveLength(0)
+ })
+
+ it('should toggle collapse state when clicking header with supportCollapse enabled', () => {
+ // Arrange
+ const tools = [createToolValue()]
+ const { container } = renderComponent({ supportCollapse: true, value: tools })
+ const headerArea = container.querySelector('[class*="cursor-pointer"]')
+
+ // Act - Initially visible
+ expect(screen.getByTestId('tool-selector-edit')).toBeInTheDocument()
+
+ // Click to collapse
+ fireEvent.click(headerArea!)
+
+ // Assert - Should be collapsed
+ expect(screen.queryByTestId('tool-selector-edit')).not.toBeInTheDocument()
+ })
+
+ it('should not toggle collapse when supportCollapse is false', () => {
+ // Arrange
+ const tools = [createToolValue()]
+ renderComponent({ supportCollapse: false, value: tools })
+
+ // Act
+ fireEvent.click(screen.getByText('Tools'))
+
+ // Assert - Should still be visible
+ expect(screen.getByTestId('tool-selector-edit')).toBeInTheDocument()
+ })
+
+ it('should expand when add button is clicked while collapsed', async () => {
+ // Arrange
+ const tools = [createToolValue()]
+ const { container } = renderComponent({ supportCollapse: true, value: tools })
+ const headerArea = container.querySelector('[class*="cursor-pointer"]')
+
+ // Collapse first
+ fireEvent.click(headerArea!)
+ expect(screen.queryByTestId('tool-selector-edit')).not.toBeInTheDocument()
+
+ // Act - Click add button
+ const addButton = container.querySelector('button')
+ fireEvent.click(addButton!)
+
+ // Assert - Should be expanded
+ await waitFor(() => {
+ expect(screen.getByTestId('tool-selector-edit')).toBeInTheDocument()
+ })
+ })
+ })
+
+ // ==================== State Management Tests ====================
+ describe('State Management', () => {
+ it('should track enabled count correctly', () => {
+ // Arrange
+ const tools = [
+ createToolValue({ tool_name: 'tool-1', enabled: true }),
+ createToolValue({ tool_name: 'tool-2', enabled: true }),
+ createToolValue({ tool_name: 'tool-3', enabled: false }),
+ ]
+
+ // Act
+ renderComponent({ value: tools })
+
+ // Assert
+ expect(screen.getByText('2/3')).toBeInTheDocument()
+ })
+
+ it('should track enabled count with MCP tools when canChooseMCPTool is true', () => {
+ // Arrange
+ const mcpTools = [createMCPTool({ id: 'mcp-provider' })]
+ mockMCPToolsData.mockReturnValue(mcpTools)
+
+ const tools = [
+ createToolValue({ tool_name: 'tool-1', provider_name: 'regular-provider', enabled: true }),
+ createToolValue({ tool_name: 'mcp-tool', provider_name: 'mcp-provider', enabled: true }),
+ ]
+
+ // Act
+ renderComponent({ value: tools, canChooseMCPTool: true })
+
+ // Assert
+ expect(screen.getByText('2/2')).toBeInTheDocument()
+ })
+
+ it('should not count MCP tools when canChooseMCPTool is false', () => {
+ // Arrange
+ const mcpTools = [createMCPTool({ id: 'mcp-provider' })]
+ mockMCPToolsData.mockReturnValue(mcpTools)
+
+ const tools = [
+ createToolValue({ tool_name: 'tool-1', provider_name: 'regular-provider', enabled: true }),
+ createToolValue({ tool_name: 'mcp-tool', provider_name: 'mcp-provider', enabled: true }),
+ ]
+
+ // Act
+ renderComponent({ value: tools, canChooseMCPTool: false })
+
+ // Assert
+ expect(screen.getByText('1/2')).toBeInTheDocument()
+ })
+
+ it('should manage open state for add tool panel', () => {
+ // Arrange
+ const { container } = renderComponent()
+
+ // Initially closed
+ const addSelector = screen.getByTestId('tool-selector-add')
+ expect(addSelector).toHaveAttribute('data-controlled-state', 'false')
+
+ // Act - Click add button (ActionButton)
+ const actionButton = container.querySelector('[class*="mx-1"]')
+ fireEvent.click(actionButton!)
+
+ // Assert - Open state should change to true
+ expect(screen.getByTestId('tool-selector-add')).toHaveAttribute('data-controlled-state', 'true')
+ })
+ })
+
+ // ==================== User Interactions Tests ====================
+ describe('User Interactions', () => {
+ it('should call onChange when adding a new tool via add button', () => {
+ // Arrange
+ const onChange = vi.fn()
+ renderComponent({ onChange })
+
+ // Act - Click add tool button in add selector
+ fireEvent.click(screen.getByTestId('add-tool-btn'))
+
+ // Assert
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ provider_name: 'new-provider', tool_name: 'new-tool' }),
+ ])
+ })
+
+ it('should call onChange when adding multiple tools', () => {
+ // Arrange
+ const onChange = vi.fn()
+ renderComponent({ onChange })
+
+ // Act - Click add multiple tools button
+ fireEvent.click(screen.getByTestId('add-multiple-tools-btn'))
+
+ // Assert
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ provider_name: 'batch-p', tool_name: 'batch-t1' }),
+ expect.objectContaining({ provider_name: 'batch-p', tool_name: 'batch-t2' }),
+ ])
+ })
+
+ it('should deduplicate when adding duplicate tool', () => {
+ // Arrange
+ const existingTool = createToolValue({ tool_name: 'new-tool', provider_name: 'new-provider' })
+ const onChange = vi.fn()
+ renderComponent({ value: [existingTool], onChange })
+
+ // Act - Try to add the same tool
+ fireEvent.click(screen.getByTestId('add-tool-btn'))
+
+ // Assert - Should still have only 1 tool (deduplicated)
+ expect(onChange).toHaveBeenCalledWith([existingTool])
+ })
+
+ it('should call onChange when deleting a tool', () => {
+ // Arrange
+ const tools = [
+ createToolValue({ tool_name: 'tool-0', provider_name: 'p0' }),
+ createToolValue({ tool_name: 'tool-1', provider_name: 'p1' }),
+ ]
+ const onChange = vi.fn()
+ renderComponent({ value: tools, onChange })
+
+ // Act - Delete first tool (index 0)
+ fireEvent.click(screen.getByTestId('delete-btn-0'))
+
+ // Assert - Should have only second tool
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ tool_name: 'tool-1', provider_name: 'p1' }),
+ ])
+ })
+
+ it('should call onChange when configuring a tool', () => {
+ // Arrange
+ const tools = [createToolValue({ tool_name: 'tool-1', enabled: true })]
+ const onChange = vi.fn()
+ renderComponent({ value: tools, onChange })
+
+ // Act - Click configure button to toggle enabled
+ fireEvent.click(screen.getByTestId('configure-btn-0'))
+
+ // Assert - Should update the tool at index 0
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ tool_name: 'tool-1', enabled: false }),
+ ])
+ })
+
+ it('should call onChange with correct index when configuring second tool', () => {
+ // Arrange
+ const tools = [
+ createToolValue({ tool_name: 'tool-0', enabled: true }),
+ createToolValue({ tool_name: 'tool-1', enabled: true }),
+ ]
+ const onChange = vi.fn()
+ renderComponent({ value: tools, onChange })
+
+ // Act - Configure second tool (index 1)
+ fireEvent.click(screen.getByTestId('configure-btn-1'))
+
+ // Assert - Should update only the second tool
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ tool_name: 'tool-0', enabled: true }),
+ expect.objectContaining({ tool_name: 'tool-1', enabled: false }),
+ ])
+ })
+
+ it('should call onChange with correct array when deleting middle tool', () => {
+ // Arrange
+ const tools = [
+ createToolValue({ tool_name: 'tool-0', provider_name: 'p0' }),
+ createToolValue({ tool_name: 'tool-1', provider_name: 'p1' }),
+ createToolValue({ tool_name: 'tool-2', provider_name: 'p2' }),
+ ]
+ const onChange = vi.fn()
+ renderComponent({ value: tools, onChange })
+
+ // Act - Delete middle tool (index 1)
+ fireEvent.click(screen.getByTestId('delete-btn-1'))
+
+ // Assert - Should have first and third tools
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ tool_name: 'tool-0' }),
+ expect.objectContaining({ tool_name: 'tool-2' }),
+ ])
+ })
+
+ it('should handle add multiple from edit selector', () => {
+ // Arrange
+ const tools = [createToolValue({ tool_name: 'existing' })]
+ const onChange = vi.fn()
+ renderComponent({ value: tools, onChange })
+
+ // Act - Click add multiple from edit selector
+ fireEvent.click(screen.getByTestId('add-multiple-btn-0'))
+
+ // Assert - Should add batch tools with deduplication
+ expect(onChange).toHaveBeenCalled()
+ })
+ })
+
+ // ==================== Event Handlers Tests ====================
+ describe('Event Handlers', () => {
+ it('should handle add button click', () => {
+ // Arrange
+ const { container } = renderComponent()
+ const addButton = container.querySelector('button')
+
+ // Act
+ fireEvent.click(addButton!)
+
+ // Assert - Add tool panel should open
+ expect(screen.getByTestId('tool-selector-add')).toBeInTheDocument()
+ })
+
+ it('should handle collapse click with supportCollapse', () => {
+ // Arrange
+ const tools = [createToolValue()]
+ const { container } = renderComponent({ supportCollapse: true, value: tools })
+ const labelArea = container.querySelector('[class*="cursor-pointer"]')
+
+ // Act
+ fireEvent.click(labelArea!)
+
+ // Assert - Tools should be hidden
+ expect(screen.queryByTestId('tool-selector-edit')).not.toBeInTheDocument()
+
+ // Click again to expand
+ fireEvent.click(labelArea!)
+
+ // Assert - Tools should be visible again
+ expect(screen.getByTestId('tool-selector-edit')).toBeInTheDocument()
+ })
+ })
+
+ // ==================== Edge Cases Tests ====================
+ describe('Edge Cases', () => {
+ it('should handle empty value array', () => {
+ // Arrange & Act
+ renderComponent({ value: [] })
+
+ // Assert
+ expect(screen.getByText('plugin.detailPanel.toolSelector.empty')).toBeInTheDocument()
+ expect(screen.queryAllByTestId('tool-selector-edit')).toHaveLength(0)
+ })
+
+ it('should handle undefined value', () => {
+ // Arrange & Act - value defaults to [] in component
+ renderComponent({ value: undefined as any })
+
+ // Assert
+ expect(screen.getByText('plugin.detailPanel.toolSelector.empty')).toBeInTheDocument()
+ })
+
+ it('should handle null mcpTools data', () => {
+ // Arrange
+ mockMCPToolsData.mockReturnValue(undefined)
+ const tools = [createToolValue({ enabled: true })]
+
+ // Act
+ renderComponent({ value: tools })
+
+ // Assert - Should still render
+ expect(screen.getByText('1/1')).toBeInTheDocument()
+ })
+
+ it('should handle tools with missing enabled property', () => {
+ // Arrange
+ const tools = [
+ { ...createToolValue(), enabled: undefined } as ToolValue,
+ ]
+
+ // Act
+ renderComponent({ value: tools })
+
+ // Assert - Should count as not enabled (falsy)
+ expect(screen.getByText('0/1')).toBeInTheDocument()
+ })
+
+ it('should handle empty label', () => {
+ // Arrange & Act
+ renderComponent({ label: '' })
+
+ // Assert - Should not crash
+ expect(screen.getByTestId('tool-selector-add')).toBeInTheDocument()
+ })
+
+ it('should handle nodeOutputVars as empty array', () => {
+ // Arrange & Act
+ renderComponent({ nodeOutputVars: [] })
+
+ // Assert
+ expect(screen.getByTestId('tool-selector-add')).toBeInTheDocument()
+ })
+
+ it('should handle availableNodes as empty array', () => {
+ // Arrange & Act
+ renderComponent({ availableNodes: [] })
+
+ // Assert
+ expect(screen.getByTestId('tool-selector-add')).toBeInTheDocument()
+ })
+
+ it('should handle undefined nodeId', () => {
+ // Arrange & Act
+ renderComponent({ nodeId: undefined })
+
+ // Assert
+ expect(screen.getByTestId('tool-selector-add')).toBeInTheDocument()
+ })
+ })
+
+ // ==================== Props Variations Tests ====================
+ describe('Props Variations', () => {
+ it('should pass disabled prop to child selectors', () => {
+ // Arrange & Act
+ const { container } = renderComponent({ disabled: true })
+
+ // Assert - ActionButton (add button with mx-1 class) should not be rendered
+ const actionButton = container.querySelector('[class*="mx-1"]')
+ expect(actionButton).not.toBeInTheDocument()
+ })
+
+ it('should pass scope prop to ToolSelector', () => {
+ // Arrange & Act
+ renderComponent({ scope: 'test-scope' })
+
+ // Assert
+ expect(screen.getByTestId('tool-selector-add')).toBeInTheDocument()
+ })
+
+ it('should pass canChooseMCPTool prop correctly', () => {
+ // Arrange & Act
+ renderComponent({ canChooseMCPTool: true })
+
+ // Assert
+ expect(screen.getByTestId('tool-selector-add')).toBeInTheDocument()
+ })
+
+ it('should render with supportEnableSwitch for edit selectors', () => {
+ // Arrange
+ const tools = [createToolValue()]
+
+ // Act
+ renderComponent({ value: tools })
+
+ // Assert
+ const editSelector = screen.getByTestId('tool-selector-edit')
+ expect(editSelector).toHaveAttribute('data-support-enable-switch', 'true')
+ })
+
+ it('should handle multiple tools correctly', () => {
+ // Arrange
+ const tools = Array.from({ length: 5 }, (_, i) =>
+ createToolValue({ tool_name: `tool-${i}`, tool_label: `Tool ${i}` }))
+
+ // Act
+ renderComponent({ value: tools })
+
+ // Assert
+ const editSelectors = screen.getAllByTestId('tool-selector-edit')
+ expect(editSelectors).toHaveLength(5)
+ })
+ })
+
+ // ==================== MCP Tools Integration Tests ====================
+ describe('MCP Tools Integration', () => {
+ it('should correctly identify MCP tools', () => {
+ // Arrange
+ const mcpTools = [
+ createMCPTool({ id: 'mcp-provider-1' }),
+ createMCPTool({ id: 'mcp-provider-2' }),
+ ]
+ mockMCPToolsData.mockReturnValue(mcpTools)
+
+ const tools = [
+ createToolValue({ provider_name: 'mcp-provider-1', enabled: true }),
+ createToolValue({ provider_name: 'regular-provider', enabled: true }),
+ ]
+
+ // Act
+ renderComponent({ value: tools, canChooseMCPTool: true })
+
+ // Assert
+ expect(screen.getByText('2/2')).toBeInTheDocument()
+ })
+
+ it('should exclude MCP tools from enabled count when canChooseMCPTool is false', () => {
+ // Arrange
+ const mcpTools = [createMCPTool({ id: 'mcp-provider' })]
+ mockMCPToolsData.mockReturnValue(mcpTools)
+
+ const tools = [
+ createToolValue({ provider_name: 'mcp-provider', enabled: true }),
+ createToolValue({ provider_name: 'regular', enabled: true }),
+ ]
+
+ // Act
+ renderComponent({ value: tools, canChooseMCPTool: false })
+
+ // Assert - Only regular tool should be counted
+ expect(screen.getByText('1/2')).toBeInTheDocument()
+ })
+ })
+
+ // ==================== Deduplication Logic Tests ====================
+ describe('Deduplication Logic', () => {
+ it('should deduplicate by provider_name and tool_name combination', () => {
+ // Arrange
+ const onChange = vi.fn()
+ const existingTools = [
+ createToolValue({ provider_name: 'new-provider', tool_name: 'new-tool' }),
+ ]
+ renderComponent({ value: existingTools, onChange })
+
+ // Act - Try to add same provider_name + tool_name via add button
+ fireEvent.click(screen.getByTestId('add-tool-btn'))
+
+ // Assert - Should not add duplicate, only existing tool remains
+ expect(onChange).toHaveBeenCalledWith(existingTools)
+ })
+
+ it('should allow same tool_name with different provider_name', () => {
+ // Arrange
+ const onChange = vi.fn()
+ const existingTools = [
+ createToolValue({ provider_name: 'other-provider', tool_name: 'new-tool' }),
+ ]
+ renderComponent({ value: existingTools, onChange })
+
+ // Act - Add tool with different provider
+ fireEvent.click(screen.getByTestId('add-tool-btn'))
+
+ // Assert - Should add as it's different provider
+ expect(onChange).toHaveBeenCalledWith([
+ existingTools[0],
+ expect.objectContaining({ provider_name: 'new-provider', tool_name: 'new-tool' }),
+ ])
+ })
+
+ it('should deduplicate multiple tools in batch add', () => {
+ // Arrange
+ const onChange = vi.fn()
+ const existingTools = [
+ createToolValue({ provider_name: 'batch-p', tool_name: 'batch-t1' }),
+ ]
+ renderComponent({ value: existingTools, onChange })
+
+ // Act - Add multiple tools (batch-t1 is duplicate)
+ fireEvent.click(screen.getByTestId('add-multiple-tools-btn'))
+
+ // Assert - Should have 2 unique tools (batch-t1 deduplicated)
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ provider_name: 'batch-p', tool_name: 'batch-t1' }),
+ expect.objectContaining({ provider_name: 'batch-p', tool_name: 'batch-t2' }),
+ ])
+ })
+ })
+
+ // ==================== Delete Functionality Tests ====================
+ describe('Delete Functionality', () => {
+ it('should remove tool at specific index when delete is clicked', () => {
+ // Arrange
+ const tools = [
+ createToolValue({ tool_name: 'tool-0', provider_name: 'p0' }),
+ createToolValue({ tool_name: 'tool-1', provider_name: 'p1' }),
+ createToolValue({ tool_name: 'tool-2', provider_name: 'p2' }),
+ ]
+ const onChange = vi.fn()
+ renderComponent({ value: tools, onChange })
+
+ // Act - Delete first tool
+ fireEvent.click(screen.getByTestId('delete-btn-0'))
+
+ // Assert
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ tool_name: 'tool-1' }),
+ expect.objectContaining({ tool_name: 'tool-2' }),
+ ])
+ })
+
+ it('should remove last tool when delete is clicked', () => {
+ // Arrange
+ const tools = [
+ createToolValue({ tool_name: 'tool-0', provider_name: 'p0' }),
+ createToolValue({ tool_name: 'tool-1', provider_name: 'p1' }),
+ ]
+ const onChange = vi.fn()
+ renderComponent({ value: tools, onChange })
+
+ // Act - Delete last tool (index 1)
+ fireEvent.click(screen.getByTestId('delete-btn-1'))
+
+ // Assert
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ tool_name: 'tool-0' }),
+ ])
+ })
+
+ it('should result in empty array when deleting last remaining tool', () => {
+ // Arrange
+ const tools = [createToolValue({ tool_name: 'only-tool' })]
+ const onChange = vi.fn()
+ renderComponent({ value: tools, onChange })
+
+ // Act - Delete the only tool
+ fireEvent.click(screen.getByTestId('delete-btn-0'))
+
+ // Assert
+ expect(onChange).toHaveBeenCalledWith([])
+ })
+ })
+
+ // ==================== Configure Functionality Tests ====================
+ describe('Configure Functionality', () => {
+ it('should update tool at specific index when configured', () => {
+ // Arrange
+ const tools = [
+ createToolValue({ tool_name: 'tool-1', enabled: true }),
+ ]
+ const onChange = vi.fn()
+ renderComponent({ value: tools, onChange })
+
+ // Act - Configure tool (toggles enabled)
+ fireEvent.click(screen.getByTestId('configure-btn-0'))
+
+ // Assert
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ tool_name: 'tool-1', enabled: false }),
+ ])
+ })
+
+ it('should preserve other tools when configuring one tool', () => {
+ // Arrange
+ const tools = [
+ createToolValue({ tool_name: 'tool-0', enabled: true }),
+ createToolValue({ tool_name: 'tool-1', enabled: false }),
+ createToolValue({ tool_name: 'tool-2', enabled: true }),
+ ]
+ const onChange = vi.fn()
+ renderComponent({ value: tools, onChange })
+
+ // Act - Configure middle tool (index 1)
+ fireEvent.click(screen.getByTestId('configure-btn-1'))
+
+ // Assert - All tools preserved, only middle one changed
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ tool_name: 'tool-0', enabled: true }),
+ expect.objectContaining({ tool_name: 'tool-1', enabled: true }), // toggled
+ expect.objectContaining({ tool_name: 'tool-2', enabled: true }),
+ ])
+ })
+
+ it('should update first tool correctly', () => {
+ // Arrange
+ const tools = [
+ createToolValue({ tool_name: 'first', enabled: false }),
+ createToolValue({ tool_name: 'second', enabled: true }),
+ ]
+ const onChange = vi.fn()
+ renderComponent({ value: tools, onChange })
+
+ // Act - Configure first tool
+ fireEvent.click(screen.getByTestId('configure-btn-0'))
+
+ // Assert
+ expect(onChange).toHaveBeenCalledWith([
+ expect.objectContaining({ tool_name: 'first', enabled: true }), // toggled
+ expect.objectContaining({ tool_name: 'second', enabled: true }),
+ ])
+ })
+ })
+
+ // ==================== Panel State Tests ====================
+ describe('Panel State Management', () => {
+ it('should initialize with panel show state true on add', () => {
+ // Arrange
+ const { container } = renderComponent()
+
+ // Act - Click add button
+ const addButton = container.querySelector('button')
+ fireEvent.click(addButton!)
+
+ // Assert
+ const addSelector = screen.getByTestId('tool-selector-add')
+ expect(addSelector).toHaveAttribute('data-panel-show-state', 'true')
+ })
+ })
+
+ // ==================== Accessibility Tests ====================
+ describe('Accessibility', () => {
+ it('should have clickable add button', () => {
+ // Arrange
+ const { container } = renderComponent()
+
+ // Assert
+ const addButton = container.querySelector('button')
+ expect(addButton).toBeInTheDocument()
+ })
+
+ it('should show divider when tools are selected', () => {
+ // Arrange
+ const tools = [createToolValue()]
+
+ // Act
+ const { container } = renderComponent({ value: tools })
+
+ // Assert
+ const divider = container.querySelector('[class*="h-3"]')
+ expect(divider).toBeInTheDocument()
+ })
+ })
+
+ // ==================== Tooltip Tests ====================
+ describe('Tooltip Rendering', () => {
+ it('should render question icon when tooltip is provided', () => {
+ // Arrange & Act
+ const { container } = renderComponent({ tooltip: 'Help text' })
+
+ // Assert
+ const questionIcon = container.querySelector('svg')
+ expect(questionIcon).toBeInTheDocument()
+ })
+
+ it('should not render question icon when tooltip is not provided', () => {
+ // Arrange & Act
+ const { container } = renderComponent({ tooltip: undefined })
+
+ // Assert - Should only have add icon, not question icon in label area
+ const labelDiv = container.querySelector('.system-sm-semibold-uppercase')
+ const icons = labelDiv?.querySelectorAll('svg') || []
+ // Question icon should not be in the label area
+ expect(icons.length).toBeLessThanOrEqual(1)
+ })
+ })
+})
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.spec.tsx
new file mode 100644
index 0000000000..8bf154e26e
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.spec.tsx
@@ -0,0 +1,1884 @@
+import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import * as React from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+// Import after mocks
+import { SupportedCreationMethods } from '@/app/components/plugins/types'
+import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
+import { CommonCreateModal } from './common-modal'
+
+// ============================================================================
+// Type Definitions
+// ============================================================================
+
+type PluginDetail = {
+ plugin_id: string
+ provider: string
+ name: string
+ declaration?: {
+ trigger?: {
+ subscription_schema?: Array<{ name: string, type: string, required?: boolean, description?: string }>
+ subscription_constructor?: {
+ credentials_schema?: Array<{ name: string, type: string, required?: boolean, help?: string }>
+ parameters?: Array<{ name: string, type: string, required?: boolean, description?: string }>
+ }
+ }
+ }
+}
+
+type TriggerLogEntity = {
+ id: string
+ message: string
+ timestamp: string
+ level: 'info' | 'warn' | 'error'
+}
+
+// ============================================================================
+// Mock Factory Functions
+// ============================================================================
+
+function createMockPluginDetail(overrides: Partial = {}): PluginDetail {
+ return {
+ plugin_id: 'test-plugin-id',
+ provider: 'test-provider',
+ name: 'Test Plugin',
+ declaration: {
+ trigger: {
+ subscription_schema: [],
+ subscription_constructor: {
+ credentials_schema: [],
+ parameters: [],
+ },
+ },
+ },
+ ...overrides,
+ }
+}
+
+function createMockSubscriptionBuilder(overrides: Partial = {}): TriggerSubscriptionBuilder {
+ return {
+ id: 'builder-123',
+ name: 'Test Builder',
+ provider: 'test-provider',
+ credential_type: TriggerCredentialTypeEnum.ApiKey,
+ credentials: {},
+ endpoint: 'https://example.com/callback',
+ parameters: {},
+ properties: {},
+ workflows_in_use: 0,
+ ...overrides,
+ }
+}
+
+function createMockLogData(logs: TriggerLogEntity[] = []): { logs: TriggerLogEntity[] } {
+ return { logs }
+}
+
+// ============================================================================
+// Mock Setup
+// ============================================================================
+
+const mockTranslate = vi.fn((key: string) => key)
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: mockTranslate,
+ }),
+}))
+
+// Mock plugin store
+const mockPluginDetail = createMockPluginDetail()
+const mockUsePluginStore = vi.fn(() => mockPluginDetail)
+vi.mock('../../store', () => ({
+ usePluginStore: () => mockUsePluginStore(),
+}))
+
+// Mock subscription list hook
+const mockRefetch = vi.fn()
+vi.mock('../use-subscription-list', () => ({
+ useSubscriptionList: () => ({
+ refetch: mockRefetch,
+ }),
+}))
+
+// Mock service hooks
+const mockVerifyCredentials = vi.fn()
+const mockCreateBuilder = vi.fn()
+const mockBuildSubscription = vi.fn()
+const mockUpdateBuilder = vi.fn()
+
+// Configurable pending states
+let mockIsVerifyingCredentials = false
+let mockIsBuilding = false
+const setMockPendingStates = (verifying: boolean, building: boolean) => {
+ mockIsVerifyingCredentials = verifying
+ mockIsBuilding = building
+}
+
+vi.mock('@/service/use-triggers', () => ({
+ useVerifyAndUpdateTriggerSubscriptionBuilder: () => ({
+ mutate: mockVerifyCredentials,
+ get isPending() { return mockIsVerifyingCredentials },
+ }),
+ useCreateTriggerSubscriptionBuilder: () => ({
+ mutateAsync: mockCreateBuilder,
+ isPending: false,
+ }),
+ useBuildTriggerSubscription: () => ({
+ mutate: mockBuildSubscription,
+ get isPending() { return mockIsBuilding },
+ }),
+ useUpdateTriggerSubscriptionBuilder: () => ({
+ mutate: mockUpdateBuilder,
+ isPending: false,
+ }),
+ useTriggerSubscriptionBuilderLogs: () => ({
+ data: createMockLogData(),
+ }),
+}))
+
+// Mock error parser
+const mockParsePluginErrorMessage = vi.fn().mockResolvedValue(null)
+vi.mock('@/utils/error-parser', () => ({
+ parsePluginErrorMessage: (...args: unknown[]) => mockParsePluginErrorMessage(...args),
+}))
+
+// Mock URL validation
+vi.mock('@/utils/urlValidation', () => ({
+ isPrivateOrLocalAddress: vi.fn().mockReturnValue(false),
+}))
+
+// Mock toast
+const mockToastNotify = vi.fn()
+vi.mock('@/app/components/base/toast', () => ({
+ default: {
+ notify: (params: unknown) => mockToastNotify(params),
+ },
+}))
+
+// Mock Modal component
+vi.mock('@/app/components/base/modal/modal', () => ({
+ default: ({
+ children,
+ onClose,
+ onConfirm,
+ title,
+ confirmButtonText,
+ bottomSlot,
+ size,
+ disabled,
+ }: {
+ children: React.ReactNode
+ onClose: () => void
+ onConfirm: () => void
+ title: string
+ confirmButtonText: string
+ bottomSlot?: React.ReactNode
+ size?: string
+ disabled?: boolean
+ }) => (
+
+
{title}
+
{children}
+
{bottomSlot}
+
+
+
+ {formSchemas.map((schema: { name: string }) => (
+
+ ))}
+
+ )
+ }
+
+ return {
+ BaseForm: React.forwardRef(MockBaseFormInner),
+ }
+})
+
+// Mock EncryptedBottom component
+vi.mock('@/app/components/base/encrypted-bottom', () => ({
+ EncryptedBottom: () => Encrypted
,
+}))
+
+// Mock LogViewer component
+vi.mock('../log-viewer', () => ({
+ default: ({ logs }: { logs: TriggerLogEntity[] }) => (
+
+ {logs.map(log => (
+
{log.message}
+ ))}
+
+ {children}
+
+ )
+ },
+ PortalToFollowElemTrigger: ({ children, onClick, className }: { children: React.ReactNode, onClick?: () => void, className?: string }) => (
+
+ {children}
+
+ ),
+ PortalToFollowElemContent: ({ children, className }: { children: React.ReactNode, className?: string }) => {
+ if (!mockPortalOpenState)
+ return null
+ return (
+
+ {children}
+
+ )
+ },
+}))
+
+// Mock Toast
+vi.mock('@/app/components/base/toast', () => ({
+ default: {
+ notify: vi.fn(),
+ },
+}))
+
+// Mock zustand store
+let mockStoreDetail: SimpleDetail | undefined
+vi.mock('../../store', () => ({
+ usePluginStore: (selector: (state: { detail: SimpleDetail | undefined }) => SimpleDetail | undefined) =>
+ selector({ detail: mockStoreDetail }),
+}))
+
+// Mock subscription list hook
+const mockSubscriptions: TriggerSubscription[] = []
+const mockRefetch = vi.fn()
+vi.mock('../use-subscription-list', () => ({
+ useSubscriptionList: () => ({
+ subscriptions: mockSubscriptions,
+ refetch: mockRefetch,
+ }),
+}))
+
+// Mock trigger service hooks
+let mockProviderInfo: { data: TriggerProviderApiEntity | undefined } = { data: undefined }
+let mockOAuthConfig: { data: TriggerOAuthConfig | undefined, refetch: () => void } = { data: undefined, refetch: vi.fn() }
+const mockInitiateOAuth = vi.fn()
+
+vi.mock('@/service/use-triggers', () => ({
+ useTriggerProviderInfo: () => mockProviderInfo,
+ useTriggerOAuthConfig: () => mockOAuthConfig,
+ useInitiateTriggerOAuth: () => ({
+ mutate: mockInitiateOAuth,
+ }),
+}))
+
+// Mock OAuth popup
+vi.mock('@/hooks/use-oauth', () => ({
+ openOAuthPopup: vi.fn((url: string, callback: (data?: unknown) => void) => {
+ callback({ success: true, subscriptionId: 'test-subscription' })
+ }),
+}))
+
+// Mock child modals
+vi.mock('./common-modal', () => ({
+ CommonCreateModal: ({ createType, onClose, builder }: {
+ createType: SupportedCreationMethods
+ onClose: () => void
+ builder?: TriggerSubscriptionBuilder
+ }) => (
+
+
+
+ ),
+}))
+
+vi.mock('./oauth-client', () => ({
+ OAuthClientSettingsModal: ({ oauthConfig, onClose, showOAuthCreateModal }: {
+ oauthConfig?: TriggerOAuthConfig
+ onClose: () => void
+ showOAuthCreateModal: (builder: TriggerSubscriptionBuilder) => void
+ }) => (
+
+
+
+
+ ),
+}))
+
+// Mock CustomSelect
+vi.mock('@/app/components/base/select/custom', () => ({
+ default: ({ options, value, onChange, CustomTrigger, CustomOption, containerProps }: {
+ options: Array<{ value: string, label: string, show: boolean, extra?: React.ReactNode, tag?: React.ReactNode }>
+ value: string
+ onChange: (value: string) => void
+ CustomTrigger: () => React.ReactNode
+ CustomOption: (option: { label: string, tag?: React.ReactNode, extra?: React.ReactNode }) => React.ReactNode
+ containerProps?: { open?: boolean }
+ }) => (
+
+
{CustomTrigger()}
+
+ {options?.map(option => (
+
onChange(option.value)}
+ >
+ {CustomOption(option)}
+
+ ))}
+
+
+
{title}
+
{children}
+
+ {footerSlot}
+ {extraButtonText && (
+
+ )}
+ {cancelButtonText && (
+
+ )}
+
+
+
+
+ {formSchemas.map(schema => (
+
+ ))}
+
+ )
+ }),
+}))
+
+// Mock OptionCard component
+vi.mock('@/app/components/workflow/nodes/_base/components/option-card', () => ({
+ default: ({ title, onSelect, selected, className }: {
+ title: string
+ onSelect: () => void
+ selected: boolean
+ className?: string
+ }) => (
+
+ {title}
+
+ ),
+}))
+
+// ============================================================================
+// Test Suites
+// ============================================================================
+
+describe('OAuthClientSettingsModal', () => {
+ const defaultProps = {
+ oauthConfig: createMockOAuthConfig(),
+ onClose: vi.fn(),
+ showOAuthCreateModal: vi.fn(),
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockUsePluginStore.mockReturnValue(mockPluginDetail)
+ mockClipboardWriteText.mockResolvedValue(undefined)
+ // Reset form values to default
+ setMockFormValues({
+ values: { client_id: 'test-client-id', client_secret: 'test-client-secret' },
+ isCheckValidated: true,
+ })
+ })
+
+ afterEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('Rendering', () => {
+ it('should render modal with correct title', () => {
+ render()
+
+ expect(screen.getByTestId('modal-title')).toHaveTextContent('pluginTrigger.modal.oauth.title')
+ })
+
+ it('should render client type selector when system_configured is true', () => {
+ render()
+
+ expect(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.default')).toBeInTheDocument()
+ expect(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom')).toBeInTheDocument()
+ })
+
+ it('should not render client type selector when system_configured is false', () => {
+ const configWithoutSystemConfigured = createMockOAuthConfig({
+ system_configured: false,
+ })
+
+ render()
+
+ expect(screen.queryByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.default')).not.toBeInTheDocument()
+ })
+
+ it('should render redirect URI info when custom client type is selected', () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ })
+
+ render()
+
+ expect(screen.getByText('pluginTrigger.modal.oauthRedirectInfo')).toBeInTheDocument()
+ expect(screen.getByText('https://example.com/oauth/callback')).toBeInTheDocument()
+ })
+
+ it('should render client form when custom type is selected', () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ })
+
+ render()
+
+ expect(screen.getByTestId('base-form')).toBeInTheDocument()
+ })
+
+ it('should show remove button when custom_enabled and params exist', () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: { client_id: 'test-id', client_secret: 'test-secret' },
+ })
+
+ render()
+
+ expect(screen.getByText('common.operation.remove')).toBeInTheDocument()
+ })
+ })
+
+ describe('Client Type Selection', () => {
+ it('should default to Default client type when system_configured is true', () => {
+ render()
+
+ const defaultCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.default')
+ expect(defaultCard).toHaveAttribute('data-selected', 'true')
+ })
+
+ it('should switch to Custom client type when Custom card is clicked', () => {
+ render()
+
+ const customCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom')
+ fireEvent.click(customCard)
+
+ expect(customCard).toHaveAttribute('data-selected', 'true')
+ })
+
+ it('should switch back to Default client type when Default card is clicked', () => {
+ render()
+
+ const customCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom')
+ fireEvent.click(customCard)
+
+ const defaultCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.default')
+ fireEvent.click(defaultCard)
+
+ expect(defaultCard).toHaveAttribute('data-selected', 'true')
+ })
+ })
+
+ describe('Copy Redirect URI', () => {
+ it('should copy redirect URI when copy button is clicked', async () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ })
+
+ render()
+
+ const copyButton = screen.getByText('common.operation.copy')
+ fireEvent.click(copyButton)
+
+ await waitFor(() => {
+ expect(mockClipboardWriteText).toHaveBeenCalledWith('https://example.com/oauth/callback')
+ })
+
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'success',
+ message: 'common.actionMsg.copySuccessfully',
+ })
+ })
+ })
+
+ describe('OAuth Authorization Flow', () => {
+ it('should initiate OAuth when confirm button is clicked', () => {
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-confirm'))
+
+ expect(mockConfigureOAuth).toHaveBeenCalled()
+ })
+
+ it('should open OAuth popup after successful configuration', () => {
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+ mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
+ onSuccess({
+ authorization_url: 'https://oauth.example.com/authorize',
+ subscription_builder: createMockSubscriptionBuilder(),
+ })
+ })
+
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-confirm'))
+
+ expect(mockOpenOAuthPopup).toHaveBeenCalledWith(
+ 'https://oauth.example.com/authorize',
+ expect.any(Function),
+ )
+ })
+
+ it('should show success toast and close modal when OAuth callback succeeds', () => {
+ const mockOnClose = vi.fn()
+ const mockShowOAuthCreateModal = vi.fn()
+
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+ mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
+ const builder = createMockSubscriptionBuilder()
+ onSuccess({
+ authorization_url: 'https://oauth.example.com/authorize',
+ subscription_builder: builder,
+ })
+ })
+ mockOpenOAuthPopup.mockImplementation((url, callback) => {
+ callback({ success: true })
+ })
+
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('modal-confirm'))
+
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'success',
+ message: 'pluginTrigger.modal.oauth.authorization.authSuccess',
+ })
+ expect(mockOnClose).toHaveBeenCalled()
+ })
+
+ it('should show error toast when OAuth initiation fails', () => {
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+ mockInitiateOAuth.mockImplementation((provider, { onError }) => {
+ onError(new Error('OAuth failed'))
+ })
+
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-confirm'))
+
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'pluginTrigger.modal.oauth.authorization.authFailed',
+ })
+ })
+ })
+
+ describe('Save Only Flow', () => {
+ it('should save configuration without authorization when cancel button is clicked', () => {
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-cancel'))
+
+ expect(mockConfigureOAuth).toHaveBeenCalledWith(
+ expect.objectContaining({
+ provider: 'test-provider',
+ enabled: false,
+ }),
+ expect.any(Object),
+ )
+ })
+
+ it('should show success toast when save only succeeds', () => {
+ const mockOnClose = vi.fn()
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-cancel'))
+
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'success',
+ message: 'pluginTrigger.modal.oauth.save.success',
+ })
+ expect(mockOnClose).toHaveBeenCalled()
+ })
+ })
+
+ describe('Remove OAuth Configuration', () => {
+ it('should call deleteOAuth when remove button is clicked', () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: { client_id: 'test-id', client_secret: 'test-secret' },
+ })
+
+ render()
+
+ const removeButton = screen.getByText('common.operation.remove')
+ fireEvent.click(removeButton)
+
+ expect(mockDeleteOAuth).toHaveBeenCalledWith(
+ 'test-provider',
+ expect.any(Object),
+ )
+ })
+
+ it('should show success toast when remove succeeds', () => {
+ const mockOnClose = vi.fn()
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: { client_id: 'test-id', client_secret: 'test-secret' },
+ })
+
+ mockDeleteOAuth.mockImplementation((provider, { onSuccess }) => {
+ onSuccess()
+ })
+
+ render(
+ ,
+ )
+
+ const removeButton = screen.getByText('common.operation.remove')
+ fireEvent.click(removeButton)
+
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'success',
+ message: 'pluginTrigger.modal.oauth.remove.success',
+ })
+ expect(mockOnClose).toHaveBeenCalled()
+ })
+
+ it('should show error toast when remove fails', () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: { client_id: 'test-id', client_secret: 'test-secret' },
+ })
+
+ mockDeleteOAuth.mockImplementation((provider, { onError }) => {
+ onError(new Error('Delete failed'))
+ })
+
+ render()
+
+ const removeButton = screen.getByText('common.operation.remove')
+ fireEvent.click(removeButton)
+
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'Delete failed',
+ })
+ })
+ })
+
+ describe('Modal Actions', () => {
+ it('should call onClose when close button is clicked', () => {
+ const mockOnClose = vi.fn()
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-close'))
+
+ expect(mockOnClose).toHaveBeenCalled()
+ })
+
+ it('should call onClose when extra button (cancel) is clicked', () => {
+ const mockOnClose = vi.fn()
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-extra'))
+
+ expect(mockOnClose).toHaveBeenCalled()
+ })
+ })
+
+ describe('Button Text States', () => {
+ it('should show default button text initially', () => {
+ render()
+
+ expect(screen.getByTestId('modal-confirm')).toHaveTextContent('plugin.auth.saveAndAuth')
+ })
+
+ it('should show save only button text', () => {
+ render()
+
+ expect(screen.getByTestId('modal-cancel')).toHaveTextContent('plugin.auth.saveOnly')
+ })
+ })
+
+ describe('OAuth Client Schema', () => {
+ it('should populate form with existing params values', () => {
+ const configWithParams = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: {
+ client_id: 'existing-client-id',
+ client_secret: 'existing-client-secret',
+ },
+ })
+
+ render()
+
+ const clientIdInput = screen.getByTestId('form-field-client_id') as HTMLInputElement
+ const clientSecretInput = screen.getByTestId('form-field-client_secret') as HTMLInputElement
+
+ expect(clientIdInput.defaultValue).toBe('existing-client-id')
+ expect(clientSecretInput.defaultValue).toBe('existing-client-secret')
+ })
+
+ it('should handle empty oauth_client_schema', () => {
+ const configWithEmptySchema = createMockOAuthConfig({
+ system_configured: false,
+ oauth_client_schema: [],
+ })
+
+ render()
+
+ expect(screen.queryByTestId('base-form')).not.toBeInTheDocument()
+ })
+ })
+
+ describe('Edge Cases', () => {
+ it('should handle undefined oauthConfig', () => {
+ render()
+
+ expect(screen.getByTestId('modal')).toBeInTheDocument()
+ })
+
+ it('should handle missing provider', () => {
+ const detailWithoutProvider = createMockPluginDetail({ provider: '' })
+ mockUsePluginStore.mockReturnValue(detailWithoutProvider)
+
+ render()
+
+ expect(screen.getByTestId('modal')).toBeInTheDocument()
+ })
+ })
+
+ describe('Authorization Status Polling', () => {
+ it('should initiate polling setup after OAuth starts', () => {
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+ mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
+ onSuccess({
+ authorization_url: 'https://oauth.example.com/authorize',
+ subscription_builder: createMockSubscriptionBuilder(),
+ })
+ })
+
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-confirm'))
+
+ // Verify OAuth flow was initiated
+ expect(mockInitiateOAuth).toHaveBeenCalledWith(
+ 'test-provider',
+ expect.any(Object),
+ )
+ })
+
+ it('should continue polling when verifyBuilder returns an error', async () => {
+ vi.useFakeTimers()
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+ mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
+ onSuccess({
+ authorization_url: 'https://oauth.example.com/authorize',
+ subscription_builder: createMockSubscriptionBuilder(),
+ })
+ })
+ mockVerifyBuilder.mockImplementation((params, { onError }) => {
+ onError(new Error('Verify failed'))
+ })
+
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-confirm'))
+
+ vi.advanceTimersByTime(3000)
+ expect(mockVerifyBuilder).toHaveBeenCalled()
+
+ // Should still be in pending state (polling continues)
+ expect(screen.getByTestId('modal-confirm')).toHaveTextContent('pluginTrigger.modal.common.authorizing')
+
+ vi.useRealTimers()
+ })
+ })
+
+ describe('getErrorMessage helper', () => {
+ it('should extract error message from Error object', () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: { client_id: 'test-id', client_secret: 'test-secret' },
+ })
+
+ mockDeleteOAuth.mockImplementation((provider, { onError }) => {
+ onError(new Error('Custom error message'))
+ })
+
+ render()
+
+ fireEvent.click(screen.getByText('common.operation.remove'))
+
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'Custom error message',
+ })
+ })
+
+ it('should extract error message from object with message property', () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: { client_id: 'test-id', client_secret: 'test-secret' },
+ })
+
+ mockDeleteOAuth.mockImplementation((provider, { onError }) => {
+ onError({ message: 'Object error message' })
+ })
+
+ render()
+
+ fireEvent.click(screen.getByText('common.operation.remove'))
+
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'Object error message',
+ })
+ })
+
+ it('should use fallback message when error has no message', () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: { client_id: 'test-id', client_secret: 'test-secret' },
+ })
+
+ mockDeleteOAuth.mockImplementation((provider, { onError }) => {
+ onError({})
+ })
+
+ render()
+
+ fireEvent.click(screen.getByText('common.operation.remove'))
+
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'pluginTrigger.modal.oauth.remove.failed',
+ })
+ })
+
+ it('should use fallback when error.message is not a string', () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: { client_id: 'test-id', client_secret: 'test-secret' },
+ })
+
+ mockDeleteOAuth.mockImplementation((provider, { onError }) => {
+ onError({ message: 123 })
+ })
+
+ render()
+
+ fireEvent.click(screen.getByText('common.operation.remove'))
+
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'pluginTrigger.modal.oauth.remove.failed',
+ })
+ })
+
+ it('should use fallback when error.message is empty string', () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: { client_id: 'test-id', client_secret: 'test-secret' },
+ })
+
+ mockDeleteOAuth.mockImplementation((provider, { onError }) => {
+ onError({ message: '' })
+ })
+
+ render()
+
+ fireEvent.click(screen.getByText('common.operation.remove'))
+
+ expect(mockToastNotify).toHaveBeenCalledWith({
+ type: 'error',
+ message: 'pluginTrigger.modal.oauth.remove.failed',
+ })
+ })
+ })
+
+ describe('OAuth callback edge cases', () => {
+ it('should not show success toast when OAuth callback returns falsy data', () => {
+ const mockOnClose = vi.fn()
+ const mockShowOAuthCreateModal = vi.fn()
+
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+ mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
+ onSuccess({
+ authorization_url: 'https://oauth.example.com/authorize',
+ subscription_builder: createMockSubscriptionBuilder(),
+ })
+ })
+ mockOpenOAuthPopup.mockImplementation((url, callback) => {
+ callback(null)
+ })
+
+ render(
+ ,
+ )
+
+ fireEvent.click(screen.getByTestId('modal-confirm'))
+
+ // Should not show success toast or call callbacks
+ expect(mockToastNotify).not.toHaveBeenCalledWith(
+ expect.objectContaining({ message: 'pluginTrigger.modal.oauth.authorization.authSuccess' }),
+ )
+ expect(mockShowOAuthCreateModal).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('Custom Client Type Save Flow', () => {
+ it('should send enabled: true when custom client type is selected', () => {
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+
+ render()
+
+ // Switch to custom
+ const customCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom')
+ fireEvent.click(customCard)
+
+ fireEvent.click(screen.getByTestId('modal-cancel'))
+
+ expect(mockConfigureOAuth).toHaveBeenCalledWith(
+ expect.objectContaining({
+ enabled: true,
+ }),
+ expect.any(Object),
+ )
+ })
+
+ it('should send enabled: false when default client type is selected', () => {
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+
+ render()
+
+ // Default is already selected
+ fireEvent.click(screen.getByTestId('modal-cancel'))
+
+ expect(mockConfigureOAuth).toHaveBeenCalledWith(
+ expect.objectContaining({
+ enabled: false,
+ }),
+ expect.any(Object),
+ )
+ })
+ })
+
+ describe('OAuth Client Schema Default Values', () => {
+ it('should set default values from params to schema', () => {
+ const configWithParams = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: {
+ client_id: 'my-client-id',
+ client_secret: 'my-client-secret',
+ },
+ })
+
+ render()
+
+ const clientIdInput = screen.getByTestId('form-field-client_id') as HTMLInputElement
+ const clientSecretInput = screen.getByTestId('form-field-client_secret') as HTMLInputElement
+
+ expect(clientIdInput.defaultValue).toBe('my-client-id')
+ expect(clientSecretInput.defaultValue).toBe('my-client-secret')
+ })
+
+ it('should return empty array when oauth_client_schema is empty', () => {
+ const configWithEmptySchema = createMockOAuthConfig({
+ system_configured: false,
+ oauth_client_schema: [],
+ })
+
+ render()
+
+ expect(screen.queryByTestId('base-form')).not.toBeInTheDocument()
+ })
+
+ it('should skip setting default when schema name is not in params', () => {
+ const configWithPartialParams = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ params: {
+ client_id: 'my-client-id',
+ client_secret: '', // empty value - will not be set as default
+ },
+ oauth_client_schema: [
+ { name: 'client_id', type: 'text-input' as unknown, required: true, label: { 'en-US': 'Client ID' } as unknown },
+ { name: 'client_secret', type: 'secret-input' as unknown, required: true, label: { 'en-US': 'Client Secret' } as unknown },
+ { name: 'extra_param', type: 'text-input' as unknown, required: false, label: { 'en-US': 'Extra Param' } as unknown },
+ ] as TriggerOAuthConfig['oauth_client_schema'],
+ })
+
+ render()
+
+ const clientIdInput = screen.getByTestId('form-field-client_id') as HTMLInputElement
+ expect(clientIdInput.defaultValue).toBe('my-client-id')
+
+ // client_secret should have empty default since value is empty
+ const clientSecretInput = screen.getByTestId('form-field-client_secret') as HTMLInputElement
+ expect(clientSecretInput.defaultValue).toBe('')
+ })
+ })
+
+ describe('Confirm Button Text States', () => {
+ it('should show saveAndAuth text by default', () => {
+ render()
+
+ expect(screen.getByTestId('modal-confirm')).toHaveTextContent('plugin.auth.saveAndAuth')
+ })
+
+ it('should show authorizing text when authorization is pending', () => {
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+ mockInitiateOAuth.mockImplementation(() => {
+ // Don't call callback - stays pending
+ })
+
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-confirm'))
+
+ expect(screen.getByTestId('modal-confirm')).toHaveTextContent('pluginTrigger.modal.common.authorizing')
+ })
+ })
+
+ describe('Authorization Failed Status', () => {
+ it('should set authorization status to Failed when OAuth initiation fails', () => {
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+ mockInitiateOAuth.mockImplementation((provider, { onError }) => {
+ onError(new Error('OAuth failed'))
+ })
+
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-confirm'))
+
+ // After failure, button text should return to default
+ expect(screen.getByTestId('modal-confirm')).toHaveTextContent('plugin.auth.saveAndAuth')
+ })
+ })
+
+ describe('Redirect URI Display', () => {
+ it('should not show redirect URI info when redirect_uri is empty', () => {
+ const configWithEmptyRedirectUri = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ redirect_uri: '',
+ })
+
+ render()
+
+ expect(screen.queryByText('pluginTrigger.modal.oauthRedirectInfo')).not.toBeInTheDocument()
+ })
+
+ it('should show redirect URI info when custom type and redirect_uri exists', () => {
+ const configWithRedirectUri = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: true,
+ redirect_uri: 'https://my-app.com/oauth/callback',
+ })
+
+ render()
+
+ expect(screen.getByText('pluginTrigger.modal.oauthRedirectInfo')).toBeInTheDocument()
+ expect(screen.getByText('https://my-app.com/oauth/callback')).toBeInTheDocument()
+ })
+ })
+
+ describe('Remove Button Visibility', () => {
+ it('should not show remove button when custom_enabled is false', () => {
+ const configWithCustomDisabled = createMockOAuthConfig({
+ system_configured: false,
+ custom_enabled: false,
+ params: { client_id: 'test-id', client_secret: 'test-secret' },
+ })
+
+ render()
+
+ expect(screen.queryByText('common.operation.remove')).not.toBeInTheDocument()
+ })
+
+ it('should not show remove button when default client type is selected', () => {
+ const configWithCustomEnabled = createMockOAuthConfig({
+ system_configured: true,
+ custom_enabled: true,
+ params: { client_id: 'test-id', client_secret: 'test-secret' },
+ })
+
+ render()
+
+ // Default is selected by default when system_configured is true
+ expect(screen.queryByText('common.operation.remove')).not.toBeInTheDocument()
+ })
+ })
+
+ describe('OAuth Client Title', () => {
+ it('should render client type title', () => {
+ render()
+
+ expect(screen.getByText('pluginTrigger.subscription.addType.options.oauth.clientTitle')).toBeInTheDocument()
+ })
+ })
+
+ describe('Form Validation on Custom Save', () => {
+ it('should not call configureOAuth when form validation fails', () => {
+ setMockFormValues({
+ values: { client_id: '', client_secret: '' },
+ isCheckValidated: false,
+ })
+
+ render()
+
+ // Switch to custom type
+ const customCard = screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom')
+ fireEvent.click(customCard)
+
+ fireEvent.click(screen.getByTestId('modal-cancel'))
+
+ // Should not call configureOAuth because form validation failed
+ expect(mockConfigureOAuth).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('Client Params Hidden Value Transform', () => {
+ it('should transform client_id to hidden when unchanged', () => {
+ setMockFormValues({
+ values: { client_id: 'default-client-id', client_secret: 'new-secret' },
+ isCheckValidated: true,
+ })
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+
+ render()
+
+ // Switch to custom type
+ fireEvent.click(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom'))
+
+ fireEvent.click(screen.getByTestId('modal-cancel'))
+
+ expect(mockConfigureOAuth).toHaveBeenCalledWith(
+ expect.objectContaining({
+ client_params: expect.objectContaining({
+ client_id: '[__HIDDEN__]',
+ client_secret: 'new-secret',
+ }),
+ }),
+ expect.any(Object),
+ )
+ })
+
+ it('should transform client_secret to hidden when unchanged', () => {
+ setMockFormValues({
+ values: { client_id: 'new-id', client_secret: 'default-client-secret' },
+ isCheckValidated: true,
+ })
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+
+ render()
+
+ // Switch to custom type
+ fireEvent.click(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom'))
+
+ fireEvent.click(screen.getByTestId('modal-cancel'))
+
+ expect(mockConfigureOAuth).toHaveBeenCalledWith(
+ expect.objectContaining({
+ client_params: expect.objectContaining({
+ client_id: 'new-id',
+ client_secret: '[__HIDDEN__]',
+ }),
+ }),
+ expect.any(Object),
+ )
+ })
+
+ it('should transform both client_id and client_secret to hidden when both unchanged', () => {
+ setMockFormValues({
+ values: { client_id: 'default-client-id', client_secret: 'default-client-secret' },
+ isCheckValidated: true,
+ })
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+
+ render()
+
+ // Switch to custom type
+ fireEvent.click(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom'))
+
+ fireEvent.click(screen.getByTestId('modal-cancel'))
+
+ expect(mockConfigureOAuth).toHaveBeenCalledWith(
+ expect.objectContaining({
+ client_params: expect.objectContaining({
+ client_id: '[__HIDDEN__]',
+ client_secret: '[__HIDDEN__]',
+ }),
+ }),
+ expect.any(Object),
+ )
+ })
+
+ it('should send new values when both changed', () => {
+ setMockFormValues({
+ values: { client_id: 'new-client-id', client_secret: 'new-client-secret' },
+ isCheckValidated: true,
+ })
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+
+ render()
+
+ // Switch to custom type
+ fireEvent.click(screen.getByTestId('option-card-pluginTrigger.subscription.addType.options.oauth.custom'))
+
+ fireEvent.click(screen.getByTestId('modal-cancel'))
+
+ expect(mockConfigureOAuth).toHaveBeenCalledWith(
+ expect.objectContaining({
+ client_params: expect.objectContaining({
+ client_id: 'new-client-id',
+ client_secret: 'new-client-secret',
+ }),
+ }),
+ expect.any(Object),
+ )
+ })
+ })
+
+ describe('Polling Verification Success', () => {
+ it('should call verifyBuilder and update status on success', async () => {
+ vi.useFakeTimers({ shouldAdvanceTime: true })
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+ mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
+ onSuccess({
+ authorization_url: 'https://oauth.example.com/authorize',
+ subscription_builder: createMockSubscriptionBuilder(),
+ })
+ })
+ mockVerifyBuilder.mockImplementation((params, { onSuccess }) => {
+ onSuccess({ verified: true })
+ })
+
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-confirm'))
+
+ // Advance timer to trigger polling
+ await vi.advanceTimersByTimeAsync(3000)
+
+ expect(mockVerifyBuilder).toHaveBeenCalled()
+
+ // Button text should show waitingJump after verified
+ await waitFor(() => {
+ expect(screen.getByTestId('modal-confirm')).toHaveTextContent('pluginTrigger.modal.oauth.authorization.waitingJump')
+ })
+
+ vi.useRealTimers()
+ })
+
+ it('should continue polling when not verified', async () => {
+ vi.useFakeTimers({ shouldAdvanceTime: true })
+ mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
+ onSuccess()
+ })
+ mockInitiateOAuth.mockImplementation((provider, { onSuccess }) => {
+ onSuccess({
+ authorization_url: 'https://oauth.example.com/authorize',
+ subscription_builder: createMockSubscriptionBuilder(),
+ })
+ })
+ mockVerifyBuilder.mockImplementation((params, { onSuccess }) => {
+ onSuccess({ verified: false })
+ })
+
+ render()
+
+ fireEvent.click(screen.getByTestId('modal-confirm'))
+
+ // First poll
+ await vi.advanceTimersByTimeAsync(3000)
+ expect(mockVerifyBuilder).toHaveBeenCalledTimes(1)
+
+ // Second poll
+ await vi.advanceTimersByTimeAsync(3000)
+ expect(mockVerifyBuilder).toHaveBeenCalledTimes(2)
+
+ // Should still be in authorizing state
+ expect(screen.getByTestId('modal-confirm')).toHaveTextContent('pluginTrigger.modal.common.authorizing')
+
+ vi.useRealTimers()
+ })
+ })
+})
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.spec.tsx
new file mode 100644
index 0000000000..e814774621
--- /dev/null
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.spec.tsx
@@ -0,0 +1,1552 @@
+import type { PluginDetail } from '@/app/components/plugins/types'
+import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { FormTypeEnum } from '@/app/components/base/form/types'
+import { PluginCategoryEnum, PluginSource } from '@/app/components/plugins/types'
+import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
+import { ApiKeyEditModal } from './apikey-edit-modal'
+import { EditModal } from './index'
+import { ManualEditModal } from './manual-edit-modal'
+import { OAuthEditModal } from './oauth-edit-modal'
+
+// ==================== Mock Setup ====================
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({ t: (key: string) => key }),
+}))
+
+const mockToastNotify = vi.fn()
+vi.mock('@/app/components/base/toast', () => ({
+ default: { notify: (params: unknown) => mockToastNotify(params) },
+}))
+
+const mockParsePluginErrorMessage = vi.fn()
+vi.mock('@/utils/error-parser', () => ({
+ parsePluginErrorMessage: (error: unknown) => mockParsePluginErrorMessage(error),
+}))
+
+// Schema types
+type SubscriptionSchema = {
+ name: string
+ label: Record
+ type: string
+ required: boolean
+ default?: string
+ description?: Record
+ multiple: boolean
+ auto_generate: null
+ template: null
+ scope: null
+ min: null
+ max: null
+ precision: null
+}
+
+type CredentialSchema = {
+ name: string
+ label: Record
+ type: string
+ required: boolean
+ default?: string
+ help?: Record
+}
+
+const mockPluginStoreDetail = {
+ plugin_id: 'test-plugin-id',
+ provider: 'test-provider',
+ declaration: {
+ trigger: {
+ subscription_schema: [] as SubscriptionSchema[],
+ subscription_constructor: {
+ credentials_schema: [] as CredentialSchema[],
+ parameters: [] as SubscriptionSchema[],
+ oauth_schema: { client_schema: [], credentials_schema: [] },
+ },
+ },
+ },
+}
+
+vi.mock('../../store', () => ({
+ usePluginStore: (selector: (state: { detail: typeof mockPluginStoreDetail }) => unknown) =>
+ selector({ detail: mockPluginStoreDetail }),
+}))
+
+const mockRefetch = vi.fn()
+vi.mock('../use-subscription-list', () => ({
+ useSubscriptionList: () => ({ refetch: mockRefetch }),
+}))
+
+const mockUpdateSubscription = vi.fn()
+const mockVerifyCredentials = vi.fn()
+let mockIsUpdating = false
+let mockIsVerifying = false
+
+vi.mock('@/service/use-triggers', () => ({
+ useUpdateTriggerSubscription: () => ({
+ mutate: mockUpdateSubscription,
+ isPending: mockIsUpdating,
+ }),
+ useVerifyTriggerSubscription: () => ({
+ mutate: mockVerifyCredentials,
+ isPending: mockIsVerifying,
+ }),
+}))
+
+vi.mock('@/app/components/plugins/readme-panel/entrance', () => ({
+ ReadmeEntrance: ({ pluginDetail }: { pluginDetail: PluginDetail }) => (
+ ReadmeEntrance
+ ),
+}))
+
+vi.mock('@/app/components/base/encrypted-bottom', () => ({
+ EncryptedBottom: () => EncryptedBottom
,
+}))
+
+// Form values storage keyed by form identifier
+const formValuesMap = new Map, isCheckValidated: boolean }>()
+
+// Track which modal is being tested to properly identify forms
+let currentModalType: 'manual' | 'oauth' | 'apikey' = 'manual'
+
+// Helper to get form identifier based on schemas and context
+const getFormId = (schemas: Array<{ name: string }>, preventDefaultSubmit?: boolean): string => {
+ if (preventDefaultSubmit)
+ return 'credentials'
+ if (schemas.some(s => s.name === 'subscription_name')) {
+ // For ApiKey modal step 2, basic form only has subscription_name and callback_url
+ if (currentModalType === 'apikey' && schemas.length === 2)
+ return 'basic'
+ // For ManualEditModal and OAuthEditModal, the main form always includes subscription_name
+ return 'main'
+ }
+ return 'parameters'
+}
+
+vi.mock('@/app/components/base/form/components/base', () => ({
+ BaseForm: vi.fn().mockImplementation(({ formSchemas, ref, preventDefaultSubmit }) => {
+ const formId = getFormId(formSchemas || [], preventDefaultSubmit)
+ if (ref) {
+ ref.current = {
+ getFormValues: () => formValuesMap.get(formId) || { values: {}, isCheckValidated: true },
+ }
+ }
+ return (
+
+ {formSchemas?.map((schema: {
+ name: string
+ type: string
+ default?: unknown
+ dynamicSelectParams?: unknown
+ fieldClassName?: string
+ labelClassName?: string
+ }) => (
+
+ {schema.name}
+
+ ))}
+
+
{children}
+
+
+
+ {showExtraButton && (
+
+ )}
+ {bottomSlot &&
{bottomSlot}
}
+