@semiont/react-ui 0.2.33-build.78 → 0.2.33-build.80

package/src/features/resource-compose/__tests__/ResourceComposePage.test.tsx

@@ -9,26 +9,19 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { ResourceComposePage } from '../components/ResourceComposePage';
 import type { ResourceComposePageProps, SaveResourceParams } from '../components/ResourceComposePage';
-
-// Mock dependencies
-vi.mock('@semiont/react-ui', async () => {
-  const actual = await vi.importActual('@semiont/react-ui');
-  return {
-    ...actual,
-    buttonStyles: {
-      primary: { base: 'btn-primary' },
-      tertiary: { base: 'btn-tertiary' },
-    },
-    CodeMirrorRenderer: ({ content, onChange, editable }: any) => (
-      <textarea
-        data-testid="code-editor"
-        value={content}
-        onChange={(e) => editable && onChange?.(e.target.value)}
-        disabled={!editable}
-      />
-    ),
-  };
-});
+import { EventBusProvider, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+
+// Mock CodeMirrorRenderer to avoid CodeMirror dependencies
+vi.mock('../../../components/CodeMirrorRenderer', () => ({
+  CodeMirrorRenderer: ({ content, onChange, editable }: any) => (
+    <textarea
+      data-testid="code-editor"
+      value={content}
+      onChange={(e) => editable && onChange?.(e.target.value)}
+      disabled={!editable}
+    />
+  ),
+}));
 
 const createMockTranslations = () => ({
   title: 'Compose Resource',
@@ -69,11 +62,8 @@ const createMockProps = (overrides?: Partial<ResourceComposePageProps>): Resourc
   availableEntityTypes: ['Document', 'Article', 'Report'],
   initialLocale: 'en',
   theme: 'light',
-  onThemeChange: vi.fn(),
   showLineNumbers: false,
-  onLineNumbersToggle: vi.fn(),
   activePanel: null,
-  onPanelToggle: vi.fn(),
   onSaveResource: vi.fn().mockResolvedValue(undefined),
   onCancel: vi.fn(),
   translations: createMockTranslations(),
@@ -82,18 +72,27 @@ const createMockProps = (overrides?: Partial<ResourceComposePageProps>): Resourc
   ...overrides,
 });
 
+// Helper to render with EventBusProvider
+const renderWithProviders = (ui: React.ReactElement) => {
+  return render(<EventBusProvider>{ui}</EventBusProvider>);
+};
+
 describe('ResourceComposePage', () => {
+  beforeEach(() => {
+    resetEventBusForTesting();
+  });
+
   describe('Basic Rendering - New Resource Mode', () => {
     it('renders without crashing', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByText('Compose Resource')).toBeInTheDocument();
     });
 
     it('renders resource name input', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByLabelText('Resource Name')).toBeInTheDocument();
       expect(screen.getByPlaceholderText('Enter resource name')).toBeInTheDocument();
@@ -101,7 +100,7 @@ describe('ResourceComposePage', () => {
 
     it('renders entity type selection', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByText('Entity Types')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: /Document entity type/ })).toBeInTheDocument();
@@ -111,14 +110,14 @@ describe('ResourceComposePage', () => {
 
     it('renders language selector', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByLabelText('Language')).toBeInTheDocument();
     });
 
     it('renders content source toggle', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByText('Upload File')).toBeInTheDocument();
       expect(screen.getByText('Write Content')).toBeInTheDocument();
@@ -126,7 +125,7 @@ describe('ResourceComposePage', () => {
 
     it('renders toolbar component', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByTestId('toolbar')).toBeInTheDocument();
     });
@@ -144,7 +143,7 @@ describe('ResourceComposePage', () => {
           sourceContent: 'Original content',
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByText('Edit Cloned Resource')).toBeInTheDocument();
       expect(screen.getByText('Editing a cloned resource')).toBeInTheDocument();
@@ -161,7 +160,7 @@ describe('ResourceComposePage', () => {
           sourceContent: 'Original content',
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const nameInput = screen.getByLabelText('Resource Name') as HTMLInputElement;
       expect(nameInput.value).toBe('Original Resource');
@@ -181,7 +180,7 @@ describe('ResourceComposePage', () => {
           sourceContent: 'Original content',
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByLabelText('Archive original resource')).toBeInTheDocument();
     });
@@ -197,7 +196,7 @@ describe('ResourceComposePage', () => {
           sourceContent: 'Original content',
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.queryByText('Upload File')).not.toBeInTheDocument();
       expect(screen.queryByText('Write Content')).not.toBeInTheDocument();
@@ -215,7 +214,7 @@ describe('ResourceComposePage', () => {
           entityTypes: ['Document'],
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByText('Complete Reference')).toBeInTheDocument();
       expect(screen.getByText('Creating a new resource for reference')).toBeInTheDocument();
@@ -232,7 +231,7 @@ describe('ResourceComposePage', () => {
           entityTypes: ['Document', 'Article'],
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const nameInput = screen.getByLabelText('Resource Name') as HTMLInputElement;
       expect(nameInput.value).toBe('Referenced Resource');
@@ -251,7 +250,7 @@ describe('ResourceComposePage', () => {
           entityTypes: ['Document'],
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       // Should show read-only entity types
       expect(screen.getByText('Document')).toBeInTheDocument();
@@ -267,7 +266,7 @@ describe('ResourceComposePage', () => {
   describe('Content Input Method', () => {
     it('defaults to write mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const writeButton = screen.getByText('Write Content').closest('button');
       expect(writeButton).toHaveAttribute('data-active', 'true');
@@ -275,7 +274,7 @@ describe('ResourceComposePage', () => {
 
     it('allows switching to upload mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const uploadButton = screen.getByText('Upload File').closest('button');
       fireEvent.click(uploadButton!);
@@ -285,28 +284,28 @@ describe('ResourceComposePage', () => {
 
     it('shows format selector in write mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByLabelText('Format')).toBeInTheDocument();
     });
 
     it('shows encoding selector in write mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByLabelText('Encoding')).toBeInTheDocument();
     });
 
     it('shows code editor in write mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByTestId('code-editor')).toBeInTheDocument();
     });
 
     it('shows file upload in upload mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const uploadButton = screen.getByText('Upload File').closest('button');
       fireEvent.click(uploadButton!);
@@ -319,7 +318,7 @@ describe('ResourceComposePage', () => {
     it('calls onSaveResource with correct params for new resource', async () => {
       const onSaveResource = vi.fn().mockResolvedValue(undefined);
       const props = createMockProps({ onSaveResource });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       // Fill in name
       const nameInput = screen.getByLabelText('Resource Name');
@@ -353,7 +352,7 @@ describe('ResourceComposePage', () => {
     it('includes selected entity types', async () => {
       const onSaveResource = vi.fn().mockResolvedValue(undefined);
       const props = createMockProps({ onSaveResource });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       // Fill in name
       const nameInput = screen.getByLabelText('Resource Name');
@@ -378,7 +377,7 @@ describe('ResourceComposePage', () => {
 
     it('requires resource name', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const submitButton = screen.getByRole('button', { name: 'Create Resource' });
       expect(submitButton).toBeDisabled();
@@ -386,7 +385,7 @@ describe('ResourceComposePage', () => {
 
     it('enables submit button when name is provided', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const nameInput = screen.getByLabelText('Resource Name');
       fireEvent.change(nameInput, { target: { value: 'Test Resource' } });
@@ -398,7 +397,7 @@ describe('ResourceComposePage', () => {
     it('disables form during submission', async () => {
       const onSaveResource = vi.fn(() => new Promise<void>(resolve => setTimeout(resolve, 100)));
       const props = createMockProps({ onSaveResource });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const nameInput = screen.getByLabelText('Resource Name');
       fireEvent.change(nameInput, { target: { value: 'Test Resource' } });
@@ -419,7 +418,7 @@ describe('ResourceComposePage', () => {
     it('calls onCancel when cancel button clicked', () => {
       const onCancel = vi.fn();
       const props = createMockProps({ onCancel });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const cancelButton = screen.getByRole('button', { name: 'Cancel' });
       fireEvent.click(cancelButton);
@@ -431,7 +430,7 @@ describe('ResourceComposePage', () => {
   describe('Toolbar Integration', () => {
     it('renders ToolbarPanels component', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByTestId('toolbar-panels')).toBeInTheDocument();
     });
@@ -440,16 +439,14 @@ describe('ResourceComposePage', () => {
       const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
       const props = createMockProps({
         theme: 'dark',
-        onThemeChange: vi.fn(),
         ToolbarPanels,
       });
 
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({
           theme: 'dark',
-          onThemeChange: expect.any(Function),
         }),
         expect.anything()
       );
@@ -459,7 +456,7 @@ describe('ResourceComposePage', () => {
   describe('Code Editor Integration', () => {
     it('allows editing content', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const editor = screen.getByTestId('code-editor') as HTMLTextAreaElement;
       fireEvent.change(editor, { target: { value: 'New content' } });
@@ -469,7 +466,7 @@ describe('ResourceComposePage', () => {
 
     it('respects showLineNumbers prop', () => {
       const props = createMockProps({ showLineNumbers: true });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByTestId('code-editor')).toBeInTheDocument();
     });

package/src/features/resource-compose/components/ResourceComposePage.tsx

@@ -9,8 +9,9 @@
 import React, { useState, useEffect } from 'react';
 import type { components } from '@semiont/api-client';
 import { isImageMimeType, isPdfMimeType, LOCALES } from '@semiont/api-client';
-import { buttonStyles, CodeMirrorRenderer } from '@semiont/react-ui';
-import { useFormAnnouncements } from '@semiont/react-ui';
+import { buttonStyles } from '../../../lib/button-styles';
+import { CodeMirrorRenderer } from '../../../components/CodeMirrorRenderer';
+import { useFormAnnouncements } from '../../../components/LiveRegion';
 
 type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
 
@@ -40,11 +41,8 @@ export interface ResourceComposePageProps {
 
   // UI state
   theme: 'light' | 'dark';
-  onThemeChange: (theme: 'light' | 'dark') => void;
   showLineNumbers: boolean;
-  onLineNumbersToggle: () => void;
   activePanel: string | null;
-  onPanelToggle: (panel: string) => void;
 
   // Actions
   onSaveResource: (params: SaveResourceParams) => Promise<void>;
@@ -111,11 +109,8 @@ export function ResourceComposePage({
   availableEntityTypes,
   initialLocale,
   theme,
-  onThemeChange,
   showLineNumbers,
-  onLineNumbersToggle,
   activePanel,
-  onPanelToggle,
   onSaveResource,
   onCancel,
   translations: t,
@@ -529,12 +524,10 @@ export function ResourceComposePage({
                 <div className="semiont-form__editor-wrapper" lang={selectedLanguage}>
                   <CodeMirrorRenderer
                     content={newResourceContent}
-                    segments={[]}
                     editable={!isCreating}
                     sourceView={true}
                     showLineNumbers={showLineNumbers}
                     onChange={(newContent) => setNewResourceContent(newContent)}
-                    annotators={{}}
                   />
                 </div>
               </div>
@@ -610,16 +603,13 @@ export function ResourceComposePage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          onThemeChange={onThemeChange}
           showLineNumbers={showLineNumbers}
-          onLineNumbersToggle={onLineNumbersToggle}
         />
 
         {/* Toolbar - Always visible on the right */}
         <Toolbar
           context="simple"
           activePanel={activePanel}
-          onPanelToggle={onPanelToggle}
         />
       </div>
     </div>

package/src/features/resource-discovery/__tests__/ResourceDiscoveryPage.test.tsx

@@ -5,23 +5,11 @@
  * No Next.js mocking required - all dependencies passed as props!
  */
 
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { ResourceDiscoveryPage } from '../components/ResourceDiscoveryPage';
 import type { ResourceDiscoveryPageProps } from '../components/ResourceDiscoveryPage';
-
-// Mock dependencies
-vi.mock('@semiont/react-ui', async () => {
-  const actual = await vi.importActual('@semiont/react-ui');
-  return {
-    ...actual,
-    useRovingTabIndex: () => ({
-      containerRef: { current: null },
-      handleKeyDown: vi.fn(),
-    }),
-    Toolbar: () => <div data-testid="toolbar">Toolbar</div>,
-  };
-});
+import { EventBusProvider, resetEventBusForTesting } from '../../../contexts/EventBusContext';
 
 const createMockResource = (id: string, name: string, entityTypes: string[] = []) => ({
   '@context': 'https://www.w3.org/ns/anno.jsonld',
@@ -42,11 +30,8 @@ const createMockProps = (overrides?: Partial<ResourceDiscoveryPageProps>): Resou
   isLoadingRecent: false,
   isSearching: false,
   theme: 'light',
-  onThemeChange: vi.fn(),
   showLineNumbers: false,
-  onLineNumbersToggle: vi.fn(),
   activePanel: null,
-  onPanelToggle: vi.fn(),
   onNavigateToResource: vi.fn(),
   onNavigateToCompose: vi.fn(),
   translations: {
@@ -71,18 +56,27 @@ const createMockProps = (overrides?: Partial<ResourceDiscoveryPageProps>): Resou
   ...overrides,
 });
 
+// Helper to render with EventBusProvider
+const renderWithProviders = (ui: React.ReactElement) => {
+  return render(<EventBusProvider>{ui}</EventBusProvider>);
+};
+
 describe('ResourceDiscoveryPage', () => {
+  beforeEach(() => {
+    resetEventBusForTesting();
+  });
+
   describe('Basic Rendering', () => {
     it('renders without crashing', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Discover Resources')).toBeInTheDocument();
     });
 
     it('displays page title and subtitle', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Discover Resources')).toBeInTheDocument();
       expect(screen.getByText('Search and browse available resources')).toBeInTheDocument();
@@ -90,37 +84,39 @@ describe('ResourceDiscoveryPage', () => {
 
     it('renders search input', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByPlaceholderText('Search resources...')).toBeInTheDocument();
     });
 
     it('renders search button', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument();
     });
 
     it('renders toolbar component', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      const { container } = renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
-      expect(screen.getByTestId('toolbar')).toBeInTheDocument();
+      // Toolbar renders with context="simple" - check for toolbar element
+      const toolbar = container.querySelector('.semiont-toolbar[data-context="simple"]');
+      expect(toolbar).toBeInTheDocument();
     });
   });
 
   describe('Loading State', () => {
     it('shows loading message when isLoadingRecent is true', () => {
       const props = createMockProps({ isLoadingRecent: true });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Loading knowledge base...')).toBeInTheDocument();
     });
 
     it('does not show main content when loading', () => {
       const props = createMockProps({ isLoadingRecent: true });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.queryByText('Discover Resources')).not.toBeInTheDocument();
     });
@@ -135,7 +131,7 @@ describe('ResourceDiscoveryPage', () => {
       ];
 
       const props = createMockProps({ recentDocuments });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Document 1')).toBeInTheDocument();
       expect(screen.getByText('Document 2')).toBeInTheDocument();
@@ -146,28 +142,28 @@ describe('ResourceDiscoveryPage', () => {
       const props = createMockProps({
         recentDocuments: [createMockResource('1', 'Document 1')],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Recent Resources')).toBeInTheDocument();
     });
 
     it('shows empty state when no documents', () => {
       const props = createMockProps({ recentDocuments: [] });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('No resources available')).toBeInTheDocument();
     });
 
     it('shows compose button in empty state', () => {
       const props = createMockProps({ recentDocuments: [] });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByRole('button', { name: 'Compose First Resource' })).toBeInTheDocument();
     });
 
     it('calls onNavigateToCompose when compose button clicked', () => {
       const props = createMockProps({ recentDocuments: [] });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const button = screen.getByRole('button', { name: 'Compose First Resource' });
       fireEvent.click(button);
@@ -179,7 +175,7 @@ describe('ResourceDiscoveryPage', () => {
   describe('Search Functionality', () => {
     it('allows typing in search input', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const input = screen.getByPlaceholderText('Search resources...') as HTMLInputElement;
       fireEvent.change(input, { target: { value: 'test query' } });
@@ -189,14 +185,14 @@ describe('ResourceDiscoveryPage', () => {
 
     it('shows "Searching..." when isSearching is true', () => {
       const props = createMockProps({ isSearching: true });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByRole('button', { name: 'Searching...' })).toBeInTheDocument();
     });
 
     it('disables search input when isSearching is true', () => {
       const props = createMockProps({ isSearching: true });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const input = screen.getByPlaceholderText('Search resources...') as HTMLInputElement;
       expect(input).toBeDisabled();
@@ -204,7 +200,7 @@ describe('ResourceDiscoveryPage', () => {
 
     it('disables search button when isSearching is true', () => {
       const props = createMockProps({ isSearching: true });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const button = screen.getByRole('button', { name: 'Searching...' });
       expect(button).toBeDisabled();
@@ -217,7 +213,7 @@ describe('ResourceDiscoveryPage', () => {
       ];
 
       const props = createMockProps({ searchDocuments });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       // Type in search input to trigger search state
       const input = screen.getByPlaceholderText('Search resources...');
@@ -232,7 +228,7 @@ describe('ResourceDiscoveryPage', () => {
         searchDocuments: [],
         recentDocuments: [createMockResource('1', 'Recent Doc')],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const input = screen.getByPlaceholderText('Search resources...');
       fireEvent.change(input, { target: { value: 'nonexistent' } });
@@ -248,7 +244,7 @@ describe('ResourceDiscoveryPage', () => {
       const props = createMockProps({
         entityTypes: ['Document', 'Article', 'Report'],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByText('Filter by type')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'All' })).toBeInTheDocument();
@@ -266,7 +262,7 @@ describe('ResourceDiscoveryPage', () => {
         ],
         entityTypes: ['Document', 'Article'],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       // Initially all documents shown
       expect(screen.getByText('Doc 1')).toBeInTheDocument();
@@ -287,7 +283,7 @@ describe('ResourceDiscoveryPage', () => {
         recentDocuments: [createMockResource('1', 'Doc 1', ['Document'])],
         entityTypes: ['Document'],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const documentButton = screen.getByRole('button', { name: 'Document' });
       fireEvent.click(documentButton);
@@ -303,7 +299,7 @@ describe('ResourceDiscoveryPage', () => {
         ],
         entityTypes: ['Document', 'Article'],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       // Filter by Document
       const documentButton = screen.getByRole('button', { name: 'Document' });
@@ -326,7 +322,7 @@ describe('ResourceDiscoveryPage', () => {
       const props = createMockProps({
         recentDocuments: [createMockResource('test-123', 'Test Document')],
       });
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const card = screen.getByRole('button', { name: /Open resource: Test Document/ });
       fireEvent.click(card);
@@ -338,7 +334,7 @@ describe('ResourceDiscoveryPage', () => {
   describe('Toolbar Integration', () => {
     it('renders ToolbarPanels component', () => {
       const props = createMockProps();
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(screen.getByTestId('toolbar-panels')).toBeInTheDocument();
     });
@@ -347,16 +343,14 @@ describe('ResourceDiscoveryPage', () => {
       const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
       const props = createMockProps({
         theme: 'dark',
-        onThemeChange: vi.fn(),
         ToolbarPanels,
       });
 
-      render(<ResourceDiscoveryPage {...props} />);
+      renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({
           theme: 'dark',
-          onThemeChange: expect.any(Function),
         }),
         expect.anything()
       );