@semiont/react-ui 0.4.20 → 0.4.21

package/src/components/resource/panels/__tests__/CommentsPanel.test.tsx

@@ -5,8 +5,8 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { CommentsPanel } from '../CommentsPanel';
-import { EventBusProvider, useEventBus } from '../../../../contexts/EventBusContext';
-import type { components } from '@semiont/core';
+import type { components, EventBus } from '@semiont/core';
+import { createTestSemiontWrapper } from '../../../../test-utils';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -18,59 +18,27 @@ interface TrackedEvent {
 
 function createEventTracker() {
   const events: TrackedEvent[] = [];
-
-  function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
-    const eventBus = useEventBus();
-
-    React.useEffect(() => {
-      const handlers: Array<() => void> = [];
-
-      const trackEvent = (eventName: string) => (payload: any) => {
-        events.push({ event: eventName, payload });
-      };
-
-      const panelEvents = ['mark:submit'] as const;
-
-      panelEvents.forEach(eventName => {
-        const handler = trackEvent(eventName);
-        const subscription = eventBus.get(eventName).subscribe(handler);
-        handlers.push(subscription);
-      });
-
-      return () => {
-        handlers.forEach(sub => sub.unsubscribe());
-      };
-    }, [eventBus]);
-
-    return <>{children}</>;
-  }
-
   return {
-    EventTrackingWrapper,
     events,
-    clear: () => {
-      events.length = 0;
+    clear: () => { events.length = 0; },
+    _attach(eventBus: EventBus) {
+      const panelEvents = ['mark:submit'] as const;
+      panelEvents.forEach((eventName) => {
+        eventBus.get(eventName).subscribe((payload: any) => {
+          events.push({ event: eventName, payload });
+        });
+      });
     },
   };
 }
 
-// Helper to render with EventBusProvider
 const renderWithEventBus = (component: React.ReactElement, tracker?: ReturnType<typeof createEventTracker>) => {
-  if (tracker) {
-    return render(
-      <EventBusProvider>
-        <tracker.EventTrackingWrapper>
-          {component}
-        </tracker.EventTrackingWrapper>
-      </EventBusProvider>
-    );
-  }
-
-  return render(
-    <EventBusProvider>
-      {component}
-    </EventBusProvider>
+  const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+  if (tracker) tracker._attach(eventBus);
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SemiontWrapper>{children}</SemiontWrapper>
   );
+  return render(component, { wrapper: Wrapper });
 };
 
 // Mock TranslationContext
@@ -270,9 +238,7 @@ describe('CommentsPanel Component', () => {
       ];
 
       rerender(
-        <EventBusProvider>
-          <CommentsPanel {...defaultProps} annotations={updatedComments} />
-        </EventBusProvider>
+        <CommentsPanel {...defaultProps} annotations={updatedComments} />
       );
 
       const comments = screen.getAllByTestId(/comment-/);
@@ -600,9 +566,7 @@ describe('CommentsPanel Component', () => {
           createMockComment(`${j + 1}`, j * 10, (j + 1) * 10)
         );
         rerender(
-          <EventBusProvider>
-            <CommentsPanel {...defaultProps} annotations={comments} />
-          </EventBusProvider>
+          <CommentsPanel {...defaultProps} annotations={comments} />
         );
       }
 
@@ -617,9 +581,7 @@ describe('CommentsPanel Component', () => {
       expect(screen.getAllByTestId(/comment-/)).toHaveLength(3);
 
       rerender(
-        <EventBusProvider>
-          <CommentsPanel {...defaultProps} annotations={mockComments.single} />
-        </EventBusProvider>
+        <CommentsPanel {...defaultProps} annotations={mockComments.single} />
       );
 
       expect(screen.getAllByTestId(/comment-/)).toHaveLength(1);

package/src/components/resource/panels/__tests__/HighlightPanel.annotationProgress.test.tsx

@@ -57,7 +57,6 @@ describe('HighlightPanel + AssistSection Integration', () => {
       {
         id: 'highlight-1',
         motivation: 'highlighting',
-        body: [],
         target: {
           source: 'resource-1',
           selector: {

package/src/components/resource/panels/__tests__/ReferenceEntry.test.tsx

@@ -5,7 +5,7 @@ import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 import type { components } from '@semiont/core';
-import { SemiontApiClient } from '@semiont/api-client';
+import { BindNamespace } from '@semiont/api-client';
 import type { RouteBuilder } from '../../../../contexts/RoutingContext';
 
 type Annotation = components['schemas']['Annotation'];
@@ -46,7 +46,7 @@ vi.mock('../../../../hooks/useObservableBrowse', () => ({
   useObservableExternalNavigation: () => mockNavigate,
 }));
 
-vi.mock('../../../../hooks/useBeckonFlow', () => ({
+vi.mock('../../../../hooks/useHoverEmitter', () => ({
   useHoverEmitter: () => mockHoverProps,
 }));
 
@@ -308,7 +308,7 @@ describe('ReferenceEntry', () => {
       mockIsBodyResolved.mockReturnValue(true);
       mockGetBodySource.mockReturnValue('linked-doc');
 
-      const bindSpy = vi.spyOn(SemiontApiClient.prototype, 'bindAnnotation').mockResolvedValue({ correlationId: 'c1' });
+      const bindSpy = vi.spyOn(BindNamespace.prototype, 'body').mockResolvedValue(undefined);
 
       const { container } = renderWithProviders(
         <ReferenceEntry {...defaultProps} annotateMode={true} />,
@@ -320,8 +320,7 @@ describe('ReferenceEntry', () => {
       expect(bindSpy).toHaveBeenCalledWith(
         'resource-1',
         'ref-1',
-        { operations: [{ op: 'remove', item: { type: 'SpecificResource', source: 'linked-doc', purpose: 'linking' } }] },
-        expect.anything(),
+        [{ op: 'remove', item: { type: 'SpecificResource', source: 'linked-doc', purpose: 'linking' } }],
       );
 
       bindSpy.mockRestore();

package/src/components/resource/panels/__tests__/ReferencesPanel.observable-flow.test.tsx

@@ -0,0 +1,153 @@
+/**
+ * Triangulation test for the VM → useObservable → prop → chip render chain.
+ *
+ * Written after an e2e failure (test 05) where `ReferencesPanel` rendered
+ * "No entity types available" even though the client provably received a
+ * 9-string entity-types array from the backend.
+ *
+ * This test closes the Layer 5-6 gap: the existing `ResourceViewerPage.test.tsx`
+ * stubs `UnifiedAnnotationsPanel`/`ReferencesPanel` as `<div data-testid>`s,
+ * so it never verifies that an observable emitting [9 strings] actually
+ * produces 9 chips in the DOM. This test does.
+ *
+ * If this test passes and the e2e still fails, the bug is further upstream
+ * (BrowseNamespace wiring, multiple ApiClient instances, SSE delivery).
+ * If it fails, the bug is here in component-land.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { BehaviorSubject } from 'rxjs';
+import { ReferencesPanel } from '../ReferencesPanel';
+import { createTestSemiontWrapper } from '../../../../test-utils';
+import { useObservable } from '../../../../hooks/useObservable';
+
+// Match ReferencesPanel.test.tsx's i18n mocking so the test doesn't
+// depend on a real translation setup.
+vi.mock('../../../../contexts/TranslationContext', () => ({
+  useTranslations: () => (key: string) => {
+    const map: Record<string, string> = {
+      title: 'References',
+      annotateReferences: 'Annotate References',
+      entityTypesOptional: 'Entity types',
+      noEntityTypes: 'No entity types available',
+      selectEntityTypes: 'Select entity types',
+      includeDescriptiveReferences: 'Include descriptive references',
+      cancel: 'Cancel',
+      createReference: 'Create Reference',
+      outgoingReferences: 'Outgoing References',
+      incomingReferences: 'Incoming References',
+      noIncomingReferences: 'No incoming references',
+      fragmentSelected: 'Fragment selected',
+      annotate: 'Annotate',
+      start: 'Start',
+    };
+    return map[key] ?? key;
+  },
+}));
+
+vi.mock('../AssistSection', () => ({
+  AssistSection: () => null,
+  AnnotateReferencesProgressWidget: () => null,
+}));
+
+const NINE_TYPES = [
+  'Author', 'Concept', 'Date', 'Event', 'Location',
+  'Organization', 'Person', 'Product', 'Technology',
+];
+
+const MockLink: React.FC<{ href?: string; children?: React.ReactNode }> = ({ children }) => <>{children}</>;
+const mockRoutes = { resourceDetail: (id: string) => `/resource/${id}` } as any;
+
+/**
+ * Thin harness: subscribes to a BehaviorSubject via useObservable (the
+ * same hook ResourceViewerPage uses for vm.entityTypes$) and forwards
+ * its value into ReferencesPanel as `allEntityTypes`.
+ */
+function ObservableHarness({ source$ }: { source$: BehaviorSubject<string[]> }) {
+  const entityTypes = useObservable(source$) ?? [];
+  return (
+    <ReferencesPanel
+      annotations={[]}
+      isAssisting={false}
+      progress={null}
+      annotateMode={true}
+      Link={MockLink}
+      routes={mockRoutes}
+      allEntityTypes={entityTypes}
+      pendingAnnotation={{
+        motivation: 'linking',
+        selector: { type: 'TextQuoteSelector', exact: 'te' },
+      } as any}
+    />
+  );
+}
+
+const renderWithBus = (ui: React.ReactElement) => {
+  const { SemiontWrapper } = createTestSemiontWrapper();
+  return render(<SemiontWrapper>{ui}</SemiontWrapper>);
+};
+
+describe('Layer 5-6 — VM observable → useObservable → ReferencesPanel chips', () => {
+  it('an observable seeded with [9 strings] renders 9 pending-reference chips', async () => {
+    const source$ = new BehaviorSubject<string[]>(NINE_TYPES);
+    renderWithBus(<ObservableHarness source$={source$} />);
+
+    // Wait for useEffect in useObservable to run and commit the value.
+    const chips = await screen.findAllByRole('button', { name: (_, el) =>
+      el.classList.contains('semiont-tag-selector__item') ?? false,
+    });
+    expect(chips).toHaveLength(NINE_TYPES.length);
+  });
+
+  it('transition [] → [9 strings] re-renders with 9 chips', async () => {
+    // This is the production timeline: the Cache emits undefined (mapped
+    // to []) first, then the 9-string array once fetch resolves. The
+    // prop chain must survive this transition.
+    const source$ = new BehaviorSubject<string[]>([]);
+    renderWithBus(<ObservableHarness source$={source$} />);
+
+    // Initially: no chips (the gate is allEntityTypes.length > 0).
+    expect(document.querySelectorAll('.semiont-tag-selector__item').length).toBe(0);
+
+    await act(async () => {
+      source$.next(NINE_TYPES);
+      // Let useObservable's setState flush.
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    expect(document.querySelectorAll('.semiont-tag-selector__item').length).toBe(NINE_TYPES.length);
+  });
+
+  it('[9 strings] with duplicate emissions (simulating SSE-duplicate deliveries) renders 9 chips', async () => {
+    // The failing e2e run showed the same correlationId delivered 3x due
+    // to concurrent SSE streams. Same data, but multiple BehaviorSubject
+    // writes. Must not clobber the render.
+    const source$ = new BehaviorSubject<string[]>([]);
+    renderWithBus(<ObservableHarness source$={source$} />);
+
+    await act(async () => {
+      source$.next(NINE_TYPES);
+      source$.next([...NINE_TYPES]); // same content, new reference
+      source$.next([...NINE_TYPES]);
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    expect(document.querySelectorAll('.semiont-tag-selector__item').length).toBe(NINE_TYPES.length);
+  });
+
+  it('no regression: [] still renders "No entity types available"', () => {
+    // Confirms the control case: an empty observable does render the
+    // message the failing e2e saw. Guards against the test passing
+    // trivially because of a selector bug.
+    const source$ = new BehaviorSubject<string[]>([]);
+    renderWithBus(<ObservableHarness source$={source$} />);
+
+    // There are two such text nodes in the panel (pending prompt + assist
+    // section), but both correspond to the same allEntityTypes=[] state.
+    const msg = screen.queryAllByText(/no entity types available/i);
+    expect(msg.length).toBeGreaterThan(0);
+  });
+});

package/src/components/resource/panels/__tests__/ReferencesPanel.test.tsx

@@ -4,7 +4,8 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { ReferencesPanel } from '../ReferencesPanel';
-import { EventBusProvider, useEventBus } from '../../../../contexts/EventBusContext';
+import type { EventBus } from '@semiont/core';
+import { createTestSemiontWrapper } from '../../../../test-utils';
 
 // Composition-based event tracker
 interface TrackedEvent {
@@ -14,59 +15,27 @@ interface TrackedEvent {
 
 function createEventTracker() {
   const events: TrackedEvent[] = [];
-
-  function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
-    const eventBus = useEventBus();
-
-    React.useEffect(() => {
-      const handlers: Array<() => void> = [];
-
-      const trackEvent = (eventName: string) => (payload: any) => {
-        events.push({ event: eventName, payload });
-      };
-
-      const panelEvents = ['mark:assist-request'] as const;
-
-      panelEvents.forEach(eventName => {
-        const handler = trackEvent(eventName);
-        const subscription = eventBus.get(eventName).subscribe(handler);
-        handlers.push(subscription);
-      });
-
-      return () => {
-        handlers.forEach(sub => sub.unsubscribe());
-      };
-    }, [eventBus]);
-
-    return <>{children}</>;
-  }
-
   return {
-    EventTrackingWrapper,
     events,
-    clear: () => {
-      events.length = 0;
+    clear: () => { events.length = 0; },
+    _attach(eventBus: EventBus) {
+      const panelEvents = ['mark:assist-request'] as const;
+      panelEvents.forEach((eventName) => {
+        eventBus.get(eventName).subscribe((payload: any) => {
+          events.push({ event: eventName, payload });
+        });
+      });
     },
   };
 }
 
-// Helper to render with EventBusProvider
 const renderWithEventBus = (component: React.ReactElement, tracker?: ReturnType<typeof createEventTracker>) => {
-  if (tracker) {
-    return render(
-      <EventBusProvider>
-        <tracker.EventTrackingWrapper>
-          {component}
-        </tracker.EventTrackingWrapper>
-      </EventBusProvider>
-    );
-  }
-
-  return render(
-    <EventBusProvider>
-      {component}
-    </EventBusProvider>
+  const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+  if (tracker) tracker._attach(eventBus);
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SemiontWrapper>{children}</SemiontWrapper>
   );
+  return render(component, { wrapper: Wrapper });
 };
 
 // Mock TranslationContext
@@ -344,26 +313,22 @@ describe('ReferencesPanel Component', () => {
 
       // Simulate detection starting
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel
-            {...defaultProps}
-            isAssisting={true}
-            progress={{ completedEntityTypes: [] }}
-          />
-        </EventBusProvider>
+        <ReferencesPanel
+          {...defaultProps}
+          isAssisting={true}
+          progress={{ completedEntityTypes: [] }}
+        />
       );
 
       // Simulate detection completing
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel
-            {...defaultProps}
-            isAssisting={false}
-            progress={{
-              completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
-            }}
-          />
-        </EventBusProvider>
+        <ReferencesPanel
+          {...defaultProps}
+          isAssisting={false}
+          progress={{
+            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+          }}
+        />
       );
 
       // UI should reset but we can't directly test internal state
@@ -473,13 +438,11 @@ describe('ReferencesPanel Component', () => {
 
       // Parent clears progress after completion
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel
-            {...defaultProps}
-            isAssisting={false}
-            progress={null}
-          />
-        </EventBusProvider>
+        <ReferencesPanel
+          {...defaultProps}
+          isAssisting={false}
+          progress={null}
+        />
       );
 
       expect(screen.getByText('Person:')).toBeInTheDocument();
@@ -498,9 +461,7 @@ describe('ReferencesPanel Component', () => {
       );
 
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
       expect(screen.getByText(/Found.*5/i)).toBeInTheDocument();
     });
@@ -517,9 +478,7 @@ describe('ReferencesPanel Component', () => {
       );
 
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
       expect(screen.getByText('✓')).toBeInTheDocument();
     });
@@ -536,9 +495,7 @@ describe('ReferencesPanel Component', () => {
       );
 
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
 
       // Should show both the completed log AND the selection UI
@@ -558,9 +515,7 @@ describe('ReferencesPanel Component', () => {
       );
 
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
 
       // Selection UI should be immediately available (no button click needed)
@@ -594,13 +549,11 @@ describe('ReferencesPanel Component', () => {
 
       // Start detecting
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel
-            {...defaultProps}
-            isAssisting={true}
-            progress={{ completedEntityTypes: [] }}
-          />
-        </EventBusProvider>
+        <ReferencesPanel
+          {...defaultProps}
+          isAssisting={true}
+          progress={{ completedEntityTypes: [] }}
+        />
       );
 
       // Detecting state
@@ -622,22 +575,18 @@ describe('ReferencesPanel Component', () => {
 
       // Complete - first trigger useEffect to copy to lastDetectionLog
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel
-            {...defaultProps}
-            isAssisting={false}
-            progress={{
-              completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
-            }}
-          />
-        </EventBusProvider>
+        <ReferencesPanel
+          {...defaultProps}
+          isAssisting={false}
+          progress={{
+            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+          }}
+        />
       );
 
       // Then clear progress to show the log
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
 
       expect(screen.queryByTestId('annotation-progress-widget')).not.toBeInTheDocument();
@@ -659,18 +608,14 @@ describe('ReferencesPanel Component', () => {
 
       // Clear progress to show the log
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} isAssisting={false} progress={null} />
       );
 
       // Selection UI should be immediately available
       expect(screen.getByText('Select entity types')).toBeInTheDocument();
 
       rerender(
-        <EventBusProvider>
-          <ReferencesPanel {...defaultProps} />
-        </EventBusProvider>
+        <ReferencesPanel {...defaultProps} />
       );
 
       expect(screen.getByText('Select entity types')).toBeInTheDocument();

package/src/components/resource/panels/__tests__/ResourceInfoPanel.test.tsx

@@ -2,8 +2,9 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import type { EventBus } from '@semiont/core';
 import { ResourceInfoPanel } from '../ResourceInfoPanel';
-import { EventBusProvider, useEventBus } from '../../../../contexts/EventBusContext';
+import { createTestSemiontWrapper } from '../../../../test-utils';
 
 // Mock TranslationContext
 vi.mock('../../../../contexts/TranslationContext', () => ({
@@ -61,64 +62,31 @@ interface TrackedEvent {
 
 function createEventTracker() {
   const events: TrackedEvent[] = [];
-
-  function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
-    const eventBus = useEventBus();
-
-    React.useEffect(() => {
-      const handlers: Array<() => void> = [];
-
-      // Track resource-related events
-      const trackEvent = (eventName: string) => (payload: any) => {
-        events.push({ event: eventName, payload });
-      };
-
+  return {
+    events,
+    clear: () => { events.length = 0; },
+    _attach(eventBus: EventBus) {
       const resourceEvents = [
         'yield:clone',
         'mark:archive',
         'mark:unarchive',
       ] as const;
-
-      resourceEvents.forEach(eventName => {
-        const handler = trackEvent(eventName);
-        const subscription = eventBus.get(eventName).subscribe(handler);
-        handlers.push(subscription);
+      resourceEvents.forEach((eventName) => {
+        eventBus.get(eventName).subscribe((payload: any) => {
+          events.push({ event: eventName, payload });
+        });
       });
-
-      return () => {
-        handlers.forEach(sub => sub.unsubscribe());
-      };
-    }, [eventBus]);
-
-    return <>{children}</>;
-  }
-
-  return {
-    EventTrackingWrapper,
-    events,
-    clear: () => {
-      events.length = 0;
     },
   };
 }
 
-// Helper to render with EventBusProvider
 const renderWithEventBus = (component: React.ReactElement, tracker?: ReturnType<typeof createEventTracker>) => {
-  if (tracker) {
-    return render(
-      <EventBusProvider>
-        <tracker.EventTrackingWrapper>
-          {component}
-        </tracker.EventTrackingWrapper>
-      </EventBusProvider>
-    );
-  }
-
-  return render(
-    <EventBusProvider>
-      {component}
-    </EventBusProvider>
+  const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+  if (tracker) tracker._attach(eventBus);
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SemiontWrapper>{children}</SemiontWrapper>
   );
+  return render(component, { wrapper: Wrapper });
 };
 
 describe('ResourceInfoPanel Component', () => {