Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-16 15:35:31 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

🔧 refactor: Organize Sharing/Agent Components and Improve Type Safety

Browse source 
refactor: organize Sharing/Agent components, improve type safety for resource types and access role ids, rename enums to PascalCase

refactor: organize Sharing/Agent components, improve type safety for resource types and access role ids

chore: move sharing related components to dedicated "Sharing" directory

chore: remove PublicSharingToggle component and update index exports

chore: move non-sidepanel agent components to `~/components/Agents`

chore: move AgentCategoryDisplay component with tests

chore: remove commented out code

refactor: change PERMISSION_BITS from const to enum for better type safety

refactor: reorganize imports in GenericGrantAccessDialog and update index exports for hooks

refactor: update type definitions to use ACCESS_ROLE_IDS for improved type safety

refactor: remove unused canAccessPromptResource middleware and related code

refactor: remove unused prompt access roles from createAccessRoleMethods

refactor: update resourceType in AclEntry type definition to remove unused 'prompt' value

refactor: introduce ResourceType enum and update resourceType usage across data provider files for improved type safety

refactor: update resourceType usage to ResourceType enum across sharing and permissions components for improved type safety

refactor: standardize resourceType usage to ResourceType enum across agent and prompt models, permissions controller, and middleware for enhanced type safety

refactor: update resourceType references from PROMPT_GROUP to PROMPTGROUP for consistency across models, middleware, and components

refactor: standardize access role IDs and resource type usage across agent, file, and prompt models for improved type safety and consistency

chore: add typedefs for TUpdateResourcePermissionsRequest and TUpdateResourcePermissionsResponse to enhance type definitions

chore: move SearchPicker to PeoplePicker dir

refactor: implement debouncing for query changes in SearchPicker for improved performance

chore: fix typing, import order for agent admin settings

fix: agent admin settings, prevent agent form submission

refactor: rename `ACCESS_ROLE_IDS` to `AccessRoleIds`

refactor: replace PermissionBits with PERMISSION_BITS

refactor: replace PERMISSION_BITS with PermissionBits
This commit is contained in:
Danny Avila 2025-07-28 17:52:36 -04:00
parent ae732b2ebc
commit 81b32e400a
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
96 changed files with 781 additions and 798 deletions
Download patch file Download diff file Expand all files Collapse all files

536
client/src/components/SidePanel/Agents/__tests__/Accessibility.spec.tsx
View file

