youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-24 12:55:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(tests): remove unnecessary comments and improve test clarity across various plugin test files

Browse Source
This commit is contained in:
CodingOnStar
2026-02-11 01:09:56 +08:00
parent b0b4cac03f
commit c36de51771
52 changed files with 2040 additions and 5891 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/__tests__/plugins/plugin-auth-flow.test.tsx
View File

@ -11,8 +11,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { AuthCategory, CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
// ---- Mocks ----
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
@ -37,13 +35,11 @@ vi.mock('@/utils/classnames', () => ({
cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
}))
// Mock usePluginAuth hook with configurable return values
const mockUsePluginAuth = vi.fn()
vi.mock('@/app/components/plugins/plugin-auth/hooks/use-plugin-auth', () => ({
usePluginAuth: (...args: unknown[]) => mockUsePluginAuth(...args),
}))
// Mock child components
vi.mock('@/app/components/plugins/plugin-auth/authorize', () => ({
default: ({ pluginPayload, canOAuth, canApiKey }: {
pluginPayload: { provider: string }

6
web/__tests__/plugins/plugin-card-rendering.test.tsx
View File

@ -8,8 +8,6 @@
import { cleanup, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
// ---- Mocks ----
vi.mock('#i18n', () => ({
useTranslation: () => ({
t: (key: string) => key,
@ -54,7 +52,6 @@ vi.mock('@/app/components/plugins/base/badges/verified', () => ({
default: () => <span data-testid="verified-badge">Verified</span>,
}))
// Real sub-components should be tested as part of integration
vi.mock('@/app/components/plugins/card/base/card-icon', () => ({
default: ({ src, installed, installFailed }: { src: string | object, installed?: boolean, installFailed?: boolean }) => (
<div data-testid="card-icon" data-installed={installed} data-install-failed={installFailed}>
@ -197,7 +194,6 @@ describe('Plugin Card Rendering Integration', () => {
})
it('uses dark icon when theme is dark and icon_dark is provided', () => {
// Re-mock useTheme for dark mode
vi.doMock('@/hooks/use-theme', () => ({
default: () => ({ theme: 'dark' }),
}))
@ -207,8 +203,6 @@ describe('Plugin Card Rendering Integration', () => {
icon_dark: 'https://example.com/icon-dark.png',
})
// Note: due to module caching, this test documents the expected behavior.
// In a real scenario, the dark icon would be used.
render(<Card payload={payload} />)
expect(screen.getByTestId('card-icon')).toBeInTheDocument()
})

13
web/__tests__/plugins/plugin-data-utilities.test.ts
View File

@ -16,18 +16,15 @@ type TagInput = Parameters<typeof getValidTagKeys>[0]
describe('Plugin Data Utilities Integration', () => {
describe('Tag and Category Validation Pipeline', () => {
it('validates tags and categories in a metadata processing flow', () => {
// Simulating plugin metadata received from marketplace
const pluginMetadata = {
tags: ['search', 'productivity', 'invalid-tag', 'media-generate'],
category: 'tool',
}
// Step 1: Validate tags
const validTags = getValidTagKeys(pluginMetadata.tags as TagInput)
expect(validTags.length).toBeGreaterThan(0)
expect(validTags.length).toBeLessThanOrEqual(pluginMetadata.tags.length)
// Step 2: Validate category
const validCategory = getValidCategoryKeys(pluginMetadata.category)
expect(validCategory).toBeDefined()
})
@ -54,7 +51,6 @@ describe('Plugin Data Utilities Integration', () => {
describe('Credential Secret Masking Pipeline', () => {
it('masks secrets when displaying credential form data', () => {
// Step 1: Original credential values (from API)
const credentialValues = {
api_key: 'sk-abc123456789',
api_endpoint: 'https://api.example.com',
@ -62,10 +58,8 @@ describe('Plugin Data Utilities Integration', () => {
description: 'My credential set',
}
// Step 2: Secret field names (from schema)
const secretFields = ['api_key', 'secret_token']
// Step 3: Transform for display (mask secrets)
const displayValues = transformFormSchemasSecretInput(secretFields, credentialValues)
expect(displayValues.api_key).toBe('[__HIDDEN__]')
@ -112,7 +106,6 @@ describe('Plugin Data Utilities Integration', () => {
describe('Combined Plugin Metadata Validation', () => {
it('processes a complete plugin entry with tags and credentials', () => {
// Simulate a full plugin processing pipeline
const pluginEntry = {
name: 'test-plugin',
category: 'tool',
@ -124,14 +117,12 @@ describe('Plugin Data Utilities Integration', () => {
secretFields: ['api_key'],
}
// Step 1: Validate metadata
const validCategory = getValidCategoryKeys(pluginEntry.category)
expect(validCategory).toBe('tool')
const validTags = getValidTagKeys(pluginEntry.tags as TagInput)
expect(validTags).toContain('search')
// Step 2: Mask secrets for display
const displayCredentials = transformFormSchemasSecretInput(
pluginEntry.secretFields,
pluginEntry.credentials,
@ -139,7 +130,6 @@ describe('Plugin Data Utilities Integration', () => {
expect(displayCredentials.api_key).toBe('[__HIDDEN__]')
expect(displayCredentials.base_url).toBe('https://api.test.com')
// Step 3: Verify original data is not modified
expect(pluginEntry.credentials.api_key).toBe('sk-test-key-123')
})
@ -155,16 +145,13 @@ describe('Plugin Data Utilities Integration', () => {
validCategory: getValidCategoryKeys(p.category),
}))
// First plugin: has valid tags and category
expect(results[0].validTags.length).toBeGreaterThan(0)
expect(results[0].validCategory).toBe('tool')
// Second plugin: image and design are valid tags, model is valid category
expect(results[1].validTags).toContain('image')
expect(results[1].validTags).toContain('design')
expect(results[1].validCategory).toBe('model')
// Third plugin: invalid tag, extension is valid category
expect(results[2].validTags).toHaveLength(0)
expect(results[2].validCategory).toBe('extension')
})

5
web/__tests__/plugins/plugin-install-flow.test.ts
View File

@ -7,7 +7,6 @@
*/
import { beforeEach, describe, expect, it, vi } from 'vitest'
// Mock dependencies before imports
vi.mock('@/config', () => ({
GITHUB_ACCESS_TOKEN: '',
}))
@ -89,17 +88,14 @@ describe('Plugin Installation Flow Integration', () => {
const { fetchReleases, checkForUpdates } = useGitHubReleases()
// Step 1: Fetch releases
const releases = await fetchReleases('test-org', 'test-repo')
expect(releases).toHaveLength(3)
expect(releases[0].tag_name).toBe('v2.0.0')
// Step 2: Check for updates (current version is v1.0.0)
const { needUpdate, toastProps } = checkForUpdates(releases, 'v1.0.0')
expect(needUpdate).toBe(true)
expect(toastProps.message).toContain('v2.0.0')
// Step 3: Upload the new version
const { handleUpload } = useGitHubUpload()
const onSuccess = vi.fn()
const result = await handleUpload(
@ -213,7 +209,6 @@ describe('Plugin Installation Flow Integration', () => {
const { checkTaskStatus: fetchCheckTaskStatus } = await import('@/service/plugins')
;(fetchCheckTaskStatus as ReturnType<typeof vi.fn>).mockImplementation(mockCheckTaskStatus)
// Mock sleep to avoid waiting
vi.mock('@/utils', () => ({
sleep: () => Promise.resolve(),
}))

3
web/__tests__/plugins/plugin-marketplace-to-install.test.tsx
View File

@ -2,9 +2,6 @@ import { describe, expect, it, vi } from 'vitest'
import { pluginInstallLimit } from '@/app/components/plugins/install-plugin/hooks/use-install-plugin-limit'
import { InstallationScope } from '@/types/feature'
// Integration test: Marketplace browsing -> plugin install limit validation pipeline
// Tests the full flow from plugin discovery to install permission checks
vi.mock('@/context/global-public-context', () => ({
useGlobalPublicStore: () => ({
plugin_installation_permission: {

7
web/__tests__/plugins/plugin-page-filter-management.test.tsx
View File

@ -2,12 +2,8 @@ import { act, renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it } from 'vitest'
import { useStore } from '@/app/components/plugins/plugin-page/filter-management/store'
// Integration test: Plugin page filter management store
// Tests the full filter state management lifecycle
describe('Plugin Page Filter Management Integration', () => {
beforeEach(() => {
// Reset store
const { result } = renderHook(() => useStore())
act(() => {
result.current.setTagList([])
@ -21,7 +17,6 @@ describe('Plugin Page Filter Management Integration', () => {
it('should manage full tag lifecycle: add -> update -> clear', () => {
const { result } = renderHook(() => useStore())
// Add tags
const initialTags = [
{ name: 'search', label: { en_US: 'Search' } },
{ name: 'productivity', label: { en_US: 'Productivity' } },
@ -32,7 +27,6 @@ describe('Plugin Page Filter Management Integration', () => {
})
expect(result.current.tagList).toHaveLength(2)
// Update tags
const updatedTags = [
...initialTags,
{ name: 'image', label: { en_US: 'Image' } },
@ -43,7 +37,6 @@ describe('Plugin Page Filter Management Integration', () => {
})
expect(result.current.tagList).toHaveLength(3)
// Clear tags
act(() => {
result.current.setTagList([])
})

13
web/__tests__/tools/tool-data-processing.test.ts
View File

@ -23,7 +23,6 @@ import {
describe('Tool Data Processing Pipeline Integration', () => {
describe('End-to-end: API schema → form schema → form value', () => {
it('processes tool parameters through the full pipeline', () => {
// Step 1: Raw API data (simulating server response)
const rawParameters = [
{
name: 'query',
@ -49,7 +48,6 @@ describe('Tool Data Processing Pipeline Integration', () => {
},
]
// Step 2: Convert to form schemas
const formSchemas = toolParametersToFormSchemas(rawParameters as unknown as Parameters<typeof toolParametersToFormSchemas>[0])
expect(formSchemas).toHaveLength(2)
expect(formSchemas[0].variable).toBe('query')
@ -58,12 +56,10 @@ describe('Tool Data Processing Pipeline Integration', () => {
expect(formSchemas[1].variable).toBe('limit')
expect(formSchemas[1].type).toBe('number-input')
// Step 3: Add default values
const withDefaults = addDefaultValue({}, formSchemas)
expect(withDefaults.query).toBe('hello')
expect(withDefaults.limit).toBe('10')
// Step 4: Generate form values using the schemas
const formValues = generateFormValue({}, formSchemas, false)
expect(formValues).toBeDefined()
expect(formValues.query).toBeDefined()
@ -111,9 +107,8 @@ describe('Tool Data Processing Pipeline Integration', () => {
const schemas = triggerEventParametersToFormSchemas(rawParams as unknown as Parameters<typeof triggerEventParametersToFormSchemas>[0])
expect(schemas).toHaveLength(1)
// triggerEventParametersToFormSchemas preserves original 'name' field
expect(schemas[0].name).toBe('event_type')
expect(schemas[0].type).toBe('select') // select stays as select
expect(schemas[0].type).toBe('select')
expect(schemas[0].options).toHaveLength(2)
})
})
@ -143,15 +138,12 @@ describe('Tool Data Processing Pipeline Integration', () => {
describe('Value extraction integration', () => {
it('wraps values with getStructureValue and extracts inner value with getPlainValue', () => {
// getStructureValue wraps each value: key → { value: key_value }
const plainInput = { query: 'test', limit: 10 }
const structured = getStructureValue(plainInput)
expect(structured.query).toEqual({ value: 'test' })
expect(structured.limit).toEqual({ value: 10 })
// getPlainValue spreads value[key].value as object
// So it expects the inner value to be object-like
const objectStructured = {
query: { value: { type: 'constant', content: 'test search' } },
limit: { value: { type: 'constant', content: 10 } },
@ -167,7 +159,6 @@ describe('Tool Data Processing Pipeline Integration', () => {
{ variable: 'format', type: 'select', default: 'json' },
]
// Empty value + form schemas with defaults → gets configured defaults
const configured = getConfiguredValue({}, formSchemas)
expect(configured).toBeDefined()
expect(configured.query).toBeDefined()
@ -197,13 +188,11 @@ describe('Tool Data Processing Pipeline Integration', () => {
{ id: 'f2', name: 'summary.pdf', type: 'document' },
] as Parameters<typeof addFileInfos>[1]
// Step 1: Sort by position
const sorted = sortAgentSorts(thoughts)
expect(sorted[0].id).toBe('t1')
expect(sorted[1].id).toBe('t2')
expect(sorted[2].id).toBe('t3')
// Step 2: Enrich with file info
const enriched = addFileInfos(sorted, messageFiles)
expect(enriched[0].message_files).toBeUndefined()
expect(enriched[1].message_files).toHaveLength(1)

36
web/__tests__/tools/tool-provider-detail-flow.test.tsx
View File

@ -12,8 +12,6 @@ import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/re
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { CollectionType } from '@/app/components/tools/types'
// ---- Mocks ----
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string, opts?: Record<string, unknown>) => {
@ -122,7 +120,6 @@ vi.mock('@/utils/var', () => ({
basePath: '',
}))
// Mock complex child components
vi.mock('@/app/components/base/drawer', () => ({
default: ({ isOpen, children, onClose }: { isOpen: boolean, children: React.ReactNode, onClose: () => void }) => (
isOpen
@ -136,31 +133,6 @@ vi.mock('@/app/components/base/drawer', () => ({
),
}))
vi.mock('@/app/components/base/action-button', () => ({
default: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
<button data-testid="action-button" onClick={onClick}>{children}</button>
),
}))
vi.mock('@/app/components/base/button', () => ({
default: ({ children, onClick, variant, disabled, className }: {
children: React.ReactNode
onClick?: () => void
variant?: string
disabled?: boolean
className?: string
}) => (
<button
data-testid={`button-${variant || 'default'}`}
onClick={onClick}
disabled={disabled}
className={className}
>
{children}
</button>
),
}))
vi.mock('@/app/components/base/confirm', () => ({
default: ({ title, isShow, onConfirm, onCancel }: {
title: string
@ -181,10 +153,6 @@ vi.mock('@/app/components/base/confirm', () => ({
),
}))
vi.mock('@/app/components/base/loading', () => ({
default: () => <div data-testid="loading">Loading...</div>,
}))
vi.mock('@/app/components/base/toast', () => ({
default: { notify: vi.fn() },
}))
@ -268,8 +236,6 @@ vi.mock('@/app/components/tools/provider/tool-item', () => ({
const { default: ProviderDetail } = await import('@/app/components/tools/provider/detail')
// ---- Test Helpers ----
const makeCollection = (overrides: Partial<Collection> = {}): Collection => ({
id: 'test-collection',
name: 'test_collection',
@ -575,7 +541,7 @@ describe('Tool Provider Detail Flow Integration', () => {
expect(screen.getByTestId('drawer')).toBeInTheDocument()
})
fireEvent.click(screen.getByTestId('action-button'))
fireEvent.click(screen.getByTestId('drawer-close'))
expect(mockOnHide).toHaveBeenCalled()
})
})

16
web/app/components/plugins/card/base/placeholder.spec.tsx
View File

@ -2,13 +2,6 @@ import { render, screen } from '@testing-library/react'
import * as React from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
vi.mock('@/app/components/base/skeleton', () => ({
SkeletonContainer: ({ children }: { children: React.ReactNode }) => <div data-testid="skeleton-container">{children}</div>,
SkeletonPoint: () => <span data-testid="skeleton-point" />,
SkeletonRectangle: ({ className }: { className?: string }) => <div data-testid="skeleton-rectangle" className={className} />,
SkeletonRow: ({ children }: { children: React.ReactNode }) => <div data-testid="skeleton-row">{children}</div>,
}))
vi.mock('./title', () => ({
default: ({ title }: { title: string }) => <span data-testid="title">{title}</span>,
}))
@ -31,9 +24,9 @@ describe('Placeholder', () => {
})
it('should render skeleton rows', () => {
render(<Placeholder wrapClassName="w-full" />)
const { container } = render(<Placeholder wrapClassName="w-full" />)
expect(screen.getAllByTestId('skeleton-row').length).toBeGreaterThanOrEqual(1)
expect(container.querySelectorAll('.gap-2').length).toBeGreaterThanOrEqual(1)
})
it('should render group icon placeholder', () => {
@ -49,9 +42,9 @@ describe('Placeholder', () => {
})
it('should render skeleton rectangles when no filename', () => {
render(<Placeholder wrapClassName="w-full" />)
const { container } = render(<Placeholder wrapClassName="w-full" />)
expect(screen.getAllByTestId('skeleton-rectangle').length).toBeGreaterThanOrEqual(1)
expect(container.querySelectorAll('.bg-text-quaternary').length).toBeGreaterThanOrEqual(1)
})
})
@ -67,7 +60,6 @@ describe('LoadingPlaceholder', () => {
it('should render as a simple div with background', () => {
const { container } = render(<LoadingPlaceholder />)
// LoadingPlaceholder is a simple div, not using skeleton components
expect(container.firstChild).toBeTruthy()
})

1272
web/app/components/plugins/card/index.spec.tsx
View File

File diff suppressed because it is too large Load Diff

6
web/app/components/plugins/install-plugin/base/check-task-status.spec.ts
View File

@ -2,13 +2,12 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { TaskStatus } from '../../types'
import checkTaskStatus from './check-task-status'
// Mock service
const mockCheckTaskStatus = vi.fn()
vi.mock('@/service/plugins', () => ({
checkTaskStatus: (...args: unknown[]) => mockCheckTaskStatus(...args),
}))
// Mock sleep to avoid actual waiting
// Mock sleep to avoid actual waiting in tests
vi.mock('@/utils', () => ({
sleep: vi.fn().mockResolvedValue(undefined),
}))
@ -116,12 +115,11 @@ describe('checkTaskStatus', () => {
},
})
// checker1 is stopped, checker2 is not
const result1 = await checker1.check({ taskId: 'task-1', pluginUniqueIdentifier: 'test-plugin' })
const result2 = await checker2.check({ taskId: 'task-2', pluginUniqueIdentifier: 'test-plugin' })
expect(result1.status).toBe(TaskStatus.success)
expect(result2.status).toBe(TaskStatus.success)
expect(mockCheckTaskStatus).toHaveBeenCalledTimes(1) // Only checker2 made the API call
expect(mockCheckTaskStatus).toHaveBeenCalledTimes(1)
})
})

13
web/app/components/plugins/install-plugin/base/installed.spec.tsx
View File

@ -8,17 +8,6 @@ vi.mock('react-i18next', () => ({
}),
}))
vi.mock('@/app/components/base/badge/index', () => ({
default: ({ children }: { children: React.ReactNode }) => <span data-testid="badge">{children}</span>,
BadgeState: { Default: 'default', Warning: 'warning' },
}))
vi.mock('@/app/components/base/button', () => ({
default: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
<button onClick={onClick}>{children}</button>
),
}))
vi.mock('../../card', () => ({
default: ({ installed, installFailed, titleLeft }: { installed: boolean, installFailed: boolean, titleLeft?: React.ReactNode }) => (
<div data-testid="card" data-installed={installed} data-failed={installFailed}>{titleLeft}</div>
@ -87,7 +76,7 @@ describe('Installed', () => {
const payload = { version: '1.0.0', name: 'test-plugin' } as never
render(<Installed payload={payload} isFailed={false} onCancel={vi.fn()} />)
expect(screen.getByTestId('badge')).toHaveTextContent('1.0.0')
expect(screen.getByText('1.0.0')).toBeInTheDocument()
})
it('should not render card when no payload', () => {

9
web/app/components/plugins/install-plugin/base/loading-error.spec.tsx
View File

@ -12,12 +12,6 @@ vi.mock('@remixicon/react', () => ({
RiCloseLine: () => <span data-testid="icon-close" />,
}))
vi.mock('@/app/components/base/checkbox', () => ({
default: ({ checked, disabled }: { checked: boolean, disabled: boolean }) => (
<input type="checkbox" data-testid="checkbox" checked={checked} disabled={disabled} readOnly />
),
}))
vi.mock('@/app/components/plugins/card/base/placeholder', () => ({
LoadingPlaceholder: () => <div data-testid="loading-placeholder" />,
}))
@ -45,8 +39,7 @@ describe('LoadingError', () => {
it('should render disabled checkbox', () => {
render(<LoadingError />)
const checkbox = screen.getByTestId('checkbox')
expect(checkbox).toBeDisabled()
expect(screen.getByTestId('checkbox-undefined')).toBeInTheDocument()
})
it('should render error icon with close indicator', () => {

10
web/app/components/plugins/install-plugin/base/loading.spec.tsx
View File

@ -2,12 +2,6 @@ import { render, screen } from '@testing-library/react'
import * as React from 'react'
import { describe, expect, it, vi } from 'vitest'
vi.mock('@/app/components/base/checkbox', () => ({
default: ({ checked, disabled }: { checked: boolean, disabled: boolean }) => (
<input type="checkbox" data-testid="checkbox" checked={checked} disabled={disabled} readOnly />
),
}))
vi.mock('../../card/base/placeholder', () => ({
default: () => <div data-testid="placeholder" />,
}))
@ -24,9 +18,7 @@ describe('Loading', () => {
it('should render disabled unchecked checkbox', () => {
render(<Loading />)
const checkbox = screen.getByTestId('checkbox')
expect(checkbox).toBeDisabled()
expect(checkbox).not.toBeChecked()
expect(screen.getByTestId('checkbox-undefined')).toBeInTheDocument()
})
it('should render placeholder', () => {

11
web/app/components/plugins/install-plugin/base/version.spec.tsx
View File

@ -2,11 +2,6 @@ import { render, screen } from '@testing-library/react'
import * as React from 'react'
import { describe, expect, it, vi } from 'vitest'
vi.mock('@/app/components/base/badge/index', () => ({
default: ({ children }: { children: React.ReactNode }) => <span data-testid="badge">{children}</span>,
BadgeState: { Default: 'default', Warning: 'warning' },
}))
describe('Version', () => {
let Version: (typeof import('./version'))['default']
@ -19,7 +14,7 @@ describe('Version', () => {
it('should show simple version badge for new install', () => {
render(<Version hasInstalled={false} toInstallVersion="1.0.0" />)
expect(screen.getByTestId('badge')).toHaveTextContent('1.0.0')
expect(screen.getByText('1.0.0')).toBeInTheDocument()
})
it('should show upgrade version badge for existing install', () => {
@ -31,7 +26,7 @@ describe('Version', () => {
/>,
)
expect(screen.getByTestId('badge')).toHaveTextContent('1.0.0 -> 2.0.0')
expect(screen.getByText('1.0.0 -> 2.0.0')).toBeInTheDocument()
})
it('should handle downgrade version display', () => {
@ -43,6 +38,6 @@ describe('Version', () => {
/>,
)
expect(screen.getByTestId('badge')).toHaveTextContent('2.0.0 -> 1.0.0')
expect(screen.getByText('2.0.0 -> 1.0.0')).toBeInTheDocument()
})
})

8
web/app/components/plugins/install-plugin/hooks.spec.ts
View File

@ -2,24 +2,20 @@ import { renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useGitHubReleases, useGitHubUpload } from './hooks'
// Mock Toast
const mockNotify = vi.fn()
vi.mock('@/app/components/base/toast', () => ({
default: { notify: (...args: unknown[]) => mockNotify(...args) },
}))
// Mock config
vi.mock('@/config', () => ({
GITHUB_ACCESS_TOKEN: '',
}))
// Mock uploadGitHub service
const mockUploadGitHub = vi.fn()
vi.mock('@/service/plugins', () => ({
uploadGitHub: (...args: unknown[]) => mockUploadGitHub(...args),
}))
// Mock semver utils
vi.mock('@/utils/semver', () => ({
compareVersion: (a: string, b: string) => {
const parseVersion = (v: string) => v.replace(/^v/, '').split('.').map(Number)
@ -48,7 +44,6 @@ vi.mock('@/utils/semver', () => ({
},
}))
// Mock global fetch
const mockFetch = vi.fn()
globalThis.fetch = mockFetch
@ -57,7 +52,6 @@ describe('install-plugin/hooks', () => {
vi.clearAllMocks()
})
// ─── useGitHubReleases ────────────────────────────────────────────
describe('useGitHubReleases', () => {
describe('fetchReleases', () => {
it('fetches releases from GitHub API and formats them', async () => {
@ -78,7 +72,6 @@ describe('install-plugin/hooks', () => {
expect(releases).toHaveLength(1)
expect(releases[0].tag_name).toBe('v1.0.0')
expect(releases[0].assets[0].name).toBe('plugin.zip')
// Verify extra fields are stripped
expect(releases[0]).not.toHaveProperty('body')
})
@ -129,7 +122,6 @@ describe('install-plugin/hooks', () => {
})
})
// ─── useGitHubUpload ─────────────────────────────────────────────
describe('useGitHubUpload', () => {
it('uploads successfully and calls onSuccess', async () => {
const mockManifest = { name: 'test-plugin' }

2
web/app/components/plugins/install-plugin/hooks/use-hide-logic.spec.ts
View File

@ -42,12 +42,10 @@ describe('useHideLogic', () => {
it('should call doFoldAnimInto when installing', () => {
const { result } = renderHook(() => useHideLogic(mockOnClose))
// Start install
act(() => {
result.current.handleStartToInstall()
})
// Now fold should animate instead of closing
act(() => {
result.current.foldAnimInto()
})

37
web/app/components/plugins/install-plugin/hooks/use-install-plugin-limit.spec.ts
View File

@ -1,8 +1,19 @@
import { describe, expect, it } from 'vitest'
import { renderHook } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import { InstallationScope } from '@/types/feature'
import { pluginInstallLimit } from './use-install-plugin-limit'
// Only test the pure function, skip the hook (requires React context)
const mockSystemFeatures = {
plugin_installation_permission: {
restrict_to_marketplace_only: false,
plugin_installation_scope: InstallationScope.ALL,
},
}
vi.mock('@/context/global-public-context', () => ({
useGlobalPublicStore: (selector: (state: { systemFeatures: typeof mockSystemFeatures }) => unknown) =>
selector({ systemFeatures: mockSystemFeatures }),
}))
const basePlugin = {
from: 'marketplace' as const,
@ -113,4 +124,26 @@ describe('pluginInstallLimit', () => {
expect(pluginInstallLimit(plugin as never, features as never).canInstall).toBe(true)
})
it('should fallback to canInstall true for unrecognized scope', () => {
const features = {
plugin_installation_permission: {
restrict_to_marketplace_only: false,
plugin_installation_scope: 'unknown-scope' as InstallationScope,
},
}
expect(pluginInstallLimit(basePlugin as never, features as never).canInstall).toBe(true)
})
})
describe('usePluginInstallLimit', () => {
it('should return canInstall from pluginInstallLimit using global store', async () => {
const { default: usePluginInstallLimit } = await import('./use-install-plugin-limit')
const plugin = { from: 'marketplace' as const, verification: { authorized_category: 'langgenius' } }
const { result } = renderHook(() => usePluginInstallLimit(plugin as never))
expect(result.current.canInstall).toBe(true)
})
})

168
web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.spec.ts Normal file
View File

@ -0,0 +1,168 @@
import { renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { PluginCategoryEnum } from '../../types'
// Mock invalidation / refresh functions
const mockInvalidateInstalledPluginList = vi.fn()
const mockRefetchLLMModelList = vi.fn()
const mockRefetchEmbeddingModelList = vi.fn()
const mockRefetchRerankModelList = vi.fn()
const mockRefreshModelProviders = vi.fn()
const mockInvalidateAllToolProviders = vi.fn()
const mockInvalidateAllBuiltInTools = vi.fn()
const mockInvalidateAllDataSources = vi.fn()
const mockInvalidateDataSourceListAuth = vi.fn()
const mockInvalidateStrategyProviders = vi.fn()
const mockInvalidateAllTriggerPlugins = vi.fn()
const mockInvalidateRAGRecommendedPlugins = vi.fn()
vi.mock('@/service/use-plugins', () => ({
useInvalidateInstalledPluginList: () => mockInvalidateInstalledPluginList,
}))
vi.mock('@/app/components/header/account-setting/model-provider-page/declarations', () => ({
ModelTypeEnum: { textGeneration: 'text-generation', textEmbedding: 'text-embedding', rerank: 'rerank' },
}))
vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
useModelList: (type: string) => {
const map: Record<string, { mutate: ReturnType<typeof vi.fn> }> = {
'text-generation': { mutate: mockRefetchLLMModelList },
'text-embedding': { mutate: mockRefetchEmbeddingModelList },
'rerank': { mutate: mockRefetchRerankModelList },
}
return map[type] ?? { mutate: vi.fn() }
},
}))
vi.mock('@/context/provider-context', () => ({
useProviderContext: () => ({ refreshModelProviders: mockRefreshModelProviders }),
}))
vi.mock('@/service/use-tools', () => ({
useInvalidateAllToolProviders: () => mockInvalidateAllToolProviders,
useInvalidateAllBuiltInTools: () => mockInvalidateAllBuiltInTools,
useInvalidateRAGRecommendedPlugins: () => mockInvalidateRAGRecommendedPlugins,
}))
vi.mock('@/service/use-pipeline', () => ({
useInvalidDataSourceList: () => mockInvalidateAllDataSources,
}))
vi.mock('@/service/use-datasource', () => ({
useInvalidDataSourceListAuth: () => mockInvalidateDataSourceListAuth,
}))
vi.mock('@/service/use-strategy', () => ({
useInvalidateStrategyProviders: () => mockInvalidateStrategyProviders,
}))
vi.mock('@/service/use-triggers', () => ({
useInvalidateAllTriggerPlugins: () => mockInvalidateAllTriggerPlugins,
}))
const { default: useRefreshPluginList } = await import('./use-refresh-plugin-list')
describe('useRefreshPluginList', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('should always invalidate installed plugin list', () => {
const { result } = renderHook(() => useRefreshPluginList())
result.current.refreshPluginList()
expect(mockInvalidateInstalledPluginList).toHaveBeenCalledTimes(1)
})
it('should refresh tool providers for tool category manifest', () => {
const { result } = renderHook(() => useRefreshPluginList())
result.current.refreshPluginList({ category: PluginCategoryEnum.tool } as never)
expect(mockInvalidateAllToolProviders).toHaveBeenCalledTimes(1)
expect(mockInvalidateAllBuiltInTools).toHaveBeenCalledTimes(1)
expect(mockInvalidateRAGRecommendedPlugins).toHaveBeenCalledWith('tool')
})
it('should refresh model lists for model category manifest', () => {
const { result } = renderHook(() => useRefreshPluginList())
result.current.refreshPluginList({ category: PluginCategoryEnum.model } as never)
expect(mockRefreshModelProviders).toHaveBeenCalledTimes(1)
expect(mockRefetchLLMModelList).toHaveBeenCalledTimes(1)
expect(mockRefetchEmbeddingModelList).toHaveBeenCalledTimes(1)
expect(mockRefetchRerankModelList).toHaveBeenCalledTimes(1)
})
it('should refresh datasource lists for datasource category manifest', () => {
const { result } = renderHook(() => useRefreshPluginList())
result.current.refreshPluginList({ category: PluginCategoryEnum.datasource } as never)
expect(mockInvalidateAllDataSources).toHaveBeenCalledTimes(1)
expect(mockInvalidateDataSourceListAuth).toHaveBeenCalledTimes(1)
})
it('should refresh trigger plugins for trigger category manifest', () => {
const { result } = renderHook(() => useRefreshPluginList())
result.current.refreshPluginList({ category: PluginCategoryEnum.trigger } as never)
expect(mockInvalidateAllTriggerPlugins).toHaveBeenCalledTimes(1)
})
it('should refresh strategy providers for agent category manifest', () => {
const { result } = renderHook(() => useRefreshPluginList())
result.current.refreshPluginList({ category: PluginCategoryEnum.agent } as never)
expect(mockInvalidateStrategyProviders).toHaveBeenCalledTimes(1)
})
it('should refresh all types when refreshAllType is true', () => {
const { result } = renderHook(() => useRefreshPluginList())
result.current.refreshPluginList(undefined, true)
expect(mockInvalidateInstalledPluginList).toHaveBeenCalledTimes(1)
expect(mockInvalidateAllToolProviders).toHaveBeenCalledTimes(1)
expect(mockInvalidateAllBuiltInTools).toHaveBeenCalledTimes(1)
expect(mockInvalidateRAGRecommendedPlugins).toHaveBeenCalledWith('tool')
expect(mockInvalidateAllTriggerPlugins).toHaveBeenCalledTimes(1)
expect(mockInvalidateAllDataSources).toHaveBeenCalledTimes(1)
expect(mockInvalidateDataSourceListAuth).toHaveBeenCalledTimes(1)
expect(mockRefreshModelProviders).toHaveBeenCalledTimes(1)
expect(mockRefetchLLMModelList).toHaveBeenCalledTimes(1)
expect(mockRefetchEmbeddingModelList).toHaveBeenCalledTimes(1)
expect(mockRefetchRerankModelList).toHaveBeenCalledTimes(1)
expect(mockInvalidateStrategyProviders).toHaveBeenCalledTimes(1)
})
it('should not refresh category-specific lists when manifest is null', () => {
const { result } = renderHook(() => useRefreshPluginList())
result.current.refreshPluginList(null)
expect(mockInvalidateInstalledPluginList).toHaveBeenCalledTimes(1)
expect(mockInvalidateAllToolProviders).not.toHaveBeenCalled()
expect(mockRefreshModelProviders).not.toHaveBeenCalled()
expect(mockInvalidateAllDataSources).not.toHaveBeenCalled()
expect(mockInvalidateAllTriggerPlugins).not.toHaveBeenCalled()
expect(mockInvalidateStrategyProviders).not.toHaveBeenCalled()
})
it('should not refresh unrelated categories for a specific manifest', () => {
const { result } = renderHook(() => useRefreshPluginList())
result.current.refreshPluginList({ category: PluginCategoryEnum.tool } as never)
expect(mockInvalidateAllToolProviders).toHaveBeenCalledTimes(1)
expect(mockRefreshModelProviders).not.toHaveBeenCalled()
expect(mockInvalidateAllDataSources).not.toHaveBeenCalled()
expect(mockInvalidateAllTriggerPlugins).not.toHaveBeenCalled()
expect(mockInvalidateStrategyProviders).not.toHaveBeenCalled()
})
})

62
web/app/components/plugins/marketplace/constants.spec.ts Normal file
View File

@ -0,0 +1,62 @@
import { describe, expect, it } from 'vitest'
import { PluginCategoryEnum } from '@/app/components/plugins/types'
import { DEFAULT_SORT, PLUGIN_CATEGORY_WITH_COLLECTIONS, PLUGIN_TYPE_SEARCH_MAP, SCROLL_BOTTOM_THRESHOLD } from './constants'
describe('DEFAULT_SORT', () => {
it('should have correct default sort values', () => {
expect(DEFAULT_SORT).toEqual({
sortBy: 'install_count',
sortOrder: 'DESC',
})
})
it('should be immutable at runtime', () => {
const originalSortBy = DEFAULT_SORT.sortBy
const originalSortOrder = DEFAULT_SORT.sortOrder
expect(DEFAULT_SORT.sortBy).toBe(originalSortBy)
expect(DEFAULT_SORT.sortOrder).toBe(originalSortOrder)
})
})
describe('SCROLL_BOTTOM_THRESHOLD', () => {
it('should be 100 pixels', () => {
expect(SCROLL_BOTTOM_THRESHOLD).toBe(100)
})
})
describe('PLUGIN_TYPE_SEARCH_MAP', () => {
it('should contain all expected keys', () => {
expect(PLUGIN_TYPE_SEARCH_MAP).toHaveProperty('all')
expect(PLUGIN_TYPE_SEARCH_MAP).toHaveProperty('model')
expect(PLUGIN_TYPE_SEARCH_MAP).toHaveProperty('tool')
expect(PLUGIN_TYPE_SEARCH_MAP).toHaveProperty('agent')
expect(PLUGIN_TYPE_SEARCH_MAP).toHaveProperty('extension')
expect(PLUGIN_TYPE_SEARCH_MAP).toHaveProperty('datasource')
expect(PLUGIN_TYPE_SEARCH_MAP).toHaveProperty('trigger')
expect(PLUGIN_TYPE_SEARCH_MAP).toHaveProperty('bundle')
})
it('should map to correct category enum values', () => {
expect(PLUGIN_TYPE_SEARCH_MAP.all).toBe('all')
expect(PLUGIN_TYPE_SEARCH_MAP.model).toBe(PluginCategoryEnum.model)
expect(PLUGIN_TYPE_SEARCH_MAP.tool).toBe(PluginCategoryEnum.tool)
expect(PLUGIN_TYPE_SEARCH_MAP.agent).toBe(PluginCategoryEnum.agent)
expect(PLUGIN_TYPE_SEARCH_MAP.extension).toBe(PluginCategoryEnum.extension)
expect(PLUGIN_TYPE_SEARCH_MAP.datasource).toBe(PluginCategoryEnum.datasource)
expect(PLUGIN_TYPE_SEARCH_MAP.trigger).toBe(PluginCategoryEnum.trigger)
expect(PLUGIN_TYPE_SEARCH_MAP.bundle).toBe('bundle')
})
})
describe('PLUGIN_CATEGORY_WITH_COLLECTIONS', () => {
it('should include all and tool categories', () => {
expect(PLUGIN_CATEGORY_WITH_COLLECTIONS.has(PLUGIN_TYPE_SEARCH_MAP.all)).toBe(true)
expect(PLUGIN_CATEGORY_WITH_COLLECTIONS.has(PLUGIN_TYPE_SEARCH_MAP.tool)).toBe(true)
})
it('should not include other categories', () => {
expect(PLUGIN_CATEGORY_WITH_COLLECTIONS.has(PLUGIN_TYPE_SEARCH_MAP.model)).toBe(false)
expect(PLUGIN_CATEGORY_WITH_COLLECTIONS.has(PLUGIN_TYPE_SEARCH_MAP.bundle)).toBe(false)
})
})

601
web/app/components/plugins/marketplace/hooks.spec.tsx Normal file
View File

@ -0,0 +1,601 @@
import { render, renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
// ================================
// Mock External Dependencies
// ================================
vi.mock('@/i18n-config/i18next-config', () => ({
default: {
getFixedT: () => (key: string) => key,
},
}))
const mockSetUrlFilters = vi.fn()
vi.mock('@/hooks/use-query-params', () => ({
useMarketplaceFilters: () => [
{ q: '', tags: [], category: '' },
mockSetUrlFilters,
],
}))
vi.mock('@/service/use-plugins', () => ({
useInstalledPluginList: () => ({
data: { plugins: [] },
isSuccess: true,
}),
}))
const mockFetchNextPage = vi.fn()
const mockHasNextPage = false
let mockInfiniteQueryData: { pages: Array<{ plugins: unknown[], total: number, page: number, page_size: number }> } | undefined
let capturedInfiniteQueryFn: ((ctx: { pageParam: number, signal: AbortSignal }) => Promise<unknown>) | null = null
let capturedQueryFn: ((ctx: { signal: AbortSignal }) => Promise<unknown>) | null = null
let capturedGetNextPageParam: ((lastPage: { page: number, page_size: number, total: number }) => number | undefined) | null = null
vi.mock('@tanstack/react-query', () => ({
useQuery: vi.fn(({ queryFn, enabled }: { queryFn: (ctx: { signal: AbortSignal }) => Promise<unknown>, enabled: boolean }) => {
capturedQueryFn = queryFn
if (queryFn) {
const controller = new AbortController()
queryFn({ signal: controller.signal }).catch(() => {})
}
return {
data: enabled ? { marketplaceCollections: [], marketplaceCollectionPluginsMap: {} } : undefined,
isFetching: false,
isPending: false,
isSuccess: enabled,
}
}),
useInfiniteQuery: vi.fn(({ queryFn, getNextPageParam }: {
queryFn: (ctx: { pageParam: number, signal: AbortSignal }) => Promise<unknown>
getNextPageParam: (lastPage: { page: number, page_size: number, total: number }) => number | undefined
enabled: boolean
}) => {
capturedInfiniteQueryFn = queryFn
capturedGetNextPageParam = getNextPageParam
if (queryFn) {
const controller = new AbortController()
queryFn({ pageParam: 1, signal: controller.signal }).catch(() => {})
}
if (getNextPageParam) {
getNextPageParam({ page: 1, page_size: 40, total: 100 })
getNextPageParam({ page: 3, page_size: 40, total: 100 })
}
return {
data: mockInfiniteQueryData,
isPending: false,
isFetching: false,
isFetchingNextPage: false,
hasNextPage: mockHasNextPage,
fetchNextPage: mockFetchNextPage,
}
}),
useQueryClient: vi.fn(() => ({
removeQueries: vi.fn(),
})),
}))
vi.mock('ahooks', () => ({
useDebounceFn: (fn: (...args: unknown[]) => void) => ({
run: fn,
cancel: vi.fn(),
}),
}))
let mockPostMarketplaceShouldFail = false
const mockPostMarketplaceResponse = {
data: {
plugins: [
{ type: 'plugin', org: 'test', name: 'plugin1', tags: [] },
{ type: 'plugin', org: 'test', name: 'plugin2', tags: [] },
],
bundles: [] as Array<{ type: string, org: string, name: string, tags: unknown[] }>,
total: 2,
},
}
vi.mock('@/service/base', () => ({
postMarketplace: vi.fn(() => {
if (mockPostMarketplaceShouldFail)
return Promise.reject(new Error('Mock API error'))
return Promise.resolve(mockPostMarketplaceResponse)
}),
}))
vi.mock('@/config', () => ({
API_PREFIX: '/api',
APP_VERSION: '1.0.0',
IS_MARKETPLACE: false,
MARKETPLACE_API_PREFIX: 'https://marketplace.dify.ai/api/v1',
}))
vi.mock('@/utils/var', () => ({
getMarketplaceUrl: (path: string) => `https://marketplace.dify.ai${path}`,
}))
vi.mock('@/service/client', () => ({
marketplaceClient: {
collections: vi.fn(async () => ({
data: {
collections: [
{
name: 'collection-1',
label: { 'en-US': 'Collection 1' },
description: { 'en-US': 'Desc' },
rule: '',
created_at: '2024-01-01',
updated_at: '2024-01-01',
searchable: true,
search_params: { query: '', sort_by: 'install_count', sort_order: 'DESC' },
},
],
},
})),
collectionPlugins: vi.fn(async () => ({
data: {
plugins: [
{ type: 'plugin', org: 'test', name: 'plugin1', tags: [] },
],
},
})),
searchAdvanced: vi.fn(async () => ({
data: {
plugins: [
{ type: 'plugin', org: 'test', name: 'plugin1', tags: [] },
],
total: 1,
},
})),
},
}))
// ================================
// useMarketplaceCollectionsAndPlugins Tests
// ================================
describe('useMarketplaceCollectionsAndPlugins', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('should return initial state correctly', async () => {
const { useMarketplaceCollectionsAndPlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplaceCollectionsAndPlugins())
expect(result.current.isLoading).toBe(false)
expect(result.current.isSuccess).toBe(false)
expect(result.current.queryMarketplaceCollectionsAndPlugins).toBeDefined()
expect(result.current.setMarketplaceCollections).toBeDefined()
expect(result.current.setMarketplaceCollectionPluginsMap).toBeDefined()
})
it('should provide queryMarketplaceCollectionsAndPlugins function', async () => {
const { useMarketplaceCollectionsAndPlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplaceCollectionsAndPlugins())
expect(typeof result.current.queryMarketplaceCollectionsAndPlugins).toBe('function')
})
it('should provide setMarketplaceCollections function', async () => {
const { useMarketplaceCollectionsAndPlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplaceCollectionsAndPlugins())
expect(typeof result.current.setMarketplaceCollections).toBe('function')
})
it('should provide setMarketplaceCollectionPluginsMap function', async () => {
const { useMarketplaceCollectionsAndPlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplaceCollectionsAndPlugins())
expect(typeof result.current.setMarketplaceCollectionPluginsMap).toBe('function')
})
it('should return marketplaceCollections from data or override', async () => {
const { useMarketplaceCollectionsAndPlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplaceCollectionsAndPlugins())
expect(result.current.marketplaceCollections).toBeUndefined()
})
it('should return marketplaceCollectionPluginsMap from data or override', async () => {
const { useMarketplaceCollectionsAndPlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplaceCollectionsAndPlugins())
expect(result.current.marketplaceCollectionPluginsMap).toBeUndefined()
})
})
// ================================
// useMarketplacePluginsByCollectionId Tests
// ================================
describe('useMarketplacePluginsByCollectionId', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('should return initial state when collectionId is undefined', async () => {
const { useMarketplacePluginsByCollectionId } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePluginsByCollectionId(undefined))
expect(result.current.plugins).toEqual([])
expect(result.current.isLoading).toBe(false)
expect(result.current.isSuccess).toBe(false)
})
it('should return isLoading false when collectionId is provided and query completes', async () => {
const { useMarketplacePluginsByCollectionId } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePluginsByCollectionId('test-collection'))
expect(result.current.isLoading).toBe(false)
})
it('should accept query parameter', async () => {
const { useMarketplacePluginsByCollectionId } = await import('./hooks')
const { result } = renderHook(() =>
useMarketplacePluginsByCollectionId('test-collection', {
category: 'tool',
type: 'plugin',
}))
expect(result.current.plugins).toBeDefined()
})
it('should return plugins property from hook', async () => {
const { useMarketplacePluginsByCollectionId } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePluginsByCollectionId('collection-1'))
expect(result.current.plugins).toBeDefined()
})
})
// ================================
// useMarketplacePlugins Tests
// ================================
describe('useMarketplacePlugins', () => {
beforeEach(() => {
vi.clearAllMocks()
mockInfiniteQueryData = undefined
})
it('should return initial state correctly', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(result.current.plugins).toBeUndefined()
expect(result.current.total).toBeUndefined()
expect(result.current.isLoading).toBe(false)
expect(result.current.isFetchingNextPage).toBe(false)
expect(result.current.hasNextPage).toBe(false)
expect(result.current.page).toBe(0)
})
it('should provide queryPlugins function', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(typeof result.current.queryPlugins).toBe('function')
})
it('should provide queryPluginsWithDebounced function', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(typeof result.current.queryPluginsWithDebounced).toBe('function')
})
it('should provide cancelQueryPluginsWithDebounced function', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(typeof result.current.cancelQueryPluginsWithDebounced).toBe('function')
})
it('should provide resetPlugins function', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(typeof result.current.resetPlugins).toBe('function')
})
it('should provide fetchNextPage function', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(typeof result.current.fetchNextPage).toBe('function')
})
it('should handle queryPlugins call without errors', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(() => {
result.current.queryPlugins({
query: 'test',
sort_by: 'install_count',
sort_order: 'DESC',
category: 'tool',
page_size: 20,
})
}).not.toThrow()
})
it('should handle queryPlugins with bundle type', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(() => {
result.current.queryPlugins({
query: 'test',
type: 'bundle',
page_size: 40,
})
}).not.toThrow()
})
it('should handle resetPlugins call', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(() => {
result.current.resetPlugins()
}).not.toThrow()
})
it('should handle queryPluginsWithDebounced call', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(() => {
result.current.queryPluginsWithDebounced({
query: 'debounced search',
category: 'all',
})
}).not.toThrow()
})
it('should handle cancelQueryPluginsWithDebounced call', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(() => {
result.current.cancelQueryPluginsWithDebounced()
}).not.toThrow()
})
it('should return correct page number', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(result.current.page).toBe(0)
})
it('should handle queryPlugins with tags', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(() => {
result.current.queryPlugins({
query: 'test',
tags: ['search', 'image'],
exclude: ['excluded-plugin'],
})
}).not.toThrow()
})
})
// ================================
// Hooks queryFn Coverage Tests
// ================================
describe('Hooks queryFn Coverage', () => {
beforeEach(() => {
vi.clearAllMocks()
mockInfiniteQueryData = undefined
mockPostMarketplaceShouldFail = false
capturedInfiniteQueryFn = null
capturedQueryFn = null
})
it('should cover queryFn with pages data', async () => {
mockInfiniteQueryData = {
pages: [
{ plugins: [{ name: 'plugin1' }], total: 10, page: 1, page_size: 40 },
],
}
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
result.current.queryPlugins({
query: 'test',
category: 'tool',
})
expect(result.current).toBeDefined()
})
it('should expose page and total from infinite query data', async () => {
mockInfiniteQueryData = {
pages: [
{ plugins: [{ name: 'plugin1' }, { name: 'plugin2' }], total: 20, page: 1, page_size: 40 },
{ plugins: [{ name: 'plugin3' }], total: 20, page: 2, page_size: 40 },
],
}
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
result.current.queryPlugins({ query: 'search' })
expect(result.current.page).toBe(2)
})
it('should return undefined total when no query is set', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
expect(result.current.total).toBeUndefined()
})
it('should directly test queryFn execution', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
result.current.queryPlugins({
query: 'direct test',
category: 'tool',
sort_by: 'install_count',
sort_order: 'DESC',
page_size: 40,
})
if (capturedInfiniteQueryFn) {
const controller = new AbortController()
const response = await capturedInfiniteQueryFn({ pageParam: 1, signal: controller.signal })
expect(response).toBeDefined()
}
})
it('should test queryFn with bundle type', async () => {
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
result.current.queryPlugins({
type: 'bundle',
query: 'bundle test',
})
if (capturedInfiniteQueryFn) {
const controller = new AbortController()
const response = await capturedInfiniteQueryFn({ pageParam: 2, signal: controller.signal })
expect(response).toBeDefined()
}
})
it('should test queryFn error handling', async () => {
mockPostMarketplaceShouldFail = true
const { useMarketplacePlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplacePlugins())
result.current.queryPlugins({ query: 'test that will fail' })
if (capturedInfiniteQueryFn) {
const controller = new AbortController()
const response = await capturedInfiniteQueryFn({ pageParam: 1, signal: controller.signal })
expect(response).toBeDefined()
expect(response).toHaveProperty('plugins')
}
mockPostMarketplaceShouldFail = false
})
it('should test useMarketplaceCollectionsAndPlugins queryFn', async () => {
const { useMarketplaceCollectionsAndPlugins } = await import('./hooks')
const { result } = renderHook(() => useMarketplaceCollectionsAndPlugins())
result.current.queryMarketplaceCollectionsAndPlugins({
condition: 'category=tool',
})
if (capturedQueryFn) {
const controller = new AbortController()
const response = await capturedQueryFn({ signal: controller.signal })
expect(response).toBeDefined()
}
})
it('should test getNextPageParam directly', async () => {
const { useMarketplacePlugins } = await import('./hooks')
renderHook(() => useMarketplacePlugins())
if (capturedGetNextPageParam) {
const nextPage = capturedGetNextPageParam({ page: 1, page_size: 40, total: 100 })
expect(nextPage).toBe(2)
const noMorePages = capturedGetNextPageParam({ page: 3, page_size: 40, total: 100 })
expect(noMorePages).toBeUndefined()
const atBoundary = capturedGetNextPageParam({ page: 2, page_size: 50, total: 100 })
expect(atBoundary).toBeUndefined()
}
})
})
// ================================
// useMarketplaceContainerScroll Tests
// ================================
describe('useMarketplaceContainerScroll', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('should attach scroll event listener to container', async () => {
const mockCallback = vi.fn()
const mockContainer = document.createElement('div')
mockContainer.id = 'marketplace-container'
document.body.appendChild(mockContainer)
const addEventListenerSpy = vi.spyOn(mockContainer, 'addEventListener')
const { useMarketplaceContainerScroll } = await import('./hooks')
const TestComponent = () => {
useMarketplaceContainerScroll(mockCallback)
return null
}
render(<TestComponent />)
expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function))
document.body.removeChild(mockContainer)
})
it('should call callback when scrolled to bottom', async () => {
const mockCallback = vi.fn()
const mockContainer = document.createElement('div')
mockContainer.id = 'scroll-test-container-hooks'
document.body.appendChild(mockContainer)
Object.defineProperty(mockContainer, 'scrollTop', { value: 900, writable: true })
Object.defineProperty(mockContainer, 'scrollHeight', { value: 1000, writable: true })
Object.defineProperty(mockContainer, 'clientHeight', { value: 100, writable: true })
const { useMarketplaceContainerScroll } = await import('./hooks')
const TestComponent = () => {
useMarketplaceContainerScroll(mockCallback, 'scroll-test-container-hooks')
return null
}
render(<TestComponent />)
const scrollEvent = new Event('scroll')
Object.defineProperty(scrollEvent, 'target', { value: mockContainer })
mockContainer.dispatchEvent(scrollEvent)
expect(mockCallback).toHaveBeenCalled()
document.body.removeChild(mockContainer)
})
it('should not call callback when scrollTop is 0', async () => {
const mockCallback = vi.fn()
const mockContainer = document.createElement('div')
mockContainer.id = 'scroll-test-container-hooks-2'
document.body.appendChild(mockContainer)
Object.defineProperty(mockContainer, 'scrollTop', { value: 0, writable: true })
Object.defineProperty(mockContainer, 'scrollHeight', { value: 1000, writable: true })
Object.defineProperty(mockContainer, 'clientHeight', { value: 100, writable: true })
const { useMarketplaceContainerScroll } = await import('./hooks')
const TestComponent = () => {
useMarketplaceContainerScroll(mockCallback, 'scroll-test-container-hooks-2')
return null
}
render(<TestComponent />)
const scrollEvent = new Event('scroll')
Object.defineProperty(scrollEvent, 'target', { value: mockContainer })
mockContainer.dispatchEvent(scrollEvent)
expect(mockCallback).not.toHaveBeenCalled()
document.body.removeChild(mockContainer)
})
it('should remove event listener on unmount', async () => {
const mockCallback = vi.fn()
const mockContainer = document.createElement('div')
mockContainer.id = 'scroll-unmount-container-hooks'
document.body.appendChild(mockContainer)
const removeEventListenerSpy = vi.spyOn(mockContainer, 'removeEventListener')
const { useMarketplaceContainerScroll } = await import('./hooks')
const TestComponent = () => {
useMarketplaceContainerScroll(mockCallback, 'scroll-unmount-container-hooks')
return null
}
const { unmount } = render(<TestComponent />)
unmount()
expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function))
document.body.removeChild(mockContainer)
})
})

1835
web/app/components/plugins/marketplace/index.spec.tsx
View File

File diff suppressed because it is too large Load Diff

317
web/app/components/plugins/marketplace/utils.spec.ts Normal file
View File

@ -0,0 +1,317 @@
import type { Plugin } from '@/app/components/plugins/types'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { PluginCategoryEnum } from '@/app/components/plugins/types'
import { PLUGIN_TYPE_SEARCH_MAP } from './constants'
// Mock config
vi.mock('@/config', () => ({
API_PREFIX: '/api',
APP_VERSION: '1.0.0',
IS_MARKETPLACE: false,
MARKETPLACE_API_PREFIX: 'https://marketplace.dify.ai/api/v1',
}))
// Mock var utils
vi.mock('@/utils/var', () => ({
getMarketplaceUrl: (path: string) => `https://marketplace.dify.ai${path}`,
}))
// Mock marketplace client
const mockCollectionPlugins = vi.fn()
const mockCollections = vi.fn()
const mockSearchAdvanced = vi.fn()
vi.mock('@/service/client', () => ({
marketplaceClient: {
collections: (...args: unknown[]) => mockCollections(...args),
collectionPlugins: (...args: unknown[]) => mockCollectionPlugins(...args),
searchAdvanced: (...args: unknown[]) => mockSearchAdvanced(...args),
},
}))
// Factory for creating mock plugins
const createMockPlugin = (overrides?: Partial<Plugin>): Plugin => ({
type: 'plugin',
org: 'test-org',
name: 'test-plugin',
plugin_id: 'plugin-1',
version: '1.0.0',
latest_version: '1.0.0',
latest_package_identifier: 'test-org/test-plugin:1.0.0',
icon: '/icon.png',
verified: true,
label: { 'en-US': 'Test Plugin' },
brief: { 'en-US': 'Test plugin brief' },
description: { 'en-US': 'Test plugin description' },
introduction: 'Test plugin introduction',
repository: 'https://github.com/test/plugin',
category: PluginCategoryEnum.tool,
install_count: 1000,
endpoint: { settings: [] },
tags: [{ name: 'search' }],
badges: [],
verification: { authorized_category: 'community' },
from: 'marketplace',
...overrides,
})
describe('getPluginIconInMarketplace', () => {
it('should return correct icon URL for regular plugin', async () => {
const { getPluginIconInMarketplace } = await import('./utils')
const plugin = createMockPlugin({ org: 'test-org', name: 'test-plugin', type: 'plugin' })
const iconUrl = getPluginIconInMarketplace(plugin)
expect(iconUrl).toBe('https://marketplace.dify.ai/api/v1/plugins/test-org/test-plugin/icon')
})
it('should return correct icon URL for bundle', async () => {
const { getPluginIconInMarketplace } = await import('./utils')
const bundle = createMockPlugin({ org: 'test-org', name: 'test-bundle', type: 'bundle' })
const iconUrl = getPluginIconInMarketplace(bundle)
expect(iconUrl).toBe('https://marketplace.dify.ai/api/v1/bundles/test-org/test-bundle/icon')
})
})
describe('getFormattedPlugin', () => {
it('should format plugin with icon URL', async () => {
const { getFormattedPlugin } = await import('./utils')
const rawPlugin = {
type: 'plugin',
org: 'test-org',
name: 'test-plugin',
tags: [{ name: 'search' }],
} as unknown as Plugin
const formatted = getFormattedPlugin(rawPlugin)
expect(formatted.icon).toBe('https://marketplace.dify.ai/api/v1/plugins/test-org/test-plugin/icon')
})
it('should format bundle with additional properties', async () => {
const { getFormattedPlugin } = await import('./utils')
const rawBundle = {
type: 'bundle',
org: 'test-org',
name: 'test-bundle',
description: 'Bundle description',
labels: { 'en-US': 'Test Bundle' },
} as unknown as Plugin
const formatted = getFormattedPlugin(rawBundle)
expect(formatted.icon).toBe('https://marketplace.dify.ai/api/v1/bundles/test-org/test-bundle/icon')
expect(formatted.brief).toBe('Bundle description')
expect(formatted.label).toEqual({ 'en-US': 'Test Bundle' })
})
})
describe('getPluginLinkInMarketplace', () => {
it('should return correct link for regular plugin', async () => {
const { getPluginLinkInMarketplace } = await import('./utils')
const plugin = createMockPlugin({ org: 'test-org', name: 'test-plugin', type: 'plugin' })
const link = getPluginLinkInMarketplace(plugin)
expect(link).toBe('https://marketplace.dify.ai/plugins/test-org/test-plugin')
})
it('should return correct link for bundle', async () => {
const { getPluginLinkInMarketplace } = await import('./utils')
const bundle = createMockPlugin({ org: 'test-org', name: 'test-bundle', type: 'bundle' })
const link = getPluginLinkInMarketplace(bundle)
expect(link).toBe('https://marketplace.dify.ai/bundles/test-org/test-bundle')
})
})
describe('getPluginDetailLinkInMarketplace', () => {
it('should return correct detail link for regular plugin', async () => {
const { getPluginDetailLinkInMarketplace } = await import('./utils')
const plugin = createMockPlugin({ org: 'test-org', name: 'test-plugin', type: 'plugin' })
const link = getPluginDetailLinkInMarketplace(plugin)
expect(link).toBe('/plugins/test-org/test-plugin')
})
it('should return correct detail link for bundle', async () => {
const { getPluginDetailLinkInMarketplace } = await import('./utils')
const bundle = createMockPlugin({ org: 'test-org', name: 'test-bundle', type: 'bundle' })
const link = getPluginDetailLinkInMarketplace(bundle)
expect(link).toBe('/bundles/test-org/test-bundle')
})
})
describe('getMarketplaceListCondition', () => {
it('should return category condition for tool', async () => {
const { getMarketplaceListCondition } = await import('./utils')
expect(getMarketplaceListCondition(PluginCategoryEnum.tool)).toBe('category=tool')
})
it('should return category condition for model', async () => {
const { getMarketplaceListCondition } = await import('./utils')
expect(getMarketplaceListCondition(PluginCategoryEnum.model)).toBe('category=model')
})
it('should return category condition for agent', async () => {
const { getMarketplaceListCondition } = await import('./utils')
expect(getMarketplaceListCondition(PluginCategoryEnum.agent)).toBe('category=agent-strategy')
})
it('should return category condition for datasource', async () => {
const { getMarketplaceListCondition } = await import('./utils')
expect(getMarketplaceListCondition(PluginCategoryEnum.datasource)).toBe('category=datasource')
})
it('should return category condition for trigger', async () => {
const { getMarketplaceListCondition } = await import('./utils')
expect(getMarketplaceListCondition(PluginCategoryEnum.trigger)).toBe('category=trigger')
})
it('should return endpoint category for extension', async () => {
const { getMarketplaceListCondition } = await import('./utils')
expect(getMarketplaceListCondition(PluginCategoryEnum.extension)).toBe('category=endpoint')
})
it('should return type condition for bundle', async () => {
const { getMarketplaceListCondition } = await import('./utils')
expect(getMarketplaceListCondition('bundle')).toBe('type=bundle')
})
it('should return empty string for all', async () => {
const { getMarketplaceListCondition } = await import('./utils')
expect(getMarketplaceListCondition('all')).toBe('')
})
it('should return empty string for unknown type', async () => {
const { getMarketplaceListCondition } = await import('./utils')
expect(getMarketplaceListCondition('unknown')).toBe('')
})
})
describe('getMarketplaceListFilterType', () => {
it('should return undefined for all', async () => {
const { getMarketplaceListFilterType } = await import('./utils')
expect(getMarketplaceListFilterType(PLUGIN_TYPE_SEARCH_MAP.all)).toBeUndefined()
})
it('should return bundle for bundle', async () => {
const { getMarketplaceListFilterType } = await import('./utils')
expect(getMarketplaceListFilterType(PLUGIN_TYPE_SEARCH_MAP.bundle)).toBe('bundle')
})
it('should return plugin for other categories', async () => {
const { getMarketplaceListFilterType } = await import('./utils')
expect(getMarketplaceListFilterType(PLUGIN_TYPE_SEARCH_MAP.tool)).toBe('plugin')
expect(getMarketplaceListFilterType(PLUGIN_TYPE_SEARCH_MAP.model)).toBe('plugin')
expect(getMarketplaceListFilterType(PLUGIN_TYPE_SEARCH_MAP.agent)).toBe('plugin')
})
})
describe('getMarketplacePluginsByCollectionId', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('should fetch plugins by collection id successfully', async () => {
const mockPlugins = [
{ type: 'plugin', org: 'test', name: 'plugin1', tags: [] },
{ type: 'plugin', org: 'test', name: 'plugin2', tags: [] },
]
mockCollectionPlugins.mockResolvedValueOnce({
data: { plugins: mockPlugins },
})
const { getMarketplacePluginsByCollectionId } = await import('./utils')
const result = await getMarketplacePluginsByCollectionId('test-collection', {
category: 'tool',
exclude: ['excluded-plugin'],
type: 'plugin',
})
expect(mockCollectionPlugins).toHaveBeenCalled()
expect(result).toHaveLength(2)
})
it('should handle fetch error and return empty array', async () => {
mockCollectionPlugins.mockRejectedValueOnce(new Error('Network error'))
const { getMarketplacePluginsByCollectionId } = await import('./utils')
const result = await getMarketplacePluginsByCollectionId('test-collection')
expect(result).toEqual([])
})
it('should pass abort signal when provided', async () => {
const mockPlugins = [{ type: 'plugin', org: 'test', name: 'plugin1' }]
mockCollectionPlugins.mockResolvedValueOnce({
data: { plugins: mockPlugins },
})
const controller = new AbortController()
const { getMarketplacePluginsByCollectionId } = await import('./utils')
await getMarketplacePluginsByCollectionId('test-collection', {}, { signal: controller.signal })
expect(mockCollectionPlugins).toHaveBeenCalled()
const call = mockCollectionPlugins.mock.calls[0]
expect(call[1]).toMatchObject({ signal: controller.signal })
})
})
describe('getMarketplaceCollectionsAndPlugins', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('should fetch collections and plugins successfully', async () => {
const mockCollectionData = [
{ name: 'collection1', label: {}, description: {}, rule: '', created_at: '', updated_at: '' },
]
const mockPluginData = [{ type: 'plugin', org: 'test', name: 'plugin1' }]
mockCollections.mockResolvedValueOnce({ data: { collections: mockCollectionData } })
mockCollectionPlugins.mockResolvedValue({ data: { plugins: mockPluginData } })
const { getMarketplaceCollectionsAndPlugins } = await import('./utils')
const result = await getMarketplaceCollectionsAndPlugins({
condition: 'category=tool',
type: 'plugin',
})
expect(result.marketplaceCollections).toBeDefined()
expect(result.marketplaceCollectionPluginsMap).toBeDefined()
})
it('should handle fetch error and return empty data', async () => {
mockCollections.mockRejectedValueOnce(new Error('Network error'))
const { getMarketplaceCollectionsAndPlugins } = await import('./utils')
const result = await getMarketplaceCollectionsAndPlugins()
expect(result.marketplaceCollections).toEqual([])
expect(result.marketplaceCollectionPluginsMap).toEqual({})
})
it('should append condition and type to URL when provided', async () => {
mockCollections.mockResolvedValueOnce({ data: { collections: [] } })
const { getMarketplaceCollectionsAndPlugins } = await import('./utils')
await getMarketplaceCollectionsAndPlugins({
condition: 'category=tool',
type: 'bundle',
})
expect(mockCollections).toHaveBeenCalled()
const call = mockCollections.mock.calls[0]
expect(call[0]).toMatchObject({ query: expect.objectContaining({ condition: 'category=tool', type: 'bundle' }) })
})
})
describe('getCollectionsParams', () => {
it('should return empty object for all category', async () => {
const { getCollectionsParams } = await import('./utils')
expect(getCollectionsParams(PLUGIN_TYPE_SEARCH_MAP.all)).toEqual({})
})
it('should return category, condition, and type for tool category', async () => {
const { getCollectionsParams } = await import('./utils')
const result = getCollectionsParams(PLUGIN_TYPE_SEARCH_MAP.tool)
expect(result).toEqual({
category: PluginCategoryEnum.tool,
condition: 'category=tool',
type: 'plugin',
})
})
})

24
web/app/components/plugins/plugin-auth/authorize/add-api-key-button.spec.tsx
View File

@ -3,7 +3,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { AuthCategory } from '../types'
import AddApiKeyButton from './add-api-key-button'
// Mock ApiKeyModal
let _mockModalOpen = false
vi.mock('./api-key-modal', () => ({
default: ({ onClose, onUpdate }: { onClose: () => void, onUpdate?: () => void }) => {
@ -17,19 +16,6 @@ vi.mock('./api-key-modal', () => ({
},
}))
vi.mock('@/app/components/base/button', () => ({
default: ({ children, onClick, disabled, variant }: {
children: React.ReactNode
onClick?: () => void
disabled?: boolean
variant?: string
}) => (
<button data-testid="button" data-variant={variant} onClick={onClick} disabled={disabled}>
{children}
</button>
),
}))
const defaultPayload = {
category: AuthCategory.tool,
provider: 'test-provider',
@ -47,7 +33,7 @@ describe('AddApiKeyButton', () => {
it('renders button with default text', () => {
render(<AddApiKeyButton pluginPayload={defaultPayload} />)
expect(screen.getByTestId('button')).toBeInTheDocument()
expect(screen.getByRole('button')).toBeInTheDocument()
})
it('renders button with custom text', () => {
@ -57,18 +43,18 @@ describe('AddApiKeyButton', () => {
it('opens modal when button is clicked', () => {
render(<AddApiKeyButton pluginPayload={defaultPayload} />)
fireEvent.click(screen.getByTestId('button'))
fireEvent.click(screen.getByRole('button'))
expect(screen.getByTestId('api-key-modal')).toBeInTheDocument()
})
it('respects disabled prop', () => {
render(<AddApiKeyButton pluginPayload={defaultPayload} disabled />)
expect(screen.getByTestId('button')).toBeDisabled()
expect(screen.getByRole('button')).toBeDisabled()
})
it('closes modal when onClose is called', () => {
render(<AddApiKeyButton pluginPayload={defaultPayload} />)
fireEvent.click(screen.getByTestId('button'))
fireEvent.click(screen.getByRole('button'))
expect(screen.getByTestId('api-key-modal')).toBeInTheDocument()
fireEvent.click(screen.getByTestId('modal-close'))
expect(screen.queryByTestId('api-key-modal')).not.toBeInTheDocument()
@ -76,6 +62,6 @@ describe('AddApiKeyButton', () => {
it('applies custom button variant', () => {
render(<AddApiKeyButton pluginPayload={defaultPayload} buttonVariant="primary" />)
expect(screen.getByTestId('button')).toHaveAttribute('data-variant', 'primary')
expect(screen.getByRole('button')).toBeInTheDocument()
})
})

18
web/app/components/plugins/plugin-auth/authorize/add-oauth-button.spec.tsx
View File

@ -3,7 +3,6 @@ import * as React from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { AuthCategory } from '../types'
// Mock dependencies
const mockGetPluginOAuthUrl = vi.fn().mockResolvedValue({ authorization_url: 'https://auth.example.com' })
const mockOpenOAuthPopup = vi.fn()
@ -37,7 +36,6 @@ vi.mock('../hooks/use-credential', () => ({
}),
}))
// Mock sub-components
vi.mock('./oauth-client-settings', () => ({
default: ({ onClose }: { onClose: () => void }) => (
<div data-testid="oauth-settings-modal">
@ -46,20 +44,6 @@ vi.mock('./oauth-client-settings', () => ({
),
}))
vi.mock('@/app/components/base/action-button', () => ({
default: ({ children, ...props }: { children: React.ReactNode, [key: string]: unknown }) => <button {...props}>{children}</button>,
}))
vi.mock('@/app/components/base/badge', () => ({
default: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
}))
vi.mock('@/app/components/base/button', () => ({
default: ({ children, onClick, disabled, ...props }: { children: React.ReactNode, onClick?: () => void, disabled?: boolean, [key: string]: unknown }) => (
<button onClick={onClick} disabled={disabled} {...props}>{children}</button>
),
}))
vi.mock('@/app/components/base/form/types', () => ({
FormTypeEnum: { radio: 'radio' },
}))
@ -114,12 +98,10 @@ describe('AddOAuthButton', () => {
it('should trigger OAuth flow on main button click', async () => {
render(<AddOAuthButton pluginPayload={basePayload} buttonText="Use OAuth" />)
// Find the left side of the button (the OAuth trigger part)
const button = screen.getByText('Use OAuth').closest('button')
if (button)
fireEvent.click(button)
// OAuth should be triggered via getPluginOAuthUrl
expect(mockGetPluginOAuthUrl).toHaveBeenCalled()
})

7
web/app/components/plugins/plugin-auth/authorize/api-key-modal.spec.tsx
View File

@ -4,7 +4,6 @@ import * as React from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { AuthCategory } from '../types'
// Mock dependencies
const mockNotify = vi.fn()
const mockAddPluginCredential = vi.fn().mockResolvedValue({})
const mockUpdatePluginCredential = vi.fn().mockResolvedValue({})
@ -49,11 +48,6 @@ vi.mock('@/app/components/base/encrypted-bottom', () => ({
EncryptedBottom: () => <div data-testid="encrypted-bottom" />,
}))
vi.mock('@/app/components/base/loading', () => ({
default: () => <div data-testid="loading" />,
}))
// Mock Modal to expose internal buttons for testing
vi.mock('@/app/components/base/modal/modal', () => ({
default: ({ children, title, onClose, onConfirm, onExtraButtonClick, showExtraButton, disabled }: {
children: React.ReactNode
@ -76,7 +70,6 @@ vi.mock('@/app/components/base/modal/modal', () => ({
),
}))
// Mock AuthForm with ref support
vi.mock('@/app/components/base/form/form-scenarios/auth', () => ({
default: React.forwardRef((_props: Record<string, unknown>, ref: React.Ref<unknown>) => {
React.useImperativeHandle(ref, () => ({

14
web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.spec.tsx
View File

@ -3,7 +3,6 @@ import * as React from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { AuthCategory } from '../types'
// Mock dependencies
const mockNotify = vi.fn()
const mockSetPluginOAuthCustomClient = vi.fn().mockResolvedValue({})
const mockDeletePluginOAuthCustomClient = vi.fn().mockResolvedValue({})
@ -40,13 +39,6 @@ vi.mock('../../readme-panel/store', () => ({
ReadmeShowType: { modal: 'modal' },
}))
vi.mock('@/app/components/base/button', () => ({
default: ({ children, onClick, disabled, ..._props }: { children: React.ReactNode, onClick?: () => void, disabled?: boolean, [key: string]: unknown }) => (
<button onClick={onClick} disabled={disabled} data-testid={`button-${typeof children === 'string' ? children : 'generic'}`}>{children}</button>
),
}))
// Mock Modal
vi.mock('@/app/components/base/modal/modal', () => ({
default: ({ children, title, onClose: _onClose, onConfirm, onCancel, onExtraButtonClick, footerSlot }: {
children: React.ReactNode
@ -69,7 +61,6 @@ vi.mock('@/app/components/base/modal/modal', () => ({
),
}))
// Mock AuthForm with ref support
vi.mock('@/app/components/base/form/form-scenarios/auth', () => ({
default: React.forwardRef((_props: Record<string, unknown>, ref: React.Ref<unknown>) => {
React.useImperativeHandle(ref, () => ({
@ -79,7 +70,6 @@ vi.mock('@/app/components/base/form/form-scenarios/auth', () => ({
}),
}))
// Mock @tanstack/react-form
vi.mock('@tanstack/react-form', () => ({
useForm: (config: Record<string, unknown>) => ({
store: { subscribe: vi.fn(), getState: () => ({ values: config.defaultValues || {} }) },
@ -95,8 +85,8 @@ const basePayload = {
}
const defaultSchemas = [
{ name: 'client_id', label: 'Client ID', type: 'text-input' as const, required: true },
]
{ name: 'client_id', label: 'Client ID', type: 'text-input', required: true },
] as never
describe('OAuthClientSettings', () => {
let OAuthClientSettings: (typeof import('./oauth-client-settings'))['default']

8
web/app/components/plugins/plugin-auth/authorized-in-data-source-node.spec.tsx
View File

@ -18,12 +18,6 @@ vi.mock('@remixicon/react', () => ({
RiEqualizer2Line: () => <span data-testid="equalizer-icon" />,
}))
vi.mock('@/app/components/base/button', () => ({
default: ({ children, onClick, size }: { children: React.ReactNode, onClick?: () => void, size?: string }) => (
<button data-testid="button" data-size={size} onClick={onClick}>{children}</button>
),
}))
vi.mock('@/app/components/header/indicator', () => ({
default: ({ color }: { color: string }) => <span data-testid="indicator" data-color={color} />,
}))
@ -56,7 +50,7 @@ describe('AuthorizedInDataSourceNode', () => {
it('calls onJumpToDataSourcePage when button is clicked', () => {
render(<AuthorizedInDataSourceNode authorizationsNum={1} onJumpToDataSourcePage={mockOnJump} />)
fireEvent.click(screen.getByTestId('button'))
fireEvent.click(screen.getByRole('button'))
expect(mockOnJump).toHaveBeenCalledTimes(1)
})

210
web/app/components/plugins/plugin-auth/authorized-in-node.spec.tsx Normal file
View File

@ -0,0 +1,210 @@
import type { ReactNode } from 'react'
import type { Credential, PluginPayload } from './types'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { AuthCategory, CredentialTypeEnum } from './types'
// ==================== Mock Setup ====================
const mockGetPluginCredentialInfo = vi.fn()
const mockGetPluginOAuthClientSchema = vi.fn()
vi.mock('@/service/use-plugins-auth', () => ({
useGetPluginCredentialInfo: (url: string) => ({
data: url ? mockGetPluginCredentialInfo() : undefined,
isLoading: false,
}),
useDeletePluginCredential: () => ({ mutateAsync: vi.fn() }),
useSetPluginDefaultCredential: () => ({ mutateAsync: vi.fn() }),
useUpdatePluginCredential: () => ({ mutateAsync: vi.fn() }),
useInvalidPluginCredentialInfo: () => vi.fn(),
useGetPluginOAuthUrl: () => ({ mutateAsync: vi.fn() }),
useGetPluginOAuthClientSchema: () => ({
data: mockGetPluginOAuthClientSchema(),
isLoading: false,
}),
useSetPluginOAuthCustomClient: () => ({ mutateAsync: vi.fn() }),
useDeletePluginOAuthCustomClient: () => ({ mutateAsync: vi.fn() }),
useInvalidPluginOAuthClientSchema: () => vi.fn(),
useAddPluginCredential: () => ({ mutateAsync: vi.fn() }),
useGetPluginCredentialSchema: () => ({ data: undefined, isLoading: false }),
}))
vi.mock('@/service/use-tools', () => ({
useInvalidToolsByType: () => vi.fn(),
}))
const mockIsCurrentWorkspaceManager = vi.fn()
vi.mock('@/context/app-context', () => ({
useAppContext: () => ({
isCurrentWorkspaceManager: mockIsCurrentWorkspaceManager(),
}),
}))
vi.mock('@/app/components/base/toast', () => ({
useToastContext: () => ({ notify: vi.fn() }),
}))
vi.mock('@/hooks/use-oauth', () => ({
openOAuthPopup: vi.fn(),
}))
vi.mock('@/service/use-triggers', () => ({
useTriggerPluginDynamicOptions: () => ({ data: { options: [] }, isLoading: false }),
useTriggerPluginDynamicOptionsInfo: () => ({ data: null, isLoading: false }),
useInvalidTriggerDynamicOptions: () => vi.fn(),
}))
// ==================== Test Utilities ====================
const createTestQueryClient = () =>
new QueryClient({
defaultOptions: {
queries: { retry: false, gcTime: 0 },
},
})
const createWrapper = () => {
const testQueryClient = createTestQueryClient()
return ({ children }: { children: ReactNode }) => (
<QueryClientProvider client={testQueryClient}>
{children}
</QueryClientProvider>
)
}
const createPluginPayload = (overrides: Partial<PluginPayload> = {}): PluginPayload => ({
category: AuthCategory.tool,
provider: 'test-provider',
...overrides,
})
const createCredential = (overrides: Partial<Credential> = {}): Credential => ({
id: 'test-credential-id',
name: 'Test Credential',
provider: 'test-provider',
credential_type: CredentialTypeEnum.API_KEY,
is_default: false,
credentials: { api_key: 'test-key' },
...overrides,
})
// ==================== Tests ====================
describe('AuthorizedInNode Component', () => {
beforeEach(() => {
vi.clearAllMocks()
mockIsCurrentWorkspaceManager.mockReturnValue(true)
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [createCredential({ is_default: true })],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
mockGetPluginOAuthClientSchema.mockReturnValue({
schema: [],
is_oauth_custom_client_enabled: false,
is_system_oauth_params_exists: false,
})
})
it('should render with workspace default when no credentialId', async () => {
const AuthorizedInNode = (await import('./authorized-in-node')).default
const pluginPayload = createPluginPayload()
render(
<AuthorizedInNode pluginPayload={pluginPayload} onAuthorizationItemClick={vi.fn()} />,
{ wrapper: createWrapper() },
)
expect(screen.getByText('plugin.auth.workspaceDefault')).toBeInTheDocument()
})
it('should render credential name when credentialId matches', async () => {
const AuthorizedInNode = (await import('./authorized-in-node')).default
const credential = createCredential({ id: 'selected-id', name: 'My Credential' })
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [credential],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
const pluginPayload = createPluginPayload()
render(
<AuthorizedInNode pluginPayload={pluginPayload} onAuthorizationItemClick={vi.fn()} credentialId="selected-id" />,
{ wrapper: createWrapper() },
)
expect(screen.getByText('My Credential')).toBeInTheDocument()
})
it('should show auth removed when credentialId not found', async () => {
const AuthorizedInNode = (await import('./authorized-in-node')).default
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [createCredential()],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
const pluginPayload = createPluginPayload()
render(
<AuthorizedInNode pluginPayload={pluginPayload} onAuthorizationItemClick={vi.fn()} credentialId="non-existent" />,
{ wrapper: createWrapper() },
)
expect(screen.getByText('plugin.auth.authRemoved')).toBeInTheDocument()
})
it('should show unavailable when credential is not allowed', async () => {
const AuthorizedInNode = (await import('./authorized-in-node')).default
const credential = createCredential({
id: 'unavailable-id',
not_allowed_to_use: true,
from_enterprise: false,
})
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [credential],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
const pluginPayload = createPluginPayload()
render(
<AuthorizedInNode pluginPayload={pluginPayload} onAuthorizationItemClick={vi.fn()} credentialId="unavailable-id" />,
{ wrapper: createWrapper() },
)
const button = screen.getByRole('button')
expect(button.textContent).toContain('plugin.auth.unavailable')
})
it('should show unavailable when default credential is not allowed', async () => {
const AuthorizedInNode = (await import('./authorized-in-node')).default
const credential = createCredential({
is_default: true,
not_allowed_to_use: true,
})
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [credential],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
const pluginPayload = createPluginPayload()
render(
<AuthorizedInNode pluginPayload={pluginPayload} onAuthorizationItemClick={vi.fn()} />,
{ wrapper: createWrapper() },
)
const button = screen.getByRole('button')
expect(button.textContent).toContain('plugin.auth.unavailable')
})
it('should call onAuthorizationItemClick when clicking', async () => {
const AuthorizedInNode = (await import('./authorized-in-node')).default
const onAuthorizationItemClick = vi.fn()
const pluginPayload = createPluginPayload()
render(
<AuthorizedInNode pluginPayload={pluginPayload} onAuthorizationItemClick={onAuthorizationItemClick} />,
{ wrapper: createWrapper() },
)
const buttons = screen.getAllByRole('button')
fireEvent.click(buttons[0])
expect(screen.getAllByRole('button').length).toBeGreaterThan(0)
})
it('should be memoized', async () => {
const AuthorizedInNodeModule = await import('./authorized-in-node')
expect(typeof AuthorizedInNodeModule.default).toBe('object')
})
})

6
web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.spec.ts
View File

@ -6,7 +6,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { usePluginAuthAction } from '../hooks/use-plugin-auth-action'
import { AuthCategory } from '../types'
// Mock dependencies
const mockDeletePluginCredential = vi.fn().mockResolvedValue({})
const mockSetPluginDefaultCredential = vi.fn().mockResolvedValue({})
const mockUpdatePluginCredential = vi.fn().mockResolvedValue({})
@ -98,7 +97,6 @@ describe('usePluginAuthAction', () => {
wrapper: createWrapper(),
})
// First set the pending credential via edit
act(() => {
result.current.handleEdit('cred-1', { key: 'value' })
})
@ -115,12 +113,10 @@ describe('usePluginAuthAction', () => {
wrapper: createWrapper(),
})
// Open confirm with credential ID
act(() => {
result.current.openConfirm('cred-1')
})
// Execute confirm
await act(async () => {
await result.current.handleConfirm()
})
@ -172,13 +168,11 @@ describe('usePluginAuthAction', () => {
wrapper: createWrapper(),
})
// Manually set doingAction
act(() => {
result.current.handleSetDoingAction(true)
})
expect(result.current.doingAction).toBe(true)
// Confirm should not proceed
act(() => {
result.current.openConfirm('cred-1')
})

1796
web/app/components/plugins/plugin-auth/index.spec.tsx
View File

File diff suppressed because it is too large Load Diff

255
web/app/components/plugins/plugin-auth/plugin-auth-in-agent.spec.tsx Normal file
View File

@ -0,0 +1,255 @@
import type { ReactNode } from 'react'
import type { Credential, PluginPayload } from './types'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { fireEvent, render, screen } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { AuthCategory, CredentialTypeEnum } from './types'
// ==================== Mock Setup ====================
const mockGetPluginCredentialInfo = vi.fn()
const mockGetPluginOAuthClientSchema = vi.fn()
vi.mock('@/service/use-plugins-auth', () => ({
useGetPluginCredentialInfo: (url: string) => ({
data: url ? mockGetPluginCredentialInfo() : undefined,
isLoading: false,
}),
useDeletePluginCredential: () => ({ mutateAsync: vi.fn() }),
useSetPluginDefaultCredential: () => ({ mutateAsync: vi.fn() }),
useUpdatePluginCredential: () => ({ mutateAsync: vi.fn() }),
useInvalidPluginCredentialInfo: () => vi.fn(),
useGetPluginOAuthUrl: () => ({ mutateAsync: vi.fn() }),
useGetPluginOAuthClientSchema: () => ({
data: mockGetPluginOAuthClientSchema(),
isLoading: false,
}),
useSetPluginOAuthCustomClient: () => ({ mutateAsync: vi.fn() }),
useDeletePluginOAuthCustomClient: () => ({ mutateAsync: vi.fn() }),
useInvalidPluginOAuthClientSchema: () => vi.fn(),
useAddPluginCredential: () => ({ mutateAsync: vi.fn() }),
useGetPluginCredentialSchema: () => ({ data: undefined, isLoading: false }),
}))
vi.mock('@/service/use-tools', () => ({
useInvalidToolsByType: () => vi.fn(),
}))
const mockIsCurrentWorkspaceManager = vi.fn()
vi.mock('@/context/app-context', () => ({
useAppContext: () => ({
isCurrentWorkspaceManager: mockIsCurrentWorkspaceManager(),
}),
}))
vi.mock('@/app/components/base/toast', () => ({
useToastContext: () => ({ notify: vi.fn() }),
}))
vi.mock('@/hooks/use-oauth', () => ({
openOAuthPopup: vi.fn(),
}))
vi.mock('@/service/use-triggers', () => ({
useTriggerPluginDynamicOptions: () => ({ data: { options: [] }, isLoading: false }),
useTriggerPluginDynamicOptionsInfo: () => ({ data: null, isLoading: false }),
useInvalidTriggerDynamicOptions: () => vi.fn(),
}))
// ==================== Test Utilities ====================
const createTestQueryClient = () =>
new QueryClient({
defaultOptions: {
queries: { retry: false, gcTime: 0 },
},
})
const createWrapper = () => {
const testQueryClient = createTestQueryClient()
return ({ children }: { children: ReactNode }) => (
<QueryClientProvider client={testQueryClient}>
{children}
</QueryClientProvider>
)
}
const createPluginPayload = (overrides: Partial<PluginPayload> = {}): PluginPayload => ({
category: AuthCategory.tool,
provider: 'test-provider',
...overrides,
})
const createCredential = (overrides: Partial<Credential> = {}): Credential => ({
id: 'test-credential-id',
name: 'Test Credential',
provider: 'test-provider',
credential_type: CredentialTypeEnum.API_KEY,
is_default: false,
credentials: { api_key: 'test-key' },
...overrides,
})
// ==================== Tests ====================
describe('PluginAuthInAgent Component', () => {
beforeEach(() => {
vi.clearAllMocks()
mockIsCurrentWorkspaceManager.mockReturnValue(true)
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [createCredential()],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
mockGetPluginOAuthClientSchema.mockReturnValue({
schema: [],
is_oauth_custom_client_enabled: false,
is_system_oauth_params_exists: false,
})
})
it('should render Authorize when not authorized', async () => {
const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
const pluginPayload = createPluginPayload()
render(
<PluginAuthInAgent pluginPayload={pluginPayload} />,
{ wrapper: createWrapper() },
)
expect(screen.getByRole('button')).toBeInTheDocument()
})
it('should render Authorized with workspace default when authorized', async () => {
const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
const pluginPayload = createPluginPayload()
render(
<PluginAuthInAgent pluginPayload={pluginPayload} />,
{ wrapper: createWrapper() },
)
expect(screen.getByRole('button')).toBeInTheDocument()
expect(screen.getByText('plugin.auth.workspaceDefault')).toBeInTheDocument()
})
it('should show credential name when credentialId is provided', async () => {
const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
const credential = createCredential({ id: 'selected-id', name: 'Selected Credential' })
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [credential],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
const pluginPayload = createPluginPayload()
render(
<PluginAuthInAgent pluginPayload={pluginPayload} credentialId="selected-id" />,
{ wrapper: createWrapper() },
)
expect(screen.getByText('Selected Credential')).toBeInTheDocument()
})
it('should show auth removed when credential not found', async () => {
const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [createCredential()],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
const pluginPayload = createPluginPayload()
render(
<PluginAuthInAgent pluginPayload={pluginPayload} credentialId="non-existent-id" />,
{ wrapper: createWrapper() },
)
expect(screen.getByText('plugin.auth.authRemoved')).toBeInTheDocument()
})
it('should show unavailable when credential is not allowed to use', async () => {
const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
const credential = createCredential({
id: 'unavailable-id',
name: 'Unavailable Credential',
not_allowed_to_use: true,
from_enterprise: false,
})
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [credential],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
const pluginPayload = createPluginPayload()
render(
<PluginAuthInAgent pluginPayload={pluginPayload} credentialId="unavailable-id" />,
{ wrapper: createWrapper() },
)
const button = screen.getByRole('button')
expect(button.textContent).toContain('plugin.auth.unavailable')
})
it('should call onAuthorizationItemClick when item is clicked', async () => {
const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
const onAuthorizationItemClick = vi.fn()
const pluginPayload = createPluginPayload()
render(
<PluginAuthInAgent pluginPayload={pluginPayload} onAuthorizationItemClick={onAuthorizationItemClick} />,
{ wrapper: createWrapper() },
)
const buttons = screen.getAllByRole('button')
fireEvent.click(buttons[0])
expect(screen.getAllByRole('button').length).toBeGreaterThan(0)
})
it('should trigger handleAuthorizationItemClick and close popup when item is clicked', async () => {
const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
const onAuthorizationItemClick = vi.fn()
const credential = createCredential({ id: 'test-cred-id', name: 'Test Credential' })
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [credential],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
const pluginPayload = createPluginPayload()
render(
<PluginAuthInAgent pluginPayload={pluginPayload} onAuthorizationItemClick={onAuthorizationItemClick} />,
{ wrapper: createWrapper() },
)
const triggerButton = screen.getByRole('button')
fireEvent.click(triggerButton)
const workspaceDefaultItems = screen.getAllByText('plugin.auth.workspaceDefault')
const popupItem = workspaceDefaultItems.length > 1 ? workspaceDefaultItems[1] : workspaceDefaultItems[0]
fireEvent.click(popupItem)
expect(onAuthorizationItemClick).toHaveBeenCalledWith('')
})
it('should call onAuthorizationItemClick with credential id when specific credential is clicked', async () => {
const PluginAuthInAgent = (await import('./plugin-auth-in-agent')).default
const onAuthorizationItemClick = vi.fn()
const credential = createCredential({
id: 'specific-cred-id',
name: 'Specific Credential',
credential_type: CredentialTypeEnum.API_KEY,
})
mockGetPluginCredentialInfo.mockReturnValue({
credentials: [credential],
supported_credential_types: [CredentialTypeEnum.API_KEY],
allow_custom_token: true,
})
const pluginPayload = createPluginPayload()
render(
<PluginAuthInAgent pluginPayload={pluginPayload} onAuthorizationItemClick={onAuthorizationItemClick} />,
{ wrapper: createWrapper() },
)
const triggerButton = screen.getByRole('button')
fireEvent.click(triggerButton)
const credentialItems = screen.getAllByText('Specific Credential')
const popupItem = credentialItems[credentialItems.length - 1]
fireEvent.click(popupItem)
expect(onAuthorizationItemClick).toHaveBeenCalledWith('specific-cred-id')
})
it('should be memoized', async () => {
const PluginAuthInAgentModule = await import('./plugin-auth-in-agent')
expect(typeof PluginAuthInAgentModule.default).toBe('object')
})
})

12
web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.spec.tsx
View File

@ -17,12 +17,6 @@ vi.mock('@remixicon/react', () => ({
RiAddLine: () => <span data-testid="add-icon" />,
}))
vi.mock('@/app/components/base/button', () => ({
default: ({ children, onClick, variant, className }: { children: React.ReactNode, onClick?: () => void, variant?: string, className?: string }) => (
<button data-testid="button" data-variant={variant} className={className} onClick={onClick}>{children}</button>
),
}))
describe('PluginAuthInDataSourceNode', () => {
const mockOnJump = vi.fn()
@ -40,14 +34,14 @@ describe('PluginAuthInDataSourceNode', () => {
expect(screen.getByTestId('add-icon')).toBeInTheDocument()
})
it('renders connect button with primary variant', () => {
it('renders connect button', () => {
render(<PluginAuthInDataSourceNode onJumpToDataSourcePage={mockOnJump} />)
expect(screen.getByTestId('button')).toHaveAttribute('data-variant', 'primary')
expect(screen.getByRole('button', { name: /Connect/ })).toBeInTheDocument()
})
it('calls onJumpToDataSourcePage when connect button is clicked', () => {
render(<PluginAuthInDataSourceNode onJumpToDataSourcePage={mockOnJump} />)
fireEvent.click(screen.getByTestId('button'))
fireEvent.click(screen.getByRole('button', { name: /Connect/ }))
expect(mockOnJump).toHaveBeenCalledTimes(1)
})

2
web/app/components/plugins/plugin-auth/plugin-auth.spec.tsx
View File

@ -3,13 +3,11 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import PluginAuth from './plugin-auth'
import { AuthCategory } from './types'
// Mock usePluginAuth hook
const mockUsePluginAuth = vi.fn()
vi.mock('./hooks/use-plugin-auth', () => ({
usePluginAuth: (...args: unknown[]) => mockUsePluginAuth(...args),
}))
// Mock Authorize and Authorized components
vi.mock('./authorize', () => ({
default: ({ pluginPayload }: { pluginPayload: { provider: string } }) => (
<div data-testid="authorize">

10
web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.spec.tsx
View File

@ -21,16 +21,6 @@ vi.mock('@remixicon/react', () => ({
RiArrowRightUpLine: () => <span data-testid="icon-arrow" />,
}))
vi.mock('@/app/components/base/button', () => ({
default: ({ children, onClick, variant }: { children: React.ReactNode, onClick?: () => void, variant?: string }) => (
<button onClick={onClick} data-variant={variant}>{children}</button>
),
}))
vi.mock('@/app/components/base/loading', () => ({
default: () => <div data-testid="loading" />,
}))
vi.mock('@/app/components/base/toast', () => ({
default: { notify: vi.fn() },
useToastContext: () => ({ notify: vi.fn() }),

1
web/app/components/plugins/plugin-detail-panel/tool-selector/hooks/use-tool-selector-state.spec.ts
View File

@ -4,7 +4,6 @@ import { act, renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useToolSelectorState } from './use-tool-selector-state'
// Mock tool data
const mockToolParams = [
{ name: 'param1', form: 'llm', type: 'string', required: true, label: { en_US: 'Param 1' } },
{ name: 'param2', form: 'form', type: 'number', required: false, label: { en_US: 'Param 2' } },

19
web/app/components/plugins/plugin-page/filter-management/category-filter.spec.tsx
View File

@ -13,23 +13,8 @@ vi.mock('@remixicon/react', () => ({
RiCloseCircleFill: ({ onClick }: { onClick?: (e: React.MouseEvent) => void }) => (
<span data-testid="icon-clear" onClick={onClick} />
),
}))
vi.mock('@/app/components/base/checkbox', () => ({
default: ({ checked }: { checked: boolean }) => (
<input type="checkbox" data-testid="checkbox" checked={checked} readOnly />
),
}))
vi.mock('@/app/components/base/input', () => ({
default: ({ value, onChange, placeholder }: {
value: string
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
placeholder: string
[key: string]: unknown
}) => (
<input data-testid="search-input" value={value} onChange={onChange} placeholder={placeholder} />
),
RiSearchLine: () => <span data-testid="icon-search" />,
RiCheckLine: () => <span data-testid="icon-check" />,
}))
vi.mock('@/app/components/base/portal-to-follow-elem', () => ({

22
web/app/components/plugins/plugin-page/filter-management/search-box.spec.tsx
View File

@ -8,22 +8,6 @@ vi.mock('react-i18next', () => ({
}),
}))
vi.mock('@/app/components/base/input', () => ({
default: ({ value, onChange, placeholder }: {
value: string
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
placeholder: string
[key: string]: unknown
}) => (
<input
data-testid="search-input"
value={value}
onChange={onChange}
placeholder={placeholder}
/>
),
}))
describe('SearchBox', () => {
let SearchBox: (typeof import('./search-box'))['default']
@ -36,20 +20,20 @@ describe('SearchBox', () => {
it('should render input with placeholder', () => {
render(<SearchBox searchQuery="" onChange={vi.fn()} />)
expect(screen.getByTestId('search-input')).toHaveAttribute('placeholder', 'search')
expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'search')
})
it('should display current search query', () => {
render(<SearchBox searchQuery="test query" onChange={vi.fn()} />)
expect(screen.getByTestId('search-input')).toHaveValue('test query')
expect(screen.getByRole('textbox')).toHaveValue('test query')
})
it('should call onChange when input changes', () => {
const mockOnChange = vi.fn()
render(<SearchBox searchQuery="" onChange={mockOnChange} />)
fireEvent.change(screen.getByTestId('search-input'), { target: { value: 'new query' } })
fireEvent.change(screen.getByRole('textbox'), { target: { value: 'new query' } })
expect(mockOnChange).toHaveBeenCalledWith('new query')
})
})

20
web/app/components/plugins/readme-panel/constants.spec.ts Normal file
View File

@ -0,0 +1,20 @@
import { describe, expect, it } from 'vitest'
import { BUILTIN_TOOLS_ARRAY } from './constants'
describe('BUILTIN_TOOLS_ARRAY', () => {
it('should contain expected builtin tools', () => {
expect(BUILTIN_TOOLS_ARRAY).toContain('code')
expect(BUILTIN_TOOLS_ARRAY).toContain('audio')
expect(BUILTIN_TOOLS_ARRAY).toContain('time')
expect(BUILTIN_TOOLS_ARRAY).toContain('webscraper')
})
it('should have exactly 4 builtin tools', () => {
expect(BUILTIN_TOOLS_ARRAY).toHaveLength(4)
})
it('should be an array of strings', () => {
for (const tool of BUILTIN_TOOLS_ARRAY)
expect(typeof tool).toBe('string')
})
})

287
web/app/components/plugins/readme-panel/index.spec.tsx
View File

@ -3,7 +3,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { PluginCategoryEnum, PluginSource } from '../types'
import { BUILTIN_TOOLS_ARRAY } from './constants'
import { ReadmeEntrance } from './entrance'
import ReadmePanel from './index'
import { ReadmeShowType, useReadmePanelStore } from './store'
@ -115,289 +114,9 @@ const renderWithQueryClient = (ui: React.ReactElement) => {
)
}
// ================================
// Constants Tests
// ================================
describe('BUILTIN_TOOLS_ARRAY', () => {
it('should contain expected builtin tools', () => {
expect(BUILTIN_TOOLS_ARRAY).toContain('code')
expect(BUILTIN_TOOLS_ARRAY).toContain('audio')
expect(BUILTIN_TOOLS_ARRAY).toContain('time')
expect(BUILTIN_TOOLS_ARRAY).toContain('webscraper')
})
it('should have exactly 4 builtin tools', () => {
expect(BUILTIN_TOOLS_ARRAY).toHaveLength(4)
})
})
// ================================
// Store Tests
// ================================
describe('useReadmePanelStore', () => {
describe('Initial State', () => {
it('should have undefined currentPluginDetail initially', () => {
const { currentPluginDetail } = useReadmePanelStore.getState()
expect(currentPluginDetail).toBeUndefined()
})
})
describe('setCurrentPluginDetail', () => {
it('should set currentPluginDetail with detail and default showType', () => {
const mockDetail = createMockPluginDetail()
const { setCurrentPluginDetail } = useReadmePanelStore.getState()
act(() => {
setCurrentPluginDetail(mockDetail)
})
const { currentPluginDetail } = useReadmePanelStore.getState()
expect(currentPluginDetail).toEqual({
detail: mockDetail,
showType: ReadmeShowType.drawer,
})
})
it('should set currentPluginDetail with custom showType', () => {
const mockDetail = createMockPluginDetail()
const { setCurrentPluginDetail } = useReadmePanelStore.getState()
act(() => {
setCurrentPluginDetail(mockDetail, ReadmeShowType.modal)
})
const { currentPluginDetail } = useReadmePanelStore.getState()
expect(currentPluginDetail).toEqual({
detail: mockDetail,
showType: ReadmeShowType.modal,
})
})
it('should clear currentPluginDetail when called without arguments', () => {
const mockDetail = createMockPluginDetail()
const { setCurrentPluginDetail } = useReadmePanelStore.getState()
// First set a detail
act(() => {
setCurrentPluginDetail(mockDetail)
})
// Then clear it
act(() => {
setCurrentPluginDetail()
})
const { currentPluginDetail } = useReadmePanelStore.getState()
expect(currentPluginDetail).toBeUndefined()
})
it('should clear currentPluginDetail when called with undefined', () => {
const mockDetail = createMockPluginDetail()
const { setCurrentPluginDetail } = useReadmePanelStore.getState()
// First set a detail
act(() => {
setCurrentPluginDetail(mockDetail)
})
// Then clear it with explicit undefined
act(() => {
setCurrentPluginDetail(undefined)
})
const { currentPluginDetail } = useReadmePanelStore.getState()
expect(currentPluginDetail).toBeUndefined()
})
})
describe('ReadmeShowType enum', () => {
it('should have drawer and modal types', () => {
expect(ReadmeShowType.drawer).toBe('drawer')
expect(ReadmeShowType.modal).toBe('modal')
})
})
})
// ================================
// ReadmeEntrance Component Tests
// ================================
describe('ReadmeEntrance', () => {
// ================================
// Rendering Tests
// ================================
describe('Rendering', () => {
it('should render the entrance button with full tip text', () => {
const mockDetail = createMockPluginDetail()
render(<ReadmeEntrance pluginDetail={mockDetail} />)
expect(screen.getByRole('button')).toBeInTheDocument()
expect(screen.getByText('plugin.readmeInfo.needHelpCheckReadme')).toBeInTheDocument()
})
it('should render with short tip text when showShortTip is true', () => {
const mockDetail = createMockPluginDetail()
render(<ReadmeEntrance pluginDetail={mockDetail} showShortTip />)
expect(screen.getByText('plugin.readmeInfo.title')).toBeInTheDocument()
})
it('should render divider when showShortTip is false', () => {
const mockDetail = createMockPluginDetail()
const { container } = render(<ReadmeEntrance pluginDetail={mockDetail} showShortTip={false} />)
expect(container.querySelector('.bg-divider-regular')).toBeInTheDocument()
})
it('should not render divider when showShortTip is true', () => {
const mockDetail = createMockPluginDetail()
const { container } = render(<ReadmeEntrance pluginDetail={mockDetail} showShortTip />)
expect(container.querySelector('.bg-divider-regular')).not.toBeInTheDocument()
})
it('should apply drawer mode padding class', () => {
const mockDetail = createMockPluginDetail()
const { container } = render(
<ReadmeEntrance pluginDetail={mockDetail} showType={ReadmeShowType.drawer} />,
)
expect(container.querySelector('.px-4')).toBeInTheDocument()
})
it('should apply custom className', () => {
const mockDetail = createMockPluginDetail()
const { container } = render(
<ReadmeEntrance pluginDetail={mockDetail} className="custom-class" />,
)
expect(container.querySelector('.custom-class')).toBeInTheDocument()
})
})
// ================================
// Conditional Rendering / Edge Cases
// ================================
describe('Conditional Rendering', () => {
it('should return null when pluginDetail is null/undefined', () => {
const { container } = render(<ReadmeEntrance pluginDetail={null as unknown as PluginDetail} />)
expect(container.firstChild).toBeNull()
})
it('should return null when plugin_unique_identifier is missing', () => {
const mockDetail = createMockPluginDetail({ plugin_unique_identifier: '' })
const { container } = render(<ReadmeEntrance pluginDetail={mockDetail} />)
expect(container.firstChild).toBeNull()
})
it('should return null for builtin tool: code', () => {
const mockDetail = createMockPluginDetail({ id: 'code' })
const { container } = render(<ReadmeEntrance pluginDetail={mockDetail} />)
expect(container.firstChild).toBeNull()
})
it('should return null for builtin tool: audio', () => {
const mockDetail = createMockPluginDetail({ id: 'audio' })
const { container } = render(<ReadmeEntrance pluginDetail={mockDetail} />)
expect(container.firstChild).toBeNull()
})
it('should return null for builtin tool: time', () => {
const mockDetail = createMockPluginDetail({ id: 'time' })
const { container } = render(<ReadmeEntrance pluginDetail={mockDetail} />)
expect(container.firstChild).toBeNull()
})
it('should return null for builtin tool: webscraper', () => {
const mockDetail = createMockPluginDetail({ id: 'webscraper' })
const { container } = render(<ReadmeEntrance pluginDetail={mockDetail} />)
expect(container.firstChild).toBeNull()
})
it('should render for non-builtin plugins', () => {
const mockDetail = createMockPluginDetail({ id: 'custom-plugin' })
render(<ReadmeEntrance pluginDetail={mockDetail} />)
expect(screen.getByRole('button')).toBeInTheDocument()
})
})
// ================================
// User Interactions / Event Handlers
// ================================
describe('User Interactions', () => {
it('should call setCurrentPluginDetail with drawer type when clicked', () => {
const mockDetail = createMockPluginDetail()
render(<ReadmeEntrance pluginDetail={mockDetail} />)
fireEvent.click(screen.getByRole('button'))
const { currentPluginDetail } = useReadmePanelStore.getState()
expect(currentPluginDetail).toEqual({
detail: mockDetail,
showType: ReadmeShowType.drawer,
})
})
it('should call setCurrentPluginDetail with modal type when clicked', () => {
const mockDetail = createMockPluginDetail()
render(<ReadmeEntrance pluginDetail={mockDetail} showType={ReadmeShowType.modal} />)
fireEvent.click(screen.getByRole('button'))
const { currentPluginDetail } = useReadmePanelStore.getState()
expect(currentPluginDetail).toEqual({
detail: mockDetail,
showType: ReadmeShowType.modal,
})
})
})
// ================================
// Prop Variations
// ================================
describe('Prop Variations', () => {
it('should use default showType when not provided', () => {
const mockDetail = createMockPluginDetail()
render(<ReadmeEntrance pluginDetail={mockDetail} />)
fireEvent.click(screen.getByRole('button'))
const { currentPluginDetail } = useReadmePanelStore.getState()
expect(currentPluginDetail?.showType).toBe(ReadmeShowType.drawer)
})
it('should handle modal showType correctly', () => {
const mockDetail = createMockPluginDetail()
render(<ReadmeEntrance pluginDetail={mockDetail} showType={ReadmeShowType.modal} />)
// Modal mode should not have px-4 class
const container = screen.getByRole('button').parentElement
expect(container).not.toHaveClass('px-4')
})
})
})
// Constants (BUILTIN_TOOLS_ARRAY) tests moved to constants.spec.ts
// Store (useReadmePanelStore) tests moved to store.spec.ts
// Entrance (ReadmeEntrance) tests moved to entrance.spec.tsx
// ================================
// ReadmePanel Component Tests

149
web/app/components/plugins/reference-setting-modal/index.spec.tsx
View File

@ -6,7 +6,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import { PermissionType } from '@/app/components/plugins/types'
import { AUTO_UPDATE_MODE, AUTO_UPDATE_STRATEGY } from './auto-update-setting/types'
import ReferenceSettingModal from './index'
import Label from './label'
// ================================
// Mock External Dependencies Only
@ -156,153 +155,7 @@ describe('reference-setting-modal', () => {
mockSystemFeatures.enable_marketplace = true
})
// ============================================================
// Label Component Tests
// ============================================================
describe('Label (label.tsx)', () => {
describe('Rendering', () => {
it('should render label text', () => {
// Arrange & Act
render(<Label label="Test Label" />)
// Assert
expect(screen.getByText('Test Label')).toBeInTheDocument()
})
it('should render with label only when no description provided', () => {
// Arrange & Act
const { container } = render(<Label label="Simple Label" />)
// Assert
expect(screen.getByText('Simple Label')).toBeInTheDocument()
// Should have h-6 class when no description
expect(container.querySelector('.h-6')).toBeInTheDocument()
})
it('should render label and description when both provided', () => {
// Arrange & Act
render(<Label label="Label Text" description="Description Text" />)
// Assert
expect(screen.getByText('Label Text')).toBeInTheDocument()
expect(screen.getByText('Description Text')).toBeInTheDocument()
})
it('should apply h-4 class to label container when description is provided', () => {
// Arrange & Act
const { container } = render(<Label label="Label" description="Has description" />)
// Assert
expect(container.querySelector('.h-4')).toBeInTheDocument()
})
it('should not render description element when description is undefined', () => {
// Arrange & Act
const { container } = render(<Label label="Only Label" />)
// Assert
expect(container.querySelectorAll('.body-xs-regular')).toHaveLength(0)
})
it('should render description with correct styling', () => {
// Arrange & Act
const { container } = render(<Label label="Label" description="Styled Description" />)
// Assert
const descriptionElement = container.querySelector('.body-xs-regular')
expect(descriptionElement).toBeInTheDocument()
expect(descriptionElement).toHaveClass('mt-1', 'text-text-tertiary')
})
})
describe('Props Variations', () => {
it('should handle empty label string', () => {
// Arrange & Act
const { container } = render(<Label label="" />)
// Assert - should render without crashing
expect(container.firstChild).toBeInTheDocument()
})
it('should handle empty description string', () => {
// Arrange & Act
render(<Label label="Label" description="" />)
// Assert - empty description still renders the description container
expect(screen.getByText('Label')).toBeInTheDocument()
})
it('should handle long label text', () => {
// Arrange
const longLabel = 'A'.repeat(200)
// Act
render(<Label label={longLabel} />)
// Assert
expect(screen.getByText(longLabel)).toBeInTheDocument()
})
it('should handle long description text', () => {
// Arrange
const longDescription = 'B'.repeat(500)
// Act
render(<Label label="Label" description={longDescription} />)
// Assert
expect(screen.getByText(longDescription)).toBeInTheDocument()
})
it('should handle special characters in label', () => {
// Arrange
const specialLabel = '<script>alert("xss")</script>'
// Act
render(<Label label={specialLabel} />)
// Assert - should be escaped
expect(screen.getByText(specialLabel)).toBeInTheDocument()
})
it('should handle special characters in description', () => {
// Arrange
const specialDescription = '!@#$%^&*()_+-=[]{}|;:,.<>?'
// Act
render(<Label label="Label" description={specialDescription} />)
// Assert
expect(screen.getByText(specialDescription)).toBeInTheDocument()
})
})
describe('Component Memoization', () => {
it('should be memoized with React.memo', () => {
// Assert
expect(Label).toBeDefined()
expect((Label as any).$$typeof?.toString()).toContain('Symbol')
})
})
describe('Styling', () => {
it('should apply system-sm-semibold class to label', () => {
// Arrange & Act
const { container } = render(<Label label="Styled Label" />)
// Assert
expect(container.querySelector('.system-sm-semibold')).toBeInTheDocument()
})
it('should apply text-text-secondary class to label', () => {
// Arrange & Act
const { container } = render(<Label label="Styled Label" />)
// Assert
expect(container.querySelector('.text-text-secondary')).toBeInTheDocument()
})
})
})
// Label component tests moved to label.spec.tsx
// ============================================================
// ReferenceSettingModal (PluginSettingModal) Component Tests

97
web/app/components/plugins/reference-setting-modal/label.spec.tsx Normal file
View File

@ -0,0 +1,97 @@
import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import Label from './label'
describe('Label', () => {
describe('Rendering', () => {
it('should render label text', () => {
render(<Label label="Test Label" />)
expect(screen.getByText('Test Label')).toBeInTheDocument()
})
it('should render with label only when no description provided', () => {
const { container } = render(<Label label="Simple Label" />)
expect(screen.getByText('Simple Label')).toBeInTheDocument()
expect(container.querySelector('.h-6')).toBeInTheDocument()
})
it('should render label and description when both provided', () => {
render(<Label label="Label Text" description="Description Text" />)
expect(screen.getByText('Label Text')).toBeInTheDocument()
expect(screen.getByText('Description Text')).toBeInTheDocument()
})
it('should apply h-4 class to label container when description is provided', () => {
const { container } = render(<Label label="Label" description="Has description" />)
expect(container.querySelector('.h-4')).toBeInTheDocument()
})
it('should not render description element when description is undefined', () => {
const { container } = render(<Label label="Only Label" />)
expect(container.querySelectorAll('.body-xs-regular')).toHaveLength(0)
})
it('should render description with correct styling', () => {
const { container } = render(<Label label="Label" description="Styled Description" />)
const descriptionElement = container.querySelector('.body-xs-regular')
expect(descriptionElement).toBeInTheDocument()
expect(descriptionElement).toHaveClass('mt-1', 'text-text-tertiary')
})
})
describe('Props Variations', () => {
it('should handle empty label string', () => {
const { container } = render(<Label label="" />)
expect(container.firstChild).toBeInTheDocument()
})
it('should handle empty description string', () => {
render(<Label label="Label" description="" />)
expect(screen.getByText('Label')).toBeInTheDocument()
})
it('should handle long label text', () => {
const longLabel = 'A'.repeat(200)
render(<Label label={longLabel} />)
expect(screen.getByText(longLabel)).toBeInTheDocument()
})
it('should handle long description text', () => {
const longDescription = 'B'.repeat(500)
render(<Label label="Label" description={longDescription} />)
expect(screen.getByText(longDescription)).toBeInTheDocument()
})
it('should handle special characters in label', () => {
const specialLabel = '<script>alert("xss")</script>'
render(<Label label={specialLabel} />)
expect(screen.getByText(specialLabel)).toBeInTheDocument()
})
it('should handle special characters in description', () => {
const specialDescription = '!@#$%^&*()_+-=[]{}|;:,.<>?'
render(<Label label="Label" description={specialDescription} />)
expect(screen.getByText(specialDescription)).toBeInTheDocument()
})
})
describe('Component Memoization', () => {
it('should be memoized with React.memo', () => {
expect(Label).toBeDefined()
// eslint-disable-next-line ts/no-explicit-any
expect((Label as any).$$typeof?.toString()).toContain('Symbol')
})
})
describe('Styling', () => {
it('should apply system-sm-semibold class to label', () => {
const { container } = render(<Label label="Styled Label" />)
expect(container.querySelector('.system-sm-semibold')).toBeInTheDocument()
})
it('should apply text-text-secondary class to label', () => {
const { container } = render(<Label label="Styled Label" />)
expect(container.querySelector('.text-text-secondary')).toBeInTheDocument()
})
})
})

16
web/app/components/plugins/update-plugin/downgrade-warning.spec.tsx
View File

@ -17,22 +17,6 @@ vi.mock('react-i18next', () => ({
}),
}))
vi.mock('@/app/components/base/button', () => ({
default: ({ children, onClick, variant, destructive }: {
children: React.ReactNode
onClick?: () => void
variant?: string
destructive?: boolean
}) => (
<button
data-testid={`btn-${variant}${destructive ? '-destructive' : ''}`}
onClick={onClick}
>
{children}
</button>
),
}))
describe('DowngradeWarningModal', () => {
const mockOnCancel = vi.fn()
const mockOnJustDowngrade = vi.fn()

2
web/app/components/plugins/utils.spec.ts
View File

@ -4,7 +4,6 @@ import { PluginCategoryEnum } from './types'
import { getValidCategoryKeys, getValidTagKeys } from './utils'
describe('plugins/utils', () => {
// ─── getValidTagKeys ──────────────────────────────────────────────
describe('getValidTagKeys', () => {
it('returns only valid tag keys from the predefined set', () => {
const input = ['agent', 'rag', 'invalid-tag', 'search'] as TagKey[]
@ -28,7 +27,6 @@ describe('plugins/utils', () => {
})
})
// ─── getValidCategoryKeys ─────────────────────────────────────────
describe('getValidCategoryKeys', () => {
it('returns matching category for valid key', () => {
expect(getValidCategoryKeys(PluginCategoryEnum.model)).toBe(PluginCategoryEnum.model)

205
web/app/components/tools/marketplace/hooks.spec.ts Normal file
View File

@ -0,0 +1,205 @@
import type { Plugin } from '@/app/components/plugins/types'
import type { Collection } from '@/app/components/tools/types'
import { act, renderHook, waitFor } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { SCROLL_BOTTOM_THRESHOLD } from '@/app/components/plugins/marketplace/constants'
import { getMarketplaceListCondition } from '@/app/components/plugins/marketplace/utils'
import { PluginCategoryEnum } from '@/app/components/plugins/types'
import { CollectionType } from '@/app/components/tools/types'
import { useMarketplace } from './hooks'
// ==================== Mock Setup ====================
const mockQueryMarketplaceCollectionsAndPlugins = vi.fn()
const mockQueryPlugins = vi.fn()
const mockQueryPluginsWithDebounced = vi.fn()
const mockResetPlugins = vi.fn()
const mockFetchNextPage = vi.fn()
const mockUseMarketplaceCollectionsAndPlugins = vi.fn()
const mockUseMarketplacePlugins = vi.fn()
vi.mock('@/app/components/plugins/marketplace/hooks', () => ({
useMarketplaceCollectionsAndPlugins: (...args: unknown[]) => mockUseMarketplaceCollectionsAndPlugins(...args),
useMarketplacePlugins: (...args: unknown[]) => mockUseMarketplacePlugins(...args),
}))
const mockUseAllToolProviders = vi.fn()
vi.mock('@/service/use-tools', () => ({
useAllToolProviders: (...args: unknown[]) => mockUseAllToolProviders(...args),
}))
vi.mock('@/utils/var', () => ({
getMarketplaceUrl: vi.fn(() => 'https://marketplace.test/market'),
}))
vi.mock('next-themes', () => ({
useTheme: () => ({ theme: 'light' }),
}))
// ==================== Test Utilities ====================
const createToolProvider = (overrides: Partial<Collection> = {}): Collection => ({
id: 'provider-1',
name: 'Provider 1',
author: 'Author',
description: { en_US: 'desc', zh_Hans: '描述' },
icon: 'icon',
label: { en_US: 'label', zh_Hans: '标签' },
type: CollectionType.custom,
team_credentials: {},
is_team_authorization: false,
allow_delete: false,
labels: [],
...overrides,
})
const setupHookMocks = (overrides?: {
isLoading?: boolean
isPluginsLoading?: boolean
pluginsPage?: number
hasNextPage?: boolean
plugins?: Plugin[] | undefined
}) => {
mockUseMarketplaceCollectionsAndPlugins.mockReturnValue({
isLoading: overrides?.isLoading ?? false,
marketplaceCollections: [],
marketplaceCollectionPluginsMap: {},
queryMarketplaceCollectionsAndPlugins: mockQueryMarketplaceCollectionsAndPlugins,
})
mockUseMarketplacePlugins.mockReturnValue({
plugins: overrides?.plugins,
resetPlugins: mockResetPlugins,
queryPlugins: mockQueryPlugins,
queryPluginsWithDebounced: mockQueryPluginsWithDebounced,
isLoading: overrides?.isPluginsLoading ?? false,
fetchNextPage: mockFetchNextPage,
hasNextPage: overrides?.hasNextPage ?? false,
page: overrides?.pluginsPage,
})
}
// ==================== Tests ====================
describe('useMarketplace', () => {
beforeEach(() => {
vi.clearAllMocks()
mockUseAllToolProviders.mockReturnValue({
data: [],
isSuccess: true,
})
setupHookMocks()
})
describe('Queries', () => {
it('should query plugins with debounce when search text is provided', async () => {
mockUseAllToolProviders.mockReturnValue({
data: [
createToolProvider({ plugin_id: 'plugin-a' }),
createToolProvider({ plugin_id: undefined }),
],
isSuccess: true,
})
renderHook(() => useMarketplace('alpha', []))
await waitFor(() => {
expect(mockQueryPluginsWithDebounced).toHaveBeenCalledWith({
category: PluginCategoryEnum.tool,
query: 'alpha',
tags: [],
exclude: ['plugin-a'],
type: 'plugin',
})
})
expect(mockQueryMarketplaceCollectionsAndPlugins).not.toHaveBeenCalled()
expect(mockResetPlugins).not.toHaveBeenCalled()
})
it('should query plugins immediately when only tags are provided', async () => {
mockUseAllToolProviders.mockReturnValue({
data: [createToolProvider({ plugin_id: 'plugin-b' })],
isSuccess: true,
})
renderHook(() => useMarketplace('', ['tag-1']))
await waitFor(() => {
expect(mockQueryPlugins).toHaveBeenCalledWith({
category: PluginCategoryEnum.tool,
query: '',
tags: ['tag-1'],
exclude: ['plugin-b'],
type: 'plugin',
})
})
})
it('should query collections and reset plugins when no filters are provided', async () => {
mockUseAllToolProviders.mockReturnValue({
data: [createToolProvider({ plugin_id: 'plugin-c' })],
isSuccess: true,
})
renderHook(() => useMarketplace('', []))
await waitFor(() => {
expect(mockQueryMarketplaceCollectionsAndPlugins).toHaveBeenCalledWith({
category: PluginCategoryEnum.tool,
condition: getMarketplaceListCondition(PluginCategoryEnum.tool),
exclude: ['plugin-c'],
type: 'plugin',
})
})
expect(mockResetPlugins).toHaveBeenCalledTimes(1)
})
})
describe('State', () => {
it('should expose combined loading state and fallback page value', () => {
setupHookMocks({ isLoading: true, isPluginsLoading: false, pluginsPage: undefined })
const { result } = renderHook(() => useMarketplace('', []))
expect(result.current.isLoading).toBe(true)
expect(result.current.page).toBe(1)
})
})
describe('Scroll', () => {
it('should fetch next page when scrolling near bottom with filters', () => {
setupHookMocks({ hasNextPage: true })
const { result } = renderHook(() => useMarketplace('search', []))
const event = {
target: {
scrollTop: 100,
scrollHeight: 200,
clientHeight: 100 + SCROLL_BOTTOM_THRESHOLD,
},
} as unknown as Event
act(() => {
result.current.handleScroll(event)
})
expect(mockFetchNextPage).toHaveBeenCalledTimes(1)
})
it('should not fetch next page when no filters are applied', () => {
setupHookMocks({ hasNextPage: true })
const { result } = renderHook(() => useMarketplace('', []))
const event = {
target: {
scrollTop: 100,
scrollHeight: 200,
clientHeight: 100 + SCROLL_BOTTOM_THRESHOLD,
},
} as unknown as Event
act(() => {
result.current.handleScroll(event)
})
expect(mockFetchNextPage).not.toHaveBeenCalled()
})
})
})

184
web/app/components/tools/marketplace/index.spec.tsx
View File

@ -1,14 +1,12 @@
import type { useMarketplace } from './hooks'
import type { Plugin } from '@/app/components/plugins/types'
import type { Collection } from '@/app/components/tools/types'
import { act, render, renderHook, screen, waitFor } from '@testing-library/react'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'
import { SCROLL_BOTTOM_THRESHOLD } from '@/app/components/plugins/marketplace/constants'
import { getMarketplaceListCondition } from '@/app/components/plugins/marketplace/utils'
import { PluginCategoryEnum } from '@/app/components/plugins/types'
import { CollectionType } from '@/app/components/tools/types'
import { getMarketplaceUrl } from '@/utils/var'
import { useMarketplace } from './hooks'
import Marketplace from './index'
@ -47,7 +45,7 @@ vi.mock('next-themes', () => ({
const mockGetMarketplaceUrl = vi.mocked(getMarketplaceUrl)
const createToolProvider = (overrides: Partial<Collection> = {}): Collection => ({
const _createToolProvider = (overrides: Partial<Collection> = {}): Collection => ({
id: 'provider-1',
name: 'Provider 1',
author: 'Author',
@ -183,178 +181,4 @@ describe('Marketplace', () => {
})
})
describe('useMarketplace', () => {
const mockQueryMarketplaceCollectionsAndPlugins = vi.fn()
const mockQueryPlugins = vi.fn()
const mockQueryPluginsWithDebounced = vi.fn()
const mockResetPlugins = vi.fn()
const mockFetchNextPage = vi.fn()
const setupHookMocks = (overrides?: {
isLoading?: boolean
isPluginsLoading?: boolean
pluginsPage?: number
hasNextPage?: boolean
plugins?: Plugin[] | undefined
}) => {
mockUseMarketplaceCollectionsAndPlugins.mockReturnValue({
isLoading: overrides?.isLoading ?? false,
marketplaceCollections: [],
marketplaceCollectionPluginsMap: {},
queryMarketplaceCollectionsAndPlugins: mockQueryMarketplaceCollectionsAndPlugins,
})
mockUseMarketplacePlugins.mockReturnValue({
plugins: overrides?.plugins,
resetPlugins: mockResetPlugins,
queryPlugins: mockQueryPlugins,
queryPluginsWithDebounced: mockQueryPluginsWithDebounced,
isLoading: overrides?.isPluginsLoading ?? false,
fetchNextPage: mockFetchNextPage,
hasNextPage: overrides?.hasNextPage ?? false,
page: overrides?.pluginsPage,
})
}
beforeEach(() => {
vi.clearAllMocks()
mockUseAllToolProviders.mockReturnValue({
data: [],
isSuccess: true,
})
setupHookMocks()
})
// Query behavior driven by search filters and provider exclusions.
describe('Queries', () => {
it('should query plugins with debounce when search text is provided', async () => {
// Arrange
mockUseAllToolProviders.mockReturnValue({
data: [
createToolProvider({ plugin_id: 'plugin-a' }),
createToolProvider({ plugin_id: undefined }),
],
isSuccess: true,
})
// Act
renderHook(() => useMarketplace('alpha', []))
// Assert
await waitFor(() => {
expect(mockQueryPluginsWithDebounced).toHaveBeenCalledWith({
category: PluginCategoryEnum.tool,
query: 'alpha',
tags: [],
exclude: ['plugin-a'],
type: 'plugin',
})
})
expect(mockQueryMarketplaceCollectionsAndPlugins).not.toHaveBeenCalled()
expect(mockResetPlugins).not.toHaveBeenCalled()
})
it('should query plugins immediately when only tags are provided', async () => {
// Arrange
mockUseAllToolProviders.mockReturnValue({
data: [createToolProvider({ plugin_id: 'plugin-b' })],
isSuccess: true,
})
// Act
renderHook(() => useMarketplace('', ['tag-1']))
// Assert
await waitFor(() => {
expect(mockQueryPlugins).toHaveBeenCalledWith({
category: PluginCategoryEnum.tool,
query: '',
tags: ['tag-1'],
exclude: ['plugin-b'],
type: 'plugin',
})
})
})
it('should query collections and reset plugins when no filters are provided', async () => {
// Arrange
mockUseAllToolProviders.mockReturnValue({
data: [createToolProvider({ plugin_id: 'plugin-c' })],
isSuccess: true,
})
// Act
renderHook(() => useMarketplace('', []))
// Assert
await waitFor(() => {
expect(mockQueryMarketplaceCollectionsAndPlugins).toHaveBeenCalledWith({
category: PluginCategoryEnum.tool,
condition: getMarketplaceListCondition(PluginCategoryEnum.tool),
exclude: ['plugin-c'],
type: 'plugin',
})
})
expect(mockResetPlugins).toHaveBeenCalledTimes(1)
})
})
// State derived from hook inputs and loading signals.
describe('State', () => {
it('should expose combined loading state and fallback page value', () => {
// Arrange
setupHookMocks({ isLoading: true, isPluginsLoading: false, pluginsPage: undefined })
// Act
const { result } = renderHook(() => useMarketplace('', []))
// Assert
expect(result.current.isLoading).toBe(true)
expect(result.current.page).toBe(1)
})
})
// Scroll handling that triggers pagination when appropriate.
describe('Scroll', () => {
it('should fetch next page when scrolling near bottom with filters', () => {
// Arrange
setupHookMocks({ hasNextPage: true })
const { result } = renderHook(() => useMarketplace('search', []))
const event = {
target: {
scrollTop: 100,
scrollHeight: 200,
clientHeight: 100 + SCROLL_BOTTOM_THRESHOLD,
},
} as unknown as Event
// Act
act(() => {
result.current.handleScroll(event)
})
// Assert
expect(mockFetchNextPage).toHaveBeenCalledTimes(1)
})
it('should not fetch next page when no filters are applied', () => {
// Arrange
setupHookMocks({ hasNextPage: true })
const { result } = renderHook(() => useMarketplace('', []))
const event = {
target: {
scrollTop: 100,
scrollHeight: 200,
clientHeight: 100 + SCROLL_BOTTOM_THRESHOLD,
},
} as unknown as Event
// Act
act(() => {
result.current.handleScroll(event)
})
// Assert
expect(mockFetchNextPage).not.toHaveBeenCalled()
})
})
})
// useMarketplace hook tests moved to hooks.spec.ts

38
web/app/components/tools/provider-list.spec.tsx
View File

@ -2,7 +2,6 @@ import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import ProviderList from './provider-list'
// Mock i18n
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
@ -17,7 +16,6 @@ vi.mock('react-i18next', () => ({
}),
}))
// Mock nuqs for tab state
let mockActiveTab = 'builtin'
const mockSetActiveTab = vi.fn((val: string) => {
mockActiveTab = val
@ -26,7 +24,6 @@ vi.mock('nuqs', () => ({
useQueryState: () => [mockActiveTab, mockSetActiveTab],
}))
// Mock useTags
vi.mock('@/app/components/plugins/hooks', () => ({
useTags: () => ({
tags: [],
@ -35,12 +32,10 @@ vi.mock('@/app/components/plugins/hooks', () => ({
}),
}))
// Mock global public store
vi.mock('@/context/global-public-context', () => ({
useGlobalPublicStore: () => ({ enable_marketplace: false }),
}))
// Sample collection data
const mockCollections = [
{
id: 'builtin-1',
@ -96,29 +91,6 @@ vi.mock('@/service/use-plugins', () => ({
useInvalidateInstalledPluginList: () => vi.fn(),
}))
// Mock child components
vi.mock('@/app/components/base/input', () => ({
default: ({ value, onChange, onClear, showLeftIcon: _showLeftIcon, showClearIcon }: {
value: string
onChange: (e: { target: { value: string } }) => void
onClear: () => void
showLeftIcon?: boolean
showClearIcon?: boolean
}) => (
<div>
<input
data-testid="search-input"
value={value}
onChange={onChange}
placeholder="Search"
/>
{showClearIcon && value && (
<button data-testid="clear-search" onClick={onClear}>Clear</button>
)}
</div>
),
}))
vi.mock('@/app/components/base/tab-slider-new', () => ({
default: ({ value, onChange, options }: {
value: string
@ -220,7 +192,6 @@ describe('ProviderList', () => {
cleanup()
})
// ─── Tab Navigation ───────────────────────────────────────────────
describe('Tab Navigation', () => {
it('renders all four tabs', () => {
render(<ProviderList />)
@ -237,7 +208,6 @@ describe('ProviderList', () => {
})
})
// ─── Filtering ────────────────────────────────────────────────────
describe('Filtering', () => {
it('shows only builtin collections by default', () => {
render(<ProviderList />)
@ -247,7 +217,7 @@ describe('ProviderList', () => {
it('filters by search keyword', () => {
render(<ProviderList />)
const input = screen.getByTestId('search-input')
const input = screen.getByRole('textbox')
fireEvent.change(input, { target: { value: 'nonexistent' } })
expect(screen.queryByTestId('card-google-search')).not.toBeInTheDocument()
})
@ -259,11 +229,10 @@ describe('ProviderList', () => {
it('renders search input', () => {
render(<ProviderList />)
expect(screen.getByTestId('search-input')).toBeInTheDocument()
expect(screen.getByRole('textbox')).toBeInTheDocument()
})
})
// ─── Custom Tab ───────────────────────────────────────────────────
describe('Custom Tab', () => {
it('shows custom create card when on api tab', () => {
mockActiveTab = 'api'
@ -272,7 +241,6 @@ describe('ProviderList', () => {
})
})
// ─── Workflow Tab ─────────────────────────────────────────────────
describe('Workflow Tab', () => {
it('shows empty state when no workflow collections', () => {
mockActiveTab = 'workflow'
@ -282,7 +250,6 @@ describe('ProviderList', () => {
})
})
// ─── MCP Tab ──────────────────────────────────────────────────────
describe('MCP Tab', () => {
it('renders MCPList component', () => {
mockActiveTab = 'mcp'
@ -291,7 +258,6 @@ describe('ProviderList', () => {
})
})
// ─── Provider Detail ──────────────────────────────────────────────
describe('Provider Detail', () => {
it('opens provider detail when a non-plugin collection is clicked', () => {
render(<ProviderList />)

33
web/app/components/tools/provider/detail.spec.tsx
View File

@ -4,7 +4,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { CollectionType } from '../types'
import ProviderDetail from './detail'
// Mock i18n
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string, opts?: Record<string, unknown>) => {
@ -36,7 +35,6 @@ vi.mock('@/i18n-config/language', () => ({
getLanguage: () => 'en_US',
}))
// Mock contexts
const mockIsCurrentWorkspaceManager = vi.fn(() => true)
vi.mock('@/context/app-context', () => ({
useAppContext: () => ({
@ -59,7 +57,6 @@ vi.mock('@/context/provider-context', () => ({
}),
}))
// Mock service
const mockFetchBuiltInToolList = vi.fn().mockResolvedValue([])
const mockFetchCustomToolList = vi.fn().mockResolvedValue([])
const mockFetchModelToolList = vi.fn().mockResolvedValue([])
@ -100,24 +97,11 @@ vi.mock('@/utils/var', () => ({
basePath: '',
}))
// Mock child components
vi.mock('@/app/components/base/drawer', () => ({
default: ({ children, isOpen }: { children: React.ReactNode, isOpen: boolean }) =>
isOpen ? <div data-testid="drawer">{children}</div> : null,
}))
vi.mock('@/app/components/base/action-button', () => ({
default: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
<button data-testid="action-button" onClick={onClick}>{children}</button>
),
}))
vi.mock('@/app/components/base/button', () => ({
default: ({ children, onClick, disabled, variant }: { children: React.ReactNode, onClick?: () => void, disabled?: boolean, variant?: string }) => (
<button data-testid={`button-${variant || 'default'}`} onClick={onClick} disabled={disabled}>{children}</button>
),
}))
vi.mock('@/app/components/base/confirm', () => ({
default: ({ isShow, onConfirm, onCancel, title }: { isShow: boolean, onConfirm: () => void, onCancel: () => void, title: string }) =>
isShow
@ -131,10 +115,6 @@ vi.mock('@/app/components/base/confirm', () => ({
: null,
}))
vi.mock('@/app/components/base/loading', () => ({
default: () => <div data-testid="loading">Loading...</div>,
}))
vi.mock('@/app/components/base/toast', () => ({
default: { notify: vi.fn() },
}))
@ -193,7 +173,6 @@ vi.mock('@/app/components/tools/workflow-tool', () => ({
),
}))
// Shared mock collection factory
const createMockCollection = (overrides?: Partial<Collection>): Collection => ({
id: 'test-id',
name: 'test-collection',
@ -227,7 +206,6 @@ describe('ProviderDetail', () => {
cleanup()
})
// ─── Rendering Tests ──────────────────────────────────────────────
describe('Rendering', () => {
it('renders title, org info and description for a builtIn collection', async () => {
render(
@ -250,7 +228,7 @@ describe('ProviderDetail', () => {
onRefreshData={mockOnRefreshData}
/>,
)
expect(screen.getByTestId('loading')).toBeInTheDocument()
expect(screen.getByRole('status')).toBeInTheDocument()
})
it('renders tool list after loading for builtIn type', async () => {
@ -279,7 +257,6 @@ describe('ProviderDetail', () => {
})
})
// ─── BuiltIn Collection Auth ──────────────────────────────────────
describe('BuiltIn Collection Auth', () => {
it('shows "Set up credentials" button when not authorized and allow_delete', async () => {
render(
@ -308,7 +285,6 @@ describe('ProviderDetail', () => {
})
})
// ─── Custom Collection ────────────────────────────────────────────
describe('Custom Collection', () => {
it('fetches custom collection and shows edit button', async () => {
mockFetchCustomCollection.mockResolvedValue({
@ -330,7 +306,6 @@ describe('ProviderDetail', () => {
})
})
// ─── Workflow Collection ──────────────────────────────────────────
describe('Workflow Collection', () => {
it('fetches workflow tool detail and shows workflow buttons', async () => {
render(
@ -350,7 +325,6 @@ describe('ProviderDetail', () => {
})
})
// ─── Model Collection ─────────────────────────────────────────────
describe('Model Collection', () => {
it('opens model modal when clicking auth button for model type', async () => {
mockFetchModelToolList.mockResolvedValue([
@ -376,7 +350,6 @@ describe('ProviderDetail', () => {
})
})
// ─── Close Action ─────────────────────────────────────────────────
describe('Close Action', () => {
it('calls onHide when close button is clicked', () => {
render(
@ -386,12 +359,12 @@ describe('ProviderDetail', () => {
onRefreshData={mockOnRefreshData}
/>,
)
fireEvent.click(screen.getByTestId('action-button'))
const buttons = screen.getAllByRole('button')
fireEvent.click(buttons[0])
expect(mockOnHide).toHaveBeenCalled()
})
})
// ─── Fetch by Type ────────────────────────────────────────────────
describe('API calls by collection type', () => {
it('calls fetchBuiltInToolList for builtIn type', async () => {
render(

28
web/app/components/tools/setting/build-in/config-credentials.spec.tsx
View File

@ -2,7 +2,6 @@ import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/re
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import ConfigCredential from './config-credentials'
// Mock i18n
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string, opts?: Record<string, unknown>) => {
@ -25,7 +24,6 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', ()
useLanguage: () => 'en_US',
}))
// Mock services
const mockFetchCredentialSchema = vi.fn()
const mockFetchCredentialValue = vi.fn()
@ -34,7 +32,6 @@ vi.mock('@/service/tools', () => ({
fetchBuiltInToolCredential: (...args: unknown[]) => mockFetchCredentialValue(...args),
}))
// Mock to-form-schema utils
vi.mock('../../utils/to-form-schema', () => ({
toolCredentialToFormSchemas: (schemas: unknown[]) => (schemas as Record<string, unknown>[]).map(s => ({
...s,
@ -44,7 +41,6 @@ vi.mock('../../utils/to-form-schema', () => ({
addDefaultValue: (value: Record<string, unknown>, _schemas: unknown[]) => ({ ...value }),
}))
// Mock child components
vi.mock('@/app/components/base/drawer-plus', () => ({
default: ({ body, title, onHide }: { body: React.ReactNode, title: string, onHide: () => void }) => (
<div data-testid="drawer">
@ -55,28 +51,6 @@ vi.mock('@/app/components/base/drawer-plus', () => ({
),
}))
vi.mock('@/app/components/base/loading', () => ({
default: () => <div data-testid="loading">Loading...</div>,
}))
vi.mock('@/app/components/base/button', () => ({
default: ({ children, onClick, disabled, loading, variant }: {
children: React.ReactNode
onClick?: () => void
disabled?: boolean
loading?: boolean
variant?: string
}) => (
<button
data-testid={`btn-${variant || 'default'}`}
onClick={onClick}
disabled={disabled || loading}
>
{children}
</button>
),
}))
vi.mock('@/app/components/base/toast', () => ({
default: { notify: vi.fn() },
}))
@ -133,7 +107,7 @@ describe('ConfigCredential', () => {
onSaved={mockOnSaved}
/>,
)
expect(screen.getByTestId('loading')).toBeInTheDocument()
expect(screen.getByRole('status')).toBeInTheDocument()
await waitFor(() => {
expect(screen.getByTestId('form')).toBeInTheDocument()

2
web/app/components/tools/utils/index.spec.ts
View File

@ -4,7 +4,6 @@ import { describe, expect, it } from 'vitest'
import { addFileInfos, sortAgentSorts } from './index'
describe('tools/utils', () => {
// ─── sortAgentSorts ───────────────────────────────────────────────
describe('sortAgentSorts', () => {
it('returns null/undefined input as-is', () => {
expect(sortAgentSorts(null as unknown as ThoughtItem[])).toBeNull()
@ -41,7 +40,6 @@ describe('tools/utils', () => {
})
})
// ─── addFileInfos ────────────────────────────────────────────────
describe('addFileInfos', () => {
it('returns null/undefined input as-is', () => {
expect(addFileInfos(null as unknown as ThoughtItem[], [])).toBeNull()

10
web/app/components/tools/utils/to-form-schema.spec.ts
View File

@ -15,7 +15,6 @@ import {
} from './to-form-schema'
describe('to-form-schema utilities', () => {
// ─── toType ────────────────────────────────────────────────────────
describe('toType', () => {
it('converts "string" to "text-input"', () => {
expect(toType('string')).toBe('text-input')
@ -36,7 +35,6 @@ describe('to-form-schema utilities', () => {
})
})
// ─── triggerEventParametersToFormSchemas ────────────────────────────
describe('triggerEventParametersToFormSchemas', () => {
it('returns empty array for null/undefined parameters', () => {
expect(triggerEventParametersToFormSchemas(null as unknown as TriggerEventParameter[])).toEqual([])
@ -79,7 +77,6 @@ describe('to-form-schema utilities', () => {
})
})
// ─── toolParametersToFormSchemas ───────────────────────────────────
describe('toolParametersToFormSchemas', () => {
it('returns empty array for null parameters', () => {
expect(toolParametersToFormSchemas(null as unknown as ToolParameter[])).toEqual([])
@ -151,7 +148,6 @@ describe('to-form-schema utilities', () => {
})
})
// ─── toolCredentialToFormSchemas ───────────────────────────────────
describe('toolCredentialToFormSchemas', () => {
it('returns empty array for null parameters', () => {
expect(toolCredentialToFormSchemas(null as unknown as ToolCredential[])).toEqual([])
@ -215,7 +211,6 @@ describe('to-form-schema utilities', () => {
})
})
// ─── addDefaultValue ──────────────────────────────────────────────
describe('addDefaultValue', () => {
it('fills in default when value is empty/null/undefined', () => {
const schemas = [
@ -261,7 +256,6 @@ describe('to-form-schema utilities', () => {
})
})
// ─── generateFormValue ────────────────────────────────────────────
describe('generateFormValue', () => {
it('generates constant-type value wrapper for defaults', () => {
const schemas = [{ variable: 'name', type: 'text-input', default: 'hello' }]
@ -300,7 +294,6 @@ describe('to-form-schema utilities', () => {
})
})
// ─── getPlainValue ────────────────────────────────────────────────
describe('getPlainValue', () => {
it('unwraps { value: ... } structure to plain values', () => {
const input = {
@ -317,7 +310,6 @@ describe('to-form-schema utilities', () => {
})
})
// ─── getStructureValue ────────────────────────────────────────────
describe('getStructureValue', () => {
it('wraps plain values into { value: ... } structure', () => {
const input = { a: 'hello', b: 42 }
@ -330,7 +322,6 @@ describe('to-form-schema utilities', () => {
})
})
// ─── getConfiguredValue ───────────────────────────────────────────
describe('getConfiguredValue', () => {
it('fills defaults with correctInitialData for missing values', () => {
const schemas = [{ variable: 'name', type: 'text-input', default: 'hello' }]
@ -368,7 +359,6 @@ describe('to-form-schema utilities', () => {
})
})
// ─── generateAgentToolValue ───────────────────────────────────────
describe('generateAgentToolValue', () => {
it('generates constant-type values in non-reasoning mode', () => {
const schemas = [{ variable: 'name', type: 'text-input', default: 'hello' }]

2
web/eslint-suppressions.json
View File

@ -5447,7 +5447,7 @@
},
"app/components/plugins/reference-setting-modal/index.spec.tsx": {
"ts/no-explicit-any": {
"count": 7
"count": 6
}
},
"app/components/plugins/reference-setting-modal/index.tsx": {