mirror of
https://github.com/langgenius/dify.git
synced 2026-05-04 09:28:04 +08:00
test: add comprehensive tests for plugin authentication components (#30094)
Co-authored-by: CodingOnStar <hanxujiang@dify.ai>
This commit is contained in:
Coding On Star
GitHub
583
web/app/components/plugins/plugin-page/empty/index.spec.tsx
Normal file
583
web/app/components/plugins/plugin-page/empty/index.spec.tsx
Normal file
@ -0,0 +1,583 @@
|
||||
import type { FilterState } from '../filter-management'
|
||||
import type { SystemFeatures } from '@/types/feature'
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { defaultSystemFeatures, InstallationScope } from '@/types/feature'
|
||||
|
||||
// ==================== Imports (after mocks) ====================
|
||||
|
||||
import Empty from './index'
|
||||
|
||||
// ==================== Mock Setup ====================
|
||||
|
||||
// Use vi.hoisted to define ALL mock state and functions
|
||||
const {
|
||||
mockSetActiveTab,
|
||||
mockUseInstalledPluginList,
|
||||
mockState,
|
||||
stableT,
|
||||
} = vi.hoisted(() => {
|
||||
const state = {
|
||||
filters: {
|
||||
categories: [] as string[],
|
||||
tags: [] as string[],
|
||||
searchQuery: '',
|
||||
} as FilterState,
|
||||
systemFeatures: {
|
||||
enable_marketplace: true,
|
||||
plugin_installation_permission: {
|
||||
plugin_installation_scope: 'all' as const,
|
||||
restrict_to_marketplace_only: false,
|
||||
},
|
||||
} as Partial<SystemFeatures>,
|
||||
pluginList: { plugins: [] as Array<{ id: string }> } as { plugins: Array<{ id: string }> } | undefined,
|
||||
}
|
||||
// Stable t function to prevent infinite re-renders
|
||||
// The component's useEffect and useMemo depend on t
|
||||
const t = (key: string) => key
|
||||
return {
|
||||
mockSetActiveTab: vi.fn(),
|
||||
mockUseInstalledPluginList: vi.fn(() => ({ data: state.pluginList })),
|
||||
mockState: state,
|
||||
stableT: t,
|
||||
}
|
||||
})
|
||||
|
||||
// Mock plugin page context
|
||||
vi.mock('../context', () => ({
|
||||
usePluginPageContext: (selector: (value: any) => any) => {
|
||||
const contextValue = {
|
||||
filters: mockState.filters,
|
||||
setActiveTab: mockSetActiveTab,
|
||||
}
|
||||
return selector(contextValue)
|
||||
},
|
||||
}))
|
||||
|
||||
// Mock global public store (Zustand store)
|
||||
vi.mock('@/context/global-public-context', () => ({
|
||||
useGlobalPublicStore: (selector: (state: any) => any) => {
|
||||
return selector({
|
||||
systemFeatures: {
|
||||
...defaultSystemFeatures,
|
||||
...mockState.systemFeatures,
|
||||
},
|
||||
})
|
||||
},
|
||||
}))
|
||||
|
||||
// Mock useInstalledPluginList hook
|
||||
vi.mock('@/service/use-plugins', () => ({
|
||||
useInstalledPluginList: () => mockUseInstalledPluginList(),
|
||||
}))
|
||||
|
||||
// Mock InstallFromGitHub component
|
||||
vi.mock('@/app/components/plugins/install-plugin/install-from-github', () => ({
|
||||
default: ({ onClose }: { onSuccess: () => void, onClose: () => void }) => (
|
||||
<div data-testid="install-from-github-modal">
|
||||
<button data-testid="github-modal-close" onClick={onClose}>Close</button>
|
||||
<button data-testid="github-modal-success">Success</button>
|
||||
</div>
|
||||
),
|
||||
}))
|
||||
|
||||
// Mock InstallFromLocalPackage component
|
||||
vi.mock('@/app/components/plugins/install-plugin/install-from-local-package', () => ({
|
||||
default: ({ file, onClose }: { file: File, onSuccess: () => void, onClose: () => void }) => (
|
||||
<div data-testid="install-from-local-modal" data-file-name={file.name}>
|
||||
<button data-testid="local-modal-close" onClick={onClose}>Close</button>
|
||||
<button data-testid="local-modal-success">Success</button>
|
||||
</div>
|
||||
),
|
||||
}))
|
||||
|
||||
// Mock Line component
|
||||
vi.mock('../../marketplace/empty/line', () => ({
|
||||
default: ({ className }: { className?: string }) => <div data-testid="line-component" className={className} />,
|
||||
}))
|
||||
|
||||
// Override react-i18next with stable t function reference to prevent infinite re-renders
|
||||
// The component's useEffect and useMemo depend on t, so it MUST be stable
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: stableT,
|
||||
i18n: {
|
||||
language: 'en',
|
||||
changeLanguage: vi.fn(),
|
||||
},
|
||||
}),
|
||||
}))
|
||||
|
||||
// ==================== Test Utilities ====================
|
||||
|
||||
const resetMockState = () => {
|
||||
mockState.filters = { categories: [], tags: [], searchQuery: '' }
|
||||
mockState.systemFeatures = {
|
||||
enable_marketplace: true,
|
||||
plugin_installation_permission: {
|
||||
plugin_installation_scope: InstallationScope.ALL,
|
||||
restrict_to_marketplace_only: false,
|
||||
},
|
||||
}
|
||||
mockState.pluginList = { plugins: [] }
|
||||
mockUseInstalledPluginList.mockReturnValue({ data: mockState.pluginList })
|
||||
}
|
||||
|
||||
const setMockFilters = (filters: Partial<FilterState>) => {
|
||||
mockState.filters = { ...mockState.filters, ...filters }
|
||||
}
|
||||
|
||||
const setMockSystemFeatures = (features: Partial<SystemFeatures>) => {
|
||||
mockState.systemFeatures = { ...mockState.systemFeatures, ...features }
|
||||
}
|
||||
|
||||
const setMockPluginList = (list: { plugins: Array<{ id: string }> } | undefined) => {
|
||||
mockState.pluginList = list
|
||||
mockUseInstalledPluginList.mockReturnValue({ data: list })
|
||||
}
|
||||
|
||||
const createMockFile = (name: string, type = 'application/octet-stream'): File => {
|
||||
return new File(['test'], name, { type })
|
||||
}
|
||||
|
||||
// Helper to wait for useEffect to complete (single tick)
|
||||
const flushEffects = async () => {
|
||||
await act(async () => {})
|
||||
}
|
||||
|
||||
// ==================== Tests ====================
|
||||
|
||||
describe('Empty Component', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
resetMockState()
|
||||
})
|
||||
|
||||
// ==================== Rendering Tests ====================
|
||||
describe('Rendering', () => {
|
||||
it('should render basic structure correctly', async () => {
|
||||
// Arrange & Act
|
||||
const { container } = render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Assert - file input
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement
|
||||
expect(fileInput).toBeInTheDocument()
|
||||
expect(fileInput.style.display).toBe('none')
|
||||
expect(fileInput.accept).toBe('.difypkg,.difybndl')
|
||||
|
||||
// Assert - skeleton cards (20 in the grid + 1 icon container)
|
||||
const skeletonCards = container.querySelectorAll('.rounded-xl.bg-components-card-bg')
|
||||
expect(skeletonCards.length).toBeGreaterThanOrEqual(20)
|
||||
|
||||
// Assert - group icon container
|
||||
const iconContainer = document.querySelector('.size-14')
|
||||
expect(iconContainer).toBeInTheDocument()
|
||||
|
||||
// Assert - line components
|
||||
const lines = screen.getAllByTestId('line-component')
|
||||
expect(lines).toHaveLength(4)
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Text Display Tests (useMemo) ====================
|
||||
describe('Text Display (useMemo)', () => {
|
||||
it('should display "noInstalled" text when plugin list is empty', async () => {
|
||||
// Arrange
|
||||
setMockPluginList({ plugins: [] })
|
||||
|
||||
// Act
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('list.noInstalled')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should display "notFound" text when filters are active with plugins', async () => {
|
||||
// Arrange
|
||||
setMockPluginList({ plugins: [{ id: 'plugin-1' }] })
|
||||
|
||||
// Test categories filter
|
||||
setMockFilters({ categories: ['model'] })
|
||||
const { rerender } = render(<Empty />)
|
||||
await flushEffects()
|
||||
expect(screen.getByText('list.notFound')).toBeInTheDocument()
|
||||
|
||||
// Test tags filter
|
||||
setMockFilters({ categories: [], tags: ['tag1'] })
|
||||
rerender(<Empty />)
|
||||
await flushEffects()
|
||||
expect(screen.getByText('list.notFound')).toBeInTheDocument()
|
||||
|
||||
// Test searchQuery filter
|
||||
setMockFilters({ tags: [], searchQuery: 'test query' })
|
||||
rerender(<Empty />)
|
||||
await flushEffects()
|
||||
expect(screen.getByText('list.notFound')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should prioritize "noInstalled" over "notFound" when no plugins exist', async () => {
|
||||
// Arrange
|
||||
setMockFilters({ categories: ['model'], searchQuery: 'test' })
|
||||
setMockPluginList({ plugins: [] })
|
||||
|
||||
// Act
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('list.noInstalled')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Install Methods Tests (useEffect) ====================
|
||||
describe('Install Methods (useEffect)', () => {
|
||||
it('should render all three install methods when marketplace enabled and not restricted', async () => {
|
||||
// Arrange
|
||||
setMockSystemFeatures({
|
||||
enable_marketplace: true,
|
||||
plugin_installation_permission: {
|
||||
plugin_installation_scope: InstallationScope.ALL,
|
||||
restrict_to_marketplace_only: false,
|
||||
},
|
||||
})
|
||||
|
||||
// Act
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Assert
|
||||
const buttons = screen.getAllByRole('button')
|
||||
expect(buttons).toHaveLength(3)
|
||||
expect(screen.getByText('source.marketplace')).toBeInTheDocument()
|
||||
expect(screen.getByText('source.github')).toBeInTheDocument()
|
||||
expect(screen.getByText('source.local')).toBeInTheDocument()
|
||||
|
||||
// Verify button order
|
||||
const buttonTexts = buttons.map(btn => btn.textContent)
|
||||
expect(buttonTexts[0]).toContain('source.marketplace')
|
||||
expect(buttonTexts[1]).toContain('source.github')
|
||||
expect(buttonTexts[2]).toContain('source.local')
|
||||
})
|
||||
|
||||
it('should render only marketplace method when restricted to marketplace only', async () => {
|
||||
// Arrange
|
||||
setMockSystemFeatures({
|
||||
enable_marketplace: true,
|
||||
plugin_installation_permission: {
|
||||
plugin_installation_scope: InstallationScope.ALL,
|
||||
restrict_to_marketplace_only: true,
|
||||
},
|
||||
})
|
||||
|
||||
// Act
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Assert
|
||||
const buttons = screen.getAllByRole('button')
|
||||
expect(buttons).toHaveLength(1)
|
||||
expect(screen.getByText('source.marketplace')).toBeInTheDocument()
|
||||
expect(screen.queryByText('source.github')).not.toBeInTheDocument()
|
||||
expect(screen.queryByText('source.local')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render github and local methods when marketplace is disabled', async () => {
|
||||
// Arrange
|
||||
setMockSystemFeatures({
|
||||
enable_marketplace: false,
|
||||
plugin_installation_permission: {
|
||||
plugin_installation_scope: InstallationScope.ALL,
|
||||
restrict_to_marketplace_only: false,
|
||||
},
|
||||
})
|
||||
|
||||
// Act
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Assert
|
||||
const buttons = screen.getAllByRole('button')
|
||||
expect(buttons).toHaveLength(2)
|
||||
expect(screen.queryByText('source.marketplace')).not.toBeInTheDocument()
|
||||
expect(screen.getByText('source.github')).toBeInTheDocument()
|
||||
expect(screen.getByText('source.local')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render no methods when marketplace disabled and restricted', async () => {
|
||||
// Arrange
|
||||
setMockSystemFeatures({
|
||||
enable_marketplace: false,
|
||||
plugin_installation_permission: {
|
||||
plugin_installation_scope: InstallationScope.ALL,
|
||||
restrict_to_marketplace_only: true,
|
||||
},
|
||||
})
|
||||
|
||||
// Act
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Assert
|
||||
const buttons = screen.queryAllByRole('button')
|
||||
expect(buttons).toHaveLength(0)
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== User Interactions Tests ====================
|
||||
describe('User Interactions', () => {
|
||||
it('should call setActiveTab with "discover" when marketplace button is clicked', async () => {
|
||||
// Arrange
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Act
|
||||
fireEvent.click(screen.getByText('source.marketplace'))
|
||||
|
||||
// Assert
|
||||
expect(mockSetActiveTab).toHaveBeenCalledWith('discover')
|
||||
})
|
||||
|
||||
it('should open and close GitHub modal correctly', async () => {
|
||||
// Arrange
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Assert - initially no modal
|
||||
expect(screen.queryByTestId('install-from-github-modal')).not.toBeInTheDocument()
|
||||
|
||||
// Act - open modal
|
||||
fireEvent.click(screen.getByText('source.github'))
|
||||
|
||||
// Assert - modal is open
|
||||
expect(screen.getByTestId('install-from-github-modal')).toBeInTheDocument()
|
||||
|
||||
// Act - close modal
|
||||
fireEvent.click(screen.getByTestId('github-modal-close'))
|
||||
|
||||
// Assert - modal is closed
|
||||
expect(screen.queryByTestId('install-from-github-modal')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should trigger file input click when local button is clicked', async () => {
|
||||
// Arrange
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement
|
||||
const clickSpy = vi.spyOn(fileInput, 'click')
|
||||
|
||||
// Act
|
||||
fireEvent.click(screen.getByText('source.local'))
|
||||
|
||||
// Assert
|
||||
expect(clickSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should open and close local modal when file is selected', async () => {
|
||||
// Arrange
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement
|
||||
const mockFile = createMockFile('test-plugin.difypkg')
|
||||
|
||||
// Assert - initially no modal
|
||||
expect(screen.queryByTestId('install-from-local-modal')).not.toBeInTheDocument()
|
||||
|
||||
// Act - select file
|
||||
Object.defineProperty(fileInput, 'files', { value: [mockFile], writable: true })
|
||||
fireEvent.change(fileInput)
|
||||
|
||||
// Assert - modal is open with correct file
|
||||
expect(screen.getByTestId('install-from-local-modal')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('install-from-local-modal')).toHaveAttribute('data-file-name', 'test-plugin.difypkg')
|
||||
|
||||
// Act - close modal
|
||||
fireEvent.click(screen.getByTestId('local-modal-close'))
|
||||
|
||||
// Assert - modal is closed
|
||||
expect(screen.queryByTestId('install-from-local-modal')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should not open local modal when no file is selected', async () => {
|
||||
// Arrange
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement
|
||||
|
||||
// Act - trigger change with empty files
|
||||
Object.defineProperty(fileInput, 'files', { value: [], writable: true })
|
||||
fireEvent.change(fileInput)
|
||||
|
||||
// Assert
|
||||
expect(screen.queryByTestId('install-from-local-modal')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== State Management Tests ====================
|
||||
describe('State Management', () => {
|
||||
it('should maintain modal state correctly and allow reopening', async () => {
|
||||
// Arrange
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Act - Open, close, and reopen GitHub modal
|
||||
fireEvent.click(screen.getByText('source.github'))
|
||||
expect(screen.getByTestId('install-from-github-modal')).toBeInTheDocument()
|
||||
|
||||
fireEvent.click(screen.getByTestId('github-modal-close'))
|
||||
expect(screen.queryByTestId('install-from-github-modal')).not.toBeInTheDocument()
|
||||
|
||||
fireEvent.click(screen.getByText('source.github'))
|
||||
expect(screen.getByTestId('install-from-github-modal')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should update selectedFile state when file is selected', async () => {
|
||||
// Arrange
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement
|
||||
|
||||
// Act - select .difypkg file
|
||||
Object.defineProperty(fileInput, 'files', { value: [createMockFile('my-plugin.difypkg')], writable: true })
|
||||
fireEvent.change(fileInput)
|
||||
expect(screen.getByTestId('install-from-local-modal')).toHaveAttribute('data-file-name', 'my-plugin.difypkg')
|
||||
|
||||
// Close and select .difybndl file
|
||||
fireEvent.click(screen.getByTestId('local-modal-close'))
|
||||
Object.defineProperty(fileInput, 'files', { value: [createMockFile('test-bundle.difybndl')], writable: true })
|
||||
fireEvent.change(fileInput)
|
||||
expect(screen.getByTestId('install-from-local-modal')).toHaveAttribute('data-file-name', 'test-bundle.difybndl')
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Side Effects Tests ====================
|
||||
describe('Side Effects', () => {
|
||||
it('should render correct install methods based on system features', async () => {
|
||||
// Test 1: All methods when marketplace enabled and not restricted
|
||||
setMockSystemFeatures({
|
||||
enable_marketplace: true,
|
||||
plugin_installation_permission: {
|
||||
plugin_installation_scope: InstallationScope.ALL,
|
||||
restrict_to_marketplace_only: false,
|
||||
},
|
||||
})
|
||||
|
||||
const { unmount: unmount1 } = render(<Empty />)
|
||||
await flushEffects()
|
||||
expect(screen.getAllByRole('button')).toHaveLength(3)
|
||||
unmount1()
|
||||
|
||||
// Test 2: Only marketplace when restricted
|
||||
setMockSystemFeatures({
|
||||
enable_marketplace: true,
|
||||
plugin_installation_permission: {
|
||||
plugin_installation_scope: InstallationScope.ALL,
|
||||
restrict_to_marketplace_only: true,
|
||||
},
|
||||
})
|
||||
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
expect(screen.getAllByRole('button')).toHaveLength(1)
|
||||
expect(screen.getByText('source.marketplace')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render correct text based on plugin list and filters', async () => {
|
||||
// Test 1: noInstalled when plugin list is empty
|
||||
setMockPluginList({ plugins: [] })
|
||||
setMockFilters({ categories: [], tags: [], searchQuery: '' })
|
||||
|
||||
const { unmount: unmount1 } = render(<Empty />)
|
||||
await flushEffects()
|
||||
expect(screen.getByText('list.noInstalled')).toBeInTheDocument()
|
||||
unmount1()
|
||||
|
||||
// Test 2: notFound when filters are active with plugins
|
||||
setMockFilters({ categories: ['tool'] })
|
||||
setMockPluginList({ plugins: [{ id: 'plugin-1' }] })
|
||||
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
expect(screen.getByText('list.notFound')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Edge Cases ====================
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle undefined plugin data gracefully', () => {
|
||||
// Test undefined plugin list - component should render without error
|
||||
setMockPluginList(undefined)
|
||||
expect(() => render(<Empty />)).not.toThrow()
|
||||
})
|
||||
|
||||
it('should handle file input edge cases', async () => {
|
||||
// Arrange
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement
|
||||
|
||||
// Test undefined files
|
||||
Object.defineProperty(fileInput, 'files', { value: undefined, writable: true })
|
||||
fireEvent.change(fileInput)
|
||||
expect(screen.queryByTestId('install-from-local-modal')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== React.memo Tests ====================
|
||||
describe('React.memo Behavior', () => {
|
||||
it('should be wrapped with React.memo and have displayName', () => {
|
||||
// Assert
|
||||
expect(Empty).toBeDefined()
|
||||
expect((Empty as any).$$typeof?.toString()).toContain('Symbol')
|
||||
expect((Empty as any).displayName || (Empty as any).type?.displayName).toBeDefined()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Modal Callbacks Tests ====================
|
||||
describe('Modal Callbacks', () => {
|
||||
it('should handle modal onSuccess callbacks (noop)', async () => {
|
||||
// Arrange
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Test GitHub modal onSuccess
|
||||
fireEvent.click(screen.getByText('source.github'))
|
||||
fireEvent.click(screen.getByTestId('github-modal-success'))
|
||||
expect(screen.getByTestId('install-from-github-modal')).toBeInTheDocument()
|
||||
|
||||
// Close GitHub modal and test Local modal onSuccess
|
||||
fireEvent.click(screen.getByTestId('github-modal-close'))
|
||||
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement
|
||||
Object.defineProperty(fileInput, 'files', { value: [createMockFile('test-plugin.difypkg')], writable: true })
|
||||
fireEvent.change(fileInput)
|
||||
|
||||
fireEvent.click(screen.getByTestId('local-modal-success'))
|
||||
expect(screen.getByTestId('install-from-local-modal')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Conditional Modal Rendering ====================
|
||||
describe('Conditional Modal Rendering', () => {
|
||||
it('should only render one modal at a time and require file for local modal', async () => {
|
||||
// Arrange
|
||||
render(<Empty />)
|
||||
await flushEffects()
|
||||
|
||||
// Assert - no modals initially
|
||||
expect(screen.queryByTestId('install-from-github-modal')).not.toBeInTheDocument()
|
||||
expect(screen.queryByTestId('install-from-local-modal')).not.toBeInTheDocument()
|
||||
|
||||
// Open GitHub modal - only GitHub modal visible
|
||||
fireEvent.click(screen.getByText('source.github'))
|
||||
expect(screen.getByTestId('install-from-github-modal')).toBeInTheDocument()
|
||||
expect(screen.queryByTestId('install-from-local-modal')).not.toBeInTheDocument()
|
||||
|
||||
// Click local button - triggers file input, no modal yet (no file selected)
|
||||
fireEvent.click(screen.getByText('source.local'))
|
||||
// GitHub modal should still be visible, local modal requires file selection
|
||||
expect(screen.queryByTestId('install-from-local-modal')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
702
web/app/components/plugins/plugin-page/list/index.spec.tsx
Normal file
702
web/app/components/plugins/plugin-page/list/index.spec.tsx
Normal file
@ -0,0 +1,702 @@
|
||||
import type { PluginDeclaration, PluginDetail } from '../../types'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { PluginCategoryEnum, PluginSource } from '../../types'
|
||||
|
||||
// ==================== Imports (after mocks) ====================
|
||||
|
||||
import PluginList from './index'
|
||||
|
||||
// ==================== Mock Setup ====================
|
||||
|
||||
// Mock PluginItem component to avoid complex dependency chain
|
||||
vi.mock('../../plugin-item', () => ({
|
||||
default: ({ plugin }: { plugin: PluginDetail }) => (
|
||||
<div
|
||||
data-testid="plugin-item"
|
||||
data-plugin-id={plugin.plugin_id}
|
||||
data-plugin-name={plugin.name}
|
||||
>
|
||||
{plugin.name}
|
||||
</div>
|
||||
),
|
||||
}))
|
||||
|
||||
// ==================== Test Utilities ====================
|
||||
|
||||
/**
|
||||
* Factory function to create a PluginDeclaration with defaults
|
||||
*/
|
||||
const createPluginDeclaration = (overrides: Partial<PluginDeclaration> = {}): PluginDeclaration => ({
|
||||
plugin_unique_identifier: 'test-plugin-id',
|
||||
version: '1.0.0',
|
||||
author: 'test-author',
|
||||
icon: 'test-icon.png',
|
||||
icon_dark: 'test-icon-dark.png',
|
||||
name: 'test-plugin',
|
||||
category: PluginCategoryEnum.tool,
|
||||
label: { en_US: 'Test Plugin' } as any,
|
||||
description: { en_US: 'Test plugin description' } as any,
|
||||
created_at: '2024-01-01',
|
||||
resource: null,
|
||||
plugins: null,
|
||||
verified: false,
|
||||
endpoint: {} as any,
|
||||
model: null,
|
||||
tags: [],
|
||||
agent_strategy: null,
|
||||
meta: {
|
||||
version: '1.0.0',
|
||||
minimum_dify_version: '0.5.0',
|
||||
},
|
||||
trigger: {} as any,
|
||||
...overrides,
|
||||
})
|
||||
|
||||
/**
|
||||
* Factory function to create a PluginDetail with defaults
|
||||
*/
|
||||
const createPluginDetail = (overrides: Partial<PluginDetail> = {}): PluginDetail => ({
|
||||
id: 'plugin-1',
|
||||
created_at: '2024-01-01',
|
||||
updated_at: '2024-01-01',
|
||||
name: 'test-plugin',
|
||||
plugin_id: 'plugin-1',
|
||||
plugin_unique_identifier: 'test-author/test-plugin@1.0.0',
|
||||
declaration: createPluginDeclaration(),
|
||||
installation_id: 'install-1',
|
||||
tenant_id: 'tenant-1',
|
||||
endpoints_setups: 0,
|
||||
endpoints_active: 0,
|
||||
version: '1.0.0',
|
||||
latest_version: '1.0.0',
|
||||
latest_unique_identifier: 'test-author/test-plugin@1.0.0',
|
||||
source: PluginSource.marketplace,
|
||||
meta: {
|
||||
repo: 'test-author/test-plugin',
|
||||
version: '1.0.0',
|
||||
package: 'test-plugin.difypkg',
|
||||
},
|
||||
status: 'active',
|
||||
deprecated_reason: '',
|
||||
alternative_plugin_id: '',
|
||||
...overrides,
|
||||
})
|
||||
|
||||
/**
|
||||
* Factory function to create a list of plugins
|
||||
*/
|
||||
const createPluginList = (count: number, baseOverrides: Partial<PluginDetail> = {}): PluginDetail[] => {
|
||||
return Array.from({ length: count }, (_, index) => createPluginDetail({
|
||||
id: `plugin-${index + 1}`,
|
||||
plugin_id: `plugin-${index + 1}`,
|
||||
name: `plugin-${index + 1}`,
|
||||
plugin_unique_identifier: `test-author/plugin-${index + 1}@1.0.0`,
|
||||
...baseOverrides,
|
||||
}))
|
||||
}
|
||||
|
||||
// ==================== Tests ====================
|
||||
|
||||
describe('PluginList', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
// ==================== Rendering Tests ====================
|
||||
describe('Rendering', () => {
|
||||
it('should render without crashing', () => {
|
||||
// Arrange
|
||||
const pluginList: PluginDetail[] = []
|
||||
|
||||
// Act
|
||||
const { container } = render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(container).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render container with correct structure', () => {
|
||||
// Arrange
|
||||
const pluginList: PluginDetail[] = []
|
||||
|
||||
// Act
|
||||
const { container } = render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
const outerDiv = container.firstChild as HTMLElement
|
||||
expect(outerDiv).toHaveClass('pb-3')
|
||||
|
||||
const gridDiv = outerDiv.firstChild as HTMLElement
|
||||
expect(gridDiv).toHaveClass('grid', 'grid-cols-2', 'gap-3')
|
||||
})
|
||||
|
||||
it('should render single plugin correctly', () => {
|
||||
// Arrange
|
||||
const pluginList = [createPluginDetail({ name: 'single-plugin' })]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
const pluginItems = screen.getAllByTestId('plugin-item')
|
||||
expect(pluginItems).toHaveLength(1)
|
||||
expect(pluginItems[0]).toHaveAttribute('data-plugin-name', 'single-plugin')
|
||||
})
|
||||
|
||||
it('should render multiple plugins correctly', () => {
|
||||
// Arrange
|
||||
const pluginList = createPluginList(5)
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
const pluginItems = screen.getAllByTestId('plugin-item')
|
||||
expect(pluginItems).toHaveLength(5)
|
||||
})
|
||||
|
||||
it('should render plugins in correct order', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({ plugin_id: 'first', name: 'First Plugin' }),
|
||||
createPluginDetail({ plugin_id: 'second', name: 'Second Plugin' }),
|
||||
createPluginDetail({ plugin_id: 'third', name: 'Third Plugin' }),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
const pluginItems = screen.getAllByTestId('plugin-item')
|
||||
expect(pluginItems[0]).toHaveAttribute('data-plugin-id', 'first')
|
||||
expect(pluginItems[1]).toHaveAttribute('data-plugin-id', 'second')
|
||||
expect(pluginItems[2]).toHaveAttribute('data-plugin-id', 'third')
|
||||
})
|
||||
|
||||
it('should pass plugin prop to each PluginItem', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({ plugin_id: 'plugin-a', name: 'Plugin A' }),
|
||||
createPluginDetail({ plugin_id: 'plugin-b', name: 'Plugin B' }),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Plugin A')).toBeInTheDocument()
|
||||
expect(screen.getByText('Plugin B')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Props Testing ====================
|
||||
describe('Props', () => {
|
||||
it('should accept empty pluginList array', () => {
|
||||
// Arrange & Act
|
||||
const { container } = render(<PluginList pluginList={[]} />)
|
||||
|
||||
// Assert
|
||||
const gridDiv = container.querySelector('.grid')
|
||||
expect(gridDiv).toBeEmptyDOMElement()
|
||||
})
|
||||
|
||||
it('should handle pluginList with various categories', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({
|
||||
plugin_id: 'tool-plugin',
|
||||
declaration: createPluginDeclaration({ category: PluginCategoryEnum.tool }),
|
||||
}),
|
||||
createPluginDetail({
|
||||
plugin_id: 'model-plugin',
|
||||
declaration: createPluginDeclaration({ category: PluginCategoryEnum.model }),
|
||||
}),
|
||||
createPluginDetail({
|
||||
plugin_id: 'extension-plugin',
|
||||
declaration: createPluginDeclaration({ category: PluginCategoryEnum.extension }),
|
||||
}),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
const pluginItems = screen.getAllByTestId('plugin-item')
|
||||
expect(pluginItems).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('should handle pluginList with various sources', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({ plugin_id: 'marketplace-plugin', source: PluginSource.marketplace }),
|
||||
createPluginDetail({ plugin_id: 'github-plugin', source: PluginSource.github }),
|
||||
createPluginDetail({ plugin_id: 'local-plugin', source: PluginSource.local }),
|
||||
createPluginDetail({ plugin_id: 'debugging-plugin', source: PluginSource.debugging }),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
const pluginItems = screen.getAllByTestId('plugin-item')
|
||||
expect(pluginItems).toHaveLength(4)
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Edge Cases ====================
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle empty array', () => {
|
||||
// Arrange & Act
|
||||
render(<PluginList pluginList={[]} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.queryByTestId('plugin-item')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should handle large number of plugins', () => {
|
||||
// Arrange
|
||||
const pluginList = createPluginList(100)
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
const pluginItems = screen.getAllByTestId('plugin-item')
|
||||
expect(pluginItems).toHaveLength(100)
|
||||
})
|
||||
|
||||
it('should handle plugins with duplicate plugin_ids (key warning scenario)', () => {
|
||||
// Arrange - Testing that the component uses plugin_id as key
|
||||
const pluginList = [
|
||||
createPluginDetail({ plugin_id: 'unique-1', name: 'Plugin 1' }),
|
||||
createPluginDetail({ plugin_id: 'unique-2', name: 'Plugin 2' }),
|
||||
]
|
||||
|
||||
// Act & Assert - Should render without issues
|
||||
expect(() => render(<PluginList pluginList={pluginList} />)).not.toThrow()
|
||||
expect(screen.getAllByTestId('plugin-item')).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('should handle plugins with special characters in names', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({ plugin_id: 'special-1', name: 'Plugin <with> "special" & chars' }),
|
||||
createPluginDetail({ plugin_id: 'special-2', name: '日本語プラグイン' }),
|
||||
createPluginDetail({ plugin_id: 'special-3', name: 'Emoji Plugin 🔌' }),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
const pluginItems = screen.getAllByTestId('plugin-item')
|
||||
expect(pluginItems).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('should handle plugins with very long names', () => {
|
||||
// Arrange
|
||||
const longName = 'A'.repeat(500)
|
||||
const pluginList = [createPluginDetail({ name: longName })]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByTestId('plugin-item')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should handle plugin with minimal data', () => {
|
||||
// Arrange
|
||||
const minimalPlugin = createPluginDetail({
|
||||
name: '',
|
||||
plugin_id: 'minimal',
|
||||
})
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={[minimalPlugin]} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByTestId('plugin-item')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should handle plugins with undefined optional fields', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({
|
||||
plugin_id: 'no-meta',
|
||||
meta: undefined,
|
||||
}),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByTestId('plugin-item')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Grid Layout Tests ====================
|
||||
describe('Grid Layout', () => {
|
||||
it('should render with 2-column grid', () => {
|
||||
// Arrange
|
||||
const pluginList = createPluginList(4)
|
||||
|
||||
// Act
|
||||
const { container } = render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
const gridDiv = container.querySelector('.grid')
|
||||
expect(gridDiv).toHaveClass('grid-cols-2')
|
||||
})
|
||||
|
||||
it('should have proper gap between items', () => {
|
||||
// Arrange
|
||||
const pluginList = createPluginList(4)
|
||||
|
||||
// Act
|
||||
const { container } = render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
const gridDiv = container.querySelector('.grid')
|
||||
expect(gridDiv).toHaveClass('gap-3')
|
||||
})
|
||||
|
||||
it('should have bottom padding on container', () => {
|
||||
// Arrange
|
||||
const pluginList = createPluginList(2)
|
||||
|
||||
// Act
|
||||
const { container } = render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
const outerDiv = container.firstChild as HTMLElement
|
||||
expect(outerDiv).toHaveClass('pb-3')
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Re-render Tests ====================
|
||||
describe('Re-render Behavior', () => {
|
||||
it('should update when pluginList changes', () => {
|
||||
// Arrange
|
||||
const initialList = createPluginList(2)
|
||||
const updatedList = createPluginList(4)
|
||||
|
||||
// Act
|
||||
const { rerender } = render(<PluginList pluginList={initialList} />)
|
||||
expect(screen.getAllByTestId('plugin-item')).toHaveLength(2)
|
||||
|
||||
rerender(<PluginList pluginList={updatedList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getAllByTestId('plugin-item')).toHaveLength(4)
|
||||
})
|
||||
|
||||
it('should handle pluginList update from non-empty to empty', () => {
|
||||
// Arrange
|
||||
const initialList = createPluginList(3)
|
||||
const emptyList: PluginDetail[] = []
|
||||
|
||||
// Act
|
||||
const { rerender } = render(<PluginList pluginList={initialList} />)
|
||||
expect(screen.getAllByTestId('plugin-item')).toHaveLength(3)
|
||||
|
||||
rerender(<PluginList pluginList={emptyList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.queryByTestId('plugin-item')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should handle pluginList update from empty to non-empty', () => {
|
||||
// Arrange
|
||||
const emptyList: PluginDetail[] = []
|
||||
const filledList = createPluginList(3)
|
||||
|
||||
// Act
|
||||
const { rerender } = render(<PluginList pluginList={emptyList} />)
|
||||
expect(screen.queryByTestId('plugin-item')).not.toBeInTheDocument()
|
||||
|
||||
rerender(<PluginList pluginList={filledList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getAllByTestId('plugin-item')).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('should update individual plugin data on re-render', () => {
|
||||
// Arrange
|
||||
const initialList = [createPluginDetail({ plugin_id: 'plugin-1', name: 'Original Name' })]
|
||||
const updatedList = [createPluginDetail({ plugin_id: 'plugin-1', name: 'Updated Name' })]
|
||||
|
||||
// Act
|
||||
const { rerender } = render(<PluginList pluginList={initialList} />)
|
||||
expect(screen.getByText('Original Name')).toBeInTheDocument()
|
||||
|
||||
rerender(<PluginList pluginList={updatedList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Updated Name')).toBeInTheDocument()
|
||||
expect(screen.queryByText('Original Name')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Key Prop Tests ====================
|
||||
describe('Key Prop Behavior', () => {
|
||||
it('should use plugin_id as key for efficient re-renders', () => {
|
||||
// Arrange - Create plugins with unique plugin_ids
|
||||
const pluginList = [
|
||||
createPluginDetail({ plugin_id: 'stable-key-1', name: 'Plugin 1' }),
|
||||
createPluginDetail({ plugin_id: 'stable-key-2', name: 'Plugin 2' }),
|
||||
createPluginDetail({ plugin_id: 'stable-key-3', name: 'Plugin 3' }),
|
||||
]
|
||||
|
||||
// Act
|
||||
const { rerender } = render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Reorder the list
|
||||
const reorderedList = [pluginList[2], pluginList[0], pluginList[1]]
|
||||
rerender(<PluginList pluginList={reorderedList} />)
|
||||
|
||||
// Assert - All items should still be present
|
||||
const items = screen.getAllByTestId('plugin-item')
|
||||
expect(items).toHaveLength(3)
|
||||
expect(items[0]).toHaveAttribute('data-plugin-id', 'stable-key-3')
|
||||
expect(items[1]).toHaveAttribute('data-plugin-id', 'stable-key-1')
|
||||
expect(items[2]).toHaveAttribute('data-plugin-id', 'stable-key-2')
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Plugin Status Variations ====================
|
||||
describe('Plugin Status Variations', () => {
|
||||
it('should render active plugins', () => {
|
||||
// Arrange
|
||||
const pluginList = [createPluginDetail({ status: 'active' })]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByTestId('plugin-item')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render deleted/deprecated plugins', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({
|
||||
status: 'deleted',
|
||||
deprecated_reason: 'No longer maintained',
|
||||
}),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByTestId('plugin-item')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render mixed status plugins', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({ plugin_id: 'active-plugin', status: 'active' }),
|
||||
createPluginDetail({
|
||||
plugin_id: 'deprecated-plugin',
|
||||
status: 'deleted',
|
||||
deprecated_reason: 'Deprecated',
|
||||
}),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getAllByTestId('plugin-item')).toHaveLength(2)
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Version Variations ====================
|
||||
describe('Version Variations', () => {
|
||||
it('should render plugins with same version as latest', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({
|
||||
version: '1.0.0',
|
||||
latest_version: '1.0.0',
|
||||
}),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByTestId('plugin-item')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render plugins with outdated version', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({
|
||||
version: '1.0.0',
|
||||
latest_version: '2.0.0',
|
||||
}),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByTestId('plugin-item')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Accessibility ====================
|
||||
describe('Accessibility', () => {
|
||||
it('should render as a semantic container', () => {
|
||||
// Arrange
|
||||
const pluginList = createPluginList(2)
|
||||
|
||||
// Act
|
||||
const { container } = render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert - The list is rendered as divs which is appropriate for a grid layout
|
||||
const outerDiv = container.firstChild as HTMLElement
|
||||
expect(outerDiv.tagName).toBe('DIV')
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Component Type ====================
|
||||
describe('Component Type', () => {
|
||||
it('should be a functional component', () => {
|
||||
// Assert
|
||||
expect(typeof PluginList).toBe('function')
|
||||
})
|
||||
|
||||
it('should accept pluginList as required prop', () => {
|
||||
// Arrange & Act - TypeScript ensures this at compile time
|
||||
// but we verify runtime behavior
|
||||
const pluginList = createPluginList(1)
|
||||
|
||||
// Assert
|
||||
expect(() => render(<PluginList pluginList={pluginList} />)).not.toThrow()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Mixed Content Tests ====================
|
||||
describe('Mixed Content', () => {
|
||||
it('should render plugins from different sources together', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({
|
||||
plugin_id: 'marketplace-1',
|
||||
name: 'Marketplace Plugin',
|
||||
source: PluginSource.marketplace,
|
||||
}),
|
||||
createPluginDetail({
|
||||
plugin_id: 'github-1',
|
||||
name: 'GitHub Plugin',
|
||||
source: PluginSource.github,
|
||||
}),
|
||||
createPluginDetail({
|
||||
plugin_id: 'local-1',
|
||||
name: 'Local Plugin',
|
||||
source: PluginSource.local,
|
||||
}),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Marketplace Plugin')).toBeInTheDocument()
|
||||
expect(screen.getByText('GitHub Plugin')).toBeInTheDocument()
|
||||
expect(screen.getByText('Local Plugin')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render plugins of different categories together', () => {
|
||||
// Arrange
|
||||
const pluginList = [
|
||||
createPluginDetail({
|
||||
plugin_id: 'tool-1',
|
||||
name: 'Tool Plugin',
|
||||
declaration: createPluginDeclaration({ category: PluginCategoryEnum.tool }),
|
||||
}),
|
||||
createPluginDetail({
|
||||
plugin_id: 'model-1',
|
||||
name: 'Model Plugin',
|
||||
declaration: createPluginDeclaration({ category: PluginCategoryEnum.model }),
|
||||
}),
|
||||
createPluginDetail({
|
||||
plugin_id: 'agent-1',
|
||||
name: 'Agent Plugin',
|
||||
declaration: createPluginDeclaration({ category: PluginCategoryEnum.agent }),
|
||||
}),
|
||||
]
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Tool Plugin')).toBeInTheDocument()
|
||||
expect(screen.getByText('Model Plugin')).toBeInTheDocument()
|
||||
expect(screen.getByText('Agent Plugin')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// ==================== Boundary Tests ====================
|
||||
describe('Boundary Tests', () => {
|
||||
it('should handle single item list', () => {
|
||||
// Arrange
|
||||
const pluginList = createPluginList(1)
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getAllByTestId('plugin-item')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('should handle two items (fills one row)', () => {
|
||||
// Arrange
|
||||
const pluginList = createPluginList(2)
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getAllByTestId('plugin-item')).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('should handle three items (partial second row)', () => {
|
||||
// Arrange
|
||||
const pluginList = createPluginList(3)
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getAllByTestId('plugin-item')).toHaveLength(3)
|
||||
})
|
||||
|
||||
it('should handle odd number of items', () => {
|
||||
// Arrange
|
||||
const pluginList = createPluginList(7)
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getAllByTestId('plugin-item')).toHaveLength(7)
|
||||
})
|
||||
|
||||
it('should handle even number of items', () => {
|
||||
// Arrange
|
||||
const pluginList = createPluginList(8)
|
||||
|
||||
// Act
|
||||
render(<PluginList pluginList={pluginList} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getAllByTestId('plugin-item')).toHaveLength(8)
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user