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

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

@@ -0,0 +1,234 @@
+/**
+ * FAILING TEST: Reproduces the bug where detection events fire but state doesn't update
+ *
+ * Based on console logs from production:
+ * ✅ detection:start emitted
+ * ✅ detection:progress emitted
+ * ❌ detectingMotivation remains null
+ * ❌ detectionProgress remains null
+ *
+ * UPDATED: Now tests useDetectionFlow hook instead of DetectionFlowContainer
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { act } from 'react';
+import { useDetectionFlow } from '../../../hooks/useDetectionFlow';
+import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { ApiClientProvider } from '../../../contexts/ApiClientContext';
+import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
+import { SSEClient } from '@semiont/api-client';
+
+describe('REPRODUCING BUG: Detection state not updating', () => {
+  beforeEach(() => {
+    resetEventBusForTesting();
+    vi.clearAllMocks();
+
+    // Minimal mock - SSE streams not needed for this test
+    vi.spyOn(SSEClient.prototype, 'detectAnnotations').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+    vi.spyOn(SSEClient.prototype, 'detectHighlights').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+    vi.spyOn(SSEClient.prototype, 'detectComments').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+    vi.spyOn(SSEClient.prototype, 'detectAssessments').mockReturnValue({ onProgress: vi.fn().mockReturnThis(), onComplete: vi.fn().mockReturnThis(), onError: vi.fn().mockReturnThis(), close: vi.fn() } as any);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('SHOULD update state when detection:start event is emitted', async () => {
+    let eventBusInstance: any;
+    let currentState: any;
+
+    // Component to capture EventBus and hook state
+    function TestComponent() {
+      eventBusInstance = useEventBus();
+      const state = useDetectionFlow('http://localhost:8080/resources/test' as any);
+      currentState = state;
+
+      console.log('[TEST] useDetectionFlow state:', {
+        detectingMotivation: state.detectingMotivation,
+        detectionProgress: state.detectionProgress,
+      });
+
+      return (
+        <div>
+          <div data-testid="detecting">{state.detectingMotivation || 'null'}</div>
+          <div data-testid="progress">{state.detectionProgress?.message || 'null'}</div>
+        </div>
+      );
+    }
+
+    render(
+      <EventBusProvider>
+        <AuthTokenProvider token={null}>
+          <ApiClientProvider baseUrl="http://localhost:4000">
+            <TestComponent />
+          </ApiClientProvider>
+        </AuthTokenProvider>
+      </EventBusProvider>
+    );
+
+    // Initial state should be null
+    expect(screen.getByTestId('detecting')).toHaveTextContent('null');
+    expect(screen.getByTestId('progress')).toHaveTextContent('null');
+
+    console.log('[TEST] Emitting detection:start event...');
+
+    // Emit detection:start event (exactly like production)
+    act(() => {
+      eventBusInstance.emit('detection:start', {
+        motivation: 'linking',
+        options: { entityTypes: ['Location'] }
+      });
+    });
+
+    console.log('[TEST] After detection:start, checking state...');
+
+    // THIS SHOULD PASS but currently FAILS
+    await waitFor(() => {
+      expect(screen.getByTestId('detecting')).toHaveTextContent('linking');
+    }, { timeout: 1000 });
+
+    expect(currentState.detectingMotivation).toBe('linking');
+    expect(currentState.detectionProgress).toBeNull(); // Should clear on start
+  });
+
+  it('SHOULD update state when detection:progress event is emitted', async () => {
+    let eventBusInstance: any;
+    let currentState: any;
+
+    function TestComponent() {
+      eventBusInstance = useEventBus();
+      const state = useDetectionFlow('http://localhost:8080/resources/test' as any);
+      currentState = state;
+
+      return (
+        <div>
+          <div data-testid="detecting">{state.detectingMotivation || 'null'}</div>
+          <div data-testid="progress">{state.detectionProgress?.message || 'null'}</div>
+        </div>
+      );
+    }
+
+    render(
+      <EventBusProvider>
+        <AuthTokenProvider token={null}>
+          <ApiClientProvider baseUrl="http://localhost:4000">
+            <TestComponent />
+          </ApiClientProvider>
+        </AuthTokenProvider>
+      </EventBusProvider>
+    );
+
+    console.log('[TEST] Emitting detection:progress event...');
+
+    // Emit detection:progress event (exactly like production)
+    act(() => {
+      eventBusInstance.emit('detection:progress', {
+        status: 'started',
+        resourceId: 'test',
+        totalEntityTypes: 1,
+        processedEntityTypes: 0,
+        message: 'Starting entity detection...'
+      });
+    });
+
+    console.log('[TEST] After detection:progress, checking state...');
+
+    // THIS SHOULD PASS but currently FAILS
+    await waitFor(() => {
+      expect(screen.getByTestId('progress')).toHaveTextContent('Starting entity detection...');
+    }, { timeout: 1000 });
+
+    expect(currentState.detectionProgress).toMatchObject({
+      status: 'started',
+      message: 'Starting entity detection...'
+    });
+  });
+
+  it('SHOULD show EXACTLY the production bug', async () => {
+    let eventBusInstance: any;
+    const stateSnapshots: any[] = [];
+
+    function TestComponent() {
+      eventBusInstance = useEventBus();
+      const state = useDetectionFlow('http://localhost:8080/resources/f45fd44f9cb0b0fe1b7980d3d034bc61' as any);
+
+      stateSnapshots.push({
+        detectingMotivation: state.detectingMotivation,
+        detectionProgress: state.detectionProgress,
+      });
+
+      return (
+        <div>
+          <div data-testid="detecting">{state.detectingMotivation || 'null'}</div>
+          <div data-testid="progress">{state.detectionProgress?.message || 'null'}</div>
+        </div>
+      );
+    }
+
+    render(
+      <EventBusProvider>
+        <AuthTokenProvider token={null}>
+          <ApiClientProvider baseUrl="http://localhost:4000">
+            <TestComponent />
+          </ApiClientProvider>
+        </AuthTokenProvider>
+      </EventBusProvider>
+    );
+
+    console.log('\n=== REPRODUCING PRODUCTION BUG ===');
+    console.log('Initial state:', stateSnapshots[stateSnapshots.length - 1]);
+
+    // Exactly like production logs
+    act(() => {
+      console.log('[EventBus] emit: detection:start {motivation: "linking", options: {...}}');
+      eventBusInstance.emit('detection:start', {
+        motivation: 'linking',
+        options: { entityTypes: ['Location'] }
+      });
+    });
+
+    console.log('After detection:start:', stateSnapshots[stateSnapshots.length - 1]);
+
+    act(() => {
+      console.log('[EventBus] emit: detection:progress {status: "started", ...}');
+      eventBusInstance.emit('detection:progress', {
+        status: 'started',
+        resourceId: 'f45fd44f9cb0b0fe1b7980d3d034bc61',
+        totalEntityTypes: 1,
+        processedEntityTypes: 0,
+        message: 'Starting entity detection...'
+      });
+    });
+
+    console.log('After detection:progress:', stateSnapshots[stateSnapshots.length - 1]);
+
+    act(() => {
+      console.log('[EventBus] emit: detection:progress {status: "scanning", ...}');
+      eventBusInstance.emit('detection:progress', {
+        status: 'scanning',
+        resourceId: 'f45fd44f9cb0b0fe1b7980d3d034bc61',
+        currentEntityType: 'Location',
+        totalEntityTypes: 1,
+        processedEntityTypes: 1,
+        message: 'Scanning for Location...'
+      });
+    });
+
+    console.log('After second detection:progress:', stateSnapshots[stateSnapshots.length - 1]);
+    console.log('=== END REPRODUCTION ===\n');
+
+    // THIS IS THE BUG: Events fire but state never updates
+    // Production logs show: detectingMotivation: null, detectionProgress: null
+    // Even though events were emitted
+    await waitFor(() => {
+      const currentSnapshot = stateSnapshots[stateSnapshots.length - 1];
+      console.log('Final state check:', currentSnapshot);
+
+      // These SHOULD pass but will FAIL if bug is present
+      expect(currentSnapshot.detectingMotivation).toBe('linking');
+      expect(currentSnapshot.detectionProgress?.message).toBe('Scanning for Location...');
+    }, { timeout: 2000 });
+  });
+});

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

@@ -0,0 +1,388 @@
+/**
+ * Layer 3: Feature Integration Test - Detection Flow Architecture
+ *
+ * Tests the COMPLETE detection flow with real component composition:
+ * - EventBusProvider (REAL)
+ * - ApiClientProvider (REAL, with MOCKED client)
+ * - useDetectionFlow (REAL)
+ * - useEventOperations (REAL)
+ * - useEventSubscriptions (REAL)
+ *
+ * This test focuses on ARCHITECTURE and EVENT WIRING:
+ * - Verifies API called exactly ONCE (catches duplicate subscriptions)
+ * - Tests event propagation through the event bus
+ * - Validates different motivations call correct API methods
+ * - Ensures multiple event listeners don't cause duplicate API calls
+ *
+ * COMPLEMENTARY TEST: See detection-progress-flow.test.tsx for UI/UX testing
+ * - That test verifies the USER EXPERIENCE (button clicks, progress display)
+ * - This test verifies the SYSTEM ARCHITECTURE (event wiring, API calls)
+ *
+ * NO BACKEND SERVER - only mocked API client boundary
+ */
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { act } from 'react';
+import { useDetectionFlow } from '../../../hooks/useDetectionFlow';
+import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+import { ApiClientProvider } from '../../../contexts/ApiClientContext';
+import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
+import { SSEClient } from '@semiont/api-client';
+import type { Motivation } from '@semiont/api-client';
+import { resourceUri } from '@semiont/api-client';
+import type { Emitter } from 'mitt';
+import type { EventMap } from '../../../contexts/EventBusContext';
+
+// Mock SSE stream that we can control in tests
+const createMockSSEStream = () => {
+  const stream = {
+    onProgressCallback: null as ((chunk: any) => void) | null,
+    onCompleteCallback: null as (() => void) | null,
+    onErrorCallback: null as ((error: Error) => void) | null,
+    onProgress: vi.fn((callback: (chunk: any) => void) => {
+      stream.onProgressCallback = callback;
+      return stream;
+    }),
+    onComplete: vi.fn((callback: () => void) => {
+      stream.onCompleteCallback = callback;
+      return stream;
+    }),
+    onError: vi.fn((callback: (error: Error) => void) => {
+      stream.onErrorCallback = callback;
+      return stream;
+    }),
+    close: vi.fn(),
+  };
+  return stream;
+};
+
+describe('Detection Flow - Feature Integration', () => {
+  let mockStream: ReturnType<typeof createMockSSEStream>;
+  let detectAnnotationsSpy: any;
+  let detectHighlightsSpy: any;
+  let detectCommentsSpy: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    resetEventBusForTesting();
+
+    // Create fresh mock stream for each test
+    mockStream = createMockSSEStream();
+
+    // Spy on SSEClient prototype methods
+    detectAnnotationsSpy = vi.spyOn(SSEClient.prototype, 'detectAnnotations').mockReturnValue(mockStream as any);
+    detectHighlightsSpy = vi.spyOn(SSEClient.prototype, 'detectHighlights').mockReturnValue(mockStream as any);
+    detectCommentsSpy = vi.spyOn(SSEClient.prototype, 'detectComments').mockReturnValue(mockStream as any);
+    vi.spyOn(SSEClient.prototype, 'detectAssessments').mockReturnValue(mockStream as any);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should call detectAnnotations exactly ONCE when detection starts (not twice)', async () => {
+    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+
+    // Render with real component composition
+    const { emitDetectionStart } = renderDetectionFlow(testUri);
+
+    // Trigger detection for linking (uses detectAnnotations)
+    act(() => {
+      emitDetectionStart('linking', {
+        entityTypes: ['Person', 'Organization'],
+        includeDescriptiveReferences: false
+      });
+    });
+
+    // CRITICAL ASSERTION: API called exactly once (not twice!)
+    // This would FAIL if useEventOperations was called in multiple places
+    await waitFor(() => {
+      expect(detectAnnotationsSpy).toHaveBeenCalledTimes(1);
+    });
+
+    // Verify correct parameters
+    expect(detectAnnotationsSpy).toHaveBeenCalledWith(
+      testUri,
+      {
+        entityTypes: ['Person', 'Organization'],
+        includeDescriptiveReferences: false,
+      },
+      { auth: undefined }
+    );
+  });
+
+  it('should propagate SSE progress events to useDetectionFlow state', async () => {
+    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+
+    // Render with state observer
+    const { emitDetectionStart } = renderDetectionFlow(testUri);
+
+    // Start detection
+    act(() => {
+      emitDetectionStart('linking', {
+        entityTypes: ['Person']
+      });
+    });
+
+    // Wait for stream to be created
+    await waitFor(() => {
+      expect(detectAnnotationsSpy).toHaveBeenCalled();
+    });
+
+    // Simulate SSE progress callback being invoked
+    act(() => {
+      mockStream.onProgressCallback!({
+        status: 'scanning',
+        message: 'Scanning for Person...',
+        currentEntityType: 'Person',
+        totalEntityTypes: 1,
+        processedEntityTypes: 0,
+        foundCount: 5,
+      });
+    });
+
+    // Verify progress propagated to UI
+    await waitFor(() => {
+      expect(screen.getByTestId('progress')).toHaveTextContent('Scanning for Person...');
+      expect(screen.getByTestId('detecting')).toHaveTextContent('linking');
+    });
+  });
+
+  it('should handle multiple progress updates correctly', async () => {
+    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+    const { emitDetectionStart } = renderDetectionFlow(testUri);
+
+    // Start detection
+    act(() => {
+      emitDetectionStart('highlighting', {
+        instructions: 'Find important passages'
+      });
+    });
+
+    await waitFor(() => {
+      expect(detectHighlightsSpy).toHaveBeenCalledTimes(1);
+    });
+
+    // First progress update
+    act(() => {
+      mockStream.onProgressCallback!({
+        status: 'started',
+        message: 'Starting analysis...',
+        percentage: 0,
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('progress')).toHaveTextContent('Starting analysis...');
+    });
+
+    // Second progress update
+    act(() => {
+      mockStream.onProgressCallback!({
+        status: 'analyzing',
+        message: 'Analyzing text...',
+        percentage: 50,
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('progress')).toHaveTextContent('Analyzing text...');
+    });
+
+    // Final progress update
+    act(() => {
+      mockStream.onProgressCallback!({
+        status: 'complete',
+        message: 'Created 14 highlights',
+        percentage: 100,
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('progress')).toHaveTextContent('Created 14 highlights');
+    });
+  });
+
+  it('should keep progress visible after detection completes', async () => {
+    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testUri);
+
+    // Start detection
+    act(() => {
+      emitDetectionStart('highlighting', { instructions: 'Test' });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('detecting')).toHaveTextContent('highlighting');
+    });
+
+    // Send final progress
+    act(() => {
+      mockStream.onProgressCallback!({
+        status: 'complete',
+        message: 'Created 14 highlights',
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('progress')).toHaveTextContent('Created 14 highlights');
+    });
+
+    // Emit completion event
+    act(() => {
+      getEventBus().emit('detection:complete', { motivation: 'highlighting' });
+    });
+
+    // Verify: detecting flag cleared BUT progress still visible
+    await waitFor(() => {
+      expect(screen.getByTestId('detecting')).toHaveTextContent('none');
+      expect(screen.getByTestId('progress')).toHaveTextContent('Created 14 highlights');
+    });
+  });
+
+  it('should clear progress on detection failure', async () => {
+    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testUri);
+
+    // Start detection
+    act(() => {
+      emitDetectionStart('linking', { entityTypes: ['Person'] });
+    });
+
+    // Add some progress
+    act(() => {
+      mockStream.onProgressCallback!({
+        status: 'scanning',
+        message: 'Scanning...',
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('progress')).toHaveTextContent('Scanning...');
+    });
+
+    // Emit failure
+    act(() => {
+      getEventBus().emit('detection:failed', { type: 'job.failed', resourceId: 'test-resource' as any, payload: { jobId: 'job-1' as any, jobType: 'detection', error: 'Network error' } });
+    });
+
+    // Verify: both detecting and progress cleared
+    await waitFor(() => {
+      expect(screen.getByTestId('detecting')).toHaveTextContent('none');
+      expect(screen.getByTestId('progress')).toHaveTextContent('No progress');
+    });
+  });
+
+  it('should handle different detection motivations with correct API calls', async () => {
+    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+    const { emitDetectionStart } = renderDetectionFlow(testUri);
+
+    // Test highlighting
+    act(() => {
+      emitDetectionStart('highlighting', { instructions: 'Find important text' });
+    });
+
+    await waitFor(() => {
+      expect(detectHighlightsSpy).toHaveBeenCalledTimes(1);
+      expect(detectHighlightsSpy).toHaveBeenCalledWith(testUri, {
+        instructions: 'Find important text',
+      }, { auth: undefined });
+    });
+
+    // Reset for next test
+    vi.clearAllMocks();
+    mockStream = createMockSSEStream();
+    detectCommentsSpy.mockReturnValue(mockStream);
+
+    // Test commenting
+    act(() => {
+      emitDetectionStart('commenting', {
+        instructions: 'Add helpful comments',
+        tone: 'educational'
+      });
+    });
+
+    await waitFor(() => {
+      expect(detectCommentsSpy).toHaveBeenCalledTimes(1);
+      expect(detectCommentsSpy).toHaveBeenCalledWith(testUri, {
+        instructions: 'Add helpful comments',
+        tone: 'educational',
+      }, { auth: undefined });
+    });
+  });
+
+  it('should only call API once even with multiple event listeners', async () => {
+    const testUri = resourceUri('http://localhost:4000/resources/test-resource');
+
+    // This test specifically catches the duplicate useEventOperations bug
+    // If multiple components call useEventOperations, we'll see multiple API calls
+    const { emitDetectionStart, getEventBus } = renderDetectionFlow(testUri);
+
+    // Add an additional event listener (simulating multiple subscribers)
+    const additionalListener = vi.fn();
+    getEventBus().on('detection:start', additionalListener);
+
+    // Trigger detection
+    act(() => {
+      emitDetectionStart('linking', { entityTypes: ['Person'] });
+    });
+
+    // Wait for operation to complete
+    await waitFor(() => {
+      expect(detectAnnotationsSpy).toHaveBeenCalled();
+    });
+
+    // VERIFY: API called exactly once, even though multiple listeners exist
+    expect(detectAnnotationsSpy).toHaveBeenCalledTimes(1);
+
+    // VERIFY: Our additional listener was called (events work)
+    expect(additionalListener).toHaveBeenCalledTimes(1);
+  });
+});
+
+/**
+ * Helper: Render useDetectionFlow hook with real component composition
+ * Returns methods to interact with the rendered component
+ */
+function renderDetectionFlow(testUri: string) {
+  let eventBusInstance: Emitter<EventMap>;
+
+  // Component to capture EventBus instance
+  function EventBusCapture() {
+    eventBusInstance = useEventBus();
+    return null;
+  }
+
+  // Test harness component that uses the hook
+  function DetectionFlowTestHarness() {
+    const { detectionProgress, detectingMotivation } = useDetectionFlow(testUri as any);
+    return (
+      <div>
+        <div data-testid="detecting">{detectingMotivation || 'none'}</div>
+        <div data-testid="progress">
+          {detectionProgress?.message || 'No progress'}
+        </div>
+      </div>
+    );
+  }
+
+  render(
+    <EventBusProvider>
+      <AuthTokenProvider token={null}>
+        <ApiClientProvider baseUrl="http://localhost:4000">
+          <EventBusCapture />
+          <DetectionFlowTestHarness />
+        </ApiClientProvider>
+      </AuthTokenProvider>
+    </EventBusProvider>
+  );
+
+  return {
+    emitDetectionStart: (motivation: Motivation, options: any) => {
+      eventBusInstance.emit('detection:start', { motivation, options });
+    },
+    getEventBus: () => eventBusInstance,
+  };
+}