@semiont/react-ui 0.5.5 → 0.5.6

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

@@ -12,7 +12,6 @@
  */
 
 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';

package/src/components/modals/__tests__/SearchModal.visual.test.tsx

@@ -3,7 +3,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 { SearchModal } from '../SearchModal';
 
 // Mock the hooks
@@ -102,7 +102,7 @@ describe.skip('SearchModal Component - Visual States', () => {
       rerender(<SearchModal {...defaultProps} isOpen={false} />);
       rerender(<SearchModal {...defaultProps} isOpen={true} />);
 
-      const input = screen.getByPlaceholderText('Search resources, entities...');
+      const input = screen.getByPlaceholderText<HTMLInputElement>('Search resources, entities...');
       expect(input).toBeInTheDocument();
       expect(input.value).toBe('');
     });

package/src/components/modals/__tests__/SessionExpiredModal.test.tsx

@@ -7,7 +7,6 @@
  */
 
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {

package/src/components/navigation/NavigationMenu.tsx

@@ -8,7 +8,7 @@ type TranslateFn = (key: string, params?: Record<string, any>) => string;
 
 interface NavigationMenuProps {
   Link: React.ComponentType<LinkComponentProps>;
-  routes: RouteBuilder;
+  routes: Partial<RouteBuilder>;
   t: TranslateFn;
   isAdmin?: boolean;
   isModerator?: boolean;

package/src/components/navigation/__tests__/Footer.a11y.test.tsx

@@ -21,6 +21,10 @@ describe('Footer - Accessibility', () => {
   ));
 
   const mockRoutes = {
+    resourceDetail: vi.fn((id: string) => `/resource/${id}`),
+    userProfile: vi.fn((id: string) => `/user/${id}`),
+    search: vi.fn((query: string) => `/search?q=${query}`),
+    home: vi.fn(() => '/'),
     about: vi.fn(() => '/about'),
     privacy: vi.fn(() => '/privacy'),
     terms: vi.fn(() => '/terms'),

package/src/components/navigation/__tests__/Footer.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Footer } from '../Footer';
@@ -124,7 +123,7 @@ describe('Footer Component', () => {
     });
 
     it('should render Cookie Preferences button when provided', () => {
-      const MockCookiePrefs = ({ isOpen, onClose }: any) => null;
+      const MockCookiePrefs = ({  }: any) => null;
 
       render(
         <Footer
@@ -139,7 +138,7 @@ describe('Footer Component', () => {
     });
 
     it('should open Cookie Preferences modal when button clicked', () => {
-      const MockCookiePrefs = ({ isOpen, onClose }: any) => (
+      const MockCookiePrefs = ({ isOpen }: any) => (
         isOpen ? <div data-testid="cookie-modal">Cookie Preferences</div> : null
       );
 
@@ -161,9 +160,7 @@ describe('Footer Component', () => {
     });
 
     it('should close Cookie Preferences modal when onClose called', () => {
-      let closeHandler: (() => void) | null = null;
       const MockCookiePrefs = ({ isOpen, onClose }: any) => {
-        closeHandler = onClose;
         return isOpen ? (
           <div data-testid="cookie-modal">
             <button onClick={onClose}>Close</button>
@@ -387,7 +384,7 @@ describe('Footer Component', () => {
 
     it('should have proper button elements for interactive features', () => {
       const mockHandler = vi.fn();
-      const MockCookiePrefs = ({ isOpen, onClose }: any) => null;
+      const MockCookiePrefs = ({  }: any) => null;
 
       render(
         <Footer

package/src/components/navigation/__tests__/NavigationMenu.a11y.test.tsx

@@ -56,7 +56,7 @@ describe('NavigationMenu - Accessibility', () => {
           Link={mockLink}
           routes={mockRoutes}
           t={mockTranslate}
-          activePath="/knowledge"
+          currentPath="/knowledge"
         />
       );
 

package/src/components/navigation/__tests__/NavigationMenu.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { NavigationMenu } from '../NavigationMenu';
@@ -287,14 +286,13 @@ describe('NavigationMenu Component', () => {
     });
 
     it('should not show extra divider after admin link', () => {
-      const { container } = render(
-        <NavigationMenu
-          Link={mockLink}
-          routes={mockRoutes}
-          t={mockTranslate}
-          isAdmin={true}
-        />
-      );
+      render(
+<NavigationMenu
+Link={mockLink}
+routes={mockRoutes}
+t={mockTranslate}
+isAdmin={true} />
+);
 
       const adminLink = screen.getByText('Administer').closest('a');
       const nextSibling = adminLink?.nextElementSibling;

package/src/components/navigation/__tests__/ObservableLink.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../test-utils';

package/src/components/navigation/__tests__/SimpleNavigation.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../test-utils';
@@ -143,7 +142,7 @@ describe('SimpleNavigation', () => {
     });
 
     it('closes dropdown on outside click', () => {
-      const dropdownContent = (onClose: () => void) => (
+      const dropdownContent = () => (
         <div data-testid="dropdown-content">Dropdown</div>
       );
 

package/src/components/navigation/__tests__/SortableResourceTab.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../test-utils';

package/src/components/pdf-annotation/PdfAnnotationCanvas.tsx

@@ -2,15 +2,17 @@
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import type { Annotation } from '@semiont/core';
-import { getTargetSelector } from '@semiont/core';
+import {
+  getTargetSelector,
+  createFragmentSelector,
+  parseFragmentSelector,
+  getPageFromFragment,
+} from '@semiont/core';
 import { createHoverHandlers, type SemiontSession } from '@semiont/sdk';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
 import {
   canvasToPdfCoordinates,
   pdfToCanvasCoordinates,
-  createFragmentSelector,
-  parseFragmentSelector,
-  getPageFromFragment,
   type CanvasRectangle
 } from '../../lib/pdf-coordinates';
 import {

package/src/components/pdf-annotation/__tests__/PdfAnnotationCanvas.test.tsx

@@ -11,8 +11,7 @@ import { describe, test, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PdfAnnotationCanvas } from '../PdfAnnotationCanvas';
-import { resourceId } from '@semiont/core';
-import type { components } from '@semiont/core';
+import { resourceId, annotationId } from '@semiont/core';
 
 import type { Annotation } from '@semiont/core';
 
@@ -41,6 +40,7 @@ vi.mock('../../../lib/browser-pdfjs', () => ({
 
 describe('PdfAnnotationCanvas', () => {
   const mockResourceId = resourceId('123');
+  const mockPdfUrl = 'https://example.com/resources/123.pdf';
 
   beforeEach(() => {
     vi.clearAllMocks();
@@ -57,7 +57,7 @@ describe('PdfAnnotationCanvas', () => {
   test('renders loading state initially', () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
     );
@@ -68,7 +68,7 @@ describe('PdfAnnotationCanvas', () => {
   test('renders page navigation controls after loading', async () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
     );
@@ -84,7 +84,7 @@ describe('PdfAnnotationCanvas', () => {
   test('previous button is disabled on first page', async () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
     );
@@ -100,7 +100,7 @@ describe('PdfAnnotationCanvas', () => {
   test('next button is disabled on last page', async () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         drawingMode={null}
       />
     );
@@ -129,7 +129,7 @@ describe('PdfAnnotationCanvas', () => {
       {
         '@context': 'http://www.w3.org/ns/anno.jsonld',
         type: 'Annotation',
-        id: 'ann-1',
+        id: annotationId('ann-1'),
         target: {
           source: mockResourceId,
           selector: {
@@ -145,7 +145,7 @@ describe('PdfAnnotationCanvas', () => {
 
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         existingAnnotations={mockAnnotations}
         drawingMode={null}
       />
@@ -177,21 +177,12 @@ describe('PdfAnnotationCanvas', () => {
     });
   });
 
-  test('emits annotate:requested via eventBus when drawing with sufficient drag', async () => {
-    const mockSubject = { next: vi.fn(), subscribe: vi.fn() };
-    const mockEventBus = {
-      emit: vi.fn(),
-      on: vi.fn(),
-      off: vi.fn(),
-      get: vi.fn().mockReturnValue(mockSubject),
-    };
-
+  test('accepts a drawing gesture without throwing when drawing mode is active', async () => {
     render(
       <PdfAnnotationCanvas
-        resourceUri={mockResourceId}
+        pdfUrl={mockPdfUrl}
         drawingMode="rectangle"
         selectedMotivation="highlighting"
-        eventBus={mockEventBus as any}
       />
     );
 

package/src/components/resource/__tests__/BrowseView.test.tsx

@@ -2,10 +2,10 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { BrowseView } from '../BrowseView';
-import type { components, EventBus } from '@semiont/core';
+import type { EventBus } from '@semiont/core';
 import { createTestSemiontWrapper } from '../../../test-utils';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Mock ResourceAnnotationsContext - keep this simple
 let mockNewAnnotationIds = new Set<string>();
@@ -151,12 +151,12 @@ const renderWithEventTracking = (
 };
 
 // Test data fixtures
-const createMockAnnotation = (motivation: string, id: string): Annotation => ({
+const createMockAnnotation = (motivation: Annotation['motivation'], id: string): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id,
+  id: id as AnnotationId,
   type: 'Annotation',
   motivation,
-  creator: { name: 'user@example.com' },
+  creator: { '@type': 'Person', name: 'user@example.com' },
   created: '2024-01-01T10:00:00Z',
   target: {
     source: 'resource-1',
@@ -197,7 +197,9 @@ describe('BrowseView Component', () => {
     // Mock querySelector and querySelectorAll
     if (typeof document !== 'undefined') {
       document.querySelector = vi.fn();
-      document.querySelectorAll = vi.fn(() => []);
+      // Return a real (empty) NodeList so the mock matches the DOM signature.
+      const emptyNodeList = document.createDocumentFragment().querySelectorAll('*');
+      document.querySelectorAll = vi.fn(() => emptyNodeList);
     }
   });
 

package/src/components/resource/__tests__/HistoryEvent.test.tsx

@@ -1,10 +1,8 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { screen, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { HistoryEvent } from '../HistoryEvent';
 import { renderWithProviders } from '../../../test-utils';
-import type { StoredEvent } from '@semiont/core';
 
 // Mock @semiont/core - must use importOriginal to preserve EventBus etc.
 vi.mock('@semiont/core', async (importOriginal) => {
@@ -37,8 +35,6 @@ vi.mock('../event-formatting', () => ({
 import { getAnnotationUriFromEvent } from '@semiont/core';
 import {
   formatEventType,
-  getEventEmoji,
-  formatRelativeTime,
   getEventDisplayContent,
   getEventEntityTypes,
   getResourceCreationDetails,

package/src/components/resource/__tests__/ResourceViewer.mode-switch.test.tsx

@@ -11,15 +11,13 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { BehaviorSubject } from 'rxjs';
 import { ResourceViewer } from '../ResourceViewer';
 import { createTestSemiontWrapper } from '../../../test-utils';
 import { TranslationProvider } from '../../../contexts/TranslationContext';
 import { ResourceAnnotationsProvider } from '../../../contexts/ResourceAnnotationsContext';
-import type { components } from '@semiont/core';
-
-type SemiontResource = components['schemas']['ResourceDescriptor'];
+import type { ResourceDescriptor as SemiontResource, ResourceId } from '@semiont/core';
 
 // Mock dependencies
 vi.mock('../../../hooks/useObservableBrowse', () => ({
@@ -61,7 +59,7 @@ vi.mock('../../../session/SemiontProvider', async () => {
 
 const mockResource: SemiontResource & { content: string } = {
   '@context': 'https://www.w3.org/ns/activitystreams',
-  '@id': 'test-123',
+  '@id': 'test-123' as ResourceId,
   name: 'Test Document',
   created: '2024-01-01T00:00:00Z',
   entityTypes: [],
@@ -84,7 +82,7 @@ const mockAnnotations = {
 };
 
 const mockTranslationManager = {
-  t: (namespace: string, key: string, params?: Record<string, any>) => {
+  t: (namespace: string, key: string) => {
     return `${namespace}.${key}`;
   },
 };

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

@@ -236,7 +236,7 @@ export function ReferencesPanel({
     }
 
     // When annotation is complete and we haven't saved yet, save the log
-    if (!isAssisting && !hasSavedLogRef.current && progress?.completedEntityTypes) {
+    if (!hasSavedLogRef.current && progress?.completedEntityTypes) {
       hasSavedLogRef.current = true;
       setLastDetectionLog(progress.completedEntityTypes);
       setSelectedEntityTypes([]);

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

@@ -1,12 +1,10 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
 import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
-import type { components } from '@semiont/core';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Mock @semiont/api-client
 vi.mock('@semiont/core', async () => {
@@ -25,10 +23,11 @@ const mockGetAnnotationExactText = getAnnotationExactText as MockedFunction<type
 
 const createMockAssessment = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'assessment-1',
+  id: 'assessment-1' as AnnotationId,
   type: 'Annotation',
   motivation: 'assessing',
   creator: {
+    '@type': 'Person',
     name: 'reviewer@example.com',
   },
   created: '2024-06-15T12:00:00Z',

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

@@ -1,14 +1,14 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import type { MockedFunction } from 'vitest';
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { AssessmentPanel } from '../AssessmentPanel';
-import type { components, EventBus } from '@semiont/core';
+import type { EventBus } from '@semiont/core';
 import { createTestSemiontWrapper } from '../../../../test-utils';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Composition-based event tracker
 interface TrackedEvent {
@@ -69,7 +69,7 @@ vi.mock('@semiont/core', async () => {
 
 // Mock AssessmentEntry component to simplify testing
 vi.mock('../AssessmentEntry', () => ({
-  AssessmentEntry: ({ assessment, onAssessmentRef }: any) => (
+  AssessmentEntry: ({ assessment }: any) => (
     <div data-testid={`assessment-${assessment.id}`}>
       <div>{assessment.id}</div>
     </div>
@@ -78,7 +78,7 @@ vi.mock('../AssessmentEntry', () => ({
 
 // Mock AssistSection component — just render a simplified version.
 vi.mock('../AssistSection', () => ({
-  AssistSection: ({ annotationType, isAssisting }: any) => (
+  AssistSection: ({ isAssisting }: any) => (
     <div data-testid="detect-section">
       <button>Start Detection</button>
       {isAssisting && <div>Detecting...</div>}
@@ -93,10 +93,11 @@ const mockGetTargetSelector = getTargetSelector as MockedFunction<typeof getTarg
 // Test data fixtures
 const createMockAssessment = (id: string, start: number, end: number): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id,
+  id: id as AnnotationId,
   type: 'Annotation',
   motivation: 'assessing',
   creator: {
+    '@type': 'Person',
     name: `user${id}@example.com`,
   },
   created: `2024-01-0${id.slice(-1)}T10:00:00Z`,

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

@@ -17,7 +17,6 @@ import { screen } from '@testing-library/react';
 import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 import { AssistSection } from '../AssistSection';
-import type { EventBus } from "@semiont/core"
 
 // Mock translations
 const mockT = vi.fn((key: string) => {
@@ -68,7 +67,7 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
             percentage: 30,
             message: 'Analyzing text for highlights...',
           }}
@@ -84,7 +83,8 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Processing...',
           }}
         />
@@ -102,7 +102,8 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Analyzing...',
             requestParams: [
               { label: 'Instructions', value: 'Find important points' },
@@ -125,7 +126,8 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Analyzing...',
           }}
         />
@@ -170,7 +172,7 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={false}
           progress={{
-            status: 'complete',
+            stage: 'complete',
             percentage: 100,
             message: 'Complete! Created 14 highlights',
           }}
@@ -433,7 +435,8 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: '',
           }}
         />
@@ -450,9 +453,9 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Processing...',
-            // no percentage
           }}
         />
       );
@@ -466,7 +469,8 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            status: 'analyzing',
+            stage: 'analyzing',
+            percentage: 0,
             message: 'Processing...',
             requestParams: [],
           }}

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

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { CollaborationPanel } from '../CollaborationPanel';

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

@@ -5,10 +5,8 @@ import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { CommentEntry } from '../CommentEntry';
-import type { components } from '@semiont/core';
-import type { EventBus } from "@semiont/core"
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Mock TranslationContext
 vi.mock('../../../../contexts/TranslationContext', () => ({
@@ -42,10 +40,11 @@ const mockGetAnnotationExactText = getAnnotationExactText as MockedFunction<type
 // Test data fixtures
 const createMockComment = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'comment-1',
+  id: 'comment-1' as AnnotationId,
   type: 'Annotation',
   motivation: 'commenting',
   creator: {
+    '@type': 'Person',
     name: 'user@example.com',
   },
   created: '2024-01-01T10:00:00Z',
@@ -98,9 +97,6 @@ describe('CommentEntry Component', () => {
   const defaultProps = {
     comment: mockCommentStates.standard,
     isFocused: false,
-    onClick: vi.fn(),
-    onCommentRef: vi.fn(),
-    onCommentHover: vi.fn(),
   };
 
   beforeEach(() => {
@@ -396,19 +392,26 @@ describe('CommentEntry Component', () => {
     });
 
     it('should stop event propagation when clicking textarea in edit mode', async () => {
-      const onClick = vi.fn();
-      renderWithProviders(<CommentEntry {...defaultProps} onClick={onClick} />);
+      const clickHandler = vi.fn();
+      const { eventBus } = renderWithProviders(
+        <CommentEntry {...defaultProps} />,
+        { returnEventBus: true }
+      );
+
+      const subscription = eventBus!.get('browse:click').subscribe(clickHandler);
 
       await userEvent.click(screen.getByText('Edit'));
 
-      // Clear the onClick calls that happened during entering edit mode
-      onClick.mockClear();
+      // Clear any browse:click emissions that happened during entering edit mode
+      clickHandler.mockClear();
 
       const textarea = screen.getByRole('textbox');
       await userEvent.click(textarea);
 
-      // onClick should not be called for textarea click due to stopPropagation
-      expect(onClick).not.toHaveBeenCalled();
+      // browse:click should not be emitted for textarea click due to stopPropagation
+      expect(clickHandler).not.toHaveBeenCalled();
+
+      subscription.unsubscribe();
     });
 
     it('should update text in textarea', async () => {
@@ -484,14 +487,24 @@ describe('CommentEntry Component', () => {
       expect(screen.getByText('This is a test comment')).toBeInTheDocument();
     });
 
-    it('should not call onUpdate when cancel is clicked', async () => {
-      const onUpdate = vi.fn();
-      renderWithProviders(<CommentEntry {...defaultProps} onUpdate={onUpdate} />);
+    it('should not emit any update when cancel is clicked', async () => {
+      const clickHandler = vi.fn();
+      const { eventBus } = renderWithProviders(
+        <CommentEntry {...defaultProps} />,
+        { returnEventBus: true }
+      );
+
+      const subscription = eventBus!.get('browse:click').subscribe(clickHandler);
 
       await userEvent.click(screen.getByText('Edit'));
+      clickHandler.mockClear();
+
       await userEvent.click(screen.getByText('Cancel'));
 
-      expect(onUpdate).not.toHaveBeenCalled();
+      // Cancel discards the edit without emitting any event
+      expect(clickHandler).not.toHaveBeenCalled();
+
+      subscription.unsubscribe();
     });
   });