Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-21 02:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🔧 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/Agents/tests/Accessibility.spec.tsx Normal file
View file

@ -0,0 +1,536 @@
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();
});
});
});