@ -1,536 +0,0 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import CategoryTabs from '../CategoryTabs';
import AgentGrid from '../AgentGrid';
import AgentCard from '../AgentCard';
import SearchBar from '../SearchBar';
import ErrorDisplay from '../ErrorDisplay';
import * as t from 'librechat-data-provider';
// Mock matchMedia
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation(() => ({
matches: false,
media: '',
onchange: null,
addListener: jest.fn(),
removeListener: jest.fn(),
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});
// Mock Recoil
jest.mock('recoil', () => ({
useRecoilValue: jest.fn(() => 'en'),
RecoilRoot: ({ children }: any) => children,
atom: jest.fn(() => ({})),
atomFamily: jest.fn(() => ({})),
selector: jest.fn(() => ({})),
selectorFamily: jest.fn(() => ({})),
useRecoilState: jest.fn(() => ['en', jest.fn()]),
useSetRecoilState: jest.fn(() => jest.fn()),
}));
// Mock react-i18next
jest.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => key,
i18n: { changeLanguage: jest.fn() },
}),
}));
// Create the localize function once to be reused
const mockLocalize = jest.fn((key: string, options?: any) => {
const translations: Record<string, string> = {
com_agents_category_tabs_label: 'Agent Categories',
com_agents_category_tab_label: `${options?.category} category, ${options?.position} of ${options?.total}`,
com_agents_search_instructions: 'Type to search agents by name or description',
com_agents_search_aria: 'Search agents',
com_agents_search_placeholder: 'Search agents...',
com_agents_clear_search: 'Clear search',
com_agents_agent_card_label: `${options?.name} agent. ${options?.description}`,
com_agents_no_description: 'No description available',
com_agents_grid_announcement: `Showing ${options?.count} agents in ${options?.category} category`,
com_agents_load_more_label: `Load more agents from ${options?.category} category`,
com_agents_error_retry: 'Try Again',
com_agents_loading: 'Loading...',
com_agents_empty_state_heading: 'No agents found',
com_agents_search_empty_heading: 'No search results',
com_agents_created_by: 'by',
com_agents_top_picks: 'Top Picks',
// ErrorDisplay translations
com_agents_error_suggestion_generic: 'Try refreshing the page or check your network connection',
com_agents_error_network_title: 'Network Error',
com_agents_error_network_message: 'Unable to connect to the server',
com_agents_error_network_suggestion: 'Check your internet connection and try again',
com_agents_error_not_found_title: 'Not Found',
com_agents_error_not_found_suggestion: 'The requested resource could not be found',
com_agents_error_invalid_request: 'Invalid Request',
com_agents_error_bad_request_message: 'The request was invalid',
com_agents_error_bad_request_suggestion: 'Please check your input and try again',
com_agents_error_server_title: 'Server Error',
com_agents_error_server_message: 'An internal server error occurred',
com_agents_error_server_suggestion: 'Please try again later',
com_agents_error_title: 'Error',
com_agents_error_generic: 'An unexpected error occurred',
com_agents_error_search_title: 'Search Error',
com_agents_error_category_title: 'Category Error',
com_agents_search_no_results: `No results found for "${options?.query}"`,
com_agents_category_empty: `No agents found in ${options?.category} category`,
com_agents_error_not_found_message: 'The requested resource could not be found',
};
return translations[key] || key;
});
// Mock useLocalize specifically
jest.mock('~/hooks/useLocalize', () => ({
__esModule: true,
default: () => mockLocalize,
}));
// Mock hooks
jest.mock('~/hooks', () => ({
useLocalize: () => mockLocalize,
useDebounce: jest.fn(),
}));
jest.mock('~/data-provider/Agents', () => ({
useMarketplaceAgentsInfiniteQuery: jest.fn(),
}));
jest.mock('~/hooks/Agents', () => ({
useAgentCategories: jest.fn(),
}));
// Mock utility functions
jest.mock('~/utils/agents', () => ({
renderAgentAvatar: jest.fn(() => <div data-testid="agent-avatar" />),
getContactDisplayName: jest.fn((agent) => agent.authorName),
}));
// Mock SmartLoader
jest.mock('../SmartLoader', () => ({
SmartLoader: ({ children, isLoading }: any) => (isLoading ? <div>Loading...</div> : children),
useHasData: jest.fn(() => true),
}));
// Import the actual modules to get the mocked functions
import { useMarketplaceAgentsInfiniteQuery } from '~/data-provider/Agents';
import { useAgentCategories } from '~/hooks/Agents';
import { useDebounce } from '~/hooks';
// Get typed mock functions
const mockUseMarketplaceAgentsInfiniteQuery = jest.mocked(useMarketplaceAgentsInfiniteQuery);
const mockUseAgentCategories = jest.mocked(useAgentCategories);
const mockUseDebounce = jest.mocked(useDebounce);
// Create wrapper with QueryClient
const createWrapper = () => {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
});
return ({ children }: { children: React.ReactNode }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
};
describe('Accessibility Improvements', () => {
beforeEach(() => {
mockUseMarketplaceAgentsInfiniteQuery.mockClear();
mockUseAgentCategories.mockClear();
mockUseDebounce.mockClear();
// Default mock implementations
mockUseDebounce.mockImplementation((value) => value);
mockUseAgentCategories.mockReturnValue({
categories: [
{ value: 'promoted', label: 'Top Picks' },
{ value: 'all', label: 'All' },
{ value: 'productivity', label: 'Productivity' },
],
emptyCategory: { value: 'all', label: 'All' },
isLoading: false,
error: null,
});
});
describe('CategoryTabs Accessibility', () => {
const categories = [
{ value: 'promoted', label: 'Top Picks', count: 5 },
{ value: 'all', label: 'All', count: 20 },
{ value: 'productivity', label: 'Productivity', count: 8 },
];
it('implements proper tablist role and ARIA attributes', () => {
render(
<CategoryTabs
categories={categories}
activeTab="promoted"
isLoading={false}
onChange={jest.fn()}
/>,
);
// Check tablist role
const tablist = screen.getByRole('tablist');
expect(tablist).toBeInTheDocument();
expect(tablist).toHaveAttribute('aria-label', 'Agent Categories');
expect(tablist).toHaveAttribute('aria-orientation', 'horizontal');
// Check individual tabs
const tabs = screen.getAllByRole('tab');
expect(tabs).toHaveLength(3);
tabs.forEach((tab) => {
expect(tab).toHaveAttribute('aria-selected');
expect(tab).toHaveAttribute('aria-controls');
expect(tab).toHaveAttribute('id');
});
});
it('supports keyboard navigation', () => {
const onChange = jest.fn();
render(
<CategoryTabs
categories={categories}
activeTab="promoted"
isLoading={false}
onChange={onChange}
/>,
);
const promotedTab = screen.getByRole('tab', { name: /Top Picks tab/ });
// Test arrow key navigation
fireEvent.keyDown(promotedTab, { key: 'ArrowRight' });
expect(onChange).toHaveBeenCalledWith('all');
fireEvent.keyDown(promotedTab, { key: 'ArrowLeft' });
expect(onChange).toHaveBeenCalledWith('productivity');
fireEvent.keyDown(promotedTab, { key: 'Home' });
expect(onChange).toHaveBeenCalledWith('promoted');
fireEvent.keyDown(promotedTab, { key: 'End' });
expect(onChange).toHaveBeenCalledWith('productivity');
});
it('manages focus correctly', () => {
const onChange = jest.fn();
render(
<CategoryTabs
categories={categories}
activeTab="promoted"
isLoading={false}
onChange={onChange}
/>,
);
const promotedTab = screen.getByRole('tab', { name: /Top Picks tab/ });
const allTab = screen.getByRole('tab', { name: /All tab/ });
// Active tab should be focusable
expect(promotedTab).toHaveAttribute('tabIndex', '0');
expect(allTab).toHaveAttribute('tabIndex', '-1');
});
});
describe('SearchBar Accessibility', () => {
it('provides proper search role and labels', () => {
render(<SearchBar value="" onSearch={jest.fn()} />);
// Check search landmark
const searchRegion = screen.getByRole('search');
expect(searchRegion).toBeInTheDocument();
// Check input accessibility
const searchInput = screen.getByRole('textbox');
expect(searchInput).toHaveAttribute('id', 'agent-search');
expect(searchInput).toHaveAttribute('aria-label', 'Search agents');
expect(searchInput).toHaveAttribute(
'aria-describedby',
'search-instructions search-results-count',
);
// Check hidden label exists
const hiddenLabel = screen.getByLabelText('Search agents');
expect(hiddenLabel).toBeInTheDocument();
});
it('provides accessible clear button', () => {
render(<SearchBar value="test" onSearch={jest.fn()} />);
const clearButton = screen.getByRole('button', { name: 'Clear search' });
expect(clearButton).toBeInTheDocument();
expect(clearButton).toHaveAttribute('aria-label', 'Clear search');
expect(clearButton).toHaveAttribute('title', 'Clear search');
});
it('hides decorative icons from screen readers', () => {
render(<SearchBar value="" onSearch={jest.fn()} />);
// Search icon should be hidden
const iconContainer = document.querySelector('[aria-hidden="true"]');
expect(iconContainer).toBeInTheDocument();
});
});
describe('AgentCard Accessibility', () => {
const mockAgent = {
id: 'test-agent',
name: 'Test Agent',
description: 'A test agent for testing',
authorName: 'Test Author',
created_at: 1704067200000,
avatar: null,
instructions: 'Test instructions',
provider: 'openai' as const,
model: 'gpt-4',
model_parameters: {
temperature: 0.7,
maxContextTokens: 4096,
max_context_tokens: 4096,
max_output_tokens: 1024,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0,
},
};
it('provides comprehensive ARIA labels', () => {
render(<AgentCard agent={mockAgent as t.Agent} onClick={jest.fn()} />);
const card = screen.getByRole('button');
expect(card).toHaveAttribute('aria-label', 'Test Agent agent. A test agent for testing');
expect(card).toHaveAttribute('aria-describedby', 'agent-test-agent-description');
expect(card).toHaveAttribute('role', 'button');
});
it('handles agents without descriptions', () => {
const agentWithoutDesc = { ...mockAgent, description: undefined };
render(<AgentCard agent={agentWithoutDesc as any as t.Agent} onClick={jest.fn()} />);
expect(screen.getByText('No description available')).toBeInTheDocument();
});
it('supports keyboard interaction', () => {
const onClick = jest.fn();
render(<AgentCard agent={mockAgent as t.Agent} onClick={onClick} />);
const card = screen.getByRole('button');
fireEvent.keyDown(card, { key: 'Enter' });
expect(onClick).toHaveBeenCalledTimes(1);
fireEvent.keyDown(card, { key: ' ' });
expect(onClick).toHaveBeenCalledTimes(2);
});
});
describe('AgentGrid Accessibility', () => {
beforeEach(() => {
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
data: {
pages: [
{
data: [
{ id: '1', name: 'Agent 1', description: 'First agent' },
{ id: '2', name: 'Agent 2', description: 'Second agent' },
],
},
],
},
isLoading: false,
error: null,
} as any);
});
it('implements proper tabpanel structure', () => {
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="all" searchQuery="" onSelectAgent={jest.fn()} />
</Wrapper>,
);
// Check tabpanel role
const tabpanel = screen.getByRole('tabpanel');
expect(tabpanel).toHaveAttribute('id', 'category-panel-all');
expect(tabpanel).toHaveAttribute('aria-labelledby', 'category-tab-all');
expect(tabpanel).toHaveAttribute('aria-live', 'polite');
});
it('provides grid structure with proper roles', () => {
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="all" searchQuery="" onSelectAgent={jest.fn()} />
</Wrapper>,
);
// Check grid role
const grid = screen.getByRole('grid');
expect(grid).toBeInTheDocument();
expect(grid).toHaveAttribute('aria-label', 'Showing 2 agents in All category');
// Check gridcells
const gridcells = screen.getAllByRole('gridcell');
expect(gridcells).toHaveLength(2);
});
it('announces loading states to screen readers', () => {
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
data: {
pages: [{ data: [{ id: '1', name: 'Agent 1' }] }],
},
isFetching: true,
hasNextPage: true,
isFetchingNextPage: true,
isLoading: false,
error: null,
} as any);
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="all" searchQuery="" onSelectAgent={jest.fn()} />
</Wrapper>,
);
// Check for loading announcement when fetching more data
const loadingStatus = screen.getByRole('status');
expect(loadingStatus).toBeInTheDocument();
expect(loadingStatus).toHaveAttribute('aria-live', 'polite');
expect(loadingStatus).toHaveAttribute('aria-label', 'Loading...');
// Check for screen reader text
const srText = screen.getByText('Loading...');
expect(srText).toHaveClass('sr-only');
});
it('provides accessible empty states', () => {
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
data: {
pages: [{ data: [] }],
},
isLoading: false,
isFetching: false,
error: null,
} as any);
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="all" searchQuery="" onSelectAgent={jest.fn()} />
</Wrapper>,
);
// Check empty state accessibility
const emptyState = screen.getByRole('status');
expect(emptyState).toHaveAttribute('aria-live', 'polite');
expect(emptyState).toHaveAttribute('aria-label', 'No agents found');
});
});
describe('ErrorDisplay Accessibility', () => {
const mockError = {
response: {
data: {
userMessage: 'Unable to load agents. Please try refreshing the page.',
suggestion: 'Try refreshing the page or check your network connection',
},
},
};
it('implements proper alert role and ARIA attributes', () => {
render(<ErrorDisplay error={mockError} onRetry={jest.fn()} />);
// Check alert role
const alert = screen.getByRole('alert');
expect(alert).toHaveAttribute('aria-live', 'assertive');
expect(alert).toHaveAttribute('aria-atomic', 'true');
// Check heading structure
const heading = screen.getByRole('heading', { level: 3 });
expect(heading).toHaveAttribute('id', 'error-title');
});
it('provides accessible retry button', () => {
const onRetry = jest.fn();
render(<ErrorDisplay error={mockError} onRetry={onRetry} />);
const retryButton = screen.getByRole('button', { name: /retry action/i });
expect(retryButton).toHaveAttribute('aria-describedby', 'error-message error-suggestion');
fireEvent.click(retryButton);
expect(onRetry).toHaveBeenCalledTimes(1);
});
it('structures error content with proper semantics', () => {
render(<ErrorDisplay error={mockError} />);
// Check error message structure
expect(screen.getByText(/unable to load agents/i)).toHaveAttribute('id', 'error-message');
// Check suggestion note
const suggestion = screen.getByRole('note');
expect(suggestion).toHaveAttribute('aria-label', expect.stringContaining('Suggestion:'));
});
});
describe('Focus Management', () => {
it('maintains proper focus ring styles', () => {
const { container } = render(<SearchBar value="" onSearch={jest.fn()} />);
// Check for focus styles in CSS classes
const searchInput = container.querySelector('input');
expect(searchInput?.className).toContain('focus:');
});
it('provides visible focus indicators on interactive elements', () => {
render(
<CategoryTabs
categories={[{ value: 'test', label: 'Test', count: 1 }]}
activeTab="test"
isLoading={false}
onChange={jest.fn()}
/>,
);
const tab = screen.getByRole('tab');
// Check that the tab has proper ARIA attributes for accessibility
expect(tab).toHaveAttribute('aria-selected', 'true');
expect(tab).toHaveAttribute('tabIndex', '0');
// Check that tab has proper role and can receive focus
expect(tab).toHaveAttribute('role', 'tab');
});
});
describe('Screen Reader Announcements', () => {
it('includes live regions for dynamic content', () => {
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="all" searchQuery="" onSelectAgent={jest.fn()} />
</Wrapper>,
);
// Check for live region
const liveRegion = document.querySelector('[aria-live="polite"]');
expect(liveRegion).toBeInTheDocument();
});
it('provides screen reader only content', () => {
render(<SearchBar value="" onSearch={jest.fn()} />);
// Check for screen reader only instructions
const srOnlyElement = document.querySelector('.sr-only');
expect(srOnlyElement).toBeInTheDocument();
});
});
});

210
client/src/components/SidePanel/Agents/__tests__/AgentCard.spec.tsx
View file

