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

package/src/features/resource-viewer/__tests__/DetectionProgressDismissal.test.tsx

@@ -42,7 +42,7 @@ describe('Detection Progress Dismissal Bug', () => {
       close: vi.fn(),
     };
 
-    vi.spyOn(SSEClient.prototype, 'detectAnnotations').mockReturnValue(mockStream);
+    vi.spyOn(SSEClient.prototype, 'detectReferences').mockReturnValue(mockStream);
     vi.spyOn(SSEClient.prototype, 'detectHighlights').mockReturnValue(mockStream);
     vi.spyOn(SSEClient.prototype, 'detectComments').mockReturnValue(mockStream);
     vi.spyOn(SSEClient.prototype, 'detectAssessments').mockReturnValue(mockStream);
@@ -231,11 +231,11 @@ describe('Detection Progress Dismissal Bug', () => {
     });
   });
 
-  it('FIXED: useEventOperations now forwards final completion chunk data', async () => {
+  it('FIXED: useResolutionFlow now forwards final completion chunk data', async () => {
     /**
-     * This test verifies the fix for the useEventOperations bug.
+     * This test verifies the fix for the useResolutionFlow bug.
      *
-     * FIX: useEventOperations.ts stream.onComplete(finalChunk) now emits detection:progress
+     * FIX: useResolutionFlow.ts stream.onComplete(finalChunk) now emits detection:progress
      * with the final chunk data BEFORE emitting detection:complete.
      *
      * This ensures the UI can display the final completion message with status:'complete'.
@@ -300,7 +300,7 @@ describe('Detection Progress Dismissal Bug', () => {
     });
 
     // Simulate backend sending final chunk to stream.onComplete(finalChunk)
-    // useEventOperations should forward this as detection:progress
+    // useResolutionFlow should forward this as detection:progress
     act(() => {
       onCompleteCallback?.({
         status: 'complete',

package/src/features/resource-viewer/__tests__/GenerationFlowIntegration.test.tsx

@@ -4,9 +4,8 @@
  * Tests the COMPLETE generation flow with real component composition:
  * - EventBusProvider (REAL)
  * - ApiClientProvider (REAL, with MOCKED client)
- * - useGenerationFlow (REAL)
- * - useGenerationProgress (REAL)
- * - useEventOperations (REAL)
+ * - useGenerationFlow (REAL, with inlined progress state)
+ * - useResolutionFlow (REAL)
  * - useEventSubscriptions (REAL)
  *
  * This test focuses on ARCHITECTURE and EVENT WIRING:
@@ -24,11 +23,11 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { act } from 'react';
 import { useGenerationFlow } from '../../../hooks/useGenerationFlow';
 import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
-import { ApiClientProvider, useApiClient } from '../../../contexts/ApiClientContext';
+import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
-import { useEventOperations } from '../../../contexts/useEventOperations';
+import { useResolutionFlow } from '../../../hooks/useResolutionFlow';
 import { SSEClient } from '@semiont/api-client';
-import type { SemiontApiClient, ResourceUri, AnnotationUri } from '@semiont/api-client';
+import type { ResourceUri, AnnotationUri } from '@semiont/api-client';
 import { resourceUri, annotationUri } from '@semiont/api-client';
 import type { Emitter } from 'mitt';
 import type { EventMap } from '../../../contexts/EventBusContext';
@@ -416,13 +415,9 @@ function renderGenerationFlow(
   // Component to capture EventBus instance and set up event operations
   function EventBusCapture() {
     eventBusInstance = useEventBus();
-    const client = useApiClient();
 
-    // Set up event operations (this is what makes the SSE calls)
-    useEventOperations(eventBusInstance, {
-      client: client as SemiontApiClient,
-      resourceUri: testResourceUri,
-    });
+    // Set up resolution flow (annotation:update-body, reference:link)
+    useResolutionFlow(testResourceUri);
 
     return null;
   }

package/src/features/resource-viewer/__tests__/ResolutionFlowIntegration.test.tsx

@@ -0,0 +1,266 @@
+/**
+ * Layer 3: Feature Integration Test - Resolution Flow (search modal & body update)
+ *
+ * Tests the UNCOVERED half of useResolutionFlow:
+ * - reference:link → emits resolution:search-requested
+ * - resolution:search-requested → opens search modal with pendingReferenceId
+ * - onCloseSearchModal → closes modal
+ * - annotation:update-body → calls updateAnnotationBody API
+ * - annotation:update-body → emits annotation:body-updated on success
+ * - annotation:update-body → emits annotation:body-update-failed on error
+ * - auth token passed to updateAnnotationBody
+ *
+ * The deletion half of useResolutionFlow is covered by AnnotationDeletionIntegration.test.tsx.
+ *
+ * Uses real providers (EventBus, ApiClient, AuthToken) with mocked API boundary.
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import { act } from 'react';
+import { useResolutionFlow } from '../../../hooks/useResolutionFlow';
+import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { ApiClientProvider } from '../../../contexts/ApiClientContext';
+import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
+import { SemiontApiClient, resourceUri, accessToken } from '@semiont/api-client';
+
+describe('Resolution Flow - Search Modal & Body Update Integration', () => {
+  let updateAnnotationBodySpy: ReturnType<typeof vi.fn>;
+  const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+  const testToken = 'test-resolution-token';
+  const testBaseUrl = 'http://localhost:4000';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    resetEventBusForTesting();
+
+    updateAnnotationBodySpy = vi.fn().mockResolvedValue({ success: true });
+    vi.spyOn(SemiontApiClient.prototype, 'updateAnnotationBody').mockImplementation(updateAnnotationBodySpy);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // ─── Render helper ──────────────────────────────────────────────────────────
+
+  function renderResolutionFlow() {
+    let eventBusInstance: ReturnType<typeof useEventBus> | null = null;
+    let lastState: ReturnType<typeof useResolutionFlow> | null = null;
+
+    function TestComponent() {
+      eventBusInstance = useEventBus();
+      lastState = useResolutionFlow(testUri);
+      return null;
+    }
+
+    render(
+      <AuthTokenProvider token={testToken}>
+        <EventBusProvider>
+          <ApiClientProvider baseUrl={testBaseUrl}>
+            <TestComponent />
+          </ApiClientProvider>
+        </EventBusProvider>
+      </AuthTokenProvider>
+    );
+
+    return {
+      getState: () => lastState!,
+      emit: (event: Parameters<typeof eventBusInstance.emit>[0], payload: Parameters<typeof eventBusInstance.emit>[1]) => {
+        act(() => { eventBusInstance!.emit(event as any, payload as any); });
+      },
+      on: (event: Parameters<typeof eventBusInstance.on>[0], handler: (payload: any) => void) => {
+        eventBusInstance!.on(event as any, handler);
+      },
+      off: (event: Parameters<typeof eventBusInstance.off>[0], handler: (payload: any) => void) => {
+        eventBusInstance!.off(event as any, handler);
+      },
+    };
+  }
+
+  // ─── Initial state ──────────────────────────────────────────────────────────
+
+  it('starts with search modal closed and no pending reference', () => {
+    const { getState } = renderResolutionFlow();
+    expect(getState().searchModalOpen).toBe(false);
+    expect(getState().pendingReferenceId).toBeNull();
+  });
+
+  // ─── reference:link ─────────────────────────────────────────────────────────
+
+  it('reference:link emits resolution:search-requested with referenceId and searchTerm', () => {
+    const { emit, on, off } = renderResolutionFlow();
+    const searchRequestedSpy = vi.fn();
+
+    on('resolution:search-requested', searchRequestedSpy);
+    emit('reference:link', { annotationUri: 'ann-uri-123', searchTerm: 'climate change' });
+    off('resolution:search-requested', searchRequestedSpy);
+
+    expect(searchRequestedSpy).toHaveBeenCalledTimes(1);
+    expect(searchRequestedSpy).toHaveBeenCalledWith({
+      referenceId: 'ann-uri-123',
+      searchTerm: 'climate change',
+    });
+  });
+
+  // ─── resolution:search-requested ────────────────────────────────────────────
+
+  it('resolution:search-requested opens the search modal', async () => {
+    const { getState, emit } = renderResolutionFlow();
+
+    expect(getState().searchModalOpen).toBe(false);
+
+    emit('resolution:search-requested', { referenceId: 'ref-abc', searchTerm: 'oceans' });
+
+    await waitFor(() => {
+      expect(getState().searchModalOpen).toBe(true);
+    });
+  });
+
+  it('resolution:search-requested sets pendingReferenceId', async () => {
+    const { getState, emit } = renderResolutionFlow();
+
+    emit('resolution:search-requested', { referenceId: 'ref-xyz', searchTerm: 'forests' });
+
+    await waitFor(() => {
+      expect(getState().pendingReferenceId).toBe('ref-xyz');
+    });
+  });
+
+  it('reference:link → resolution:search-requested chain opens modal end-to-end', async () => {
+    const { getState, emit } = renderResolutionFlow();
+
+    // Simulate the full user journey: user clicks "Link Document" on a reference entry
+    emit('reference:link', { annotationUri: 'ann-full-chain', searchTerm: 'biodiversity' });
+
+    await waitFor(() => {
+      expect(getState().searchModalOpen).toBe(true);
+      expect(getState().pendingReferenceId).toBe('ann-full-chain');
+    });
+  });
+
+  // ─── onCloseSearchModal ──────────────────────────────────────────────────────
+
+  it('onCloseSearchModal closes the search modal', async () => {
+    const { getState, emit } = renderResolutionFlow();
+
+    emit('resolution:search-requested', { referenceId: 'ref-close', searchTerm: 'test' });
+
+    await waitFor(() => expect(getState().searchModalOpen).toBe(true));
+
+    act(() => { getState().onCloseSearchModal(); });
+
+    await waitFor(() => {
+      expect(getState().searchModalOpen).toBe(false);
+    });
+  });
+
+  it('onCloseSearchModal does not clear pendingReferenceId (preserves for re-open)', async () => {
+    const { getState, emit } = renderResolutionFlow();
+
+    emit('resolution:search-requested', { referenceId: 'ref-persist', searchTerm: 'test' });
+    await waitFor(() => expect(getState().searchModalOpen).toBe(true));
+
+    act(() => { getState().onCloseSearchModal(); });
+    await waitFor(() => expect(getState().searchModalOpen).toBe(false));
+
+    // pendingReferenceId remains — modal may reopen
+    expect(getState().pendingReferenceId).toBe('ref-persist');
+  });
+
+  // ─── annotation:update-body ──────────────────────────────────────────────────
+
+  it('annotation:update-body calls updateAnnotationBody API', async () => {
+    const { emit } = renderResolutionFlow();
+
+    emit('annotation:update-body', {
+      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-body-1',
+      resourceId: 'linked-resource-id',
+      operations: [{ op: 'add', item: { id: 'linked-resource-id' } }],
+    });
+
+    await waitFor(() => {
+      expect(updateAnnotationBodySpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('annotation:update-body passes auth token to API call', async () => {
+    const { emit } = renderResolutionFlow();
+
+    emit('annotation:update-body', {
+      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-auth',
+      resourceId: 'resource-id',
+      operations: [{ op: 'replace', newItem: { id: 'resource-id' } }],
+    });
+
+    await waitFor(() => {
+      expect(updateAnnotationBodySpy).toHaveBeenCalled();
+    });
+
+    const callArgs = updateAnnotationBodySpy.mock.calls[0];
+    expect(callArgs[2]).toHaveProperty('auth');
+    expect(callArgs[2].auth).toBe(accessToken(testToken));
+  });
+
+  it('annotation:update-body emits annotation:body-updated on success', async () => {
+    const { emit, on, off } = renderResolutionFlow();
+    const bodyUpdatedSpy = vi.fn();
+
+    on('annotation:body-updated', bodyUpdatedSpy);
+
+    emit('annotation:update-body', {
+      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-success',
+      resourceId: 'resource-id',
+      operations: [{ op: 'add', item: { id: 'resource-id' } }],
+    });
+
+    await waitFor(() => {
+      expect(bodyUpdatedSpy).toHaveBeenCalledTimes(1);
+    });
+
+    off('annotation:body-updated', bodyUpdatedSpy);
+
+    expect(bodyUpdatedSpy).toHaveBeenCalledWith({
+      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-success',
+    });
+  });
+
+  it('annotation:update-body emits annotation:body-update-failed on API error', async () => {
+    updateAnnotationBodySpy.mockRejectedValue(new Error('Update failed'));
+
+    const { emit, on, off } = renderResolutionFlow();
+    const bodyUpdateFailedSpy = vi.fn();
+
+    on('annotation:body-update-failed', bodyUpdateFailedSpy);
+
+    emit('annotation:update-body', {
+      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-fail',
+      resourceId: 'resource-id',
+      operations: [{ op: 'remove', item: { id: 'old-id' } }],
+    });
+
+    await waitFor(() => {
+      expect(bodyUpdateFailedSpy).toHaveBeenCalledTimes(1);
+    });
+
+    off('annotation:body-update-failed', bodyUpdateFailedSpy);
+
+    expect(bodyUpdateFailedSpy).toHaveBeenCalledWith({
+      error: expect.any(Error),
+    });
+  });
+
+  it('annotation:update-body called ONCE — no duplicate subscriptions', async () => {
+    const { emit } = renderResolutionFlow();
+
+    emit('annotation:update-body', {
+      annotationUri: 'http://localhost:4000/resources/test-resource/annotations/ann-dedup',
+      resourceId: 'resource-id',
+      operations: [{ op: 'add', item: { id: 'resource-id' } }],
+    });
+
+    await waitFor(() => {
+      expect(updateAnnotationBodySpy).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/features/resource-viewer/__tests__/ResourceViewerPage.test.tsx

@@ -15,6 +15,7 @@ import { EventBusProvider, resetEventBusForTesting } from '../../../contexts/Eve
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { ToastProvider } from '../../../components/Toast';
+import { ThemeProvider } from '../../../contexts/ThemeContext';
 
 // jsdom doesn't implement window.matchMedia — mock it for useTheme
 Object.defineProperty(window, 'matchMedia', {
@@ -76,11 +77,7 @@ vi.mock('@semiont/react-ui', async () => {
     JsonLdPanel: () => <div data-testid="jsonld-panel">JSON-LD</div>,
     ErrorBoundary: ({ children }: any) => children,
     createCancelDetectionHandler: () => vi.fn(),
-    useGenerationProgress: () => ({
-      progress: null,
-      clearProgress: vi.fn(),
-    }),
-    useDebouncedCallback: (fn: any) => fn,
+useDebouncedCallback: (fn: any) => fn,
     supportsDetection: () => false,
     MakeMeaningEventBusProvider: ({ children }: any) => children,
     useResourceLoadingAnnouncements: () => ({
@@ -165,13 +162,15 @@ const createMockProps = (overrides?: Partial<ResourceViewerPageProps>): Resource
 // Test wrapper to provide all required providers
 const renderWithProviders = (ui: React.ReactElement) => {
   return render(
-    <ToastProvider>
-      <AuthTokenProvider token={null}>
-        <ApiClientProvider baseUrl="http://localhost:4000">
-          <EventBusProvider>{ui}</EventBusProvider>
-        </ApiClientProvider>
-      </AuthTokenProvider>
-    </ToastProvider>
+    <ThemeProvider>
+      <ToastProvider>
+        <AuthTokenProvider token={null}>
+          <ApiClientProvider baseUrl="http://localhost:4000">
+            <EventBusProvider>{ui}</EventBusProvider>
+          </ApiClientProvider>
+        </AuthTokenProvider>
+      </ToastProvider>
+    </ThemeProvider>
   );
 };
 

package/src/features/resource-viewer/__tests__/detection-progress-flow.test.tsx

@@ -1,12 +1,12 @@
 /**
  * Layer 3 Integration Test: Detection Progress Flow UI/UX
  *
- * Tests the complete data flow from UI → EventBus → useEventOperations → SSE (mocked)
+ * Tests the complete data flow from UI → EventBus → useResolutionFlow → SSE (mocked)
  *
  * This test uses COMPOSITION instead of mocking:
  * - Real React components composed together (useDetectionFlow + HighlightPanel + DetectSection)
  * - Real EventBus (mitt) passed via context
- * - Real useEventOperations hook with mock API client passed as prop
+ * - Real useResolutionFlow hook with mock API client passed as prop
  * - Mock SSE stream (simulated API responses) provided via composition
  *
  * This test focuses on USER EXPERIENCE:
@@ -145,7 +145,7 @@ describe('Detection Progress Flow Integration (Layer 3)', () => {
     vi.spyOn(SSEClient.prototype, 'detectHighlights').mockReturnValue(mockStream as any);
     vi.spyOn(SSEClient.prototype, 'detectAssessments').mockReturnValue(mockStream as any);
     vi.spyOn(SSEClient.prototype, 'detectComments').mockReturnValue(mockStream as any);
-    vi.spyOn(SSEClient.prototype, 'detectAnnotations').mockReturnValue(mockStream as any);
+    vi.spyOn(SSEClient.prototype, 'detectReferences').mockReturnValue(mockStream as any);
 
     mockAnnotations = [];
   });