@semiont/react-ui 0.4.17 → 0.4.18

package/src/components/modals/__tests__/SearchModal.search-wiring.test.tsx

@@ -0,0 +1,221 @@
+/**
+ * SearchModal — wiring + UI tests
+ *
+ * Verifies that SearchModal correctly wires createSearchPipeline to
+ * browse.resources, maps results to its SearchResult shape, and renders
+ * each emission. Pure pipeline behavior (debounce, distinct, switchMap,
+ * loading state) is covered by search-pipeline.test.ts and not duplicated
+ * here.
+ *
+ * Mocks HeadlessUI to dodge the jsdom OOM that prevents the older
+ * SearchModal.* test files from running.
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import React from 'react';
+import { screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { BehaviorSubject } from 'rxjs';
+import { renderWithProviders } from '../../../test-utils';
+import '@testing-library/jest-dom';
+import { SearchModal } from '../SearchModal';
+
+// Mock HeadlessUI to avoid jsdom OOM issues
+vi.mock('@headlessui/react', () => ({
+  Dialog: ({ children, ...props }: any) => (
+    <div role="dialog" {...props}>
+      {typeof children === 'function' ? children({ open: true }) : children}
+    </div>
+  ),
+  DialogPanel: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  DialogTitle: ({ children, ...props }: any) => <h2 {...props}>{children}</h2>,
+  Transition: ({ show, children }: any) => (show ? <>{children}</> : null),
+  TransitionChild: ({ children }: any) => <>{children}</>,
+}));
+
+// Mock the api-client Observable surface
+const browseResourcesSubject = new BehaviorSubject<any[] | undefined>(undefined);
+const browseResourcesMock = vi.fn(() => browseResourcesSubject.asObservable());
+
+// Stable client reference — useApiClient is called on every render, so a
+// fresh object literal would invalidate useMemo deps and restart the RxJS
+// pipeline on every keystroke. The real ApiClientProvider holds a single
+// instance; the mock must do the same.
+const stableMockClient = { browse: { resources: browseResourcesMock } };
+
+vi.mock('../../../contexts/ApiClientContext', async () => {
+  const actual = await vi.importActual<typeof import('../../../contexts/ApiClientContext')>(
+    '../../../contexts/ApiClientContext'
+  );
+  return {
+    ...actual,
+    useApiClient: () => stableMockClient,
+  };
+});
+
+// Mock search announcements
+vi.mock('../../../hooks/useSearchAnnouncements', () => ({
+  useSearchAnnouncements: vi.fn(() => ({
+    announceSearchResults: vi.fn(),
+    announceSearching: vi.fn(),
+    announceNavigation: vi.fn(),
+  })),
+}));
+
+function setBrowseResults(resources: any[] | undefined) {
+  act(() => {
+    browseResourcesSubject.next(resources);
+  });
+}
+
+const buildResource = (id: string, name: string, content?: string) => ({
+  '@context': 'https://www.w3.org/ns/anno.jsonld',
+  '@id': id,
+  name,
+  content,
+  representations: [{ mediaType: 'text/plain', isPrimary: true }],
+});
+
+describe('SearchModal — search wiring', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: vi.fn(),
+    onNavigate: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    browseResourcesSubject.next(undefined);
+  });
+
+  it('renders the search input when open', () => {
+    renderWithProviders(<SearchModal {...defaultProps} />);
+    expect(screen.getByPlaceholderText('Search resources, entities...')).toBeInTheDocument();
+  });
+
+  it('does not render when closed', () => {
+    renderWithProviders(<SearchModal {...defaultProps} isOpen={false} />);
+    expect(screen.queryByPlaceholderText('Search resources, entities...')).not.toBeInTheDocument();
+  });
+
+  it('shows the start-typing hint when query is empty', () => {
+    renderWithProviders(<SearchModal {...defaultProps} />);
+    expect(screen.getByText('Start typing to search...')).toBeInTheDocument();
+  });
+
+  it('wires the modal to browse.resources with the correct shape', async () => {
+    // One integration check that the modal calls browse.resources with the
+    // limit and search shape it advertises. Pipeline mechanics (debounce,
+    // empty-query gating) live in search-pipeline.test.ts.
+    renderWithProviders(<SearchModal {...defaultProps} />);
+    const input = screen.getByPlaceholderText('Search resources, entities...');
+
+    fireEvent.change(input, { target: { value: 'marathon' } });
+
+    await waitFor(
+      () => expect(browseResourcesMock).toHaveBeenCalledWith({ search: 'marathon', limit: 5 }),
+      { timeout: 1500 }
+    );
+  });
+
+  it('renders results when the Observable emits a non-empty list', async () => {
+    renderWithProviders(<SearchModal {...defaultProps} />);
+    const input = screen.getByPlaceholderText('Search resources, entities...');
+    fireEvent.change(input, { target: { value: 'test' } });
+
+    await waitFor(() => expect(browseResourcesMock).toHaveBeenCalled(), { timeout: 1500 });
+    setBrowseResults([
+      buildResource('res-1', 'Test Document', 'Some content here'),
+      buildResource('res-2', 'Another Result', 'More content'),
+    ]);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Document')).toBeInTheDocument();
+      expect(screen.getByText('Another Result')).toBeInTheDocument();
+    }, { timeout: 1500 });
+  });
+
+  it('shows the no-results message after an empty emission', async () => {
+    renderWithProviders(<SearchModal {...defaultProps} />);
+    const input = screen.getByPlaceholderText('Search resources, entities...');
+    fireEvent.change(input, { target: { value: 'xyz' } });
+
+    await waitFor(() => expect(browseResourcesMock).toHaveBeenCalled(), { timeout: 1500 });
+    setBrowseResults([]);
+
+    await waitFor(() => {
+      expect(screen.getByText(/No results found for/)).toBeInTheDocument();
+      expect(screen.getByText(/"xyz"/)).toBeInTheDocument();
+    }, { timeout: 1500 });
+  });
+
+  it('shows the searching state while the Observable has not emitted', async () => {
+    renderWithProviders(<SearchModal {...defaultProps} />);
+    const input = screen.getByPlaceholderText('Search resources, entities...');
+    fireEvent.change(input, { target: { value: 'foo' } });
+
+    // After debounce fires, the inner observable starts with { results: [], loading: true }.
+    await waitFor(() => expect(screen.getByText('Searching...')).toBeInTheDocument(), {
+      timeout: 1500,
+    });
+  });
+
+  it('navigates to a result and closes when clicked', async () => {
+    const onClose = vi.fn();
+    const onNavigate = vi.fn();
+    renderWithProviders(
+      <SearchModal {...defaultProps} onClose={onClose} onNavigate={onNavigate} />
+    );
+
+    const input = screen.getByPlaceholderText('Search resources, entities...');
+    fireEvent.change(input, { target: { value: 'doc' } });
+
+    await waitFor(() => expect(browseResourcesMock).toHaveBeenCalled(), { timeout: 1500 });
+    setBrowseResults([buildResource('res-1', 'Pickable', 'preview')]);
+
+    await waitFor(() => expect(screen.getByText('Pickable')).toBeInTheDocument(), {
+      timeout: 1500,
+    });
+
+    fireEvent.click(screen.getByText('Pickable'));
+    expect(onNavigate).toHaveBeenCalledWith('resource', 'res-1');
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('moves selection with arrow keys and selects with Enter', async () => {
+    const onNavigate = vi.fn();
+    renderWithProviders(<SearchModal {...defaultProps} onNavigate={onNavigate} />);
+
+    const input = screen.getByPlaceholderText('Search resources, entities...');
+    fireEvent.change(input, { target: { value: 'doc' } });
+
+    await waitFor(() => expect(browseResourcesMock).toHaveBeenCalled(), { timeout: 1500 });
+    setBrowseResults([
+      buildResource('res-1', 'First'),
+      buildResource('res-2', 'Second'),
+      buildResource('res-3', 'Third'),
+    ]);
+
+    await waitFor(() => expect(screen.getByText('Third')).toBeInTheDocument(), { timeout: 1500 });
+
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onNavigate).toHaveBeenCalledWith('resource', 'res-3');
+  });
+
+  it('skips resources without an @id', async () => {
+    renderWithProviders(<SearchModal {...defaultProps} />);
+    const input = screen.getByPlaceholderText('Search resources, entities...');
+    fireEvent.change(input, { target: { value: 'q' } });
+
+    await waitFor(() => expect(browseResourcesMock).toHaveBeenCalled(), { timeout: 1500 });
+    setBrowseResults([
+      { '@context': 'https://www.w3.org/ns/anno.jsonld', name: 'No ID', representations: [] },
+      buildResource('res-keep', 'Has ID'),
+    ]);
+
+    await waitFor(() => expect(screen.getByText('Has ID')).toBeInTheDocument(), { timeout: 1500 });
+    expect(screen.queryByText('No ID')).not.toBeInTheDocument();
+  });
+});

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

@@ -6,7 +6,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { ResourceDiscoveryPage } from '../components/ResourceDiscoveryPage';
 import type { ResourceDiscoveryPageProps } from '../components/ResourceDiscoveryPage';
 import { EventBusProvider } from '../../../contexts/EventBusContext';
@@ -29,6 +29,8 @@ const createMockProps = (overrides?: Partial<ResourceDiscoveryPageProps>): Resou
   entityTypes: [],
   isLoadingRecent: false,
   isSearching: false,
+  searchQuery: '',
+  onSearchQueryChange: vi.fn(),
   theme: 'light',
   showLineNumbers: false,
   activePanel: null,
@@ -88,13 +90,6 @@ describe('ResourceDiscoveryPage', () => {
       expect(screen.getByPlaceholderText('Search resources...')).toBeInTheDocument();
     });
 
-    it('renders search button', () => {
-      const props = createMockProps();
-      renderWithProviders(<ResourceDiscoveryPage {...props} />);
-
-      expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument();
-    });
-
     it('renders toolbar component', () => {
       const props = createMockProps();
       const { container } = renderWithProviders(<ResourceDiscoveryPage {...props} />);
@@ -172,69 +167,75 @@ describe('ResourceDiscoveryPage', () => {
   });
 
   describe('Search Functionality', () => {
-    it('allows typing in search input', () => {
-      const props = createMockProps();
+    it('reflects controlled searchQuery prop in the input', () => {
+      const props = createMockProps({ searchQuery: 'hello' });
       renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
       const input = screen.getByPlaceholderText('Search resources...') as HTMLInputElement;
-      fireEvent.change(input, { target: { value: 'test query' } });
-
-      expect(input.value).toBe('test query');
+      expect(input.value).toBe('hello');
     });
 
-    it('shows "Searching..." when isSearching is true', () => {
-      const props = createMockProps({ isSearching: true });
+    it('calls onSearchQueryChange on every keystroke', () => {
+      const onSearchQueryChange = vi.fn();
+      const props = createMockProps({ onSearchQueryChange });
       renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
-      expect(screen.getByRole('button', { name: 'Searching...' })).toBeInTheDocument();
+      const input = screen.getByPlaceholderText('Search resources...');
+      fireEvent.change(input, { target: { value: 'a' } });
+      fireEvent.change(input, { target: { value: 'ab' } });
+      fireEvent.change(input, { target: { value: 'abc' } });
+
+      expect(onSearchQueryChange).toHaveBeenCalledTimes(3);
+      expect(onSearchQueryChange).toHaveBeenNthCalledWith(1, 'a');
+      expect(onSearchQueryChange).toHaveBeenNthCalledWith(2, 'ab');
+      expect(onSearchQueryChange).toHaveBeenNthCalledWith(3, 'abc');
     });
 
-    it('disables search input when isSearching is true', () => {
-      const props = createMockProps({ isSearching: true });
+    it('shows the searching indicator when isSearching is true', () => {
+      const props = createMockProps({ isSearching: true, searchQuery: 'foo' });
       renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
-      const input = screen.getByPlaceholderText('Search resources...') as HTMLInputElement;
-      expect(input).toBeDisabled();
+      expect(screen.getByText('Searching...')).toBeInTheDocument();
     });
 
-    it('disables search button when isSearching is true', () => {
-      const props = createMockProps({ isSearching: true });
+    it('renders searchDocuments when searchQuery is non-empty', () => {
+      const props = createMockProps({
+        searchQuery: 'res',
+        searchDocuments: [
+          createMockResource('1', 'Search Result 1'),
+          createMockResource('2', 'Search Result 2'),
+        ],
+        recentDocuments: [createMockResource('99', 'Recent Doc')],
+      });
       renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
-      const button = screen.getByRole('button', { name: 'Searching...' });
-      expect(button).toBeDisabled();
+      expect(screen.getByText('Search Result 1')).toBeInTheDocument();
+      expect(screen.getByText('Search Result 2')).toBeInTheDocument();
+      expect(screen.queryByText('Recent Doc')).not.toBeInTheDocument();
+      expect(screen.getByText('2 results found')).toBeInTheDocument();
     });
 
-    it('displays search results with count', () => {
-      const searchDocuments = [
-        createMockResource('1', 'Result 1'),
-        createMockResource('2', 'Result 2'),
-      ];
-
-      const props = createMockProps({ searchDocuments });
+    it('shows no-results warning when searchQuery is non-empty, results empty, and not searching', () => {
+      const props = createMockProps({
+        searchQuery: 'nonexistent',
+        searchDocuments: [],
+        isSearching: false,
+        recentDocuments: [createMockResource('1', 'Recent Doc')],
+      });
       renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
-      // Type in search input to trigger search state
-      const input = screen.getByPlaceholderText('Search resources...');
-      fireEvent.change(input, { target: { value: 'test' } });
-
-      expect(screen.getByText('Result 1')).toBeInTheDocument();
-      expect(screen.getByText('Result 2')).toBeInTheDocument();
+      expect(screen.getByText('No results found for "nonexistent"')).toBeInTheDocument();
     });
 
-    it('shows no results warning when search returns nothing', async () => {
+    it('does not show no-results warning while still searching', () => {
       const props = createMockProps({
+        searchQuery: 'foo',
         searchDocuments: [],
-        recentDocuments: [createMockResource('1', 'Recent Doc')],
+        isSearching: true,
       });
       renderWithProviders(<ResourceDiscoveryPage {...props} />);
 
-      const input = screen.getByPlaceholderText('Search resources...');
-      fireEvent.change(input, { target: { value: 'nonexistent' } });
-
-      await waitFor(() => {
-        expect(screen.getByText('No results found for "nonexistent"')).toBeInTheDocument();
-      });
+      expect(screen.queryByText(/No results found/)).not.toBeInTheDocument();
     });
   });
 

package/src/features/resource-discovery/components/ResourceDiscoveryPage.tsx

@@ -23,6 +23,10 @@ export interface ResourceDiscoveryPageProps {
   isLoadingRecent: boolean;
   isSearching: boolean;
 
+  // Controlled search state
+  searchQuery: string;
+  onSearchQueryChange: (query: string) => void;
+
   // UI state props
   theme: 'light' | 'dark';
   showLineNumbers: boolean;
@@ -62,6 +66,8 @@ export function ResourceDiscoveryPage({
   entityTypes,
   isLoadingRecent,
   isSearching,
+  searchQuery,
+  onSearchQueryChange,
   theme,
   showLineNumbers,
   activePanel,
@@ -70,15 +76,12 @@ export function ResourceDiscoveryPage({
   translations: t,
   ToolbarPanels,
 }: ResourceDiscoveryPageProps) {
-  // Search and filter state
-  const [searchQuery, setSearchQuery] = useState('');
   const [selectedEntityType, setSelectedEntityType] = useState<string>('');
 
   const hasSearchQuery = searchQuery.trim() !== '';
-  const hasSearchResults = searchDocuments.length > 0;
 
-  // Filtered documents
-  const baseDocuments = hasSearchResults ? searchDocuments : recentDocuments;
+  // When searching, render search results; otherwise render recent.
+  const baseDocuments = hasSearchQuery ? searchDocuments : recentDocuments;
   const filteredResources = !selectedEntityType
     ? baseDocuments
     : baseDocuments.filter((resource: ResourceDescriptor) =>
@@ -113,11 +116,6 @@ export function ResourceDiscoveryPage({
     }
   }, []);
 
-  const handleSearchSubmit = useCallback((e: React.FormEvent) => {
-    e.preventDefault();
-    // Search is handled by debounced effect
-  }, []);
-
   // Loading state
   if (isLoadingRecent) {
     return (
@@ -127,7 +125,7 @@ export function ResourceDiscoveryPage({
     );
   }
 
-  const showNoResultsWarning = hasSearchQuery && !hasSearchResults && !isSearching;
+  const showNoResultsWarning = hasSearchQuery && searchDocuments.length === 0 && !isSearching;
 
   return (
     <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
@@ -144,25 +142,23 @@ export function ResourceDiscoveryPage({
         {/* Search and Filter Section */}
         <div className="semiont-card">
           {/* Search Bar */}