@ -1,210 +0,0 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import AgentCard from '../AgentCard';
import type t from 'librechat-data-provider';
// Mock useLocalize hook
jest.mock('~/hooks/useLocalize', () => () => (key: string) => {
const mockTranslations: Record<string, string> = {
com_agents_created_by: 'Created by',
};
return mockTranslations[key] || key;
});
describe('AgentCard', () => {
const mockAgent: t.Agent = {
id: '1',
name: 'Test Agent',
description: 'A test agent for testing purposes',
support_contact: {
name: 'Test Support',
email: 'test@example.com',
},
avatar: { filepath: '/test-avatar.png', source: 'local' },
created_at: 1672531200000,
instructions: 'Test instructions',
provider: 'openai' as const,
model: 'gpt-4',
model_parameters: {
temperature: 0.7,
maxContextTokens: 4096,
max_context_tokens: 4096,
max_output_tokens: 1024,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0,
},
};
const mockOnClick = jest.fn();
beforeEach(() => {
mockOnClick.mockClear();
});
it('renders agent information correctly', () => {
render(<AgentCard agent={mockAgent} onClick={mockOnClick} />);
expect(screen.getByText('Test Agent')).toBeInTheDocument();
expect(screen.getByText('A test agent for testing purposes')).toBeInTheDocument();
expect(screen.getByText('Created by')).toBeInTheDocument();
expect(screen.getByText('Test Support')).toBeInTheDocument();
});
it('displays avatar when provided as object', () => {
render(<AgentCard agent={mockAgent} onClick={mockOnClick} />);
const avatarImg = screen.getByAltText('Test Agent avatar');
expect(avatarImg).toBeInTheDocument();
expect(avatarImg).toHaveAttribute('src', '/test-avatar.png');
});
it('displays avatar when provided as string', () => {
const agentWithStringAvatar = {
...mockAgent,
avatar: '/string-avatar.png' as any, // Legacy support for string avatars
};
render(<AgentCard agent={agentWithStringAvatar} onClick={mockOnClick} />);
const avatarImg = screen.getByAltText('Test Agent avatar');
expect(avatarImg).toBeInTheDocument();
expect(avatarImg).toHaveAttribute('src', '/string-avatar.png');
});
it('displays Bot icon fallback when no avatar is provided', () => {
const agentWithoutAvatar = {
...mockAgent,
avatar: undefined,
};
render(<AgentCard agent={agentWithoutAvatar as any as t.Agent} onClick={mockOnClick} />);
// Check for Bot icon presence by looking for the svg with lucide-bot class
const botIcon = document.querySelector('.lucide-bot');
expect(botIcon).toBeInTheDocument();
});
it('calls onClick when card is clicked', () => {
render(<AgentCard agent={mockAgent} onClick={mockOnClick} />);
const card = screen.getByRole('button');
fireEvent.click(card);
expect(mockOnClick).toHaveBeenCalledTimes(1);
});
it('calls onClick when Enter key is pressed', () => {
render(<AgentCard agent={mockAgent} onClick={mockOnClick} />);
const card = screen.getByRole('button');
fireEvent.keyDown(card, { key: 'Enter' });
expect(mockOnClick).toHaveBeenCalledTimes(1);
});
it('calls onClick when Space key is pressed', () => {
render(<AgentCard agent={mockAgent} onClick={mockOnClick} />);
const card = screen.getByRole('button');
fireEvent.keyDown(card, { key: ' ' });
expect(mockOnClick).toHaveBeenCalledTimes(1);
});
it('does not call onClick for other keys', () => {
render(<AgentCard agent={mockAgent} onClick={mockOnClick} />);
const card = screen.getByRole('button');
fireEvent.keyDown(card, { key: 'Escape' });
expect(mockOnClick).not.toHaveBeenCalled();
});
it('applies additional className when provided', () => {
render(<AgentCard agent={mockAgent} onClick={mockOnClick} className="custom-class" />);
const card = screen.getByRole('button');
expect(card).toHaveClass('custom-class');
});
it('handles missing support contact gracefully', () => {
const agentWithoutContact = {
...mockAgent,
support_contact: undefined,
authorName: undefined,
};
render(<AgentCard agent={agentWithoutContact} onClick={mockOnClick} />);
expect(screen.getByText('Test Agent')).toBeInTheDocument();
expect(screen.getByText('A test agent for testing purposes')).toBeInTheDocument();
expect(screen.queryByText(/Created by/)).not.toBeInTheDocument();
});
it('displays authorName when support_contact is missing', () => {
const agentWithAuthorName = {
...mockAgent,
support_contact: undefined,
authorName: 'John Doe',
};
render(<AgentCard agent={agentWithAuthorName} onClick={mockOnClick} />);
expect(screen.getByText('Created by')).toBeInTheDocument();
expect(screen.getByText('John Doe')).toBeInTheDocument();
});
it('displays support_contact email when name is missing', () => {
const agentWithEmailOnly = {
...mockAgent,
support_contact: { email: 'contact@example.com' },
authorName: undefined,
};
render(<AgentCard agent={agentWithEmailOnly} onClick={mockOnClick} />);
expect(screen.getByText('Created by')).toBeInTheDocument();
expect(screen.getByText('contact@example.com')).toBeInTheDocument();
});
it('prioritizes support_contact name over authorName', () => {
const agentWithBoth = {
...mockAgent,
support_contact: { name: 'Support Team' },
authorName: 'John Doe',
};
render(<AgentCard agent={agentWithBoth} onClick={mockOnClick} />);
expect(screen.getByText('Created by')).toBeInTheDocument();
expect(screen.getByText('Support Team')).toBeInTheDocument();
expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
});
it('prioritizes name over email in support_contact', () => {
const agentWithNameAndEmail = {
...mockAgent,
support_contact: {
name: 'Support Team',
email: 'support@example.com',
},
authorName: undefined,
};
render(<AgentCard agent={agentWithNameAndEmail} onClick={mockOnClick} />);
expect(screen.getByText('Created by')).toBeInTheDocument();
expect(screen.getByText('Support Team')).toBeInTheDocument();
expect(screen.queryByText('support@example.com')).not.toBeInTheDocument();
});
it('has proper accessibility attributes', () => {
render(<AgentCard agent={mockAgent} onClick={mockOnClick} />);
const card = screen.getByRole('button');
expect(card).toHaveAttribute('tabIndex', '0');
expect(card).toHaveAttribute('aria-label', 'com_agents_agent_card_label');
});
});

90
client/src/components/SidePanel/Agents/__tests__/AgentCategoryDisplay.spec.tsx
View file

@ -1,90 +0,0 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import AgentCategoryDisplay from '../AgentCategoryDisplay';
// Mock the useAgentCategories hook
jest.mock('~/hooks/Agents', () => ({
useAgentCategories: () => ({
categories: [
{
value: 'general',
label: 'General',
icon: <span data-testid="icon-general">{''}</span>,
className: 'w-full',
},
{
value: 'hr',
label: 'HR',
icon: <span data-testid="icon-hr">{''}</span>,
className: 'w-full',
},
{
value: 'rd',
label: 'R&D',
icon: <span data-testid="icon-rd">{''}</span>,
className: 'w-full',
},
{
value: 'finance',
label: 'Finance',
icon: <span data-testid="icon-finance">{''}</span>,
className: 'w-full',
},
],
emptyCategory: {
value: '',
label: 'General',
className: 'w-full',
},
}),
}));
describe('AgentCategoryDisplay', () => {
it('should display the proper label for a category', () => {
render(<AgentCategoryDisplay category="rd" />);
expect(screen.getByText('R&D')).toBeInTheDocument();
});
it('should display the icon when showIcon is true', () => {
render(<AgentCategoryDisplay category="finance" showIcon={true} />);
expect(screen.getByTestId('icon-finance')).toBeInTheDocument();
expect(screen.getByText('Finance')).toBeInTheDocument();
});
it('should not display the icon when showIcon is false', () => {
render(<AgentCategoryDisplay category="hr" showIcon={false} />);
expect(screen.queryByTestId('icon-hr')).not.toBeInTheDocument();
expect(screen.getByText('HR')).toBeInTheDocument();
});
it('should apply custom classnames', () => {
render(<AgentCategoryDisplay category="general" className="test-class" />);
expect(screen.getByText('General').parentElement).toHaveClass('test-class');
});
it('should not render anything for unknown categories', () => {
const { container } = render(<AgentCategoryDisplay category="unknown" />);
expect(container).toBeEmptyDOMElement();
});
it('should not render anything when no category is provided', () => {
const { container } = render(<AgentCategoryDisplay />);
expect(container).toBeEmptyDOMElement();
});
it('should not render anything for empty category when showEmptyFallback is false', () => {
const { container } = render(<AgentCategoryDisplay category="" />);
expect(container).toBeEmptyDOMElement();
});
it('should render empty category placeholder when showEmptyFallback is true', () => {
render(<AgentCategoryDisplay category="" showEmptyFallback={true} />);
expect(screen.getByText('General')).toBeInTheDocument();
});
it('should apply custom iconClassName to the icon', () => {
render(<AgentCategoryDisplay category="general" iconClassName="custom-icon-class" />);
const iconElement = screen.getByTestId('icon-general').parentElement;
expect(iconElement).toHaveClass('custom-icon-class');
});
});

384
client/src/components/SidePanel/Agents/__tests__/AgentDetail.spec.tsx
View file

