test(web): add comprehensive unit and integration tests for plugins and tools modules (#32220)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>

web/app/components/tools/mcp/__tests__/create-card.spec.tsx

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import NewMCPCard from './create-card'
+import NewMCPCard from '../create-card'
 
 // Track the mock functions
 const mockCreateMCP = vi.fn().mockResolvedValue({ id: 'new-mcp-id', name: 'New MCP' })
@@ -22,7 +22,7 @@ type MockMCPModalProps = {
   onHide: () => void
 }
 
-vi.mock('./modal', () => ({
+vi.mock('../modal', () => ({
   default: ({ show, onConfirm, onHide }: MockMCPModalProps) => {
     if (!show)
       return null

web/app/components/tools/mcp/__tests__/headers-input.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import HeadersInput from './headers-input'
+import HeadersInput from '../headers-input'
 
 describe('HeadersInput', () => {
   const defaultProps = {

web/app/components/tools/mcp/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import MCPList from './index'
+import MCPList from '../index'
 
 type MockProvider = {
   id: string
@@ -22,7 +22,7 @@ vi.mock('@/service/use-tools', () => ({
 }))
 
 // Mock child components
-vi.mock('./create-card', () => ({
+vi.mock('../create-card', () => ({
   default: ({ handleCreate }: { handleCreate: (provider: { id: string, name: string }) => void }) => (
     <div data-testid="create-card" onClick={() => handleCreate({ id: 'new-id', name: 'New Provider' })}>
       Create Card
@@ -30,7 +30,7 @@ vi.mock('./create-card', () => ({
   ),
 }))
 
-vi.mock('./provider-card', () => ({
+vi.mock('../provider-card', () => ({
   default: ({ data, handleSelect, onUpdate, onDeleted }: { data: MockProvider, handleSelect: (id: string) => void, onUpdate: (id: string) => void, onDeleted: () => void }) => {
     const displayName = typeof data.name === 'string' ? data.name : Object.values(data.name)[0]
     return (
@@ -43,7 +43,7 @@ vi.mock('./provider-card', () => ({
   },
 }))
 
-vi.mock('./detail/provider-detail', () => ({
+vi.mock('../detail/provider-detail', () => ({
   default: ({ detail, onHide, onUpdate, isTriggerAuthorize, onFirstCreate }: { detail: MockDetail, onHide: () => void, onUpdate: () => void, isTriggerAuthorize: boolean, onFirstCreate: () => void }) => {
     const displayName = detail?.name
       ? (typeof detail.name === 'string' ? detail.name : Object.values(detail.name)[0])

web/app/components/tools/mcp/__tests__/mcp-server-modal.spec.tsx

@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import MCPServerModal from './mcp-server-modal'
+import MCPServerModal from '../mcp-server-modal'
 
 // Mock the services
 vi.mock('@/service/use-tools', () => ({

web/app/components/tools/mcp/__tests__/mcp-server-param-item.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import MCPServerParamItem from './mcp-server-param-item'
+import MCPServerParamItem from '../mcp-server-param-item'
 
 describe('MCPServerParamItem', () => {
   const defaultProps = {

web/app/components/tools/mcp/__tests__/mcp-service-card.spec.tsx

@@ -7,7 +7,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { AppModeEnum } from '@/types/app'
-import MCPServiceCard from './mcp-service-card'
+import MCPServiceCard from '../mcp-service-card'
 
 // Mock MCPServerModal
 vi.mock('@/app/components/tools/mcp/mcp-server-modal', () => ({
@@ -96,7 +96,7 @@ const createDefaultHookState = (): MockHookState => ({
 let mockHookState = createDefaultHookState()
 
 // Mock the hook - uses mockHookState which can be modified per test
-vi.mock('./hooks/use-mcp-service-card', () => ({
+vi.mock('../hooks/use-mcp-service-card', () => ({
   useMCPServiceCardState: () => ({
     ...mockHookState,
     handleStatusChange: mockHandleStatusChange,

web/app/components/tools/mcp/__tests__/modal.spec.tsx

@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import MCPModal from './modal'
+import MCPModal from '../modal'
 
 // Mock the service API
 vi.mock('@/service/common', () => ({

web/app/components/tools/mcp/__tests__/provider-card.spec.tsx

@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import MCPCard from './provider-card'
+import MCPCard from '../provider-card'
 
 // Mutable mock functions
 const mockUpdateMCP = vi.fn().mockResolvedValue({ result: 'success' })
@@ -32,7 +32,7 @@ type MCPModalProps = {
   onHide: () => void
 }
 
-vi.mock('./modal', () => ({
+vi.mock('../modal', () => ({
   default: ({ show, onConfirm, onHide }: MCPModalProps) => {
     if (!show)
       return null
@@ -81,7 +81,7 @@ type OperationDropdownProps = {
   onOpenChange: (open: boolean) => void
 }
 
-vi.mock('./detail/operation-dropdown', () => ({
+vi.mock('../detail/operation-dropdown', () => ({
   default: ({ onEdit, onRemove, onOpenChange }: OperationDropdownProps) => (
     <div data-testid="operation-dropdown">
       <button

web/app/components/tools/mcp/detail/__tests__/content.spec.tsx

@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import MCPDetailContent from './content'
+import MCPDetailContent from '../content'
 
 // Mutable mock functions
 const mockUpdateTools = vi.fn().mockResolvedValue({})
@@ -67,7 +67,7 @@ type MCPModalProps = {
   onHide: () => void
 }
 
-vi.mock('../modal', () => ({
+vi.mock('../../modal', () => ({
   default: ({ show, onConfirm, onHide }: MCPModalProps) => {
     if (!show)
       return null
@@ -99,7 +99,7 @@ vi.mock('@/app/components/base/confirm', () => ({
 }))
 
 // Mock OperationDropdown
-vi.mock('./operation-dropdown', () => ({
+vi.mock('../operation-dropdown', () => ({
   default: ({ onEdit, onRemove }: { onEdit: () => void, onRemove: () => void }) => (
     <div data-testid="operation-dropdown">
       <button data-testid="edit-btn" onClick={onEdit}>Edit</button>
@@ -113,7 +113,7 @@ type ToolItemData = {
   name: string
 }
 
-vi.mock('./tool-item', () => ({
+vi.mock('../tool-item', () => ({
   default: ({ tool }: { tool: ToolItemData }) => (
     <div data-testid="tool-item">{tool.name}</div>
   ),

web/app/components/tools/mcp/detail/__tests__/list-loading.spec.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import { describe, expect, it } from 'vitest'
-import ListLoading from './list-loading'
+import ListLoading from '../list-loading'
 
 describe('ListLoading', () => {
   describe('Rendering', () => {

web/app/components/tools/mcp/detail/__tests__/operation-dropdown.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import OperationDropdown from './operation-dropdown'
+import OperationDropdown from '../operation-dropdown'
 
 describe('OperationDropdown', () => {
   const defaultProps = {

web/app/components/tools/mcp/detail/__tests__/provider-detail.spec.tsx

@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { describe, expect, it, vi } from 'vitest'
-import MCPDetailPanel from './provider-detail'
+import MCPDetailPanel from '../provider-detail'
 
 // Mock the drawer component
 vi.mock('@/app/components/base/drawer', () => ({
@@ -16,7 +16,7 @@ vi.mock('@/app/components/base/drawer', () => ({
 }))
 
 // Mock the content component to expose onUpdate callback
-vi.mock('./content', () => ({
+vi.mock('../content', () => ({
   default: ({ detail, onUpdate }: { detail: ToolWithProvider, onUpdate: (isDelete?: boolean) => void }) => (
     <div data-testid="mcp-detail-content">
       {detail.name}

web/app/components/tools/mcp/detail/__tests__/tool-item.spec.tsx

@@ -1,7 +1,7 @@
 import type { Tool } from '@/app/components/tools/types'
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it } from 'vitest'
-import MCPToolItem from './tool-item'
+import MCPToolItem from '../tool-item'
 
 describe('MCPToolItem', () => {
   const createMockTool = (overrides = {}): Tool => ({

web/app/components/tools/mcp/hooks/__tests__/use-mcp-modal-form.spec.ts

@@ -3,7 +3,7 @@ import type { ToolWithProvider } from '@/app/components/workflow/types'
 import { act, renderHook } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import { MCPAuthMethod } from '@/app/components/tools/types'
-import { isValidServerID, isValidUrl, useMCPModalForm } from './use-mcp-modal-form'
+import { isValidServerID, isValidUrl, useMCPModalForm } from '../use-mcp-modal-form'
 
 // Mock the API service
 vi.mock('@/service/common', () => ({

web/app/components/tools/mcp/hooks/__tests__/use-mcp-service-card.spec.ts

@@ -6,7 +6,7 @@ import { act, renderHook } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { AppModeEnum } from '@/types/app'
-import { useMCPServiceCardState } from './use-mcp-service-card'
+import { useMCPServiceCardState } from '../use-mcp-service-card'
 
 // Mutable mock data for MCP server detail
 let mockMCPServerDetailData: {

web/app/components/tools/mcp/sections/__tests__/authentication-section.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import AuthenticationSection from './authentication-section'
+import AuthenticationSection from '../authentication-section'
 
 describe('AuthenticationSection', () => {
   const defaultProps = {

web/app/components/tools/mcp/sections/__tests__/configurations-section.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import ConfigurationsSection from './configurations-section'
+import ConfigurationsSection from '../configurations-section'
 
 describe('ConfigurationsSection', () => {
   const defaultProps = {

web/app/components/tools/mcp/sections/__tests__/headers-section.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import HeadersSection from './headers-section'
+import HeadersSection from '../headers-section'
 
 describe('HeadersSection', () => {
   const defaultProps = {