-          <form onSubmit={handleSearchSubmit} className="semiont-card__search-form">
+          <div className="semiont-card__search-form">
             <div className="semiont-card__search-wrapper">
               <input
                 type="text"
                 value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
+                onChange={(e) => onSearchQueryChange(e.target.value)}
                 placeholder={t.searchPlaceholder}
                 className="semiont-card__search-input"
-                disabled={isSearching}
+                aria-label={t.searchPlaceholder}
               />
-              <button
-                type="submit"
-                disabled={isSearching}
-                className="semiont-card__search-button"
-              >
-                {isSearching ? t.searching : t.searchButton}
-              </button>
+              {isSearching && (
+                <span className="semiont-card__search-status" aria-live="polite">
+                  {t.searching}
+                </span>
+              )}
             </div>
-          </form>
+          </div>
 
           {/* Entity Type Filters */}
           {entityTypes.length > 0 && (
@@ -205,13 +201,11 @@ export function ResourceDiscoveryPage({
           {/* Documents Grid */}
           <div className="semiont-card__documents">
             <h3 className="semiont-card__documents-label">
-              {showNoResultsWarning
-                ? t.recentResources
-                : hasSearchResults
-                  ? t.searchResults(searchDocuments.length)
-                  : selectedEntityType
-                    ? t.documentsTaggedWith(selectedEntityType)
-                    : t.recentResources
+              {hasSearchQuery && searchDocuments.length > 0
+                ? t.searchResults(searchDocuments.length)
+                : selectedEntityType
+                  ? t.documentsTaggedWith(selectedEntityType)
+                  : t.recentResources
               }
             </h3>