@ -1,384 +0,0 @@
/* eslint-disable @typescript-eslint/no-require-imports */
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter, useNavigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { RecoilRoot } from 'recoil';
import type t from 'librechat-data-provider';
import { Constants, EModelEndpoint } from 'librechat-data-provider';
import AgentDetail from '../AgentDetail';
import { useToast } from '~/hooks';
// Mock dependencies
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: jest.fn(),
}));
jest.mock('~/hooks', () => ({
useToast: jest.fn(),
useMediaQuery: jest.fn(() => false), // Mock as desktop by default
useLocalize: jest.fn(),
}));
jest.mock('~/utils/agents', () => ({
renderAgentAvatar: jest.fn((agent, options) => (
<div data-testid="agent-avatar" data-size={options?.size} />
)),
}));
jest.mock('~/Providers', () => ({
useChatContext: jest.fn(),
}));
jest.mock('@tanstack/react-query', () => ({
...jest.requireActual('@tanstack/react-query'),
useQueryClient: jest.fn(),
}));
// Mock clipboard API
const mockWriteText = jest.fn();
const mockNavigate = jest.fn();
const mockShowToast = jest.fn();
const mockLocalize = jest.fn((key: string) => key);
const mockAgent: t.Agent = {
id: 'test-agent-id',
name: 'Test Agent',
description: 'This is a test agent for unit testing',
avatar: {
filepath: '/path/to/avatar.png',
source: 'local' as const,
},
model: 'gpt-4',
provider: 'openai',
instructions: 'You are a helpful test agent',
tools: [],
author: 'test-user-id',
created_at: new Date().getTime(),
version: 1,
support_contact: {
name: 'Support Team',
email: 'support@test.com',
},
model_parameters: {
model: undefined,
temperature: null,
maxContextTokens: null,
max_context_tokens: null,
max_output_tokens: null,
top_p: null,
frequency_penalty: null,
presence_penalty: null,
},
};
// Helper function to render with providers
const renderWithProviders = (ui: React.ReactElement, options = {}) => {
const queryClient = new QueryClient({
defaultOptions: {
queries: { retry: false },
mutations: { retry: false },
},
});
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<QueryClientProvider client={queryClient}>
<RecoilRoot>
<MemoryRouter>{children}</MemoryRouter>
</RecoilRoot>
</QueryClientProvider>
);
return render(ui, { wrapper: Wrapper, ...options });
};
describe('AgentDetail', () => {
beforeEach(() => {
jest.clearAllMocks();
(useNavigate as jest.Mock).mockReturnValue(mockNavigate);
(useToast as jest.Mock).mockReturnValue({ showToast: mockShowToast });
const { useLocalize } = require('~/hooks');
(useLocalize as jest.Mock).mockReturnValue(mockLocalize);
// Mock useChatContext
const { useChatContext } = require('~/Providers');
(useChatContext as jest.Mock).mockReturnValue({
conversation: { conversationId: 'test-convo-id' },
newConversation: jest.fn(),
});
// Mock useQueryClient
const { useQueryClient } = require('@tanstack/react-query');
(useQueryClient as jest.Mock).mockReturnValue({
getQueryData: jest.fn(),
setQueryData: jest.fn(),
invalidateQueries: jest.fn(),
});
// Setup clipboard mock if it doesn't exist
if (!navigator.clipboard) {
Object.defineProperty(navigator, 'clipboard', {
value: {
writeText: mockWriteText,
},
configurable: true,
});
} else {
// If clipboard exists, spy on it
jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(mockWriteText);
}
mockWriteText.mockResolvedValue(undefined);
});
const defaultProps = {
agent: mockAgent,
isOpen: true,
onClose: jest.fn(),
};
describe('Rendering', () => {
it('should render agent details correctly', () => {
renderWithProviders(<AgentDetail {...defaultProps} />);
expect(screen.getByText('Test Agent')).toBeInTheDocument();
expect(screen.getByText('This is a test agent for unit testing')).toBeInTheDocument();
expect(screen.getByTestId('agent-avatar')).toBeInTheDocument();
expect(screen.getByTestId('agent-avatar')).toHaveAttribute('data-size', 'xl');
});
it('should render contact information when available', () => {
renderWithProviders(<AgentDetail {...defaultProps} />);
expect(screen.getByText('com_agents_contact:')).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'Support Team' })).toBeInTheDocument();
expect(screen.getByRole('link', { name: 'Support Team' })).toHaveAttribute(
'href',
'mailto:support@test.com',
);
});
it('should not render contact information when not available', () => {
const agentWithoutContact = { ...mockAgent };
delete (agentWithoutContact as any).support_contact;
renderWithProviders(<AgentDetail {...defaultProps} agent={agentWithoutContact} />);
expect(screen.queryByText('com_agents_contact:')).not.toBeInTheDocument();
});
it('should render loading state when agent is null', () => {
renderWithProviders(<AgentDetail {...defaultProps} agent={null as any} />);
expect(screen.getByText('com_agents_loading')).toBeInTheDocument();
expect(screen.getByText('com_agents_no_description')).toBeInTheDocument();
});
it('should render copy link button', () => {
renderWithProviders(<AgentDetail {...defaultProps} />);
const copyLinkButton = screen.getByRole('button', { name: 'com_agents_copy_link' });
expect(copyLinkButton).toBeInTheDocument();
expect(copyLinkButton).toHaveAttribute('aria-label', 'com_agents_copy_link');
});
it('should render Start Chat button', () => {
renderWithProviders(<AgentDetail {...defaultProps} />);
const startChatButton = screen.getByRole('button', { name: 'com_agents_start_chat' });
expect(startChatButton).toBeInTheDocument();
expect(startChatButton).not.toBeDisabled();
});
});
describe('Interactions', () => {
it('should navigate to chat when Start Chat button is clicked', async () => {
const user = userEvent.setup();
const mockNewConversation = jest.fn();
const mockQueryClient = {
getQueryData: jest.fn().mockReturnValue(null),
setQueryData: jest.fn(),
invalidateQueries: jest.fn(),
};
// Update mocks for this test
const { useChatContext } = require('~/Providers');
(useChatContext as jest.Mock).mockReturnValue({
conversation: { conversationId: 'test-convo-id' },
newConversation: mockNewConversation,
});
const { useQueryClient } = require('@tanstack/react-query');
(useQueryClient as jest.Mock).mockReturnValue(mockQueryClient);
renderWithProviders(<AgentDetail {...defaultProps} />);
const startChatButton = screen.getByRole('button', { name: 'com_agents_start_chat' });
await user.click(startChatButton);
expect(mockNewConversation).toHaveBeenCalledWith({
template: {
conversationId: Constants.NEW_CONVO,
endpoint: EModelEndpoint.agents,
agent_id: 'test-agent-id',
title: 'Chat with Test Agent',
},
});
});
it('should not navigate when agent is null', async () => {
const user = userEvent.setup();
renderWithProviders(<AgentDetail {...defaultProps} agent={null as any} />);
const startChatButton = screen.getByRole('button', { name: 'com_agents_start_chat' });
expect(startChatButton).toBeDisabled();
await user.click(startChatButton);
expect(mockNavigate).not.toHaveBeenCalled();
});
it('should copy link and show success toast when Copy Link is clicked', async () => {
const user = userEvent.setup();
renderWithProviders(<AgentDetail {...defaultProps} />);
// Click copy link button directly (no dropdown needed)
const copyLinkButton = screen.getByRole('button', { name: 'com_agents_copy_link' });
await user.click(copyLinkButton);
// Wait for async clipboard operation to complete
await waitFor(() => {
expect(mockWriteText).toHaveBeenCalledWith(
`${window.location.origin}/c/new?agent_id=test-agent-id`,
);
});
await waitFor(() => {
expect(mockShowToast).toHaveBeenCalledWith({
message: 'com_agents_link_copied',
});
});
});
it('should show error toast when clipboard write fails', async () => {
const user = userEvent.setup();
mockWriteText.mockRejectedValue(new Error('Clipboard error'));
renderWithProviders(<AgentDetail {...defaultProps} />);
// Click copy link button directly
const copyLinkButton = screen.getByRole('button', { name: 'com_agents_copy_link' });
await user.click(copyLinkButton);
// Wait for clipboard operation to fail and error toast to show
await waitFor(() => {
expect(mockWriteText).toHaveBeenCalled();
});
await waitFor(() => {
expect(mockShowToast).toHaveBeenCalledWith({
message: 'com_agents_link_copy_failed',
});
});
});
it('should call onClose when dialog is closed', () => {
const mockOnClose = jest.fn();
renderWithProviders(<AgentDetail {...defaultProps} onClose={mockOnClose} isOpen={false} />);
// Since we're testing the onOpenChange callback, we need to trigger it
// This would normally be done by the Dialog component when ESC is pressed or overlay is clicked
// We'll test this by checking that onClose is properly passed to the Dialog
expect(mockOnClose).toBeDefined();
});
});
describe('Accessibility', () => {
it('should have proper ARIA attributes', () => {
renderWithProviders(<AgentDetail {...defaultProps} />);
const copyLinkButton = screen.getByRole('button', { name: 'com_agents_copy_link' });
expect(copyLinkButton).toHaveAttribute('aria-label', 'com_agents_copy_link');
});
it('should support keyboard navigation', async () => {
const user = userEvent.setup();
renderWithProviders(<AgentDetail {...defaultProps} />);
const copyLinkButton = screen.getByRole('button', { name: 'com_agents_copy_link' });
// Focus and activate with Enter key
copyLinkButton.focus();
await user.keyboard('{Enter}');
await waitFor(() => {
expect(mockWriteText).toHaveBeenCalledWith(
`${window.location.origin}/c/new?agent_id=test-agent-id`,
);
});
});
it('should have proper focus management', async () => {
renderWithProviders(<AgentDetail {...defaultProps} />);
const copyLinkButton = screen.getByRole('button', { name: 'com_agents_copy_link' });
expect(copyLinkButton).toHaveClass('focus:outline-none', 'focus:ring-2');
});
});
describe('Edge Cases', () => {
it('should handle agent with only email contact', () => {
const agentWithEmailOnly = {
...mockAgent,
support_contact: {
email: 'support@test.com',
},
};
renderWithProviders(<AgentDetail {...defaultProps} agent={agentWithEmailOnly} />);
expect(screen.getByRole('link', { name: 'support@test.com' })).toBeInTheDocument();
});
it('should handle agent with only name contact', () => {
const agentWithNameOnly = {
...mockAgent,
support_contact: {
name: 'Support Team',
},
};
renderWithProviders(<AgentDetail {...defaultProps} agent={agentWithNameOnly} />);
expect(screen.getByText('Support Team')).toBeInTheDocument();
expect(screen.queryByRole('link')).not.toBeInTheDocument();
});
it('should handle very long description with proper text wrapping', () => {
const agentWithLongDescription = {
...mockAgent,
description:
'This is a very long description that should wrap properly and be displayed in multiple lines when the content exceeds the available width of the container.',
};
renderWithProviders(<AgentDetail {...defaultProps} agent={agentWithLongDescription} />);
const description = screen.getByText(agentWithLongDescription.description);
expect(description).toHaveClass('whitespace-pre-wrap');
});
it('should handle special characters in agent name', () => {
const agentWithSpecialChars = {
...mockAgent,
name: 'Test Agent™ & Co. (v2.0)',
};
renderWithProviders(<AgentDetail {...defaultProps} agent={agentWithSpecialChars} />);
expect(screen.getByText('Test Agent™ & Co. (v2.0)')).toBeInTheDocument();
});
});
});

4
client/src/components/SidePanel/Agents/__tests__/AgentFooter.spec.tsx
View file

@ -3,7 +3,7 @@ import { SystemRoles } from 'librechat-data-provider';
import { render, screen } from '@testing-library/react';
import type { UseMutationResult } from '@tanstack/react-query';
import '@testing-library/jest-dom/extend-expect';
import type { Agent, AgentCreateParams, TUser } from 'librechat-data-provider';
import type { Agent, AgentCreateParams, TUser, ResourceType } from 'librechat-data-provider';
import AgentFooter from '../AgentFooter';
import { Panel } from '~/common';
@ -171,7 +171,7 @@ jest.mock('~/components/Sharing', () => ({
resourceDbId: string;
resourceId: string;
resourceName: string;
resourceType: string;
resourceType: ResourceType;
}) => (
<div
data-testid="grant-access-dialog"

376
client/src/components/SidePanel/Agents/__tests__/AgentGrid.integration.spec.tsx
View file

@ -1,376 +0,0 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import AgentGrid from '../AgentGrid';
import type t from 'librechat-data-provider';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
// Mock the marketplace agent query hook
jest.mock('~/data-provider/Agents', () => ({
useMarketplaceAgentsInfiniteQuery: jest.fn(),
}));
jest.mock('~/hooks/Agents', () => ({
useAgentCategories: jest.fn(() => ({
categories: [],
isLoading: false,
error: null,
})),
}));
// Mock SmartLoader
jest.mock('../SmartLoader', () => ({
useHasData: jest.fn(() => true),
}));
// Mock useLocalize hook
jest.mock('~/hooks/useLocalize', () => () => (key: string, options?: any) => {
const mockTranslations: Record<string, string> = {
com_agents_top_picks: 'Top Picks',
com_agents_all: 'All Agents',
com_agents_recommended: 'Our recommended agents',
com_agents_results_for: 'Results for "{{query}}"',
com_agents_see_more: 'See more',
com_agents_error_loading: 'Error loading agents',
com_agents_error_searching: 'Error searching agents',
com_agents_no_results: 'No agents found. Try another search term.',
com_agents_none_in_category: 'No agents found in this category',
com_agents_search_empty_heading: 'No results found',
com_agents_empty_state_heading: 'No agents available',
com_agents_loading: 'Loading...',
com_agents_grid_announcement: '{{count}} agents in {{category}}',
com_agents_load_more_label: 'Load more agents from {{category}}',
};
let translation = mockTranslations[key] || key;
if (options) {
Object.keys(options).forEach((optionKey) => {
translation = translation.replace(new RegExp(`{{${optionKey}}}`, 'g'), options[optionKey]);
});
}
return translation;
});
// Mock ErrorDisplay component
jest.mock('../ErrorDisplay', () => ({
__esModule: true,
default: ({ error, onRetry }: { error: any; onRetry: () => void }) => (
<div>
<div>
{`Error: `}
{typeof error === 'string' ? error : error?.message || 'Unknown error'}
</div>
<button onClick={onRetry}>{`Retry`}</button>
</div>
),
}));
// Mock AgentCard component
jest.mock('../AgentCard', () => ({
__esModule: true,
default: ({ agent, onClick }: { agent: t.Agent; onClick: () => void }) => (
<div data-testid={`agent-card-${agent.id}`} onClick={onClick}>
<h3>{agent.name}</h3>
<p>{agent.description}</p>
</div>
),
}));
// Import the actual modules to get the mocked functions
import { useMarketplaceAgentsInfiniteQuery } from '~/data-provider/Agents';
const mockUseMarketplaceAgentsInfiniteQuery = jest.mocked(useMarketplaceAgentsInfiniteQuery);
describe('AgentGrid Integration with useGetMarketplaceAgentsQuery', () => {
const mockOnSelectAgent = jest.fn();
const mockAgents: t.Agent[] = [
{
id: '1',
name: 'Test Agent 1',
description: 'First test agent',
avatar: { filepath: '/avatar1.png', source: 'local' },
category: 'finance',
authorName: 'Author 1',
created_at: 1672531200000,
instructions: null,
provider: 'custom',
model: 'gpt-4',
model_parameters: {
temperature: null,
maxContextTokens: null,
max_context_tokens: null,
max_output_tokens: null,
top_p: null,
frequency_penalty: null,
presence_penalty: null,
},
},
{
id: '2',
name: 'Test Agent 2',
description: 'Second test agent',
avatar: { filepath: '/avatar2.png', source: 'local' },
category: 'finance',
authorName: 'Author 2',
created_at: 1672531200000,
instructions: null,
provider: 'custom',
model: 'gpt-4',
model_parameters: {
temperature: 0.7,
top_p: 0.9,
frequency_penalty: 0,
maxContextTokens: null,
max_context_tokens: null,
max_output_tokens: null,
presence_penalty: null,
},
},
];
const defaultMockQueryResult = {
data: {
pages: [
{
data: mockAgents,
},
],
},
isLoading: false,
error: null,
isFetching: false,
isFetchingNextPage: false,
hasNextPage: true,
fetchNextPage: jest.fn(),
refetch: jest.fn(),
} as any;
beforeEach(() => {
jest.clearAllMocks();
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue(defaultMockQueryResult);
});
describe('Query Integration', () => {
it('should call useGetMarketplaceAgentsQuery with correct parameters for category search', () => {
render(
<AgentGrid category="finance" searchQuery="test query" onSelectAgent={mockOnSelectAgent} />,
);
expect(mockUseMarketplaceAgentsInfiniteQuery).toHaveBeenCalledWith({
requiredPermission: 1,
category: 'finance',
search: 'test query',
limit: 6,
});
});
it('should call useGetMarketplaceAgentsQuery with promoted=1 for promoted category', () => {
render(<AgentGrid category="promoted" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
expect(mockUseMarketplaceAgentsInfiniteQuery).toHaveBeenCalledWith({
requiredPermission: 1,
promoted: 1,
limit: 6,
});
});
it('should call useGetMarketplaceAgentsQuery without category filter for "all" category', () => {
render(<AgentGrid category="all" searchQuery="" onSelectAgent={mockOnSelectAgent} />);
expect(mockUseMarketplaceAgentsInfiniteQuery).toHaveBeenCalledWith({
requiredPermission: 1,
limit: 6,
});
});
it('should not include category in search when category is "all" or "promoted"', () => {
render(<AgentGrid category="all" searchQuery="test" onSelectAgent={mockOnSelectAgent} />);
expect(mockUseMarketplaceAgentsInfiniteQuery).toHaveBeenCalledWith({
requiredPermission: 1,
search: 'test',
limit: 6,
});
});
});
// Create wrapper with QueryClient
const createWrapper = () => {
const queryClient = new QueryClient({
defaultOptions: { queries: { retry: false } },
});
return ({ children }: { children: React.ReactNode }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
};
describe('Agent Display', () => {
it('should render agent cards when data is available', () => {
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
expect(screen.getByTestId('agent-card-1')).toBeInTheDocument();
expect(screen.getByTestId('agent-card-2')).toBeInTheDocument();
expect(screen.getByText('Test Agent 1')).toBeInTheDocument();
expect(screen.getByText('Test Agent 2')).toBeInTheDocument();
});
it('should call onSelectAgent when agent card is clicked', () => {
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
fireEvent.click(screen.getByTestId('agent-card-1'));
expect(mockOnSelectAgent).toHaveBeenCalledWith(mockAgents[0]);
});
});
describe('Loading States', () => {
it('should show loading state when isLoading is true', () => {
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
...defaultMockQueryResult,
isLoading: true,
data: undefined,
});
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
// Should show skeleton loading state
expect(document.querySelector('.animate-pulse')).toBeInTheDocument();
});
it('should show empty state when no agents are available', () => {
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
...defaultMockQueryResult,
data: {
pages: [
{
data: [],
},
],
},
});
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
expect(screen.getByText('No agents available')).toBeInTheDocument();
});
});
describe('Error Handling', () => {
it('should show error display when query has error', () => {
const mockError = new Error('Failed to fetch agents');
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
...defaultMockQueryResult,
error: mockError,
isError: true,
data: undefined,
});
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
expect(screen.getByText('Error: Failed to fetch agents')).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument();
});
});
describe('Search Results', () => {
it('should show search results title when searching', () => {
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid
category="finance"
searchQuery="automation"
onSelectAgent={mockOnSelectAgent}
/>
</Wrapper>,
);
expect(screen.getByText('Results for "automation"')).toBeInTheDocument();
});
it('should show empty search results message', () => {
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
...defaultMockQueryResult,
data: {
pages: [
{
data: [],
},
],
},
});
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid
category="finance"
searchQuery="nonexistent"
onSelectAgent={mockOnSelectAgent}
/>
</Wrapper>,
);
expect(screen.getByText('No results found')).toBeInTheDocument();
expect(screen.getByText('No agents found. Try another search term.')).toBeInTheDocument();
});
});
describe('Load More Functionality', () => {
it('should show "See more" button when hasNextPage is true', () => {
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
expect(
screen.getByRole('button', { name: 'Load more agents from Finance' }),
).toBeInTheDocument();
});
it('should not show "See more" button when hasNextPage is false', () => {
mockUseMarketplaceAgentsInfiniteQuery.mockReturnValue({
...defaultMockQueryResult,
hasNextPage: false,
});
const Wrapper = createWrapper();
render(
<Wrapper>
<AgentGrid category="finance" searchQuery="" onSelectAgent={mockOnSelectAgent} />
</Wrapper>,
);
expect(screen.queryByRole('button', { name: /Load more agents/ })).not.toBeInTheDocument();
});
});
});

230
client/src/components/SidePanel/Agents/__tests__/CategoryTabs.spec.tsx
View file

@ -1,230 +0,0 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import CategoryTabs from '../CategoryTabs';
import type t from 'librechat-data-provider';
// Mock useLocalize hook
jest.mock('~/hooks/useLocalize', () => () => (key: string) => {
const mockTranslations: Record<string, string> = {
com_agents_top_picks: 'Top Picks',
com_agents_all: 'All',
com_ui_no_categories: 'No categories available',
com_agents_category_tabs_label: 'Agent Categories',
com_ui_agent_category_general: 'General',
com_ui_agent_category_hr: 'HR',
com_ui_agent_category_rd: 'R&D',
com_ui_agent_category_finance: 'Finance',
com_ui_agent_category_it: 'IT',
com_ui_agent_category_sales: 'Sales',
com_ui_agent_category_aftersales: 'After Sales',
};
return mockTranslations[key] || key;
});
describe('CategoryTabs', () => {
const mockCategories: t.TMarketplaceCategory[] = [
{ value: 'promoted', label: 'Top Picks', description: 'Our recommended agents', count: 5 },
{ value: 'all', label: 'All', description: 'All available agents', count: 20 },
{ value: 'general', label: 'General', description: 'General purpose agents', count: 8 },
{ value: 'hr', label: 'HR', description: 'HR agents', count: 3 },
{ value: 'finance', label: 'Finance', description: 'Finance agents', count: 4 },
];
const mockOnChange = jest.fn();
const user = userEvent.setup();
beforeEach(() => {
mockOnChange.mockClear();
});
it('renders provided categories', () => {
render(
<CategoryTabs
categories={mockCategories}
activeTab="promoted"
isLoading={false}
onChange={mockOnChange}
/>,
);
// Check for provided categories
expect(screen.getByText('Top Picks')).toBeInTheDocument();
expect(screen.getByText('All')).toBeInTheDocument();
expect(screen.getByText('General')).toBeInTheDocument();
expect(screen.getByText('HR')).toBeInTheDocument();
expect(screen.getByText('Finance')).toBeInTheDocument();
});
it('handles loading state properly', () => {
render(
<CategoryTabs
categories={[]}
activeTab="promoted"
isLoading={true}
onChange={mockOnChange}
/>,
);
// SmartLoader should handle loading behavior correctly
// The component should render without crashing during loading
expect(screen.queryByText('No categories available')).not.toBeInTheDocument();
});
it('highlights the active tab', () => {
render(
<CategoryTabs
categories={mockCategories}
activeTab="general"
isLoading={false}
onChange={mockOnChange}
/>,
);
const generalTab = screen.getByText('General').closest('button');
expect(generalTab).toHaveClass('bg-surface-tertiary');
// Should have active underline
const underline = generalTab?.querySelector('.absolute.bottom-0');
expect(underline).toBeInTheDocument();
});
it('calls onChange when a tab is clicked', async () => {
render(
<CategoryTabs
categories={mockCategories}
activeTab="promoted"
isLoading={false}
onChange={mockOnChange}
/>,
);
const hrTab = screen.getByText('HR');
await user.click(hrTab);
expect(mockOnChange).toHaveBeenCalledWith('hr');
});
it('handles promoted tab click correctly', async () => {
render(
<CategoryTabs
categories={mockCategories}
activeTab="general"
isLoading={false}
onChange={mockOnChange}
/>,
);
const topPicksTab = screen.getByText('Top Picks');
await user.click(topPicksTab);
expect(mockOnChange).toHaveBeenCalledWith('promoted');
});
it('handles all tab click correctly', async () => {
render(
<CategoryTabs
categories={mockCategories}
activeTab="promoted"
isLoading={false}
onChange={mockOnChange}
/>,
);
const allTab = screen.getByText('All');
await user.click(allTab);
expect(mockOnChange).toHaveBeenCalledWith('all');
});
it('shows inactive state for non-selected tabs', () => {
render(
<CategoryTabs
categories={mockCategories}
activeTab="promoted"
isLoading={false}
onChange={mockOnChange}
/>,
);
const generalTab = screen.getByText('General').closest('button');
expect(generalTab).toHaveClass('bg-surface-secondary');
expect(generalTab).toHaveClass('text-text-secondary');
// Should not have active underline
const underline = generalTab?.querySelector('.absolute.bottom-0');
expect(underline).not.toBeInTheDocument();
});
it('renders with proper accessibility', () => {
render(
<CategoryTabs
categories={mockCategories}
activeTab="promoted"
isLoading={false}
onChange={mockOnChange}
/>,
);
const tabs = screen.getAllByRole('tab');
expect(tabs.length).toBe(5);
// Verify all tabs are properly clickable buttons
tabs.forEach((tab) => {
expect(tab.tagName).toBe('BUTTON');
});
});
it('handles keyboard navigation', async () => {
render(
<CategoryTabs
categories={mockCategories}
activeTab="promoted"
isLoading={false}
onChange={mockOnChange}
/>,
);
const generalTab = screen.getByText('General').closest('button')!;
// Focus the button and click it
generalTab.focus();
expect(document.activeElement).toBe(generalTab);
await user.click(generalTab);
expect(mockOnChange).toHaveBeenCalledWith('general');
});
it('shows empty state when categories prop is empty', () => {
render(
<CategoryTabs
categories={[]}
activeTab="promoted"
isLoading={false}
onChange={mockOnChange}
/>,
);
// Should show empty state message (localized)
expect(screen.getByText('No categories available')).toBeInTheDocument();
});
it('maintains consistent ordering of categories', () => {
render(
<CategoryTabs
categories={mockCategories}
activeTab="promoted"
isLoading={false}
onChange={mockOnChange}
/>,
);
const tabs = screen.getAllByRole('tab');
const tabTexts = tabs.map((tab) => tab.textContent);
// Check that promoted is first and all is second
expect(tabTexts[0]).toBe('Top Picks');
expect(tabTexts[1]).toBe('All');
expect(tabTexts.length).toBe(5);
});
});

303
client/src/components/SidePanel/Agents/__tests__/ErrorDisplay.spec.tsx
View file

@ -1,303 +0,0 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { ErrorDisplay } from '../ErrorDisplay';
// Mock matchMedia
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation((query) => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(),
removeListener: jest.fn(),
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
});
// Mock the localize hook
const mockLocalize = jest.fn((key: string, options?: any) => {
const translations: Record<string, string> = {
com_agents_error_title: 'Something went wrong',
com_agents_error_generic: 'We encountered an issue while loading the content.',
com_agents_error_suggestion_generic: 'Please try refreshing the page or try again later.',
com_agents_error_network_title: 'Connection Problem',
com_agents_error_network_message: 'Unable to connect to the server.',
com_agents_error_network_suggestion: 'Check your internet connection and try again.',
com_agents_error_not_found_title: 'Not Found',
com_agents_error_not_found_message: 'The requested content could not be found.',
com_agents_error_not_found_suggestion:
'Try browsing other options or go back to the marketplace.',
com_agents_error_invalid_request: 'Invalid Request',
com_agents_error_bad_request_message: 'The request could not be processed.',
com_agents_error_bad_request_suggestion: 'Please check your input and try again.',
com_agents_error_server_title: 'Server Error',
com_agents_error_server_message: 'The server is temporarily unavailable.',
com_agents_error_server_suggestion: 'Please try again in a few moments.',
com_agents_error_search_title: 'Search Error',
com_agents_error_category_title: 'Category Error',
com_agents_error_timeout_title: 'Connection Timeout',
com_agents_error_timeout_message: 'The request took too long to complete.',
com_agents_error_timeout_suggestion: 'Please check your internet connection and try again.',
com_agents_search_no_results: `No agents found for "${options?.query}"`,
com_agents_category_empty: `No agents found in the ${options?.category} category`,
com_agents_error_retry: 'Try Again',
};
return translations[key] || key;
});
jest.mock('~/hooks/useLocalize', () => () => mockLocalize);
describe('ErrorDisplay', () => {
beforeEach(() => {
mockLocalize.mockClear();
});
describe('Backend error responses', () => {
it('displays user-friendly message from backend response', () => {
const error = {
response: {
data: {
userMessage: 'Unable to load agents. Please try refreshing the page.',
suggestion: 'Try refreshing the page or check your network connection',
},
},
};
render(<ErrorDisplay error={error} />);
expect(screen.getByText('Something went wrong')).toBeInTheDocument();
expect(
screen.getByText('Unable to load agents. Please try refreshing the page.'),
).toBeInTheDocument();
expect(
screen.getByText('💡 Try refreshing the page or check your network connection'),
).toBeInTheDocument();
});
it('handles search context with backend response', () => {
const error = {
response: {
data: {
userMessage: 'Search is temporarily unavailable. Please try again.',
suggestion: 'Try a different search term or check your network connection',
},
},
};
render(<ErrorDisplay error={error} context={{ searchQuery: 'test query' }} />);
expect(screen.getByText('Search Error')).toBeInTheDocument();
expect(
screen.getByText('Search is temporarily unavailable. Please try again.'),
).toBeInTheDocument();
});
});
describe('Network errors', () => {
it('displays network error message', () => {
const error = {
code: 'NETWORK_ERROR',
message: 'Network Error',
};
render(<ErrorDisplay error={error} />);
expect(screen.getByText('Connection Problem')).toBeInTheDocument();
expect(screen.getByText('Unable to connect to the server.')).toBeInTheDocument();
expect(
screen.getByText('💡 Check your internet connection and try again.'),
).toBeInTheDocument();
});
it('handles timeout errors', () => {
const error = {
code: 'ECONNABORTED',
message: 'timeout of 5000ms exceeded',
};
render(<ErrorDisplay error={error} />);
expect(mockLocalize).toHaveBeenCalledWith('com_agents_error_timeout_title');
expect(mockLocalize).toHaveBeenCalledWith('com_agents_error_timeout_message');
expect(mockLocalize).toHaveBeenCalledWith('com_agents_error_timeout_suggestion');
});
});
describe('HTTP status codes', () => {
it('handles 404 errors with search context', () => {
const error = {
response: {
status: 404,
data: {},
},
};
render(<ErrorDisplay error={error} context={{ searchQuery: 'nonexistent agent' }} />);
expect(screen.getByText('Not Found')).toBeInTheDocument();
expect(screen.getByText('No agents found for "nonexistent agent"')).toBeInTheDocument();
});
it('handles 404 errors with category context', () => {
const error = {
response: {
status: 404,
data: {},
},
};
render(<ErrorDisplay error={error} context={{ category: 'productivity' }} />);
expect(screen.getByText('Not Found')).toBeInTheDocument();
expect(screen.getByText('No agents found in the productivity category')).toBeInTheDocument();
});
it('handles 400 bad request errors', () => {
const error = {
response: {
status: 400,
data: {
error: 'Search query is required',
userMessage: 'Please enter a search term to find agents',
suggestion: 'Enter a search term to find agents by name or description',
},
},
};
render(<ErrorDisplay error={error} />);
expect(screen.getByText('Invalid Request')).toBeInTheDocument();
expect(screen.getByText('Please enter a search term to find agents')).toBeInTheDocument();
expect(
screen.getByText('💡 Enter a search term to find agents by name or description'),
).toBeInTheDocument();
});
it('handles 500 server errors', () => {
const error = {
response: {
status: 500,
data: {},
},
};
render(<ErrorDisplay error={error} />);
expect(screen.getByText('Server Error')).toBeInTheDocument();
expect(screen.getByText('The server is temporarily unavailable.')).toBeInTheDocument();
expect(screen.getByText('💡 Please try again in a few moments.')).toBeInTheDocument();
});
});
describe('Retry functionality', () => {
it('displays retry button when onRetry is provided', () => {
const mockRetry = jest.fn();
const error = {
response: {
data: {
userMessage: 'Unable to load agents. Please try refreshing the page.',
},
},
};
render(<ErrorDisplay error={error} onRetry={mockRetry} />);
const retryButton = screen.getByText('Try Again');
expect(retryButton).toBeInTheDocument();
fireEvent.click(retryButton);
expect(mockRetry).toHaveBeenCalledTimes(1);
});
it('does not display retry button when onRetry is not provided', () => {
const error = {
response: {
data: {
userMessage: 'Unable to load agents. Please try refreshing the page.',
},
},
};
render(<ErrorDisplay error={error} />);
expect(screen.queryByText('Try Again')).not.toBeInTheDocument();
});
});
describe('Context-aware titles', () => {
it('shows search error title for search context', () => {
const error = { message: 'Some error' };
render(<ErrorDisplay error={error} context={{ searchQuery: 'test' }} />);
expect(mockLocalize).toHaveBeenCalledWith('com_agents_error_search_title');
});
it('shows category error title for category context', () => {
const error = { message: 'Some error' };
render(<ErrorDisplay error={error} context={{ category: 'productivity' }} />);
expect(mockLocalize).toHaveBeenCalledWith('com_agents_error_category_title');
});
it('shows generic error title when no context', () => {
const error = { message: 'Some error' };
render(<ErrorDisplay error={error} />);
expect(mockLocalize).toHaveBeenCalledWith('com_agents_error_title');
});
});
describe('Fallback error handling', () => {
it('handles unknown errors gracefully', () => {
const error = {
message: 'Unknown error occurred',
};
render(<ErrorDisplay error={error} />);
expect(screen.getByText('Something went wrong')).toBeInTheDocument();
expect(
screen.getByText('We encountered an issue while loading the content.'),
).toBeInTheDocument();
expect(
screen.getByText('💡 Please try refreshing the page or try again later.'),
).toBeInTheDocument();
});
it('handles null/undefined errors', () => {
render(<ErrorDisplay error={null} />);
expect(screen.getByText('Something went wrong')).toBeInTheDocument();
expect(
screen.getByText('We encountered an issue while loading the content.'),
).toBeInTheDocument();
});
});
describe('Accessibility', () => {
it('renders error icon with proper accessibility', () => {
const error = { message: 'Test error' };
render(<ErrorDisplay error={error} />);
const errorIcon = screen.getByRole('img', { hidden: true });
expect(errorIcon).toBeInTheDocument();
});
it('has proper heading structure', () => {
const error = { message: 'Test error' };
render(<ErrorDisplay error={error} />);
const heading = screen.getByRole('heading', { level: 3 });
expect(heading).toHaveTextContent('Something went wrong');
});
});
});

150
client/src/components/SidePanel/Agents/__tests__/MarketplaceContext.spec.tsx
View file

@ -1,150 +0,0 @@
/* eslint-disable @typescript-eslint/no-require-imports */
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { EModelEndpoint } from 'librechat-data-provider';
import { MarketplaceProvider } from '../MarketplaceContext';
import { useChatContext } from '~/Providers';
// Mock the ChatContext from Providers
jest.mock('~/Providers', () => ({
ChatContext: {
Provider: ({ children, value }: { children: React.ReactNode; value: any }) => (
<div data-testid="chat-context-provider" data-value={JSON.stringify(value)}>
{children}
</div>
),
},
useChatContext: jest.fn(),
}));
// Mock useChatHelpers to avoid Recoil dependency
jest.mock('~/hooks', () => ({
useChatHelpers: jest.fn(),
}));
const mockedUseChatContext = useChatContext as jest.MockedFunction<typeof useChatContext>;
// Test component that consumes the context
const TestConsumer: React.FC = () => {
const context = mockedUseChatContext();
return (
<div>
<div data-testid="endpoint">{context?.conversation?.endpoint}</div>
<div data-testid="conversation-id">{context?.conversation?.conversationId}</div>
<div data-testid="title">{context?.conversation?.title}</div>
</div>
);
};
describe('MarketplaceProvider', () => {
beforeEach(() => {
mockedUseChatContext.mockClear();
// Mock useChatHelpers return value
const { useChatHelpers } = require('~/hooks');
(useChatHelpers as jest.Mock).mockReturnValue({
conversation: {
endpoint: EModelEndpoint.agents,
conversationId: 'marketplace',
title: 'Agent Marketplace',
},
});
});
it('provides correct marketplace context values', () => {
const mockContext = {
conversation: {
endpoint: EModelEndpoint.agents,
conversationId: 'marketplace',
title: 'Agent Marketplace',
},
};
mockedUseChatContext.mockReturnValue(mockContext as ReturnType<typeof useChatContext>);
render(
<MarketplaceProvider>
<TestConsumer />
</MarketplaceProvider>,
);
expect(screen.getByTestId('endpoint')).toHaveTextContent(EModelEndpoint.agents);
expect(screen.getByTestId('conversation-id')).toHaveTextContent('marketplace');
expect(screen.getByTestId('title')).toHaveTextContent('Agent Marketplace');
});
it('creates ChatContext.Provider with correct structure', () => {
render(
<MarketplaceProvider>
<div>{/* eslint-disable-line i18next/no-literal-string */}Test Child</div>
</MarketplaceProvider>,
);
const provider = screen.getByTestId('chat-context-provider');
expect(provider).toBeInTheDocument();
const valueData = JSON.parse(provider.getAttribute('data-value') || '{}');
expect(valueData.conversation).toEqual({
endpoint: EModelEndpoint.agents,
conversationId: 'marketplace',
title: 'Agent Marketplace',
});
});
it('renders children correctly', () => {
render(
<MarketplaceProvider>
<div data-testid="test-child">
{/* eslint-disable-line i18next/no-literal-string */}Test Content
</div>
</MarketplaceProvider>,
);
expect(screen.getByTestId('test-child')).toBeInTheDocument();
expect(screen.getByTestId('test-child')).toHaveTextContent('Test Content');
});
it('provides stable context value (memoization)', () => {
const { rerender } = render(
<MarketplaceProvider>
<TestConsumer />
</MarketplaceProvider>,
);
const firstProvider = screen.getByTestId('chat-context-provider');
const firstValue = firstProvider.getAttribute('data-value');
// Rerender should provide the same memoized value
rerender(
<MarketplaceProvider>
<TestConsumer />
</MarketplaceProvider>,
);
const secondProvider = screen.getByTestId('chat-context-provider');
const secondValue = secondProvider.getAttribute('data-value');
expect(firstValue).toBe(secondValue);
});
it('provides minimal context without bloated functions', () => {
render(
<MarketplaceProvider>
<div>{/* eslint-disable-line i18next/no-literal-string */}Test</div>
</MarketplaceProvider>,
);
const provider = screen.getByTestId('chat-context-provider');
const valueData = JSON.parse(provider.getAttribute('data-value') || '{}');
// Should only have conversation object, not 44 empty functions
expect(Object.keys(valueData)).toContain('conversation');
expect(valueData.conversation).toEqual({
endpoint: EModelEndpoint.agents,
conversationId: 'marketplace',
title: 'Agent Marketplace',
});
});
});

141
client/src/components/SidePanel/Agents/__tests__/SearchBar.spec.tsx
View file

@ -1,141 +0,0 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import SearchBar from '../SearchBar';
// Mock useLocalize hook
jest.mock('~/hooks/useLocalize', () => () => (key: string) => key);
// Mock useDebounce hook
jest.mock('~/hooks', () => ({
useDebounce: (value: string) => value, // Return value immediately for testing
}));
describe('SearchBar', () => {
const mockOnSearch = jest.fn();
const user = userEvent.setup();
beforeEach(() => {
mockOnSearch.mockClear();
});
it('renders with correct placeholder', () => {
render(<SearchBar value="" onSearch={mockOnSearch} />);
const input = screen.getByRole('textbox');
expect(input).toBeInTheDocument();
expect(input).toHaveAttribute('placeholder', 'com_agents_search_placeholder');
});
it('displays the provided value', () => {
render(<SearchBar value="test query" onSearch={mockOnSearch} />);
const input = screen.getByDisplayValue('test query');
expect(input).toBeInTheDocument();
});
it('calls onSearch when user types', async () => {
render(<SearchBar value="" onSearch={mockOnSearch} />);
const input = screen.getByRole('textbox');
await user.type(input, 'test');
// Should call onSearch for each character due to debounce mock
expect(mockOnSearch).toHaveBeenCalled();
});
it('shows clear button when there is text', () => {
render(<SearchBar value="test" onSearch={mockOnSearch} />);
const clearButton = screen.getByRole('button', { name: 'com_agents_clear_search' });
expect(clearButton).toBeInTheDocument();
});
it('does not show clear button when text is empty', () => {
render(<SearchBar value="" onSearch={mockOnSearch} />);
const clearButton = screen.queryByRole('button', { name: 'com_agents_clear_search' });
expect(clearButton).not.toBeInTheDocument();
});
it('clears search when clear button is clicked', async () => {
render(<SearchBar value="test" onSearch={mockOnSearch} />);
const input = screen.getByRole('textbox');
const clearButton = screen.getByRole('button', { name: 'com_agents_clear_search' });
// Verify initial state
expect(input).toHaveValue('test');
await user.click(clearButton);
// Verify onSearch is called and input is cleared
expect(mockOnSearch).toHaveBeenCalledWith('');
expect(input).toHaveValue('');
});
it('updates internal state when value prop changes', () => {
const { rerender } = render(<SearchBar value="initial" onSearch={mockOnSearch} />);
expect(screen.getByDisplayValue('initial')).toBeInTheDocument();
rerender(<SearchBar value="updated" onSearch={mockOnSearch} />);
expect(screen.getByDisplayValue('updated')).toBeInTheDocument();
});
it('has proper accessibility attributes', () => {
render(<SearchBar value="" onSearch={mockOnSearch} />);
const input = screen.getByRole('textbox');
expect(input).toHaveAttribute('aria-label', 'com_agents_search_aria');
});
it('applies custom className', () => {
render(<SearchBar value="" onSearch={mockOnSearch} className="custom-class" />);
const container = screen.getByRole('textbox').closest('div');
expect(container).toHaveClass('custom-class');
});
it('prevents form submission on clear button click', async () => {
const handleSubmit = jest.fn();
render(
<form onSubmit={handleSubmit}>
<SearchBar value="test" onSearch={mockOnSearch} />
</form>,
);
const clearButton = screen.getByRole('button', { name: 'com_agents_clear_search' });
await user.click(clearButton);
expect(handleSubmit).not.toHaveBeenCalled();
});
it('handles rapid typing correctly', async () => {
render(<SearchBar value="" onSearch={mockOnSearch} />);
const input = screen.getByRole('textbox');
// Type multiple characters quickly
await user.type(input, 'quick');
// Should handle all characters
expect(input).toHaveValue('quick');
});
it('maintains focus after clear button click', async () => {
render(<SearchBar value="test" onSearch={mockOnSearch} />);
const input = screen.getByRole('textbox');
const clearButton = screen.getByRole('button', { name: 'com_agents_clear_search' });
input.focus();
await user.click(clearButton);
// Input should still be in the document and ready for new input
expect(input).toBeInTheDocument();
});
});

370
client/src/components/SidePanel/Agents/__tests__/SmartLoader.spec.tsx
View file

@ -1,370 +0,0 @@
import React from 'react';
import { render, screen, waitFor, act } from '@testing-library/react';
import { SmartLoader, useHasData } from '../SmartLoader';
// Mock setTimeout and clearTimeout for testing
jest.useFakeTimers();
describe('SmartLoader', () => {
const LoadingComponent = () => <div data-testid="loading">Loading...</div>;
const ContentComponent = () => (
<div data-testid="content">
{/* eslint-disable-line i18next/no-literal-string */}Content loaded
</div>
);
beforeEach(() => {
jest.clearAllTimers();
});
afterEach(() => {
jest.useRealTimers();
jest.useFakeTimers();
});
describe('Basic functionality', () => {
it('shows content immediately when not loading', () => {
render(
<SmartLoader isLoading={false} hasData={true} loadingComponent={<LoadingComponent />}>
<ContentComponent />
</SmartLoader>,
);
expect(screen.getByTestId('content')).toBeInTheDocument();
expect(screen.queryByTestId('loading')).not.toBeInTheDocument();
});
it('shows content immediately when loading but has existing data', () => {
render(
<SmartLoader isLoading={true} hasData={true} loadingComponent={<LoadingComponent />}>
<ContentComponent />
</SmartLoader>,
);
expect(screen.getByTestId('content')).toBeInTheDocument();
expect(screen.queryByTestId('loading')).not.toBeInTheDocument();
});
it('shows content initially, then loading after delay when loading with no data', async () => {
render(
<SmartLoader
isLoading={true}
hasData={false}
delay={150}
loadingComponent={<LoadingComponent />}
>
<ContentComponent />
</SmartLoader>,
);
// Initially shows content
expect(screen.getByTestId('content')).toBeInTheDocument();
expect(screen.queryByTestId('loading')).not.toBeInTheDocument();
// After delay, shows loading
act(() => {
jest.advanceTimersByTime(150);
});
await waitFor(() => {
expect(screen.getByTestId('loading')).toBeInTheDocument();
expect(screen.queryByTestId('content')).not.toBeInTheDocument();
});
});
it('prevents loading flash for quick responses', async () => {
const { rerender } = render(
<SmartLoader
isLoading={true}
hasData={false}
delay={150}
loadingComponent={<LoadingComponent />}
>
<ContentComponent />
</SmartLoader>,
);
// Initially shows content
expect(screen.getByTestId('content')).toBeInTheDocument();
// Advance time but not past delay
act(() => {
jest.advanceTimersByTime(100);
});
// Loading finishes before delay
rerender(
<SmartLoader
isLoading={false}
hasData={true}
delay={150}
loadingComponent={<LoadingComponent />}
>
<ContentComponent />
</SmartLoader>,
);
// Should still show content, never showed loading
expect(screen.getByTestId('content')).toBeInTheDocument();
expect(screen.queryByTestId('loading')).not.toBeInTheDocument();
// Advance past original delay to ensure loading doesn't appear
act(() => {
jest.advanceTimersByTime(100);
});
expect(screen.getByTestId('content')).toBeInTheDocument();
expect(screen.queryByTestId('loading')).not.toBeInTheDocument();
});
});
describe('Delay behavior', () => {
it('respects custom delay times', async () => {
render(
<SmartLoader
isLoading={true}
hasData={false}
delay={300}
loadingComponent={<LoadingComponent />}
>
<ContentComponent />
</SmartLoader>,
);
// Should show content initially
expect(screen.getByTestId('content')).toBeInTheDocument();
// Should not show loading before delay
act(() => {
jest.advanceTimersByTime(250);
});
expect(screen.getByTestId('content')).toBeInTheDocument();
expect(screen.queryByTestId('loading')).not.toBeInTheDocument();
// Should show loading after delay
act(() => {
jest.advanceTimersByTime(60);
});
await waitFor(() => {
expect(screen.getByTestId('loading')).toBeInTheDocument();
});
});
it('uses default delay when not specified', async () => {
render(
<SmartLoader isLoading={true} hasData={false} loadingComponent={<LoadingComponent />}>
<ContentComponent />
</SmartLoader>,
);
// Should show content initially
expect(screen.getByTestId('content')).toBeInTheDocument();
// Should show loading after default delay (150ms)
act(() => {
jest.advanceTimersByTime(150);
});
await waitFor(() => {
expect(screen.getByTestId('loading')).toBeInTheDocument();
});
});
});
describe('State transitions', () => {
it('immediately hides loading when loading completes', async () => {
const { rerender } = render(
<SmartLoader
isLoading={true}
hasData={false}
delay={100}
loadingComponent={<LoadingComponent />}
>
<ContentComponent />
</SmartLoader>,
);
// Advance past delay to show loading
act(() => {
jest.advanceTimersByTime(100);
});
await waitFor(() => {
expect(screen.getByTestId('loading')).toBeInTheDocument();
});
// Loading completes
rerender(
<SmartLoader
isLoading={false}
hasData={true}
delay={100}
loadingComponent={<LoadingComponent />}
>
<ContentComponent />
</SmartLoader>,
);
// Should immediately show content
expect(screen.getByTestId('content')).toBeInTheDocument();
expect(screen.queryByTestId('loading')).not.toBeInTheDocument();
});
it('handles rapid loading state changes correctly', async () => {
const { rerender } = render(
<SmartLoader
isLoading={true}
hasData={false}
delay={100}
loadingComponent={<LoadingComponent />}
>
<ContentComponent />
</SmartLoader>,
);
// Rapid state changes
rerender(
<SmartLoader
isLoading={false}
hasData={true}
delay={100}
loadingComponent={<LoadingComponent />}
>
<ContentComponent />
</SmartLoader>,
);
rerender(
<SmartLoader
isLoading={true}
hasData={false}
delay={100}
loadingComponent={<LoadingComponent />}
>
<ContentComponent />
</SmartLoader>,
);
// Should show content throughout rapid changes
expect(screen.getByTestId('content')).toBeInTheDocument();
expect(screen.queryByTestId('loading')).not.toBeInTheDocument();
});
});
describe('CSS classes', () => {
it('applies custom className', () => {
const { container } = render(
<SmartLoader
isLoading={false}
hasData={true}
loadingComponent={<LoadingComponent />}
className="custom-class"
>
<ContentComponent />
</SmartLoader>,
);
const wrapper = container.firstChild as HTMLElement;
expect(wrapper).toHaveClass('custom-class');
});
it('applies className to both loading and content states', async () => {
const { container } = render(
<SmartLoader
isLoading={true}
hasData={false}
delay={50}
loadingComponent={<LoadingComponent />}
className="custom-class"
>
<ContentComponent />
</SmartLoader>,
);
// Content state
expect(container.firstChild).toHaveClass('custom-class');
// Loading state
act(() => {
jest.advanceTimersByTime(50);
});
await waitFor(() => {
expect(container.firstChild).toHaveClass('custom-class');
});
});
});
});
describe('useHasData', () => {
const TestComponent: React.FC<{ data: any }> = ({ data }) => {
const hasData = useHasData(data);
return <div data-testid="result">{hasData ? 'has-data' : 'no-data'}</div>;
};
it('returns false for null data', () => {
render(<TestComponent data={null} />);
expect(screen.getByTestId('result')).toHaveTextContent('no-data');
});
it('returns false for undefined data', () => {
render(<TestComponent data={undefined} />);
expect(screen.getByTestId('result')).toHaveTextContent('no-data');
});
it('detects empty agents array as no data', () => {
render(<TestComponent data={{ agents: [] }} />);
expect(screen.getByTestId('result')).toHaveTextContent('no-data');
});
it('detects non-empty agents array as has data', () => {
render(<TestComponent data={{ agents: [{ id: '1', name: 'Test' }] }} />);
expect(screen.getByTestId('result')).toHaveTextContent('has-data');
});
it('detects invalid agents property as no data', () => {
render(<TestComponent data={{ agents: 'not-array' }} />);
expect(screen.getByTestId('result')).toHaveTextContent('no-data');
});
it('detects empty array as no data', () => {
render(<TestComponent data={[]} />);
expect(screen.getByTestId('result')).toHaveTextContent('no-data');
});
it('detects non-empty array as has data', () => {
render(<TestComponent data={[{ name: 'category1' }]} />);
expect(screen.getByTestId('result')).toHaveTextContent('has-data');
});
it('detects agent with id as has data', () => {
render(<TestComponent data={{ id: '123', name: 'Test Agent' }} />);
expect(screen.getByTestId('result')).toHaveTextContent('has-data');
});
it('detects agent with name only as has data', () => {
render(<TestComponent data={{ name: 'Test Agent' }} />);
expect(screen.getByTestId('result')).toHaveTextContent('has-data');
});
it('detects object without id or name as no data', () => {
render(<TestComponent data={{ description: 'Some description' }} />);
expect(screen.getByTestId('result')).toHaveTextContent('no-data');
});
it('handles string data as no data', () => {
render(<TestComponent data="some string" />);
expect(screen.getByTestId('result')).toHaveTextContent('no-data');
});
it('handles number data as no data', () => {
render(<TestComponent data={42} />);
expect(screen.getByTestId('result')).toHaveTextContent('no-data');
});
it('handles boolean data as no data', () => {
render(<TestComponent data={true} />);
expect(screen.getByTestId('result')).toHaveTextContent('no-data');
});
});